dq-form

dq-form is a flexible form library. it's can drag exist plugins to generate form~

depend on react, ant-design

Install

npm install dq-form
// OR
yarn add dq-form

Other Externals Library

npm install antd react react-dom
// or
yarn add antd react react-dom

UseAge

import Editor, {
    Text,
    Amount,
    Number,
    Mail,
    MultipleChoice,
    SingleChoice,
    Area,
    Autograph,
    Certificates,
    DateTime,
    DateTimeRange,
    File,
    Level,
    Phone,
    Remark,
    Preview,
    PreviewForm
} from 'dq-form'
import 'dq-form/dist/index.css'

export default class Demo extends React.Component {
    // ....
    render() {
        return (
        <div className={'demoEditor'}>
            <Editor plugins={plugins}/>
        </div>
        )
    }
}

ReactDOM.render(
    <React.StrictMode>
        <Demo />
    </React.StrictMode>,
    document.getElementById('root')
);

Init Form Data

<Editor plugins={plugins} data={data}/>

Operation

this.editor = React.createRef()
// getData
this.editor.current.getEditorJSON(true: (bool, is need verify),(obj) => {
     console.log(obj)
})

<Editor plugins={plugins} ref={this.editor} data={data}/>

Preview Form

this.formRef = React.createRef()

this.formRef.current.validateFields()
	.then(res => console.log('formData', res))

// this component only contain form
<PreviewForm data={this.state.data} ref={this.formRef} plugins={plugins} width={600}/>
//OR
// this component will show original Form
<Preview data={this.state.data} renderHeader={customHeader} defaultHeader={defaultHeaderIsNeedShow} ref={this.formRef} plugins={plugins} width={600}/>

Api

| parameter | description | type | | --------- | --------------------------- | ------------- | | plugins | Form plugins, can operation | PluginsData[] | | data | Init from data | FormData |

FormData

| key | description | type | | ----------- | ---------------- | ------------------ | | name | Form name | string | | description | form description | string | | plugins | pluginConfigData | pluginConfigData[] |

pluginConfigData

| key | description | type | | ----------- | ------------------ | ------------------ | | id | id | number | | layers | Layers | LayersData[] |

LayersData

| key | description | type | | ----------- | ------------------ | ------------------ | | id | id | number | | type | type | string | | typeName | typeName | string | | name | form Item name eg: {'name': 123} | string | | description | description | string | | require | isrequire | boolean | | repeat | isrepeat | boolean | | colspan | width | number | | explain | explain | String | | more...|||

PluginsData

| key | description | type | | ------ | ---------------- | ---------- | | type | Form name | string | | info | form description | Object | | config | pluginConfigData | LayersData | | layer | React Component | | | editor | React Component | |

If Exist Plugin Can't Accord With Requirement, We can Import Custom Plugin。。。