@jswork/react-ant-abstract-form NPM

react-ant-abstract-form

For curd form based on react.

installation

npm install -S @jswork/react-ant-abstract-form

usage

import css

@import "~@jswork/react-ant-abstract-form/dist/style.css";

// or use sass
@import "~@jswork/react-ant-abstract-form/dist/style.scss";

// customize your styles:
$react-ant-abstract-form-options: ()

import js

import React from 'react';
import ReactAntAbstractForm from '@jswork/react-ant-abstract-form';
import styled from 'styled-components';
import nx from '@jswork/next';

const Container = styled.div`
  width: 80%;
  margin: 30px auto 0;
  .is-body {
    padding: 20px;
    background: #fff;
    width: 50%;
    min-width: 320px;
    margin: 0 auto;
  }

  .mr-5_ {
    > * {
      margin-right: 5px;
    }
  }

  .mr-10_ {
    > * {
      margin-right: 10px;
    }
  }
`;

// Mock api
nx.$api = {
  curds_index: function () {
    return Promise.resolve('index');
  },
  curds_show: function () {
    return Promise.resolve('show');
  },
  curds_update: function () {
    return Promise.resolve('update');
  }
};

nx.$route = {
  back: function () {
    console.log('back');
  }
};

class App extends ReactAntAbstractForm {
  apiService = nx.$api;
  routeService = nx.$route;

  constructor(props) {
    super(props);
    this.state = {
      meta: {
        formItemLayout: [6, 18],
        initialValues: {},
        fields: [
          {
            key: 'username',
            label: 'User Name',
            tooltip: '用户名',
            rules: [{ max: 10, min: 5 }]
          },
          { key: 'password', label: 'Password', widget: 'password' }
        ]
      }
    };
  }

  componentDidMount() {
    const { meta } = this.state;
    meta.initialValues = {
      username: 'afeiship'
    };
    this.setState({ meta });
  }

  render() {
    return this.view();
  }
}

export default () => {
  return (
    <Container>
      <App />
    </Container>
  );
};