Upgrade rc form (#4430)

* support nested form item name by upgrade rc-form

react-component/form#48

* Fix dynamic form demo

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -376,34 +376,6 @@ exports[`test renders ./components/form/demo/customized-form-controls.md correct
 exports[`test renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal">
-  <div
-    class="ant-row ant-form-item">
-    <div
-      class="ant-col-4 ant-form-item-label">
-      <label
-        class=""
-        for="names-0">
-        Passengers
-      </label>
-    </div>
-    <div
-      class="ant-col-20">
-      <div
-        class="ant-form-item-control ">
-        <input
-          class="ant-input ant-input-lg"
-          data-__meta="[object Object]"
-          id="names-0"
-          placeholder="passenger name"
-          style="width:60%;margin-right:8px;"
-          type="text"
-          value="" />
-        <i
-          class="anticon anticon-minus-circle-o dynamic-delete-button"
-          disabled="" />
-      </div>
-    </div>
-  </div>
   <div
     class="ant-row ant-form-item">
     <div
@@ -417,7 +389,23 @@ exports[`test renders ./components/form/demo/dynamic-form-item.md correctly 1`]
           <i
             class="anticon anticon-plus" />
           <span>
-             Add
+             Add field
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item">
+    <div
+      class="ant-col-20 ant-col-offset-4">
+      <div
+        class="ant-form-item-control ">
+        <button
+          class="ant-btn ant-btn-primary ant-btn-lg"
+          type="submit">
+          <span>
+            Submit
           </span>
         </button>
       </div>

components/form/demo/dynamic-form-item.md

@@ -53,6 +53,15 @@ class DynamicFieldSet extends React.Component {
     });
   }
 
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+      }
+    });
+  }
+
   render() {
     const { getFieldDecorator, getFieldValue } = this.props.form;
     const formItemLayout = {
@@ -62,7 +71,7 @@ class DynamicFieldSet extends React.Component {
     const formItemLayoutWithOutLabel = {
       wrapperCol: { span: 20, offset: 4 },
     };
-
+    getFieldDecorator('keys', { initialValue: [] });
     const keys = getFieldValue('keys');
     const formItems = keys.map((k, index) => {
       return (
@@ -92,13 +101,16 @@ class DynamicFieldSet extends React.Component {
       );
     });
     return (
-      <Form horizontal>
+      <Form onSubmit={this.handleSubmit} horizontal>
         {formItems}
         <FormItem {...formItemLayoutWithOutLabel}>
           <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
-            <Icon type="plus" /> Add
+            <Icon type="plus" /> Add field
           </Button>
         </FormItem>
+        <FormItem {...formItemLayoutWithOutLabel}>
+          <Button type="primary" htmlType="submit" size="large">Submit</Button>
+        </FormItem>
       </Form>
     );
   }

components/form/index.en-US.md

@@ -86,11 +86,11 @@ After wrapped by `getFieldDecorator`, `value`(or other property defined by `valu
 
 If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless component: https://github.com/facebook/react/pull/6534
 
-#### getFieldDecorator's parameters
+#### getFieldDecorator(id, options) parameters
 
 | Property  | Description                             | Type | Default Value |
 |-----------|-----------------------------------------|------|---------------|
-| options.id | The unique identifier is required. | string | |
+| id | The unique identifier is required. support [nested fields format](https://github.com/react-component/form/pull/48). | string | |
 | options.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' |
 | options.initialValue | You can specify initial value, type, optional value of children node. | | n/a |
 | options.trigger | When to collect the value of children node | string | 'onChange' |

components/form/index.zh-CN.md

@@ -87,11 +87,11 @@ CustomizedForm = Form.create({})(CustomizedForm);
 
 如果使用的是 `react@<15.3.0`，则 `getFieldDecorator` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534
 
-#### getFieldDecorator 参数
+#### getFieldDecorator(id, options) 参数
 
 | 参数      | 说明                                     | 类型 | 默认值 |
 |-----------|-----------------------------------------|-----|--------|
-| id | 必填输入控件唯一标志 | string | |
+| id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string | |
 | options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |
 | options.initialValue | 子节点的初始值，类型、可选值均由子节点决定  | | |
 | options.trigger | 收集子节点的值的时机 | string | 'onChange' |

package.json

@@ -48,7 +48,7 @@
     "rc-dialog": "~6.5.0",
     "rc-dropdown": "~1.4.8",
     "rc-editor-mention": "~0.3.0",
-    "rc-form": "~1.0.0",
+    "rc-form": "~1.1.0",
     "rc-input-number": "~2.8.3",
     "rc-menu": "~5.0.1",
     "rc-notification": "~1.3.4",