docs: rewrite Form demos to ES6 component (#4949)

components/form/demo/coordinated.md

@@ -18,21 +18,21 @@ import { Form, Select, Input, Button } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
 
-const App = Form.create()(React.createClass({
-  handleSubmit(e) {
+class App extends React.Component {
+  handleSubmit = (e) => {
     e.preventDefault();
     this.props.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
-  },
-  handleSelectChange(value) {
+  }
+  handleSelectChange = (value) => {
     console.log(value);
     this.props.form.setFieldsValue({
       note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
     });
-  },
+  }
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
@@ -70,8 +70,10 @@ const App = Form.create()(React.createClass({
         </FormItem>
       </Form>
     );
-  },
-}));
+  }
+}
 
-ReactDOM.render(<App />, mountNode);
+const WrappedApp = Form.create()(App);
+
+ReactDOM.render(<WrappedApp />, mountNode);
 ````

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

@@ -23,22 +23,24 @@ import { Form, Input, Select, Button } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
 
-const PriceInput = React.createClass({
-  getInitialState() {
+class PriceInput extends React.Component {
+  constructor(props) {
+    super(props);
+
     const value = this.props.value || {};
-    return {
+    this.state = {
       number: value.number || 0,
       currency: value.currency || 'rmb',
     };
-  },
+  }
   componentWillReceiveProps(nextProps) {
     // Should be a controlled component.
     if ('value' in nextProps) {
       const value = nextProps.value;
       this.setState(value);
     }
-  },
-  handleNumberChange(e) {
+  }
+  handleNumberChange = (e) => {
     const number = parseInt(e.target.value || 0, 10);
     if (isNaN(number)) {
       return;
@@ -47,20 +49,20 @@ const PriceInput = React.createClass({
       this.setState({ number });
     }
     this.triggerChange({ number });
-  },
-  handleCurrencyChange(currency) {
+  }
+  handleCurrencyChange = (currency) => {
     if (!('value' in this.props)) {
       this.setState({ currency });
     }
     this.triggerChange({ currency });
-  },
-  triggerChange(changedValue) {
+  }
+  triggerChange = (changedValue) => {
     // Should provide an event to pass value to Form.
     const onChange = this.props.onChange;
     if (onChange) {
       onChange(Object.assign({}, this.state, changedValue));
     }
-  },
+  }
   render() {
     const { size } = this.props;
     const state = this.state;
@@ -84,25 +86,25 @@ const PriceInput = React.createClass({
         </Select>
       </span>
     );
-  },
-});
+  }
+}
 
-const Demo = Form.create()(React.createClass({
-  handleSubmit(e) {
+class Demo extends React.Component {
+  handleSubmit = (e) => {
     e.preventDefault();
     this.props.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
-  },
-  checkPrice(rule, value, callback) {
+  }
+  checkPrice = (rule, value, callback) => {
     if (value.number > 0) {
       callback();
       return;
     }
     callback('Price must greater than zero!');
-  },
+  }
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
@@ -118,8 +120,10 @@ const Demo = Form.create()(React.createClass({
         </FormItem>
       </Form>
     );
-  },
-}));
+  }
+}
 
-ReactDOM.render(<Demo />, mountNode);
+const WrappedDemo = Form.create()(Demo);
+
+ReactDOM.render(<WrappedDemo />, mountNode);
 ````

components/form/demo/form-in-modal.md

@@ -56,17 +56,17 @@ const CollectionCreateForm = Form.create()(
   }
 );
 
-const CollectionsPage = React.createClass({
-  getInitialState() {
-    return { visible: false };
-  },
-  showModal() {
+class CollectionsPage extends React.Component {
+  state = {
+    visible: false,
+  };
+  showModal = () => {
     this.setState({ visible: true });
-  },
-  handleCancel() {
+  }
+  handleCancel = () => {
     this.setState({ visible: false });
-  },
-  handleCreate() {
+  }
+  handleCreate = () => {
     const form = this.form;
     form.validateFields((err, values) => {
       if (err) {
@@ -77,10 +77,10 @@ const CollectionsPage = React.createClass({
       form.resetFields();
       this.setState({ visible: false });
     });
-  },
-  saveFormRef(form) {
+  }
+  saveFormRef = (form) => {
     this.form = form;
-  },
+  }
   render() {
     return (
       <div>
@@ -93,8 +93,8 @@ const CollectionsPage = React.createClass({
         />
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<CollectionsPage />, mountNode);
 ````

components/form/demo/global-state.md

@@ -45,21 +45,19 @@ const CustomizedForm = Form.create({
   );
 });
 
-const Demo = React.createClass({
-  getInitialState() {
-    return {
-      fields: {
-        username: {
-          value: 'benjycui',
-        },
+class Demo extends React.Component {
+  state = {
+    fields: {
+      username: {
+        value: 'benjycui',
       },
-    };
-  },
-  handleFormChange(changedFields) {
+    },
+  };
+  handleFormChange = (changedFields) => {
     this.setState({
       fields: { ...this.state.fields, ...changedFields },
     });
-  },
+  }
   render() {
     const fields = this.state.fields;
     return (
@@ -70,8 +68,8 @@ const Demo = React.createClass({
         </pre>
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<Demo />, mountNode);
 ````

components/form/demo/horizontal-login.md

@@ -21,19 +21,19 @@ function hasErrors(fieldsError) {
   return Object.keys(fieldsError).some(field => fieldsError[field]);
 }
 
-const HorizontalLoginForm = Form.create()(React.createClass({
+class HorizontalLoginForm extends React.Component {
   componentDidMount() {
     // To disabled submit button at the beginning.
     this.props.form.validateFields();
-  },
-  handleSubmit(e) {
+  }
+  handleSubmit = (e) => {
     e.preventDefault();
     this.props.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
-  },
+  }
   render() {
     const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
 
@@ -73,8 +73,10 @@ const HorizontalLoginForm = Form.create()(React.createClass({
         </FormItem>
       </Form>
     );
-  },
-}));
+  }
+}
 
-ReactDOM.render(<HorizontalLoginForm />, mountNode);
+const WrappedHorizontalLoginForm = Form.create()(HorizontalLoginForm);
+
+ReactDOM.render(<WrappedHorizontalLoginForm />, mountNode);
 ````

components/form/demo/normal-login.md

@@ -17,15 +17,15 @@ Normal login form which can contain more elements.
 import { Form, Icon, Input, Button, Checkbox } from 'antd';
 const FormItem = Form.Item;
 
-const NormalLoginForm = Form.create()(React.createClass({
-  handleSubmit(e) {
+class NormalLoginForm extends React.Component {
+  handleSubmit = (e) => {
     e.preventDefault();
     this.props.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
-  },
+  }
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
@@ -59,10 +59,12 @@ const NormalLoginForm = Form.create()(React.createClass({
         </FormItem>
       </Form>
     );
-  },
-}));
+  }
+}
 
-ReactDOM.render(<NormalLoginForm />, mountNode);
+const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
+
+ReactDOM.render(<WrappedNormalLoginForm />, mountNode);
 ````
 
 ```css

components/form/demo/register.md

@@ -42,39 +42,37 @@ const residences = [{
   }],
 }];
 
-const RegistrationForm = Form.create()(React.createClass({
-  getInitialState() {
-    return {
-      passwordDirty: false,
-    };
-  },
-  handleSubmit(e) {
+class RegistrationForm extends React.Component {
+  state = {
+    passwordDirty: false,
+  };
+  handleSubmit = (e) => {
     e.preventDefault();
     this.props.form.validateFieldsAndScroll((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
-  },
-  handlePasswordBlur(e) {
+  }
+  handlePasswordBlur = (e) => {
     const value = e.target.value;
     this.setState({ passwordDirty: this.state.passwordDirty || !!value });
-  },
-  checkPassword(rule, value, callback) {
+  }
+  checkPassword = (rule, value, callback) => {
     const form = this.props.form;
     if (value && value !== form.getFieldValue('password')) {
       callback('Two passwords that you enter is inconsistent!');
     } else {
       callback();
     }
-  },
-  checkConfirm(rule, value, callback) {
+  }
+  checkConfirm = (rule, value, callback) => {
     const form = this.props.form;
     if (value && this.state.passwordDirty) {
       form.validateFields(['confirm'], { force: true });
     }
     callback();
-  },
+  }
   render() {
     const { getFieldDecorator } = this.props.form;
     const formItemLayout = {
@@ -210,10 +208,12 @@ const RegistrationForm = Form.create()(React.createClass({
         </FormItem>
       </Form>
     );
-  },
-}));
+  }
+}
 
-ReactDOM.render(<RegistrationForm />, mountNode);
+const WrappedRegistrationForm = Form.create()(RegistrationForm);
+
+ReactDOM.render(<WrappedRegistrationForm />, mountNode);
 ````
 
 ````css

components/form/demo/time-related-controls.md

@@ -19,8 +19,8 @@ const FormItem = Form.Item;
 const MonthPicker = DatePicker.MonthPicker;
 const RangePicker = DatePicker.RangePicker;
 
-const TimeRelatedForm = Form.create()(React.createClass({
-  handleSubmit(e) {
+class TimeRelatedForm extends React.Component {
+  handleSubmit = (e) => {
     e.preventDefault();
 
     this.props.form.validateFields((err, fieldsValue) => {
@@ -45,7 +45,7 @@ const TimeRelatedForm = Form.create()(React.createClass({
       };
       console.log('Received values of form: ', values);
     });
-  },
+  }
   render() {
     const { getFieldDecorator } = this.props.form;
     const formItemLayout = {
@@ -113,8 +113,10 @@ const TimeRelatedForm = Form.create()(React.createClass({
         </FormItem>
       </Form>
     );
-  },
-}));
+  }
+}
 
-ReactDOM.render(<TimeRelatedForm />, mountNode);
+const WrappedTimeRelatedForm = Form.create()(TimeRelatedForm);
+
+ReactDOM.render(<WrappedTimeRelatedForm />, mountNode);
 ````

components/form/demo/validate-other.md

@@ -23,23 +23,21 @@ const Option = Select.Option;
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
 
-const Demo = Form.create()(React.createClass({
-  handleSubmit(e) {
+class Demo extends React.Component {
+  handleSubmit = (e) => {
     e.preventDefault();
     this.props.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
-  },
-
-  normFile(e) {
+  }
+  normFile = (e) => {
     if (Array.isArray(e)) {
       return e;
     }
     return e && e.fileList;
-  },
-
+  }
   render() {
     const { getFieldDecorator } = this.props.form;
     const formItemLayout = {
@@ -164,8 +162,10 @@ const Demo = Form.create()(React.createClass({
         </FormItem>
       </Form>
     );
-  },
-}));
+  }
+}
 
-ReactDOM.render(<Demo />, mountNode);
+const WrappedDemo = Form.create()(Demo);
+
+ReactDOM.render(<WrappedDemo />, mountNode);
 ````

components/form/demo/without-form-create.md

@@ -36,7 +36,6 @@ class RawForm extends React.Component {
       value: 11,
     },
   };
-
   handleNumberChange = (value) => {
     this.setState({
       number: {
@@ -45,7 +44,6 @@ class RawForm extends React.Component {
       },
     });
   }
-
   render() {
     const formItemLayout = {
       labelCol: { span: 7 },