feat: add vc-form demo

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)
+

components/vc-form/demo/validateFirst.js

@@ -0,0 +1,132 @@
+/* eslint react/no-multi-comp:0, no-console:0 */
+
+import { createForm } from '../index'
+import { regionStyle, errorStyle } from './styles'
+
+const Email = {
+  props: {
+    form: Object,
+  },
+  render () {
+    const { getFieldProps, getFieldError, isFieldValidating } = this.form
+    const errors = getFieldError('email')
+    return (<div style={ regionStyle }>
+      <div>email sync validate</div>
+      <div>
+        <input {...getFieldProps('email', {
+          initialValue: '',
+          validateFirst: true,
+          rules: [
+            {
+              required: true,
+            },
+            {
+              type: 'email',
+              message: '错误的 email 格式',
+            },
+          ],
+        })}
+        />
+      </div>
+      <div style={errorStyle}>
+        {errors ? errors.join(',') : null}
+      </div>
+      <div style={errorStyle}>
+        {isFieldValidating('email') ? 'validating' : null}
+      </div>
+    </div>)
+  },
+
+}
+
+const User = {
+  props: {
+    form: Object,
+  },
+  methods: {
+    userExists (rule, value, callback) {
+      setTimeout(() => {
+        if (value === '1') {
+          callback([new Error('are you kidding?')])
+        } else if (value === 'yiminghe') {
+          callback([new Error('forbid yiminghe')])
+        } else {
+          callback()
+        }
+      }, 300)
+    },
+  },
+
+  render () {
+    const { getFieldProps, getFieldError, isFieldValidating } = this.form
+    const errors = getFieldError('user')
+    return (<div style={ regionStyle }>
+      <div>user async validate</div>
+      <div>
+        <input {...getFieldProps('user', {
+          initialValue: '',
+          rules: [
+            {
+              required: true,
+              min: 2,
+            },
+            {
+              validator: this.userExists,
+            },
+          ],
+        })}
+        />
+      </div>
+      <div style={errorStyle}>
+        {(errors) ? errors.join(',') : null}
+      </div>
+      <div style={errorStyle}>
+        {isFieldValidating('user') ? 'validating' : null}
+      </div>
+    </div>)
+  },
+}
+
+const Form = {
+  methods: {
+    onSubmit (e) {
+      console.log('submit')
+      e.preventDefault()
+      this.form.validateFields({
+        // firstFields: false,
+      }, (error, values) => {
+        if (!error) {
+          console.log('ok', values)
+        } else {
+          console.log('error', error, values)
+        }
+      })
+    },
+
+    reset (e) {
+      e.preventDefault()
+      this.form.resetFields()
+    },
+  },
+
+  render () {
+    const { form } = this
+    return (<div style={{ margin: '20px' }}>
+      <h2>validateFirst</h2>
+      <form onSubmit={this.onSubmit}>
+        <User form={ form }/>
+
+        <Email form={ form }/>
+
+        <div style={ regionStyle }>
+          <button onClick={this.reset}>reset</button>
+          &nbsp;
+          <input type='submit' value='submit'/>
+        </div>
+      </form>
+    </div>)
+  },
+}
+
+export default createForm()(Form)
+

components/vc-form/src/createBaseForm.jsx

@@ -96,7 +96,7 @@ function createBaseForm (option = {}, mixins = []) {
             const valuesAllSet = {}
             valuesAll[name] = value
             Object.keys(valuesAll).forEach(key => set(valuesAllSet, key, valuesAll[key]))
-            onValuesChange(this.$props, set({}, name, value), valuesAllSet)
+            onValuesChange(this, set({}, name, value), valuesAllSet)
           }
           const field = this.fieldsStore.getField(name)
           return ({ name, field: { ...field, value, touched: true }, fieldMeta })
@@ -300,7 +300,7 @@ function createBaseForm (option = {}, mixins = []) {
           if (onFieldsChange) {
             const changedFields = Object.keys(fields)
               .reduce((acc, name) => set(acc, name, this.fieldsStore.getField(name)), {})
-            onFieldsChange(this.$props, changedFields, this.fieldsStore.getNestedAllFields())
+            onFieldsChange(this, changedFields, this.fieldsStore.getNestedAllFields())
           }
           this.$forceUpdate()
           this.$nextTick(() => {
@@ -344,7 +344,7 @@ function createBaseForm (option = {}, mixins = []) {
           this.setFields(newFields, callback)
           if (onValuesChange) {
             const allValues = this.fieldsStore.getAllValues()
-            onValuesChange(this.$props, changedValues, allValues)
+            onValuesChange(this, changedValues, allValues)
           }
         },