upgrade eslint-config-airbnb

.eslintrc.js

@@ -8,13 +8,6 @@ const eslintrc = {
     es6: true,
   },
   parser: 'babel-eslint',
-  parserOptions: {
-    ecmaVersion: 6,
-    ecmaFeatures: {
-      jsx: true,
-      experimentalObjectRestSpread: true,
-    },
-  },
   plugins: [
     'markdown',
     'react',
@@ -65,6 +58,8 @@ if (process.env.RUN_ENV === 'DEMO') {
     'eol-last': 0,
     'no-script-url': 0,
     'prefer-rest-params': 0,
+    'react/no-access-state-in-setstate': 0,
+    'react/destructuring-assignment': 0,
     'react/no-multi-comp': 0,
     'react/prefer-stateless-function': 0,
     'jsx-a11y/href-no-hash': 0,

components/affix/demo/basic.md

@@ -21,6 +21,7 @@ class Demo extends React.Component {
     top: 10,
     bottom: 10,
   }
+
   render() {
     return (
       <div>
@@ -54,8 +55,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Demo />,
-  mountNode
-);
+ReactDOM.render(<Demo />, mountNode);
 ````

components/alert/demo/banner.md

@@ -26,6 +26,6 @@ ReactDOM.render(
     <Alert showIcon={false} message="Warning text without icon" banner />
     <br />
     <Alert type="error" message="Error text" banner />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/alert/demo/basic.md

@@ -17,8 +17,8 @@ The simplest usage for short messages.
 import { Alert } from 'antd';
 
 ReactDOM.render(
-  <Alert message="Success Text" type="success" />
-, mountNode);
+  <Alert message="Success Text" type="success" />,
+  mountNode);
 ````
 
 <style>

components/alert/demo/closable.md

@@ -35,6 +35,6 @@ ReactDOM.render(
       closable
       onClose={onClose}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/alert/demo/close-text.md

@@ -17,6 +17,6 @@ Replace the default icon with customized text.
 import { Alert } from 'antd';
 
 ReactDOM.render(
-  <Alert message="Info Text" type="info" closeText="Close Now" />
-, mountNode);
+  <Alert message="Info Text" type="info" closeText="Close Now" />,
+  mountNode);
 ````

components/alert/demo/description.md

@@ -38,6 +38,6 @@ ReactDOM.render(
       description="Error Description Error Description Error Description Error Description"
       type="error"
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/alert/demo/icon.md

@@ -46,6 +46,6 @@ ReactDOM.render(
       type="error"
       showIcon
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/alert/demo/smooth-closed.md

@@ -20,9 +20,11 @@ class App extends React.Component {
   state = {
     visible: true,
   }
+
   handleClose = () => {
     this.setState({ visible: false });
   }
+
   render() {
     return (
       <div>
@@ -43,6 +45,6 @@ class App extends React.Component {
 }
 
 ReactDOM.render(
-  <App />
-, mountNode);
+  <App />,
+  mountNode);
 ````

components/alert/demo/style.md

@@ -22,6 +22,6 @@ ReactDOM.render(
     <Alert message="Info Text" type="info" />
     <Alert message="Warning Text" type="warning" />
     <Alert message="Error Text" type="error" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/anchor/demo/basic.md

@@ -15,6 +15,7 @@ The simplest usage.
 
 ```jsx
 import { Anchor } from 'antd';
+
 const { Link } = Anchor;
 
 ReactDOM.render(
@@ -25,8 +26,8 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>
-, mountNode);
+  </Anchor>,
+  mountNode);
 ```
 
 <style>

components/anchor/demo/static.md

@@ -15,6 +15,7 @@ Do not change state when page is scrolling.
 
 ```jsx
 import { Anchor } from 'antd';
+
 const { Link } = Anchor;
 
 ReactDOM.render(
@@ -25,6 +26,6 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>
-, mountNode);
+  </Anchor>,
+  mountNode);
 ```

components/auto-complete/demo/certain-category.md

@@ -16,6 +16,7 @@ Basic Usage, set datasource of autocomplete with `dataSource` property.
 
 ````jsx
 import { Icon, Input, AutoComplete } from 'antd';
+
 const Option = AutoComplete.Option;
 const OptGroup = AutoComplete.OptGroup;
 

components/auto-complete/demo/custom.md

@@ -15,6 +15,7 @@ Customize Input Component
 
 ````jsx
 import { AutoComplete, Input } from 'antd';
+
 const { TextArea } = Input;
 
 function onSelect(value) {

components/auto-complete/demo/uncertain-category.md

@@ -16,6 +16,7 @@ Basic Usage, set datasource of autocomplete with `dataSource` property.
 
 ````jsx
 import { Icon, Button, Input, AutoComplete } from 'antd';
+
 const Option = AutoComplete.Option;
 
 function onSelect(value) {

components/avatar/demo/badge.md

@@ -24,6 +24,6 @@ ReactDOM.render(
     <span>
       <Badge dot><Avatar shape="square" icon="user" /></Badge>
     </span>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/avatar/demo/basic.md

@@ -28,8 +28,8 @@ ReactDOM.render(
       <Avatar shape="square" icon="user" />
       <Avatar shape="square" size="small" icon="user" />
     </div>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>

components/avatar/demo/dynamic.md

@@ -27,6 +27,7 @@ class Autoset extends React.Component {
       color: colorList[0],
     };
   }
+
   changeUser = () => {
     const index = UserList.indexOf(this.state.user);
     this.setState({
@@ -34,6 +35,7 @@ class Autoset extends React.Component {
       color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
     });
   }
+
   render() {
     return (
       <div>
@@ -48,6 +50,6 @@ class Autoset extends React.Component {
   }
 }
 
-ReactDOM.render(<Autoset />
-, mountNode);
+ReactDOM.render(<Autoset />,
+  mountNode);
 ````

components/avatar/demo/type.md

@@ -24,8 +24,8 @@ ReactDOM.render(
     <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
     <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
     <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>

components/badge/demo/basic.md

@@ -24,8 +24,8 @@ ReactDOM.render(
     <Badge count={0} showZero>
       <a href="#" className="head-example" />
     </Badge>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>

components/badge/demo/change.md

@@ -15,6 +15,7 @@ The count will be animated as it changes.
 
 ````jsx
 import { Badge, Button, Icon, Switch } from 'antd';
+
 const ButtonGroup = Button.Group;
 
 class Demo extends React.Component {

components/badge/demo/dot.md

@@ -28,8 +28,8 @@ ReactDOM.render(
     <Badge dot>
       <a href="#">Link something</a>
     </Badge>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>

components/badge/demo/link.md

@@ -21,6 +21,6 @@ ReactDOM.render(
     <Badge count={5}>
       <span className="head-example" />
     </Badge>
-  </a>
-, mountNode);
+  </a>,
+  mountNode);
 ````

components/badge/demo/no-wrapper.md

@@ -23,6 +23,6 @@ ReactDOM.render(
     <Badge count={25} />
     <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
     <Badge count={109} style={{ backgroundColor: '#52c41a' }} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/badge/demo/overflow.md

@@ -30,6 +30,6 @@ ReactDOM.render(
     <Badge count={1000} overflowCount={999}>
       <a href="#" className="head-example" />
     </Badge>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/badge/demo/status.md

@@ -33,6 +33,6 @@ ReactDOM.render(
     <Badge status="processing" text="Processing" />
     <br />
     <Badge status="warning" text="Warning" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/badge/demo/title.md

@@ -21,8 +21,8 @@ ReactDOM.render(
     <Badge count={5} title="Custom hover text">
       <a href="#" className="head-example" />
     </Badge>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>

components/breadcrumb/demo/basic.md

@@ -22,6 +22,6 @@ ReactDOM.render(
     <Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>
     <Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>
-, mountNode);
+  </Breadcrumb>,
+  mountNode);
 ````

components/breadcrumb/demo/router-4.md

@@ -76,8 +76,8 @@ const Home = withRouter((props) => {
 ReactDOM.render(
   <Router>
     <Home />
-  </Router>
-, mountNode);
+  </Router>,
+  mountNode);
 ````
 
 ````css

components/breadcrumb/demo/router.md

@@ -51,8 +51,8 @@ ReactDOM.render(
         </Route>
       </Route>
     </Route>
-  </Router>
-, mountNode);
+  </Router>,
+  mountNode);
 ````
 
 ````css

components/breadcrumb/demo/separator.md

@@ -22,6 +22,6 @@ ReactDOM.render(
     <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
     <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>
-, mountNode);
+  </Breadcrumb>,
+  mountNode);
 ````

components/breadcrumb/demo/withIcon.md

@@ -28,6 +28,6 @@ ReactDOM.render(
     <Breadcrumb.Item>
       Application
     </Breadcrumb.Item>
-  </Breadcrumb>
-, mountNode);
+  </Breadcrumb>,
+  mountNode);
 ````

components/button/demo/basic.md

@@ -26,6 +26,6 @@ ReactDOM.render(
     <Button>Default</Button>
     <Button type="dashed">Dashed</Button>
     <Button type="danger">Danger</Button>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/button/demo/button-group.md

@@ -19,6 +19,7 @@ The `size` can be set to `large`, `small` or left unset resulting in a default s
 
 ````jsx
 import { Button, Icon } from 'antd';
+
 const ButtonGroup = Button.Group;
 
 ReactDOM.render(

components/button/demo/ghost.md

@@ -22,6 +22,6 @@ ReactDOM.render(
     <Button ghost>Default</Button>
     <Button type="dashed" ghost>Dashed</Button>
     <Button type="danger" ghost>danger</Button>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/calendar/demo/basic.md

@@ -21,6 +21,6 @@ function onPanelChange(value, mode) {
 }
 
 ReactDOM.render(
-  <Calendar onPanelChange={onPanelChange} />
-, mountNode);
+  <Calendar onPanelChange={onPanelChange} />,
+  mountNode);
 ````

components/calendar/demo/card.md

@@ -23,6 +23,6 @@ function onPanelChange(value, mode) {
 ReactDOM.render(
   <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
     <Calendar fullscreen={false} onPanelChange={onPanelChange} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/calendar/demo/notice-calendar.md

@@ -76,8 +76,8 @@ function monthCellRender(value) {
 }
 
 ReactDOM.render(
-  <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
-, mountNode);
+  <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
+  mountNode);
 ````
 
 ````css

components/calendar/demo/select.md

@@ -22,15 +22,18 @@ class App extends React.Component {
     value: moment('2017-01-25'),
     selectedValue: moment('2017-01-25'),
   }
+
   onSelect = (value) => {
     this.setState({
       value,
       selectedValue: value,
     });
   }
+
   onPanelChange = (value) => {
     this.setState({ value });
   }
+
   render() {
     const { value, selectedValue } = this.state;
     return (

components/card/demo/basic.md

@@ -21,8 +21,8 @@ ReactDOM.render(
     <p>Card content</p>
     <p>Card content</p>
     <p>Card content</p>
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````
 
 <style>

components/card/demo/border-less.md

@@ -23,6 +23,6 @@ ReactDOM.render(
       <p>Card content</p>
       <p>Card content</p>
     </Card>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/card/demo/flexible-content.md

@@ -16,6 +16,7 @@ You can use `Card.Meta` to support more flexible content.
 
 ````jsx
 import { Card } from 'antd';
+
 const { Meta } = Card;
 
 ReactDOM.render(
@@ -28,6 +29,6 @@ ReactDOM.render(
       title="Europe Street beat"
       description="www.instagram.com"
     />
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````

components/card/demo/grid-card.md

@@ -30,6 +30,6 @@ ReactDOM.render(
     <Card.Grid style={gridStyle}>Content</Card.Grid>
     <Card.Grid style={gridStyle}>Content</Card.Grid>
     <Card.Grid style={gridStyle}>Content</Card.Grid>
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````

components/card/demo/in-column.md

@@ -29,6 +29,6 @@ ReactDOM.render(
         <Card title="Card title" bordered={false}>Card content</Card>
       </Col>
     </Row>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/card/demo/inner.md

@@ -43,6 +43,6 @@ ReactDOM.render(
     >
       Inner Card content
     </Card>
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````

components/card/demo/loading.md

@@ -38,6 +38,6 @@ class LoadingCard extends React.Component {
 }
 
 ReactDOM.render(
-  <LoadingCard />
-, mountNode);
+  <LoadingCard />,
+  mountNode);
 ````

components/card/demo/meta.md

@@ -15,6 +15,7 @@ A Card that supports `cover`, `avatar`, `title` and `description`.
 
 ````jsx
 import { Card, Icon, Avatar } from 'antd';
+
 const { Meta } = Card;
 
 ReactDOM.render(
@@ -28,6 +29,6 @@ ReactDOM.render(
       title="Card title"
       description="This is the description"
     />
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````

components/card/demo/simple.md

@@ -21,6 +21,6 @@ ReactDOM.render(
     <p>Card content</p>
     <p>Card content</p>
     <p>Card content</p>
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````

components/card/demo/tabs.md

@@ -51,10 +51,12 @@ class TabsCard extends React.Component {
     key: 'tab1',
     noTitleKey: 'app',
   }
+
   onTabChange = (key, type) => {
     console.log(key, type);
     this.setState({ [type]: key });
   }
+
   render() {
     return (
       <div>
@@ -82,6 +84,6 @@ class TabsCard extends React.Component {
 }
 
 ReactDOM.render(
-  <TabsCard />
-, mountNode);
+  <TabsCard />,
+  mountNode);
 ````

components/carousel/demo/autoplay.md

@@ -22,8 +22,8 @@ ReactDOM.render(
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
+  </Carousel>,
+  mountNode);
 ````
 
 ````css

components/carousel/demo/basic.md

@@ -26,8 +26,8 @@ ReactDOM.render(
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
+  </Carousel>,
+  mountNode);
 ````
 
 ````css

components/carousel/demo/fade.md

@@ -22,8 +22,8 @@ ReactDOM.render(
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
+  </Carousel>,
+  mountNode);
 ````
 
 ````css

components/carousel/demo/vertical.md

@@ -22,8 +22,8 @@ ReactDOM.render(
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
+  </Carousel>,
+  mountNode);
 ````
 
 ````css

components/cascader/demo/basic.md

@@ -45,6 +45,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader options={options} onChange={onChange} placeholder="Please select" />
-, mountNode);
+  <Cascader options={options} onChange={onChange} placeholder="Please select" />,
+  mountNode);
 ````

components/cascader/demo/change-on-select.md

@@ -45,6 +45,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader options={options} onChange={onChange} changeOnSelect />
-, mountNode);
+  <Cascader options={options} onChange={onChange} changeOnSelect />,
+  mountNode);
 ````

components/cascader/demo/custom-render.md

@@ -65,6 +65,6 @@ ReactDOM.render(
     defaultValue={['zhejiang', 'hangzhou', 'xihu']}
     displayRender={displayRender}
     style={{ width: '100%' }}
-  />
-, mountNode);
+  />,
+  mountNode);
 ````

components/cascader/demo/custom-trigger.md

@@ -42,6 +42,7 @@ class CitySwitcher extends React.Component {
       text: selectedOptions.map(o => o.label).join(', '),
     });
   }
+
   render() {
     return (
       <span>

components/cascader/demo/default-value.md

@@ -45,6 +45,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />
-, mountNode);
+  <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />,
+  mountNode);
 ````

components/cascader/demo/disabled-option.md

@@ -46,6 +46,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader options={options} onChange={onChange} />
-, mountNode);
+  <Cascader options={options} onChange={onChange} />,
+  mountNode);
 ````

components/cascader/demo/fileds-name.md

@@ -45,6 +45,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader filedNames={{ label: 'name', value: 'code', children: 'items' }} options={options} onChange={onChange} placeholder="Please select" />
-, mountNode);
+  <Cascader filedNames={{ label: 'name', value: 'code', children: 'items' }} options={options} onChange={onChange} placeholder="Please select" />,
+  mountNode);
 ````

components/cascader/demo/hover.md

@@ -55,6 +55,6 @@ ReactDOM.render(
     expandTrigger="hover"
     displayRender={displayRender}
     onChange={onChange}
-  />
-, mountNode);
+  />,
+  mountNode);
 ````

components/cascader/demo/lazy.md

@@ -34,9 +34,11 @@ class LazyOptions extends React.Component {
   state = {
     options,
   };
+
   onChange = (value, selectedOptions) => {
     console.log(value, selectedOptions);
   }
+
   loadData = (selectedOptions) => {
     const targetOption = selectedOptions[selectedOptions.length - 1];
     targetOption.loading = true;
@@ -56,6 +58,7 @@ class LazyOptions extends React.Component {
       });
     }, 1000);
   }
+
   render() {
     return (
       <Cascader

components/cascader/demo/size.md

@@ -49,6 +49,6 @@ ReactDOM.render(
     <Cascader size="large" options={options} onChange={onChange} /><br /><br />
     <Cascader options={options} onChange={onChange} /><br /><br />
     <Cascader size="small" options={options} onChange={onChange} /><br /><br />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/checkbox/demo/basic.md

@@ -21,6 +21,6 @@ function onChange(e) {
 }
 
 ReactDOM.render(
-  <Checkbox onChange={onChange}>Checkbox</Checkbox>
-, mountNode);
+  <Checkbox onChange={onChange}>Checkbox</Checkbox>,
+  mountNode);
 ````

components/checkbox/demo/check-all.md

@@ -15,6 +15,7 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
 
 ````jsx
 import { Checkbox } from 'antd';
+
 const CheckboxGroup = Checkbox.Group;
 
 const plainOptions = ['Apple', 'Pear', 'Orange'];
@@ -26,6 +27,7 @@ class App extends React.Component {
     indeterminate: true,
     checkAll: false,
   };
+
   render() {
     return (
       <div>
@@ -43,6 +45,7 @@ class App extends React.Component {
       </div>
     );
   }
+
   onChange = (checkedList) => {
     this.setState({
       checkedList,
@@ -50,6 +53,7 @@ class App extends React.Component {
       checkAll: checkedList.length === plainOptions.length,
     });
   }
+
   onCheckAllChange = (e) => {
     this.setState({
       checkedList: e.target.checked ? plainOptions : [],

components/checkbox/demo/controller.md

@@ -21,6 +21,7 @@ class App extends React.Component {
     checked: true,
     disabled: false,
   };
+
   render() {
     const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;
     return (
@@ -54,12 +55,15 @@ class App extends React.Component {
       </div>
     );
   }
+
   toggleChecked = () => {
     this.setState({ checked: !this.state.checked });
   }
+
   toggleDisable = () => {
     this.setState({ disabled: !this.state.disabled });
   }
+
   onChange = (e) => {
     console.log('checked = ', e.target.checked);
     this.setState({

components/checkbox/demo/disabled.md

@@ -21,6 +21,6 @@ ReactDOM.render(
     <Checkbox defaultChecked={false} disabled />
     <br />
     <Checkbox defaultChecked disabled />
-  </div>
-  , mountNode);
+  </div>,
+  mountNode);
 ````

components/checkbox/demo/group.md

@@ -15,6 +15,7 @@ Generate a group of checkboxes from an array.
 
 ````jsx
 import { Checkbox } from 'antd';
+
 const CheckboxGroup = Checkbox.Group;
 
 function onChange(checkedValues) {
@@ -40,6 +41,6 @@ ReactDOM.render(
     <CheckboxGroup options={options} defaultValue={['Pear']} onChange={onChange} />
     <br /><br />
     <CheckboxGroup options={optionsWithDisabled} disabled defaultValue={['Apple']} onChange={onChange} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/collapse/demo/accordion.md

@@ -15,6 +15,7 @@ Accordion mode, only one panel can be expanded at a time. The first panel will b
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 const text = `
@@ -34,6 +35,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3">
       <p>{text}</p>
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````

components/collapse/demo/basic.md

@@ -15,6 +15,7 @@ More than one panel can be expanded at a time, the first panel is initialized to
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 function callback(key) {
@@ -38,8 +39,8 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3" disabled>
       <p>{text}</p>
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````
 
 <style>

components/collapse/demo/borderless.md

@@ -15,6 +15,7 @@ A borderless style of Collapse.
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 const text = (
@@ -36,6 +37,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3">
       {text}
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````

components/collapse/demo/custom.md

@@ -15,6 +15,7 @@ Customize the background, border and margin styles for each panel.
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 const text = `
@@ -42,6 +43,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3" style={customPanelStyle}>
       <p>{text}</p>
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````

components/collapse/demo/mix.md

@@ -15,6 +15,7 @@ title:
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 function callback(key) {
@@ -42,6 +43,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3">
       <p>{text}</p>
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````

components/collapse/demo/noarrow.md

@@ -15,6 +15,7 @@ You can disable showing arrow icon by passing `showArrow={false}` to `CollapsePa
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 function callback(key) {
@@ -35,6 +36,6 @@ ReactDOM.render(
     <Panel showArrow={false} header="This is panel header with no arrow icon" key="2">
       <p>{text}</p>
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````

components/date-picker/demo/basic.md

@@ -15,6 +15,7 @@ Basic use case. Users can select or input a date in panel.
 
 ````jsx
 import { DatePicker } from 'antd';
+
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
 function onChange(date, dateString) {
@@ -30,6 +31,6 @@ ReactDOM.render(
     <RangePicker onChange={onChange} />
     <br />
     <WeekPicker onChange={onChange} placeholder="Select week" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/date-picker/demo/date-render.md

@@ -15,6 +15,7 @@ We can customize the rendering of date cells in the calendar by providing a `dat
 
 ````jsx
 import { DatePicker } from 'antd';
+
 const { RangePicker } = DatePicker;
 
 ReactDOM.render(
@@ -47,6 +48,6 @@ ReactDOM.render(
         );
       }}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/date-picker/demo/disabled-date.md

@@ -16,6 +16,7 @@ Disabled part of dates and time by `disabledDate` and `disabledTime` respectivel
 ````jsx
 import moment from 'moment';
 import { DatePicker } from 'antd';
+
 const { MonthPicker, RangePicker } = DatePicker;
 
 function range(start, end) {

components/date-picker/demo/disabled.md

@@ -16,6 +16,7 @@ A disabled state of the `DatePicker`.
 ````jsx
 import { DatePicker } from 'antd';
 import moment from 'moment';
+
 const { MonthPicker, RangePicker } = DatePicker;
 
 const dateFormat = 'YYYY-MM-DD';
@@ -29,6 +30,6 @@ ReactDOM.render(
       defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]}
       disabled
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/date-picker/demo/extra-footer.md

@@ -15,6 +15,7 @@ Render extra footer in panel for customized requirements.
 
 ````jsx
 import { DatePicker } from 'antd';
+
 const { RangePicker, MonthPicker } = DatePicker;
 
 ReactDOM.render(
@@ -24,6 +25,6 @@ ReactDOM.render(
     <RangePicker renderExtraFooter={() => 'extra footer'} />
     <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
     <MonthPicker renderExtraFooter={() => 'extra footer'} placeholder="Select month" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/date-picker/demo/format.md

@@ -16,6 +16,7 @@ We can set the date format by `format`.
 ````jsx
 import { DatePicker } from 'antd';
 import moment from 'moment';
+
 const { MonthPicker, RangePicker } = DatePicker;
 
 const dateFormat = 'YYYY/MM/DD';
@@ -30,6 +31,6 @@ ReactDOM.render(
       defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
       format={dateFormat}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/date-picker/demo/mode.md

@@ -15,6 +15,7 @@ Determing which panel to show with `mode` and `onPanelChange`.
 
 ````jsx
 import { DatePicker } from 'antd';
+
 const { RangePicker } = DatePicker;
 
 class ControlledDatePicker extends React.Component {
@@ -77,6 +78,6 @@ ReactDOM.render(
     <ControlledDatePicker />
     <br />
     <ControlledRangePicker />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/date-picker/demo/presetted-ranges.md

@@ -16,6 +16,7 @@ We can set presetted ranges to RangePicker to improve user experience.
 ````jsx
 import { DatePicker } from 'antd';
 import moment from 'moment';
+
 const RangePicker = DatePicker.RangePicker;
 
 function onChange(dates, dateStrings) {

components/date-picker/demo/size.md

@@ -16,6 +16,7 @@ The input box comes in three sizes. `default` will be used if `size` is omitted.
 
 ````jsx
 import { DatePicker, Radio } from 'antd';
+
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
 class PickerSizesDemo extends React.Component {

components/date-picker/demo/time.md

@@ -15,6 +15,7 @@ This property provide an additional time selection. When `showTime` is an Object
 
 ````jsx
 import { DatePicker } from 'antd';
+
 const { RangePicker } = DatePicker;
 
 function onChange(value, dateString) {
@@ -43,6 +44,6 @@ ReactDOM.render(
       onChange={onChange}
       onOk={onOk}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/divider/demo/horizontal.md

@@ -25,6 +25,6 @@ ReactDOM.render(
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
     <Divider dashed />
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/divider/demo/orientation.md

@@ -22,6 +22,6 @@ ReactDOM.render(
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
     <Divider orientation="right">Right Text</Divider>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/divider/demo/vertical.md

@@ -23,6 +23,6 @@ ReactDOM.render(
     <a href="#">Link</a>
     <Divider type="vertical" />
     <a href="#">Link</a>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/dropdown/demo/basic.md

@@ -35,6 +35,6 @@ ReactDOM.render(
     <a className="ant-dropdown-link" href="#">
       Hover me <Icon type="down" />
     </a>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````

components/dropdown/demo/context-menu.md

@@ -27,6 +27,6 @@ const menu = (
 ReactDOM.render(
   <Dropdown overlay={menu} trigger={['contextMenu']}>
     <span style={{ userSelect: 'none' }}>Right Click on Me</span>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````

components/dropdown/demo/dropdown-button.md

@@ -52,6 +52,6 @@ ReactDOM.render(
         Button <Icon type="down" />
       </Button>
     </Dropdown>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````

components/dropdown/demo/event.md

@@ -15,6 +15,7 @@ An event will be triggered when you click menu items, in which you can make diff
 
 ````jsx
 import { Menu, Dropdown, Icon, message } from 'antd';
+
 const onClick = function ({ key }) {
   message.info(`Click on item ${key}`);
 };
@@ -32,6 +33,6 @@ ReactDOM.render(
     <a className="ant-dropdown-link" href="#">
       Hover me, Click menu item <Icon type="down" />
     </a>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````

components/dropdown/demo/item.md

@@ -34,6 +34,6 @@ ReactDOM.render(
     <a className="ant-dropdown-link" href="#">
       Hover me <Icon type="down" />
     </a>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````

components/dropdown/demo/overlay-visible.md

@@ -20,14 +20,17 @@ class OverlayVisible extends React.Component {
   state = {
     visible: false,
   };
+
   handleMenuClick = (e) => {
     if (e.key === '3') {
       this.setState({ visible: false });
     }
   }
+
   handleVisibleChange = (flag) => {
     this.setState({ visible: flag });
   }
+
   render() {
     const menu = (
       <Menu onClick={this.handleMenuClick}>

components/dropdown/demo/placement.md

@@ -51,8 +51,8 @@ ReactDOM.render(
     <Dropdown overlay={menu} placement="topRight">
       <Button>topRight</Button>
     </Dropdown>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 ````css

components/dropdown/demo/sub-menu.md

@@ -15,6 +15,7 @@ The menu has multiple levels.
 
 ````jsx
 import { Menu, Dropdown, Icon } from 'antd';
+
 const SubMenu = Menu.SubMenu;
 
 const menu = (
@@ -37,6 +38,6 @@ ReactDOM.render(
     <a className="ant-dropdown-link" href="#">
       Cascading menu <Icon type="down" />
     </a>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````

components/dropdown/demo/trigger.md

@@ -34,6 +34,6 @@ ReactDOM.render(
     <a className="ant-dropdown-link" href="#">
       Click me <Icon type="down" />
     </a>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````

components/form/demo/advanced-search.md

@@ -20,6 +20,7 @@ Because the width of label is not fixed, you may need to adjust it by customizin
 
 ````jsx
 import { Form, Row, Col, Input, Button, Icon } from 'antd';
+
 const FormItem = Form.Item;
 
 class AdvancedSearchForm extends React.Component {

components/form/demo/coordinated.md

@@ -15,6 +15,7 @@ Use `setFieldsValue` to set other control's value programmaticly.
 
 ````jsx
 import { Form, Select, Input, Button } from 'antd';
+
 const FormItem = Form.Item;
 const Option = Select.Option;
 
@@ -27,12 +28,14 @@ class App extends React.Component {
       }
     });
   }
+
   handleSelectChange = (value) => {
     console.log(value);
     this.props.form.setFieldsValue({
       note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
     });
   }
+
   render() {
     const { getFieldDecorator } = this.props.form;
     return (

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

@@ -21,6 +21,7 @@ Customized or third-party form controls can be used in Form, too. Controls must
 
 ````jsx
 import { Form, Input, Select, Button } from 'antd';
+
 const FormItem = Form.Item;
 const Option = Select.Option;
 
@@ -34,6 +35,7 @@ class PriceInput extends React.Component {
       currency: value.currency || 'rmb',
     };
   }
+
   componentWillReceiveProps(nextProps) {
     // Should be a controlled component.
     if ('value' in nextProps) {
@@ -41,6 +43,7 @@ class PriceInput extends React.Component {
       this.setState(value);
     }
   }
+
   handleNumberChange = (e) => {
     const number = parseInt(e.target.value || 0, 10);
     if (isNaN(number)) {
@@ -51,12 +54,14 @@ class PriceInput extends React.Component {
     }
     this.triggerChange({ number });
   }
+
   handleCurrencyChange = (currency) => {
     if (!('value' in this.props)) {
       this.setState({ currency });
     }
     this.triggerChange({ currency });
   }
+
   triggerChange = (changedValue) => {
     // Should provide an event to pass value to Form.
     const onChange = this.props.onChange;
@@ -64,6 +69,7 @@ class PriceInput extends React.Component {
       onChange(Object.assign({}, this.state, changedValue));
     }
   }
+
   render() {
     const { size } = this.props;
     const state = this.state;
@@ -99,6 +105,7 @@ class Demo extends React.Component {
       }
     });
   }
+
   checkPrice = (rule, value, callback) => {
     if (value.number > 0) {
       callback();
@@ -106,6 +113,7 @@ class Demo extends React.Component {
     }
     callback('Price must greater than zero!');
   }
+
   render() {
     const { getFieldDecorator } = this.props.form;
     return (

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

@@ -15,6 +15,7 @@ Add or remove form items dynamically.
 
 ````jsx
 import { Form, Input, Icon, Button } from 'antd';
+
 const FormItem = Form.Item;
 
 let uuid = 0;