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

Property	Description	Type	Default
config	The config of the FormRender, see more about in FormRender.Config	Object	-
data	Values of the fields	Object	null
onChange	Called when all fields value change	(field, ..arg) => void	null
children	Child element	any	-
className	ClassName of FormRender	string	-
style	Style of FormRender	object	-
needWrapFormRenderCore	Set if need div wrap for FormRenderCore	boolean	true

How to use:

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

FormRender.Config

Property	Description	Type	Default
status	The status of all fields, can be covered by field config	'preview' 'disabled' 'readonly' 'none'	'edit'
fields	Define form fields, it is a field array. Field detail config you can see in FormRender.Config.Field	Array	-
layout	Define form layout	'horizontal' 'vertical' 'inline' 'multi-column'	'horizontal'
column	Columns of multi-clomun layout	number	1
gutter	Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}	Number Object Array	0
emptyContent	Set the content when field value is null or undefined, only available when then status is preview, can be covered by field config	-
....	Extend all props of Ant Design Form, such as layout, labelCol, wrapperCol and so on	-	-

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

Property	Description	Type	Default
field	Define field type, such as input, select or custom field	string	-
id	The unique identifier of form field	string	-
type	The extend type of the component field	string	-
value	The field content value	any	-
defaultValue	The initial field content value	any	-
status	The status of the field	'preview' 'disabled' 'readonly' 'none'	'edit'
formItem	Extend Ant Design Form.Item config	FormItemProps	-
decorator	Extend Ant Design getFieldDecorator config	GetFieldDecoratorOptions	-
config	Component config of the field, extend Ant Design components config	Object	-
colSpan	How many columns the field should take up	Number	1
emptyContent	Set the content when field value is null or undefined, only available when then status is preview	any	-
previewRender	Define the content when the field status is preview	(field: FieldProps) => React.ReactNode	-
disabledRender	Define the content when the field status is disabled	(field: FieldProps) => React.ReactNode	-
readonlyRender	Define the content when the field status is readonly	(field: FieldProps) => React.ReactNode	null

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()} />

Method	Description	Type	Version
getConfig	Get form render config	Function()
getFieldById	Get field by id	Function(id: string)
setFieldById	Set field by id	Function(id: string, callback: (field: FieldProps) => FieldProps)
insertField	Insert field in target index, default in the last	Function(field: FieldProps, targetIndex: number)
setFieldOrder	Adjust the field position	Function(currentIndex: number, targetIndex: number)
deleteFieldById	Delete field by id	Function(id: string)

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