deps: upgrade form to 2.0.0 (#8207)

components/form/Form.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createDOMForm from 'rc-form/lib/createDOMForm';
+import createFormField from 'rc-form/lib/createFormField';
 import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
 import omit from 'omit.js';
 import warning from '../_util/warning';
@@ -147,6 +148,8 @@ export default class Form extends React.Component<FormProps, any> {
 
   static Item = FormItem;
 
+  static createFormField = createFormField;
+
   static create = function<TOwnProps>(options: FormCreateOption<TOwnProps> = {}): ComponentDecorator<TOwnProps> {
     return createDOMForm({
       fieldNameProp: 'id',

components/form/demo/global-state.md

@@ -9,10 +9,14 @@ title:
 
 通过使用 `onFieldsChange` 与 `mapPropsToFields`，可以把表单的数据存储到上层组件或者 [Redux](https://github.com/reactjs/redux)、[dva](https://github.com/dvajs/dva) 中，更多可参考 [rc-form 示例](http://react-component.github.io/form/examples/redux.html)。
 
+**注意：**`mapPropsToFields` 里面返回的表单域数据必须使用 `Form.createFormField` 包装。
+
 ## en-US
 
 We can store form data into upper component or [Redux](https://github.com/reactjs/redux) or [dva](https://github.com/dvajs/dva) by using `onFieldsChange` and `mapPropsToFields`, see more at this [rc-form demo](http://react-component.github.io/form/examples/redux.html).
 
+**Note:** You must wrap field data with `Form.createFormField` in `mapPropsToFields`.
+
 ````jsx
 import { Form, Input } from 'antd';
 const FormItem = Form.Item;
@@ -23,10 +27,10 @@ const CustomizedForm = Form.create({
   },
   mapPropsToFields(props) {
     return {
-      username: {
+      username: Form.createFormField({
         ...props.username,
         value: props.username.value,
-      },
+      }),
     };
   },
   onValuesChange(_, values) {

components/form/index.en-US.md

@@ -59,7 +59,7 @@ The following `options` are available:
 | Property | Description | Type |
 | -------- | ----------- | ---- |
 | validateMessages | Default validate message. And its format is similar with [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js)'s returned value | Object { [nested.path]: String } |
-| mapPropsToFields | Convert props to field value. Usage example: reading the values from Redux store. | Function(props): Object{ fieldName: Object{ value } } |
+| mapPropsToFields | Convert props to field value(e.g. reading the values from Redux store). And you must mark returned fields with [`Form.createFormField`](#Form.createFormField) | (props) => Object{ fieldName: FormField { value } } |
 | onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) |
 | onValuesChange | A handler while value of any field is changed | (props, values) => void |
 
@@ -93,6 +93,10 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
 | options.force | Should validate validated field again when `validateTrigger` is been triggered again | boolean | false |
 | options.scroll | Config scroll behavior of `validateFieldsAndScroll`, more: [dom-scroll-into-view's config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} |
 
+### Form.createFormField
+
+To mark the returned fields data in `mapPropsToFields`, [demo](#components-form-demo-global-state).
+
 ### this.props.form.getFieldDecorator(id, options)
 
 After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls，the flow of form data will be handled by Form which will cause:
@@ -111,7 +115,6 @@ After wrapped by `getFieldDecorator`, `value`(or other property defined by `valu
 | Property | Description | Type | Default Value |
 | -------- | ----------- | ---- | ------------- |
 | id | The unique identifier is required. support [nested fields format](https://github.com/react-component/form/pull/48). | string |  |
-| options.exclusive | Whether it is exclusive with other controls, particularly for Radio. | boolean | false |
 | options.getValueFromEvent | Specify how to get value from event or other onChange arguments | function(..args) | [reference](https://github.com/react-component/form#option-object) |
 | options.initialValue | You can specify initial value, type, optional value of children node. (Note: Because `Form` will test equality with `===` internaly, we recommend to use vairable as `initialValue`, instead of literal) |  | n/a |
 | options.normalize | Normalize value to form component, [a select-all example](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - |

components/form/index.zh-CN.md

@@ -61,7 +61,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | 参数 | 说明 | 类型 |
 | --- | --- | --- |
 | validateMessages | 默认校验信息，可用于把默认错误信息改为中文等，格式与 [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js) 返回值一致 | Object { [nested.path]: String } |
-| mapPropsToFields | 把父组件的属性映射到表单项上（可用于把 Redux store 中的值读出） | Function(props): Object{ fieldName: Object{ value } } |
+| mapPropsToFields | 把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 [`Form.createFormField`](#Form.createFormField) 标记 | (props) => Object{ fieldName: FormField { value } } |
 | onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
 | onValuesChange | 任一表单域的值发生改变时的回调 | (props, values) => void |
 
@@ -94,6 +94,10 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | options.force | 对已经校验过的表单域，在 validateTrigger 再次被触发时是否再次校验 | boolean | false |
 | options.scroll | 定义 validateFieldsAndScroll 的滚动行为，详细配置见 [dom-scroll-into-view config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} |
 
+### Form.createFormField
+
+用于标记 `mapPropsToFields` 返回的表单域数据，[例子](#components-form-demo-global-state)。
+
 ### this.props.form.getFieldDecorator(id, options)
 
 经过 `getFieldDecorator` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
@@ -112,7 +116,6 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string |  |
-| options.exclusive | 是否和其他控件互斥，特别用于 Radio 单选控件 | boolean | false |
 | options.getValueFromEvent | 可以把 onChange 的参数（如 event）转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#option-object) |
 | options.initialValue | 子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)) |  |  |
 | options.normalize | 转换默认的 value 给控件，[一个选择全部的例子](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - |

package.json

@@ -57,7 +57,7 @@
     "rc-dialog": "~7.0.0",
     "rc-dropdown": "~2.1.0",
     "rc-editor-mention": "^1.0.2",
-    "rc-form": "~1.5.0",
+    "rc-form": "~2.0.0",
     "rc-input-number": "~3.6.0",
     "rc-menu": "~6.1.0",
     "rc-notification": "~3.0.0",