dq-form

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。。。