feat: update vc-form

Author: tangjinzhou

antd-tools/getBabelCommonConfig.js

@@ -7,6 +7,7 @@ module.exports = function (modules) {
     require.resolve('babel-plugin-transform-es3-property-literals'),
     require.resolve('babel-plugin-transform-object-assign'),
     require.resolve('babel-plugin-transform-object-rest-spread'),
+    require.resolve('babel-plugin-transform-class-properties'),
   ]
   plugins.push([require.resolve('babel-plugin-transform-runtime'), {
     polyfill: false,

components/vc-form/demo/input-array.jsx

@@ -0,0 +1,66 @@
+/* eslint no-console:0 */
+
+import { createForm } from '../index'
+import { regionStyle } from './styles'
+
+let uuid = 0
+
+const Form = {
+  props: {
+    form: Object,
+  },
+  methods: {
+    remove (k) {
+      const { form } = this
+      // can use data-binding to get
+      let keys = form.getFieldValue('keys')
+      keys = keys.filter((key) => {
+        return key !== k
+      })
+      // can use data-binding to set
+      form.setFieldsValue({
+        keys,
+      })
+    },
+    add () {
+      uuid++
+      const { form } = this
+      // can use data-binding to get
+      let keys = form.getFieldValue('keys')
+      keys = keys.concat(uuid)
+      // can use data-binding to set
+      // important! notify form to detect changes
+      form.setFieldsValue({
+        keys,
+      })
+    },
+    submit (e) {
+      e.preventDefault()
+      console.log(this.form.getFieldsValue())
+    },
+  },
+
+  render () {
+    const { getFieldProps, getFieldValue } = this.form
+    getFieldProps('keys', {
+      initialValue: [],
+    })
+    const inputs = getFieldValue('keys').map((k) => {
+      return (<div key={k} style={ regionStyle }>
+        <input {...getFieldProps(`name${k}`)}/>
+        <a
+          onClick={this.remove.bind(this, k)}
+        >delete</a></div>)
+    })
+    return (<div>
+      {inputs}
+      <div style={ regionStyle }>
+        <button onClick={this.submit}>submit</button>
+
+        <button onClick={this.add}>add</button>
+      </div>
+    </div>)
+  },
+}
+
+export default createForm()(Form)

components/vc-form/demo/styles.js

@@ -0,0 +1,11 @@
+export const regionStyle = {
+  border: '1px solid red',
+  marginTop: '10px',
+  padding: '10px',
+}
+
+export const errorStyle = {
+  color: 'red',
+  marginTop: '10px',
+  padding: '10px',
+}