simplify form demo code

components/date-picker/createPicker.tsx

@@ -3,7 +3,6 @@ import moment from 'moment';
 import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
-import assign from 'object-assign';
 import omit from 'omit.js';
 import Icon from '../icon';
 
@@ -122,19 +121,13 @@ export default function createPicker(TheCalendar) {
         />
       );
 
-      // default width for showTime
-      const pickerStyle: { width?: number } = {};
-      if (props.showTime) {
-        pickerStyle.width = 180;
-      }
-
       const clearIcon = (!props.disabled && props.allowClear && this.state.value) ?
         <Icon type="cross-circle"
           className={`${prefixCls}-picker-clear`}
           onClick={this.clearSelection}
         /> : null;
       return (
-        <span className={props.pickerClass} style={assign({}, pickerStyle, props.style)}>
+        <span className={props.pickerClass} style={props.style}>
           <RcDatePicker
             {...props}
             {...pickerChangeHandler}

components/form/demo/advanced-search.md

@@ -22,7 +22,6 @@ Because the width of label is not fixed, you may need to adjust it by customizin
 import { Form, Row, Col, Input, Button, Icon } from 'antd';
 const FormItem = Form.Item;
 
-const usualShowedChildren = 2 * 3; // row * col
 const AdvancedSearchForm = Form.create()(React.createClass({
   getInitialState() {
     return {
@@ -31,20 +30,16 @@ const AdvancedSearchForm = Form.create()(React.createClass({
   },
   handleSearch(e) {
     e.preventDefault();
-
     this.props.form.validateFields((err, values) => {
-      if (err) {
-        return;
-      }
-
       console.log('Received values of form: ', values);
     });
   },
   handleReset() {
     this.props.form.resetFields();
   },
-  toggle(expand) {
-    this.setState({ expand });
+  toggle() {
+    const { expand } = this.state;
+    this.setState({ expand: !expand });
   },
   render() {
     const { getFieldDecorator } = this.props.form;
@@ -58,10 +53,7 @@ const AdvancedSearchForm = Form.create()(React.createClass({
     for (let i = 0; i < 10; i++) {
       children.push(
         <Col span={8} key={i}>
-          <FormItem
-            {...formItemLayout}
-            label={`Field ${i}`}
-          >
+          <FormItem {...formItemLayout} label={`Field ${i}`}>
             {getFieldDecorator(`field-${i}`)(
               <Input placeholder="placeholder" />
             )}
@@ -71,7 +63,7 @@ const AdvancedSearchForm = Form.create()(React.createClass({
     }
 
     const expand = this.state.expand;
-    const showedChildren = expand ? children.length : usualShowedChildren;
+    const shownCount = expand ? children.length : 6;
     return (
       <Form
         horizontal
@@ -79,23 +71,17 @@ const AdvancedSearchForm = Form.create()(React.createClass({
         onSubmit={this.handleSearch}
       >
         <Row gutter={40}>
-          {children.slice(0, showedChildren)}
+          {children.slice(0, shownCount)}
         </Row>
         <Row>
           <Col span={24} style={{ textAlign: 'right' }}>
             <Button type="primary" htmlType="submit">Search</Button>
-            <Button onClick={this.handleReset}>Clear</Button>
-            {
-              expand ? (
-                <a className="ant-dropdown-link" onClick={() => this.toggle(false)}>
-                  Collapse <Icon type="up" />
-                </a>
-              ) : (
-                <a className="ant-dropdown-link" onClick={() => this.toggle(true)}>
-                  Expand <Icon type="down" />
-                </a>
-              )
-            }
+            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
+              Clear
+            </Button>
+            <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
+              Collapse <Icon type={expand ? 'up' : 'down'} />
+            </a>
           </Col>
         </Row>
       </Form>
@@ -109,16 +95,10 @@ ReactDOM.render(<AdvancedSearchForm />, mountNode);
 ````css
 #components-form-demo-advanced-search .ant-advanced-search-form {
   padding: 24px;
-  background: #f8f8f8;
+  background: #fbfbfb;
   border: 1px solid #d9d9d9;
   border-radius: 6px;
 }
-#components-form-demo-advanced-search .ant-advanced-search-form .ant-btn + .ant-btn {
-  margin-left: 8px;
-}
-#components-form-demo-advanced-search .ant-advanced-search-form .ant-dropdown-link {
-  margin-left: 16px;
-}
 ````
 
 <style>

components/form/demo/customized-form-controls.md

@@ -40,11 +40,9 @@ const CustomizedInputNumber = React.createClass({
     if (isNaN(number)) {
       return;
     }
-
     if (!('value' in this.props)) {
       this.setState({ value: number });
     }
-
     // Should provide an event to pass value to Form.
     const onChange = this.props.onChange;
     if (onChange) {
@@ -66,13 +64,10 @@ const CustomizedInputNumber = React.createClass({
 const Demo = Form.create()(React.createClass({
   handleSubmit(e) {
     e.preventDefault();
-
     this.props.form.validateFields((err, values) => {
-      if (err) {
-        return;
+      if (!err) {
+        console.log('Received values of form: ', values);
       }
-
-      console.log('Received values of form: ', values);
     });
   },
   render() {

components/form/demo/dynamic-form-item.md

@@ -27,12 +27,9 @@ let Demo = React.createClass({
     const { form } = this.props;
     // can use data-binding to get
     const keys = form.getFieldValue('keys');
-    const nextKeys = keys.filter((key) => {
-      return key !== k;
-    });
     // can use data-binding to set
     form.setFieldsValue({
-      keys: nextKeys,
+      keys: keys.filter(key => key !== k),
     });
   },
   add() {
@@ -49,13 +46,10 @@ let Demo = React.createClass({
   },
   handleSubmit(e) {
     e.preventDefault();
-
     this.props.form.validateFields((err, values) => {
-      if (err) {
-        return;
+      if (!err) {
+        console.log('Received values of form: ', values);
       }
-
-      console.log('Received values of form: ', values);
     });
   },
   render() {
@@ -78,7 +72,7 @@ let Demo = React.createClass({
           })(
             <Input style={{ width: '60%', marginRight: 8 }} />
           )}
-          <Button onClick={() => this.remove(k)}>remove</Button>
+          <Button onClick={() => this.remove(k)}>Remove</Button>
         </Form.Item>
       );
     });
@@ -86,8 +80,8 @@ let Demo = React.createClass({
       <Form horizontal onSubmit={this.handleSubmit}>
         {formItems}
         <Form.Item wrapperCol={{ span: 18, offset: 6 }}>
-          <Button onClick={this.add} style={{ marginRight: 8 }}>add good friend</Button>
-          <Button type="primary" htmlType="submit">submit</Button>
+          <Button onClick={this.add} style={{ marginRight: 8 }}>Add good friend</Button>
+          <Button type="primary" htmlType="submit">Submit</Button>
         </Form.Item>
       </Form>
     );

components/form/demo/horizontal-login.md

@@ -20,13 +20,10 @@ const FormItem = Form.Item;
 const HorizontalLoginForm = Form.create()(React.createClass({
   handleSubmit(e) {
     e.preventDefault();
-
     this.props.form.validateFields((err, values) => {
-      if (err) {
-        return;
+      if (!err) {
+        console.log('Received values of form: ', values);
       }
-
-      console.log('Received values of form: ', values);
     });
   },
   render() {

components/form/demo/normal-login.md

@@ -20,13 +20,10 @@ const FormItem = Form.Item;
 const NormalLoginForm = Form.create()(React.createClass({
   handleSubmit(e) {
     e.preventDefault();
-
     this.props.form.validateFields((err, values) => {
-      if (err) {
-        return;
+      if (!err) {
+        console.log('Received values of form: ', values);
       }
-
-      console.log('Received values of form: ', values);
     });
   },
   render() {

components/form/demo/register.md

@@ -50,13 +50,10 @@ const RegistrationForm = Form.create()(React.createClass({
   },
   handleSubmit(e) {
     e.preventDefault();
-
     this.props.form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        return;
+      if (!err) {
+        console.log('Received values of form: ', values);
       }
-
-      console.log('Received values of form: ', values);
     });
   },
   handlePasswordBlur(e) {
@@ -76,7 +73,6 @@ const RegistrationForm = Form.create()(React.createClass({
     if (value && this.state.passwordDirty) {
       form.validateFields(['confirm'], { force: true });
     }
-
     callback();
   },
   render() {

components/form/demo/validate-other.md

@@ -26,13 +26,10 @@ const RadioGroup = Radio.Group;
 const Demo = Form.create()(React.createClass({
   handleSubmit(e) {
     e.preventDefault();
-
     this.props.form.validateFields((err, values) => {
-      if (err) {
-        return;
+      if (!err) {
+        console.log('Received values of form: ', values);
       }
-
-      console.log('Received values of form: ', values);
     });
   },