Skip to content

Commit

Permalink
deps: upgrade form to 2.0.0 (ant-design#8207)
Browse files Browse the repository at this point in the history
  • Loading branch information
benjycui authored and yesmeck committed Nov 17, 2017
1 parent a5bf187 commit ac463a1
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 7 deletions.
3 changes: 3 additions & 0 deletions components/form/Form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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',
Expand Down
8 changes: 6 additions & 2 deletions components/form/demo/global-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -23,10 +27,10 @@ const CustomizedForm = Form.create({
},
mapPropsToFields(props) {
return {
username: {
username: Form.createFormField({
...props.username,
value: props.username.value,
},
}),
};
},
onValuesChange(_, values) {
Expand Down
7 changes: 5 additions & 2 deletions components/form/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |

Expand Down Expand Up @@ -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:
Expand All @@ -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 | - |
Expand Down
7 changes: 5 additions & 2 deletions components/form/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |

Expand Down Expand Up @@ -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 接管,这会导致以下结果:
Expand All @@ -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 | - |
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit ac463a1

Please sign in to comment.