feat: add vc-form demo

Author: tangjinzhou

components/vc-form/demo/parallel-form.js

@@ -0,0 +1,85 @@
+/* eslint react/no-multi-comp:0, no-console:0 */
+
+import { createForm } from '../index'
+import { regionStyle } from './styles'
+import { Switch } from 'antd'
+
+const TopForm = {
+  props: {
+    form: Object,
+  },
+  render () {
+    const { getFieldProps } = this.form
+    return (<div style={ regionStyle }>
+      <div>has email? </div>
+      <div>
+        <Switch {...getFieldProps('on', {
+          initialValue: true,
+          valuePropName: 'checked',
+        })}
+        />
+      </div>
+    </div>)
+  },
+}
+
+const BottomForm = {
+  props: {
+    form: Object,
+    on: Boolean,
+  },
+  render () {
+    const { form } = this
+    const on = form.getFieldValue('on')
+    const style = {
+      ...regionStyle,
+      display: on ? 'block' : 'none',
+    }
+    return (<div style={ style }>
+      <div>email: </div>
+      <div>
+        <input {...form.getFieldProps('email', {
+          rules: [{
+            type: 'email',
+          }],
+          hidden: !on,
+        })}
+        />
+      </div>
+    </div>)
+  },
+}
+
+const Form = {
+  props: {
+    form: Object,
+  },
+  methods: {
+    onSubmit (e) {
+      e.preventDefault()
+      console.log(this.form.getFieldsValue())
+    },
+  },
+
+  render () {
+    const { form } = this
+    return (<div>
+      <TopForm form={ form }/>
+      <BottomForm form={ form }/>
+      <div style={ regionStyle }>
+        <button onClick={this.onSubmit}>submit</button>
+      </div>
+    </div>)
+  },
+}
+
+const NewForm = createForm()(Form)
+
+export default {
+  render () {
+    return (<div>
+      <h2>parallel form</h2>
+      <NewForm />
+    </div>)
+  },
+}

components/vc-form/demo/start-end-date.js

@@ -0,0 +1,91 @@
+/* eslint no-console:0 */
+
+import { DatePicker } from 'antd'
+import createDOMForm from '../src/createDOMForm'
+import { regionStyle, errorStyle } from './styles'
+
+const Form = {
+  props: {
+    form: Object,
+  },
+  methods: {
+    onSubmit  (e) {
+      console.log('submit')
+      e.preventDefault()
+      this.form.validateFieldsAndScroll((error, values) => {
+        if (!error) {
+          console.log('ok', values)
+        } else {
+          console.log('error', error, values)
+        }
+      })
+    },
+
+    reset (e) {
+      e.preventDefault()
+      this.form.resetFields()
+    },
+
+    checkStart (rule, value, callback) {
+      const { validateFields } = this.form
+      validateFields(['end'], {
+        force: true,
+      })
+      callback()
+    },
+
+    checkEnd (rule, value, callback) {
+      const end = value
+      const { getFieldValue } = this.form
+      const start = getFieldValue('start')
+      if (!end || !start) {
+        callback('please select both start and end time')
+      } else if (end.valueOf() < start.valueOf()) {
+        callback('start time should be less than end time')
+      } else {
+        callback()
+      }
+    },
+  },
+
+  render () {
+    const { form } = this
+    const { getFieldProps, getFieldError } = form
+    return (<div style={{ margin: 20 }}>
+      <h2>startTime and endTime validation</h2>
+      <form onSubmit={this.onSubmit}>
+        <div style={ regionStyle }>
+          <div>start: </div>
+          <div>
+            <DatePicker {...getFieldProps('start', {
+              rules: [this.checkStart],
+            })}
+            />
+          </div>
+        </div>
+
+        <div style={ regionStyle }>
+          <div>end: </div>
+          <div>
+            <DatePicker {...getFieldProps('end', {
+              rules: [this.checkEnd],
+            })}
+            />
+          </div>
+        </div>
+
+        <div style={errorStyle}>
+          {getFieldError('end') ? getFieldError('end').join(',') : ''}
+        </div>
+
+        <div style={ regionStyle }>
+          <button onClick={this.reset}>reset</button>
+          &nbsp;
+          <input type='submit' value='submit'/>
+        </div>
+      </form>
+    </div>)
+  },
+}
+
+export default createDOMForm()(Form)

components/vc-form/demo/suggest.js

@@ -0,0 +1,120 @@
+/* eslint react/no-multi-comp:0, no-console:0 */
+
+import { createForm } from '../index'
+import { Select } from 'antd'
+import { regionStyle, errorStyle } from './styles'
+import { mergeProps } from '../../_util/props-util'
+const emailTpl = ['@gmail.com', '@outlook.com', '@qq.com']
+const { Option } = Select
+const CustomInput = {
+  props: {
+    form: Object,
+  },
+  data () {
+    return {
+      data: [],
+    }
+  },
+  methods: {
+    onChange (v) {
+      if (v.indexOf('@') === -1) {
+        this.data = emailTpl.map(m => v + m)
+      } else if (this.data.length) {
+        this.data = []
+      }
+    },
+  },
+
+  render () {
+    const { getFieldProps, getFieldError, isFieldValidating } = this.form
+    const errors = getFieldError('select')
+    return (<div style={ regionStyle }>
+      <div>custom select sync validate</div>
+      <div>
+        <Select
+          {
+          ...mergeProps(
+            {
+              props: {
+                placeholder: 'please select',
+                mode: 'combobox',
+                filterOption: false,
+              },
+              style: {
+                width: '200px',
+              },
+            }, getFieldProps('select', {
+              change: this.onChange,
+              rules: [
+                {
+                  type: 'email',
+                },
+                {
+                  required: true,
+                },
+              ],
+            }))
+          }
+        >
+          {this.data.map((d) => {
+            return <Option key={d} value={d}>{d}</Option>
+          })}
+        </Select>
+      </div>
+      <div style={errorStyle}>
+        {(errors) ? errors.join(',')
+          : <b
+            style={{
+              visibility: 'hidden',
+            }}
+          >
+            1
+          </b>}
+      </div>
+      <div style={errorStyle}>
+        {isFieldValidating('select') ? 'validating' : <b
+          style={{
+            visibility: 'hidden',
+          }}
+        >
+          1
+        </b>}
+      </div>
+    </div>)
+  },
+}
+
+const Form = {
+  props: {
+    form: Object,
+  },
+  methods: {
+    onSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((error, values) => {
+        if (!error) {
+          console.log('ok', values)
+        } else {
+          console.log('error', error, values)
+        }
+      })
+    },
+  },
+
+  render () {
+    const { form } = this
+    return (<div style={{ margin: '20px' }}>
+      <h2>suggest</h2>
+      <form onSubmit={this.onSubmit}>
+        <CustomInput form={ form }/>
+
+        <div style={ regionStyle }>
+          <button>submit</button>
+        </div>
+      </form>
+    </div>)
+  },
+}
+
+export default createForm()(Form)
+