afms v1.0.2

Afms

Ant Design form render solution.

It helps you render a form easily through configuration data instead of using the original antd form api.

Features

• ✔︎ Out of the box, base on the most popular react ui library Ant Design, easy to get started.
• ✔︎ Data driven, any action on the form can be done by manipulating the configuration data.
• ✔︎ High maintainability, maintaining the form requires only maintaining the configuration data.
• ✔︎ High scalability, can highly customize your form field and assemble the field to meeting individual requirements.
• ✔︎ Status Switching, has multiple status(such as preview, edit, disabled), which can be switched quickly.
• ✔︎ Complex layout, flexible layout, no longer afraid of complex forms.

Install

npm install afms --save

Getting Started

import React from 'react';
import { Form, Button } from 'antd';
import { FormRender } from 'afms';
import 'afms/dist/afms.css';

const FormItem = Form.Item;

const formConfig = {
  fields: [
    { field: 'input', id: 'name', config: { placeholder: 'UserName' }, },
    { field: 'input', id: 'password', type: 'password',config: { placeholder: 'Password' }, },
  ],
};

class App extends React.Component {
  handleSubmit = () => {
    const { form } = this.formRef.props;
    console.log(form.getFieldsValue());
  }
  render() {
    return (
      <div>
        <FormRender
          config={formConfig}
          wrappedComponentRef={(ref) => {
            this.formRef = ref;
          }}
        />
        <FormItem>
          <Button type="primary" onClick={this.handleSubmit}>
            Login
          </Button>
        </FormItem>
      </div>
    );
  }
};

ReactDOM.render(<App />, document.getElementById('root'));

Then you can get a form like this:

You can see more examples in this.

API Reference

FormRender

How to use:

const formConfig = {...};
<FormRender
  className="form-render"
  config={formConfig}
  data={{ name: 'beyondxgb' }}
  onChange={(field, event) => {}}
/>

FormRender.Config

How to use:

const formConfig = {
  status: 'edit',
  layout: 'horizontal',
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 10,
  },
  fields: [{ field: 'input', id: 'name' }],
  emptyContent: '-',
};
<FormRender
  config={formConfig}
/>

FormRender.Config.Field

How to use:

const formConfig = {
  fields: [{
    field: 'input',
    id: 'password',
    type: 'password',
    value: '5201314',
    status: 'edit',
    formItem: {
      label: 'Password',
    },
    decorator: {
      rules: [{
        required: true,
        message: 'Please input your password',
      }],
    },
    config: {
      placeholder: 'password',
    },
    previewRender: field => field.value,
    emptyContent: '-',
  }],
};
<FormRender
  config={formConfig}
/>

FormRenderCore

The props of FormRenderCore is the same as FormRender.

It can use in the scene that there are many form modules:

<FormRender>
  <h3>BaseInfo</h3>
  <FormRenderCore
    config={form1Config}
  />
  <h3>MoreInfo</h3>
  <FormRenderCore
    className="form-panel"
    config={form2Config}
  />
</FormRender>

registerFormField

import { FormRenderCore } from 'afms';

FormRenderCore.registerFormField('price-input', PriceInputField);

registerFormFields

import { FormRenderCore } from 'afms';

FormRenderCore.registerFormFields({
  'price-input': PriceInputField,
  ...
});

FormRender.FormConfig

It helps you manipulate configuration data easily.

How to use:

const formConfig = {...}
const formConfigHelper = new FormRender.FormConfig(formConfig);

<FormRender config={formConfigHelper.getConfig()} />

Using in TypeScript

import React from 'react';
import { Form, Button } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import { FormRender } from 'afms';
import { FormConfigProps } from 'afms/lib/types';
import 'afms/dist/afms.css';

const FormItem = Form.Item;

const formConfig: FormConfigProps = {
  fields: [
    { field: 'input', id: 'name', config: { placeholder: 'UserName' }, },
    { field: 'input', id: 'password', type: 'password',config: { placeholder: 'Password' }, },
  ],
};

class App extends React.Component {
  private formRef: React.Component<FormComponentProps>
  handleSubmit = () => {
    const { form } = this.formRef.props;
    console.log(form.getFieldsValue());
  }
  render() {
    return (
      <div>
        <FormRender
          config={formConfig}
          wrappedComponentRef={(c: React.Component<FormComponentProps>) => {
            this.formRef = c;
          }}
        />
        <FormItem>
          <Button type="primary" onClick={this.handleSubmit}>
            Login
          </Button>
        </FormItem>
      </div>
    );
  }
};

ReactDOM.render(<App />, document.getElementById('root'));

Import on Demand

There is a small problem that if you use configuration data to render a form, all form fields is imported. Because We don't know which form field will be used.

If your application pursues high performance, you can use the method of assembling form fields, like this example.

We strongly recommend using babel-plugin-import, which can convert the following code to the 'afms/es/xxx' way:

import { InputField } from 'afms';

And this plugin can load styles too. Read usage for more details.

Contribute

LICENSE

MIT