@dq-antd/dq-form v1.0.0

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

FormData

pluginConfigData

LayersData

PluginsData

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