react-form-design

react-form-design可通过拖拽生成自定义表单，需搭配ant design组件库使用。

Index

• Install
• Usage
• API
• Compatibility
• License

Install

yarn add react-form-design 

Usage

.form-display .ant-col-8,
.form-display .ant-col-10 {
  padding-left: 16px;
}
.form-display .ant-form-item {
  display: flex;
  margin-bottom: 16px;
}
.form-display .ant-form-item-label {
  text-overflow: ellipsis;
}
.form-display .ant-form-item-control-wrapper {
  flex: 1 1 auto;
}

import { Button, Form, Tabs } from "antd";
import { FormDesign } from 'antd';

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { FormDisplay } = FormDesign;

class FormShow extends PureComponent {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };
  render() {
    const { fieldsData, form } = this.props;
    return (
      <Form
        className="form-display"
        layout="inline"
        onSubmit={this.handleSubmit}
      >
        <FormDisplay
          fieldsData={fieldsData}
          form={form}
          formItemLayout={{
            labelCol: {
              span: 8
            },
            wrapperCol: {
              span: 10
            }
          }}
        />
        <FormItem wrapperCol={{ span: 10, offset: 12 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedFormShow = Form.create({
  mapPropsToFields(props) {
    let obj = {};
    let { initValues } = props;
    if (initValues) {
      Object.keys(initValues).forEach(key => {
        obj[key] = Form.createFormField({
          value: initValues[key]
        });
      });
    }
    return obj;
  }
})(FormShow);
class App extends PureComponent {
  state = { fieldsData: [] };
  save = data => {
    this.setState({ fieldsData: data });
  };
  onSubmit = values => {
    console.log(values);
  };
  submit = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const onSubmit = this.props;
        if (onSubmit) {
          onSubmit(values);
        }
      }
    });
  };
  render() {
    return (
      <Tabs type="card">
        <TabPane tab="form表单设计" key="1">
          <FormDesign onSave={this.save} height="500px" />
        </TabPane>
        <TabPane tab="form表单展示" key="2">
          <div style={{ backgroundColor: "#fff", padding: "15px 0" }}>
            <WrappedFormShow fieldsData={this.state.fieldsData} />
          </div>
        </TabPane>
        <TabPane tab="form表单还原" key="3">
          <FormDesign
            onSave={this.save}
            height="500px"
            fieldsData={this.state.fieldsData}
          />
        </TabPane>
      </Tabs>
    );
  }
}
ReactDOM.render(<App />, mountNode);

API

FormDesign

自定义表单展示，可拖拽生成所需表单。

| 参数 | 说明 | 类型 | 默认值 | |----------|-------------|-------------|-------| | className | 设置表单class | string | - | | height | 设置表单高度 | string | - | | onSave | 用于保存表单数据 | (fieldsData)=>void | - |

FormDisplay

展示之前定义的自定义表单。

| 参数 | 说明 | 类型 | 默认值 | |----------|-------------|-------------|-------| | form | ant design 中经 Form.create() 包装过的组件自带的this.props.form 属性，该属性必传 | object | - | | fieldsData | 自定义表单的数据，必须传，用于展示表单 | array | [] | | formItemLayout | 用于设置label标签布局和输入控件布局样式 | object |{labelCol: {span: 7},wrapperCol: {span: 17}} |

Compatibility

该插件支持chrome，firefox最新两个版本。

License

Licensed under the MIT License