Nanobot: Polygonal Mascot

    rc-form-dynamic

    0.1.2 • Public • Published

    rc-form-dynamic render form dynamic using form configurations, based on rc-form and antd.

    npm install --save rc-form-dynamic
    

    Demo: https://derek-hu.github.io/rc-form-dynamic/

    Form Configuration Example:

    import DynamicForm from 'rc-form-dynamic';
    import { Input, Form, Select, Button, Checkbox } from 'antd';
     
    const { Option } = Select;
     
    const settings = {
        props: {
            labelCol: { span: 5 },
            wrapperCol: { span: 12 }
        },
        fields: [{
            props: {
                label: 'Gender',
            },
            key: 'gender',
            decorator: {
                rules: [{ required: true, message: 'Please select your gender!' }],
            },
            component: [Select, {
                placeholder: "Select a option and change input text above",
                onChange: this.handleSelectChange,
                children: [
                    <Option value="male" key="male">male</Option>,
                    <Option value="female" key="female">female</Option>
                ]
            }],
        }, {
            key: 'remember',
            component: [Checkbox, {
                children: 'Remember me'
            }],
            decorator: {
                valuePropName: 'checked',
                initialValue: true,
            },
        }]
    };
     
    <DynamicForm 
        settings={settings} 
        onSubmit={this.handleSubmit} 
        render={[({ remember }, fields) => <Form.Item>
            {fields[remember]}
            <a className="login-form-forgot" href="">Forgot password</a>
        </Form.Item>]}>
        <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
            <Button type="primary" htmlType="submit">Log in</Button>
        </Form.Item>
    </DynamicForm>
     
     

    After Render:

    import React from 'react';
    import { Form, Select, Button } from 'antd';
     
    <Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
        <Form.Item label='Gender'>{
            getFieldDecorator('gender', {
                rules: [{ required: true, message: 'Please select your gender!' }],
            })(<Select
                placeholder="Select a option and change input text above"
                onChange={this.handleSelectChange}>
                <Option value="male" key="male">male</Option>
                <Option value="female" key="female">female</Option>
            </Select>)
        }</Form.Item>
        <Form.Item>
            {
                getFieldDecorator('remember', {
                    valuePropName: 'checked',
                    initialValue: true,
                })(<Checkbox>Remember me</Checkbox>)
            }
            <a className="login-form-forgot" href="">Forgot password</a>
        </Form.Item>
        <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
            <Button type="primary" htmlType="submit">Log in</Button>
        </Form.Item>
    </Form>

    Form Configuration

    {
        // props for <Form> Component: <Form ...{props}></Form>
        // e.g. https://ant.design/components/form/#Form
        props: {
            labelCol: { span: 5 },
            wrapperCol: { span: 12 },
            ...
        },
        // dynamic <Form.Item>
        fields: [{
            // props for <Form.Item> Component: <Form.Item ...{props}></Form.Item>
            // e.g. https://ant.design/components/form/#Form.Item
            props: {
                label: 'Gender',
                ...
            },
            // render form item using 'getFieldDecorator' from 'rc-form' component
            // e.g.
            // getFieldDecorator(key, decorator)(<Select {...props}>{children}</Checkbox>)
            key: 'gender',
            decorator: {
                rules: [{ required: true, message: 'Please select your gender!' }],
            },
            // component: Select,
            // component with props: [Select, props]
            component: [Select, {
                placeholder: "Select a option and change input text above",
                onChange: this.handleSelectChange,
                children: [
                    <Option value="male" key="male">male</Option>,
                    <Option value="female" key="female">female</Option>
                ]
            }],
        }]
    }

    API

    Property Description Type
    settings Form configuration object
    onSubmit Alias for props in <Form onSubmit> Function(e:Event)
    render Custom render <Form.Item> method Function(keys: Object, defaultRenderFormItems: Object, props: Object, configurations: Object) => Component | Array<Function(keys: Object, defaultRenderFormItems: Object, props: Object, configurations: Object) => Component>
    onValuesChange Trigger when value updated Function(changedFields, allFields, formInstance)
    onFieldsChange Trigger when field updated Function(changedValues, allValues, formInstance)
    fields Control of form fields through state management { [name: string]: FieldData }

    FieldData: https://ant.design/components/form/#FieldData

    If you want to get ref after Form.create, you can use wrappedComponentRef provided by rc-form, details can be viewed here.

    Install

    npm i rc-form-dynamic

    DownloadsWeekly Downloads

    3

    Version

    0.1.2

    License

    none

    Unpacked Size

    587 kB

    Total Files

    59

    Last publish

    Collaborators

    • hubenlv