From ce11c258b3fa021144fc39c8f1018b65676d9567 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Thu, 25 Feb 2016 14:34:31 +0800
Subject: [PATCH] docs: update demos' code style

---
 components/form/demo/validate-basic.md      | 118 ++++++++++---------
 components/form/demo/validate-customized.md |  14 ++-
 components/form/demo/validate-other.md      | 121 +++++++++-----------
 3 files changed, 122 insertions(+), 131 deletions(-)

diff --git a/components/form/demo/validate-basic.md b/components/form/demo/validate-basic.md
index 339cff3e0a..24a21286cf 100644
--- 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>
     );
diff --git a/components/form/demo/validate-customized.md b/components/form/demo/validate-customized.md
index 9f5e3e23e9..d93b7b6cf2 100644
--- 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" />
diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md
index 02c0d3b6cd..68c0240720 100644
--- 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