Merge branch 'master' of github.com:ant-design/ant-design

9 years ago · 4bcbf6ba06
4 changed files with 123 additions and 132 deletions
--- a/components/form/demo/validate-basic.md
+++ b/components/form/demo/validate-basic.md
@ -78,94 +78,92 @@ class BasicDemo extends React.Component {

  render() {
    const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
-
+    const nameProps = getFieldProps('name', {
+      rules: [
+        { required: true, min: 5, message: '用户名至少为 5 个字符' },
+        { validator: this.userExists },
+      ],
+    });
+    const emailProps = getFieldProps('email', {
+      validate: [{
+        rules: [
+          { required: true },
+        ],
+        trigger: 'onBlur',
+      }, {
+        rules: [
+          { type: 'email', message: '请输入正确的邮箱地址' },
+        ],
+        trigger: ['onBlur', 'onChange'],
+      }]
+    });
+    const passwdProps = getFieldProps('passwd', {
+      rules: [
+        { required: true, whitespace: true, message: '请填写密码' },
+        { validator: this.checkPass.bind(this) },
+      ],
+    });
+    const rePasswdProps = getFieldProps('rePasswd', {
+      rules: [{
+        required: true,
+        whitespace: true,
+        message: '请再次输入密码',
+      }, {
+        validator: this.checkPass2.bind(this),
+      }],
+    });
+    const textareaProps = getFieldProps('textarea', {
+      rules: [
+        { required: true, message: '真的不打算写点什么吗？' },
+      ],
+    });
+    const formItemLayout = {
+      labelCol: { span: 7 },
+      wrapperCol: { span: 12 },
+    };
    return (
      <Form horizontal form={this.props.form}>
        <FormItem
+          {...formItemLayout}
          label="用户名："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}
          hasFeedback
          help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
-          <Input placeholder="实时校验，输入 JasonWood 看看"
-            {...getFieldProps('name', {
-              rules: [
-                { required: true, min: 5, message: '用户名至少为 5 个字符' },
-                { validator: this.userExists },
-              ],
-            })} />
+          <Input {...nameProps} placeholder="实时校验，输入 JasonWood 看看" />
        </FormItem>

        <FormItem
+          {...formItemLayout}
          label="邮箱："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}
          hasFeedback>
-          <Input type="email" placeholder="onBlur 与 onChange 相结合"
-            {...getFieldProps('email', {
-              validate: [{
-                rules: [
-                  { required: true },
-                ],
-                trigger: 'onBlur',
-              }, {
-                rules: [
-                  { type: 'email', message: '请输入正确的邮箱地址' },
-                ],
-                trigger: ['onBlur', 'onChange'],
-              }]
-            })} />
+          <Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
        </FormItem>

        <FormItem
+          {...formItemLayout}
          label="密码："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}
          hasFeedback>
-          <Input type="password" autoComplete="off"
-            {...getFieldProps('passwd', {
-              rules: [
-                { required: true, whitespace: true, message: '请填写密码' },
-                { validator: this.checkPass.bind(this) },
-              ],
-            })}
+          <Input {...passwdProps} type="password" autoComplete="off"
            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
        </FormItem>

        <FormItem
+          {...formItemLayout}
          label="确认密码："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}
          hasFeedback>
-          <Input type="password" autoComplete="off" placeholder="两次输入密码保持一致"
-            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-            {...getFieldProps('rePasswd', {
-              rules: [{
-                required: true,
-                whitespace: true,
-                message: '请再次输入密码',
-              }, {
-                validator: this.checkPass2.bind(this),
-              }],
-            })} />
+          <Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
+            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
        </FormItem>

        <FormItem
-          label="备注："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}>
-          <Input type="textarea" placeholder="随便写" id="textarea" name="textarea"
-            {...getFieldProps('textarea', {
-              rules: [
-                { required: true, message: '真的不打算写点什么吗？' },
-              ],
-            })} />
+          {...formItemLayout}
+          label="备注：">
+          <Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
        </FormItem>

-        <FormItem wrapperCol={{ span: 12, offset: 7 }} >
-        <Button type="primary" onClick={this.handleSubmit.bind(this)}>确定</Button>
+        <FormItem wrapperCol={{ span: 12, offset: 7 }}>
+          <Button type="primary" onClick={this.handleSubmit.bind(this)}>确定</Button>
          &nbsp;&nbsp;&nbsp;
-        <Button type="ghost" onClick={this.handleReset.bind(this)}>重置</Button>
+          <Button type="ghost" onClick={this.handleReset.bind(this)}>重置</Button>
        </FormItem>
      </Form>
    );
--- a/components/form/demo/validate-customized.md
+++ b/components/form/demo/validate-customized.md
@ -143,6 +143,10 @@ let Demo = React.createClass({
        validator: this.checkPass2,
      }],
    });
+    const formItemLayout = {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 18 },
+    };
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>修改密码</Button>
@ -151,9 +155,8 @@ let Demo = React.createClass({
            <Row>
              <Col span="18">
                <FormItem
-                  label="密码："
-                  labelCol={{ span: 6 }}
-                  wrapperCol={{ span: 18 }}>
+                  {...formItemLayout}
+                  label="密码：">
                  <Input {...passProps} type="password"
                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                    autoComplete="off" id="pass" />
@ -167,9 +170,8 @@ let Demo = React.createClass({
            <Row>
              <Col span="18">
                <FormItem
-                  label="确认密码："
-                  labelCol={{ span: 6 }}
-                  wrapperCol={{ span: 18 }}>
+                  {...formItemLayout}
+                  label="确认密码：">
                  <Input {...rePassProps} type="password"
                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                    autoComplete="off" id="rePass" />
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@ -65,19 +65,48 @@ let Demo = React.createClass({
      }],
    }];
    const { getFieldProps } = this.props.form;
+    const selectProps = getFieldProps('select', {
+      rules: [
+        { required: true, message: '请选择您的国籍' }
+      ],
+    });
+    const multiSelectProps = getFieldProps('multiSelect', {
+      rules: [
+        { required: true, message: '请选择您喜欢的颜色', type: 'array' },
+      ]
+    });
+    const radioProps = getFieldProps('radio', {
+      rules: [
+        { required: true, message: '请选择您的性别' }
+      ]
+    });
+    const birthdayProps = getFieldProps('birthday', {
+      rules: [
+        {
+          required: true,
+          type: 'date',
+          message: '你的生日是什么呢?',
+        }, {
+          validator: this.checkBirthday,
+        }
+      ]
+    });
+    const primeNumberProps = getFieldProps('primeNumber', {
+      rules: [{ validator: this.checkPrime }],
+    });
+    const addressProps = getFieldProps('address', {
+      rules: [{ required: true, type: 'array' }],
+    });
+    const formItemLayout = {
+      labelCol: { span: 7 },
+      wrapperCol: { span: 12 },
+    };
    return (
      <Form horizontal form={this.props.form}>
        <FormItem
-          label="国籍："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}>
-          <Select placeholder="请选择国家" style={{ width: '100%' }}
-            {...getFieldProps('select', {
-              rules: [
-                { required: true, message: '请选择您的国籍' }
-              ],
-            })}
-          >
+          {...formItemLayout}
+          label="国籍：">
+          <Select {...selectProps} placeholder="请选择国家" style={{ width: '100%' }}>
            <Option value="china">中国</Option>
            <Option value="use">美国</Option>
            <Option value="japan">日本</Option>
@ -87,16 +116,9 @@ let Demo = React.createClass({
        </FormItem>

        <FormItem
-          label="喜欢的颜色："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}>
-          <Select multiple placeholder="请选择颜色" style={{ width: '100%' }}
-            {...getFieldProps('multiSelect', {
-              rules: [
-                { required: true, message: '请选择您喜欢的颜色', type: 'array' },
-              ]
-            })}
-          >
+          {...formItemLayout}
+          label="喜欢的颜色：">
+          <Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
            <Option value="red">红色</Option>
            <Option value="orange">橙色</Option>
            <Option value="yellow">黄色</Option>
@ -106,25 +128,17 @@ let Demo = React.createClass({
        </FormItem>

        <FormItem
-          label="性别："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}>
-          <RadioGroup
-            {...getFieldProps('radio', {
-              rules: [
-                { required: true, message: '请选择您的性别' }
-              ]
-            })}
-          >
+          {...formItemLayout}
+          label="性别：">
+          <RadioGroup {...radioProps}>
            <Radio value="male">男</Radio>
            <Radio value="female">女</Radio>
          </RadioGroup>
        </FormItem>

        <FormItem
-          label="兴趣爱好："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}>
+          {...formItemLayout}
+          label="兴趣爱好：">
          <Checkbox {...getFieldProps('eat', {
            valuePropName: 'checked',
          })} />吃饭饭 &nbsp;
@ -137,44 +151,21 @@ let Demo = React.createClass({
        </FormItem>

        <FormItem
-          label="生日："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}>
-          <DatePicker
-            {...getFieldProps('birthday', {
-              rules: [
-                {
-                  required: true,
-                  type: 'date',
-                  message: '你的生日是什么呢?',
-                }, {
-                  validator: this.checkBirthday,
-                }
-              ]
-            })}
-          />
+          {...formItemLayout}
+          label="生日：">
+          <DatePicker {...birthdayProps} />
        </FormItem>

        <FormItem
-          label="8~12间的质数："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}>
-          <InputNumber min={8} max={12}
-            {...getFieldProps('primeNumber', {
-              rules: [{ validator: this.checkPrime }],
-            })}
-          />
+          {...formItemLayout}
+          label="8~12间的质数：">
+          <InputNumber {...primeNumberProps} min={8} max={12} />
        </FormItem>

        <FormItem
-          label="选择地址："
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 12 }}>
-          <Cascader options={address}
-            {...getFieldProps('address', {
-              rules: [{ required: true, type: 'array' }],
-            })}
-          />
+          {...formItemLayout}
+          label="选择地址：">
+          <Cascader {...addressProps} options={address} />
        </FormItem>

        <FormItem
--- a/components/steps/demo/icon.md
+++ b/components/steps/demo/icon.md
@ -1,4 +1,4 @@
-# 带ICON图标的步骤条
+# 带图标的步骤条

 - order: 2