Browse Source

refactor: rename option to fieldOption

pull/929/head
Benjy Cui 9 years ago
parent
commit
cf25379010
  1. 8
      components/form/FormItem.jsx
  2. 10
      components/form/demo/validate-basic.md
  3. 4
      components/form/demo/validate-customized.md
  4. 12
      components/form/demo/validate-other.md
  5. 10
      components/form/index.md

8
components/form/FormItem.jsx

@ -89,7 +89,7 @@ class FormItem extends React.Component {
}
isRequired() {
const options = this.props.options;
const options = this.props.fieldOption;
if (options === undefined) return false;
const allRules = (options.validate || []).concat({
@ -119,10 +119,10 @@ class FormItem extends React.Component {
const context = this.context;
const props = this.props;
let children = props.children;
if (context.form && props.id && props.options) {
if (context.form && props.id && props.fieldOption) {
children = React.cloneElement(
React.Children.only(children),
{ ...context.form.getFieldProps(props.id, props.options), id: props.id }
{ ...context.form.getFieldProps(props.id, props.fieldOption), id: props.id }
);
}
return [
@ -168,7 +168,7 @@ FormItem.propTypes = {
wrapperCol: React.PropTypes.object,
className: React.PropTypes.string,
id: React.PropTypes.string,
options: React.PropTypes.object,
fieldOption: React.PropTypes.object,
children: React.PropTypes.node,
};

10
components/form/demo/validate-basic.md

@ -87,7 +87,7 @@ class BasicDemo extends React.Component {
wrapperCol={{span: 12}}
hasFeedback
id="name"
options={{
fieldOption={{
rules: [
{required: true, min: 5, message: '用户名至少为 5 个字符'},
{validator: this.userExists},
@ -103,7 +103,7 @@ class BasicDemo extends React.Component {
wrapperCol={{span: 12}}
hasFeedback
id="email"
options={{
fieldOption={{
validate: [{
rules: [
{required: true},
@ -125,7 +125,7 @@ class BasicDemo extends React.Component {
wrapperCol={{span: 12}}
hasFeedback
id="passwd"
options={{
fieldOption={{
rules: [
{ required: true, whitespace: true, message: '请填写密码' },
{ validator: this.checkPass.bind(this) },
@ -141,7 +141,7 @@ class BasicDemo extends React.Component {
wrapperCol={{span: 12}}
hasFeedback
id="rePasswd"
options={{
fieldOption={{
rules: [{
required: true,
whitespace: true,
@ -159,7 +159,7 @@ class BasicDemo extends React.Component {
labelCol={{span: 7}}
wrapperCol={{span: 12}}
id="textarea"
options={{
fieldOption={{
rules: [
{required: true, message: '真的不打算写点什么吗?'},
],

4
components/form/demo/validate-customized.md

@ -130,7 +130,7 @@ let Demo = React.createClass({
labelCol={{span: 6}}
wrapperCol={{span: 18}}
id="pass"
options={{
fieldOption={{
rules: [
{required: true, whitespace: true, message: '请填写密码'},
{validator: this.checkPass}
@ -153,7 +153,7 @@ let Demo = React.createClass({
labelCol={{span: 6}}
wrapperCol={{span: 18}}
id="rePass"
options={{
fieldOption={{
rules: [{
required: true,
whitespace: true,

12
components/form/demo/validate-other.md

@ -65,7 +65,7 @@ let Demo = React.createClass({
labelCol={{span: 7}}
wrapperCol={{span: 12}}
id="select"
options={{
fieldOption={{
rules: [
{ required: true, message: '请选择您的国籍' }
],
@ -84,7 +84,7 @@ let Demo = React.createClass({
labelCol={{span: 7}}
wrapperCol={{span: 12}}
id="multiSelect"
options={{
fieldOption={{
rules: [
{ required: true, message: '请选择您喜欢的颜色', type: 'array' },
]
@ -103,7 +103,7 @@ let Demo = React.createClass({
labelCol={{span: 7}}
wrapperCol={{span: 12}}
id="radio"
options={{
fieldOption={{
rules: [
{ required: true, message: '请选择您的性别' }
]
@ -119,7 +119,7 @@ let Demo = React.createClass({
labelCol={{span: 7}}
wrapperCol={{span: 12}}
id="birthday"
options={{
fieldOption={{
rules: [
{
required: true,
@ -138,7 +138,7 @@ let Demo = React.createClass({
labelCol={{span: 7}}
wrapperCol={{span: 12}}
id="primeNumber"
options={{
fieldOption={{
rules: [{ validator: this.checkPrime }],
}}>
<InputNumber min={8} max={12} size="large" />
@ -149,7 +149,7 @@ let Demo = React.createClass({
labelCol={{span: 7}}
wrapperCol={{span: 12}}
id="address"
options={{
fieldOption={{
rules: [{ required: true, type: 'array' }],
}}>
<Cascader options={address} />

10
components/form/index.md

@ -87,14 +87,14 @@ CustomizedForm = Form.create({})(CustomizedForm);
| label | label 标签的文本 | string | | |
| labelCol | label 标签布局,通 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` | object | | |
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | object | | |
| options | 配置校验规则等,详情请看下面备注。如果设置了 `options`,则 `Form.Item` 只能有一个子节点 | object | | |
| help | 提示信息,如不设置,则会根据 `options` 中的校验规则自动生成 | string | | |
| required | 是否必填,如不设置,则会根据 `options` 中的校验规则自动生成 | bool | | false |
| validateStatus | 校验状态,如不设置,则会根据 `options` 中的校验规则自动生成 | string | 'success' 'warning' 'error' 'validating' | |
| fieldOption | 配置校验规则等,详情请看下面备注。如果设置了 `fieldOption`,则 `Form.Item` 只能有一个子节点 | object | | |
| help | 提示信息,如不设置,则会根据 `fieldOption` 中的校验规则自动生成 | string | | |
| required | 是否必填,如不设置,则会根据 `fieldOption` 中的校验规则自动生成 | bool | | false |
| validateStatus | 校验状态,如不设置,则会根据 `fieldOption` 中的校验规则自动生成 | string | 'success' 'warning' 'error' 'validating' | |
| hasFeedback | 配合 validateStatus 属性使用,是否展示校验状态图标 | bool | | false |
| prefixCls | 样式类名,默认为 ant-form,通常您不需要设置 | string | | 'ant-form' |
#### options
#### fieldOption
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|

Loading…
Cancel
Save