@holiday_peng/configurable-antd-form-items

Configurable Antd Form Items

Configurable Antd Form Items is an easier configurable antd form items includes Input, InputNumber, TextArea, Select, Radio, Checkbox, Upload, etc..

How to Use

1. npm install @holiday_peng/configurable-antd-form-items

2. because the editor was built based on react and antd, it has to be used in a react project like this:

import React from 'react';
import FormItems from '@holiday_peng/configurable-antd-form-items';

class Example extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      imageUpdated: false
    }
  }
  onBlur = () => {}
  onClick = () => {}
  render() {
    const formItems = [
      {
        label: 'Topic', // the default type is Input, so you don't need to add it again.
        key: 'name',
        onBlur: this.onBlur,
        required: true,
      },
      {
        type: 'select',
        label: 'Type',
        key: 'type',
        required: true,
        initialValue: 'Tag',
        options: [{ value: 'Tag', value: 'Topic }], // if the value and text are the same, you don't need to add it again.
      },
      {
        type: 'select',
        label: 'Category',
        key: 'category',
        options: category,
        showSearch: true,
        optionFilterProp: 'children',
        filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) === 0,
        allowClear: true,
      },
      {
        type: 'number', // 'number' means InputNumber
        label: 'Biz Type',
        key: 'biz_type',
        initialValue: 1,
      },
      {
        type: 'uploadImg',
        key: 'logo',
        label: 'Logo Upload',
        actionPath: '/upload/image',
        required: true,
        onChange: () => this.setState({ imageUpdated: true }),
        onRemove: () => form.resetFields('logo'),
        isShowSlot: !imageUpdated, // you can add a slot to show the default image or something else when necessary.
        slot: <img className='preview-img' src={form.getFieldValue('logo')} />,
      },
      {
        type: 'component',
        label: 'Keywords',
        key: 'keyword',
        component: <Tags isNew={isNew} />, // you can also add customised component in it.
      },
      {
        type: 'btn',
        btnType: 'danger',
        text: 'Query Example Articles',
        onClick: this.onClick,
        loading: isLoading,
        disabled: !keyword.length,
      },
    ];

    return (
      <Form>
        <FormItems formItems={formItems} form={form} needInit={true} data={data} /> // if you need to fill the form with ajax data, don't forget to add 'needInit' and 'data' in the props.
      </Form>
    );
  }
}
const WrappedExample = Form.create({ name: 'Example' })(Example);
export default WrappedExample;