Merge branch 'master' into feature-3.7.0

2025-06-07 17:44:35 +08:00 · 2018-06-25 11:44:35 +08:00 · 2018-06-25 11:44:35 +08:00 · b374297ca6
commit b374297ca6
parent a614a525c4 aa580beb8b
106 changed files with 412 additions and 281 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -26,6 +26,8 @@ const eslintrc = {
    'react/sort-comp': 0,
    'react/prop-types': 0,
    'react/jsx-first-prop-new-line': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'react/forbid-prop-types': 0,
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
    'import/extensions': 0,
    'import/no-unresolved': 0,
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,17 @@ timeline: true

 ---

+## 3.6.4
+
+`2018-06-23`
+
+- 🐞 Fixed `Steps` theme `@process-icon-color`. [#10973](https://github.com/ant-design/ant-design/issues/10973)
+- 🐞 Fixed style of RangePicker with preset ranges. [#10986](https://github.com/ant-design/ant-design/issues/10986)
+- 🐞 Fixed `Dropdown` non-boolean attribute warning. [#7798](https://github.com/ant-design/ant-design/issues/7798)
+- TypeScript
+  - 🌟 Add `Tree` prop `className` definition. [#10950](https://github.com/ant-design/ant-design/issues/10950)
+  - 🌟 Add `Tree` prop `selectable` definition. [3fb478e](https://github.com/ant-design/ant-design/commit/3fb478e743f3bad23dc300f501df11e5423468ba)
+
 ## 3.6.3

 `2018-06-17`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,18 @@ timeline: true

 ---

+## 3.6.4
+
+`2018-06-23`
+
+- 🐞 修复 `Steps` 组件的 `@process-icon-color` 样式定义。[#10973](https://github.com/ant-design/ant-design/issues/10973)
+- 🐞 修复 `RangePicker` 组件使用预置范围时的样式问题。[#10986]
+(https://github.com/ant-design/ant-design/issues/10986)
+- 🐞 修复 `Dropdown` 组件可能报出的 `non-boolean attribute` 的警告。[#7798](https://github.com/ant-design/ant-design/issues/7798)
+- TypeScript
+  - 🌟 给 `Tree` 组件添加 `className` 的定义。[#10950](https://github.com/ant-design/ant-design/issues/10950)
+  - 🌟 给 `Tree` 组件添加 `selectable` 的定义。[3fb478e](https://github.com/ant-design/ant-design/commit/3fb478e743f3bad23dc300f501df11e5423468ba)
+
 ## 3.6.3

 `2018-06-17`
--- a/components/affix/tests/Affix.test.js
+++ b/components/affix/tests/Affix.test.js
@ -11,9 +11,11 @@ class AffixMounter extends React.Component {
      events[event] = cb;
    });
  }
+
  getTarget = () => {
    return this.container;
  }
+
  render() {
    return (
      <div
@ -35,7 +37,7 @@ class AffixMounter extends React.Component {
            ref={ele => this.affix = ele}
            {...this.props}
          >
-            <Button type="primary" >
+            <Button type="primary">
              Fixed at the top of container
            </Button>
          </Affix>
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@ -20,8 +20,8 @@ Alert component for feedback.
 | closable | Whether Alert can be closed | boolean | - |
 | closeText | Close text to show | string\|ReactNode | - |
 | description | Additional content of Alert | string\|ReactNode | - |
+| iconType | Icon type, effective when `showIcon` is `true` | string | - |
 | message | Content of Alert | string\|ReactNode | - |
 | showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
-| iconType | Icon type, effective when `showIcon` is `true` | string | - |
 | type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
 | onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@ -21,8 +21,8 @@ title: Alert
 | closable | 默认不显示关闭按钮 | boolean | 无 |
 | closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
 | description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
+| iconType | 自定义图标类型，`showIcon` 为 `true` 时有效 | string | - |
 | message | 警告提示内容 | string\|ReactNode | 无 |
 | showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
-| iconType | 自定义图标类型，`showIcon` 为 `true` 时有效 | string | - |
 | type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
 | onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@ -19,7 +19,7 @@ For displaying anchor hyperlinks on page and jumping between them.
 | -------- | ----------- | ---- | ------- |
 | affix | Fixed mode of Anchor | boolean | true |
 | bounds | Bounding distance of anchor area | number | 5(px) |
-| getContainer | Scrolling container | () => HTMLElement | () => window  |
+| getContainer | Scrolling container | () => HTMLElement | () => window |
 | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
 | showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -33,7 +33,9 @@ const dataSource = ['12345', '23456', '34567'];
 | optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
 | placeholder | placeholder of input | string | - |
 | value | selected option | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | - |
+| onBlur | Called when leaving the component. | function() | - |
 | onChange | Called when select an option or input value change, or value of input is changed | function(value) | - |
+| onFocus | Called when entering the component | function() | - |
 | onSearch | Called when searching items. | function(value) | - |
 | onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |

--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -34,7 +34,9 @@ const dataSource = ['12345', '23456', '34567'];
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
 | placeholder | 输入框提示 | string | - |
 | value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | 无 |
+| onBlur | 获取焦点时的回调 | function() | - |
 | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
+| onFocus | 失去焦点时的回调 | function() | - |
 | onSearch | 搜索补全项的时候调用 | function(value) | 无 |
 | onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |

--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@ -25,7 +25,7 @@ title: Badge

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number\|ReactNode  |  |
+| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number\|ReactNode |  |
 | dot | 不展示数字，只有一个小红点 | boolean | false |
 | offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - |
 | overflowCount | 展示封顶的数字值 | number | 99 |
--- a/components/button/tests/index.test.js
+++ b/components/button/tests/index.test.js
@ -44,7 +44,7 @@ describe('Button', () => {
  });

  it('renders Chinese characters correctly in HOC', () => {
-    const Text = props => <span>{props.children}</span>;
+    const Text = ({ children }) => <span>{children}</span>;
    const wrapper = mount(
      <Button><Text>按钮</Text></Button>
    );
@ -74,11 +74,14 @@ describe('Button', () => {
      state = {
        loading: false,
      };
+
      enterLoading = () => {
        this.setState({ loading: true });
      }
+
      render() {
-        return <Button loading={this.state.loading} onClick={this.enterLoading}>Button</Button>;
+        const { loading } = this.state;
+        return <Button loading={loading} onClick={this.enterLoading}>Button</Button>;
      }
    }
    const wrapper = mount(
@ -94,11 +97,14 @@ describe('Button', () => {
      state = {
        loading: false,
      };
+
      enterLoading = () => {
        this.setState({ loading: { delay: 1000 } });
      }
+
      render() {
-        return <Button loading={this.state.loading} onClick={this.enterLoading}>Button</Button>;
+        const { loading } = this.state;
+        return <Button loading={loading} onClick={this.enterLoading}>Button</Button>;
      }
    }
    const wrapper = mount(
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@ -16,12 +16,12 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.

 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
+| disabled | disabled state of button | boolean | `false` |
 | ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | false |
 | href | redirect url of link button | string | - |
 | htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
 | icon | set the icon of button, see: Icon component | string | - |
 | loading | set the loading status of button | boolean \| { delay: number } | false |
-| disabled | disabled state of button | boolean | `false` |
 | shape | can be set to `circle` or omitted | string | - |
 | size | can be set to `small` `large` or omitted | string | `default` |
 | target | same as target attribute of a, works when href is specified | string | - |
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@ -19,12 +19,12 @@ subtitle: 按钮

 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| disabled | 按钮失效状态 | boolean | `false` |
 | ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false |
 | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |
 | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
 | icon | 设置按钮的图标类型 | string | - |
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
-| disabled | 按钮失效状态 | boolean | `false` |
 | shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | - |
 | size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@ -22,15 +22,15 @@ A card can be used to display content related to a single subject. The content c
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | actions | The action list, shows at the bottom of the Card. | Array<ReactNode> | - |
+| activeTabKey | Current TabPane's key | string | - |
 | bodyStyle | Inline style to apply to the card content | object | - |
 | bordered | Toggles rendering of the border around the card | boolean | `true` |
 | cover | Card cover | ReactNode | - |
+| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set. | string | - |
 | extra | Content to render in the top-right corner of the card | string\|ReactNode | - |
 | hoverable | Lift up when hovering card | boolean | false |
 | loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |
 | tabList | List of TabPane's head. | Array&lt;{key: string, tab: ReactNode}> | - |
-| activeTabKey | Current TabPane's key | string | - |
-| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set. | string | - |
 | title | Card title | string\|ReactNode | - |
 | type | Card style type, can be set to `inner` or not set | string | - |
 | onTabChange | Callback when tab is switched | (key) => void | - |
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@ -23,15 +23,15 @@ cols: 1
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - |
+| activeTabKey | 当前激活页签的 key | string | - |
 | bodyStyle | 内容区域自定义样式 | object | - |
 | bordered | 是否有边框 | boolean | true |
 | cover | 卡片封面 | ReactNode | - |
+| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签 |
 | extra | 卡片右上角的操作区域 | string\|ReactNode | - |
 | hoverable | 鼠标移过时可浮起 | boolean | false |
 | loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
 | tabList | 页签标题列表 | Array&lt;{key: string, tab: ReactNode}> | - |
-| activeTabKey | 当前激活页签的 key | string | - |
-| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签 |
 | title | 卡片标题 | string\|ReactNode | - |
 | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |
 | onTabChange | 页签切换的回调 | (key) => void | - |
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@ -28,6 +28,7 @@ Cascade selection box.
 | disabled | whether disabled select | boolean | false |
 | displayRender | render function of displaying selected options | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
 | expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | 'click' |
+| filedNames | custom field name for label and value and children | object | `{ label: 'label', value: 'value', children: 'children' }` |
 | getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
 | loadData | To load option lazily, and it cannot work with `showSearch` | `(selectedOptions) => void` | - |
 | notFoundContent | Specify content to show when no result matches. | string | 'Not Found' |
@ -42,7 +43,6 @@ Cascade selection box.
 | value | selected value | string\[] | - |
 | onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - |
 | onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - |
-| filedNames | custom field name for label and value and children | object | `{ label: 'label', value: 'value', children: 'children' }` |

 Fields in `showSearch`:

--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@ -29,6 +29,7 @@ subtitle: 级联选择
 | disabled | 禁用 | boolean | false |
 | displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
 | expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' |
+| filedNames | 自定义 options 中 label name children 的字段 | object | `{ label: 'label', value: 'value', children: 'children' }` |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
 | loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | `(selectedOptions) => void` | - |
 | notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
@ -43,7 +44,6 @@ subtitle: 级联选择
 | value | 指定选中项 | string\[] | - |
 | onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - |
 | onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - |
-| filedNames | 自定义 options 中 label name children 的字段 | object | `{ label: 'label', value: 'value', children: 'children' }` |

 `showSearch` 为对象时，其中的字段：

--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@ -42,5 +42,5 @@ Checkbox.

 | Name | Description |
 | ---- | ----------- |
-| focus() | get focus |
 | blur() | remove focus |
+| focus() | get focus |
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@ -43,5 +43,5 @@ title: Checkbox

 | 名称 | 描述 |
 | --- | --- |
-| focus() | 获取焦点 |
 | blur() | 移除焦点 |
+| focus() | 获取焦点 |
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -27,7 +27,7 @@ A content area which can be collapsed and expanded.
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | disabled | If `true`, panel cannot be opened or closed | boolean | `false` |
+| forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean | `false` |
 | header | Title of the panel | string\|ReactNode | - |
 | key | Unique key identifying the panel from among its siblings | string | - |
 | showArrow | If `false`, panel will not show arrow icon | boolean | `true` |
-| forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean | `false` |
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -28,6 +28,6 @@ cols: 1
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |
+| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
 | header | 面板头内容 | string\|ReactNode | 无 |
 | key | 对应 activeKey | string | 无 |
-| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
--- a/components/date-picker/tests/DatePicker.test.js
+++ b/components/date-picker/tests/DatePicker.test.js
@ -78,7 +78,7 @@ describe('DatePicker', () => {
      }

      onChange = (value) => {
-        let cleared = this.state.cleared;
+        let { cleared } = this.state;

        if (cleared) {
          value = moment(moment(value).format('YYYY-MM-DD 12:12:12'));
@ -93,10 +93,11 @@ describe('DatePicker', () => {
      }

      render() {
+        const { value } = this.state;
        return (
          <DatePicker
            showTime
-            value={this.state.value}
+            value={value}
            format="YYYY-MM-DD HH:mm:ss"
            onChange={this.onChange}
          />
--- a/components/date-picker/tests/RangePicker.test.js
+++ b/components/date-picker/tests/RangePicker.test.js
@ -1,7 +1,7 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
 import moment from 'moment';
-import DatePicker from '../';
+import DatePicker from '..';
 import { setMockDate, resetMockDate } from '../../../tests/utils';
 import { selectDate } from './utils';
 import focusTest from '../../../tests/shared/focusTest';
@ -211,8 +211,8 @@ describe('RangePicker', () => {
    selectDate(wrapper, moment('2017-09-18'), 0);
    selectDate(wrapper, moment('2017-10-18'), 1);
    wrapper.find('.ant-calendar-picker-input').simulate('click');
-    expect(() =>
+    expect(() => (
      wrapper.find('.ant-calendar-input').at(1).simulate('change', { target: { value: '2016-01-01' } })
-    ).not.toThrow();
+    )).not.toThrow();
  });
 });
--- a/components/date-picker/tests/other.test.js
+++ b/components/date-picker/tests/other.test.js
@ -1,7 +1,7 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
 import moment from 'moment';
-import DatePicker from '../';
+import DatePicker from '..';

 const { MonthPicker, WeekPicker } = DatePicker;

--- a/components/date-picker/tests/showTime.test.js
+++ b/components/date-picker/tests/showTime.test.js
@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import DatePicker from '../';
+import DatePicker from '..';

 const { RangePicker } = DatePicker;

--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -54,16 +54,16 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | dateRender | custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - |
 | disabled | determine whether the DatePicker is disabled | boolean | false |
 | disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
+| dropdownClassName | to customize the className of the popup calendar | string | - |
 | getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
 | locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
+| mode | picker panel mode | `time|date|month|year` | 'date' |
 | open | open state of picker | boolean | - |
 | placeholder | placeholder of date input | string\|RangePicker\[] | - |
 | popupStyle | to customize the style of the popup calendar | object | {} |
-| dropdownClassName | to customize the className of the popup calendar  | string | - |
 | size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - |
 | style | to customize the style of the input box | object | {} |
 | onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
-| mode | picker panel mode | `time|date|month|year` | 'date' |
 | onPanelChange | callback when picker panel mode is changed | function(value, mode) | - |

 ### Common Methods
@ -116,7 +116,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
 | disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - |
 | format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" |
-| ranges | preseted ranges for quick selection | { \[range: string\]&#x3A; [moment](http://momentjs.com/)\[] } \| () => { \[range: string\]&#x3A; [moment](http://momentjs.com/)\[] } | - |
+| ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| () => { \[range: string]: [moment](http://momentjs.com/)\[] } | - |
 | renderExtraFooter | render extra footer in panel | () => React.ReactNode | - |
 | showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
 | showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -55,12 +55,12 @@ import 'moment/src/locale/zh-cn';
 | dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - |
 | disabled | 禁用 | boolean | false |
 | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
+| dropdownClassName | 额外的弹出日历 className | string | - |
 | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
 | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
 | open | 控制弹层是否展开 | boolean | - |
 | placeholder | 输入框提示文字 | string\|RangePicker\[] | - |
 | popupStyle | 额外的弹出日历样式 | object | {} |
-| dropdownClassName | 额外的弹出日历 className | string | - |
 | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | string | 无 |
 | style | 自定义输入框样式 | object | {} |
 | onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 |
@ -79,6 +79,7 @@ import 'moment/src/locale/zh-cn';
 | defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
 | disabledTime | 不可选择的时间 | function(date) | 无 |
 | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
+| mode | 日期面板的状态 | `time|date|month|year` | 'date' |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
 | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |
@ -86,7 +87,6 @@ import 'moment/src/locale/zh-cn';
 | value | 日期 | [moment](http://momentjs.com/) | 无 |
 | onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | 无 |
 | onOk | 点击确定按钮的回调 | function() | - |
-| mode | 日期面板的状态 | `time|date|month|year` | 'date' |
 | onPanelChange | 日期面板变化时的回调 | function(value, mode) | - |

 ### MonthPicker
@ -116,7 +116,7 @@ import 'moment/src/locale/zh-cn';
 | defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 |
 | disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 |
 | format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
-| ranges       | 预设时间范围快捷选择 | { \[range: string\]&#x3A; [moment](http://momentjs.com/)\[] } \| () => { \[range: string\]&#x3A; [moment](http://momentjs.com/)\[] } | 无 |
+| ranges       | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| () => { \[range: string]: [moment](http://momentjs.com/)\[] } | 无 |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
 | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
--- a/components/date-picker/style/RangePicker.less
+++ b/components/date-picker/style/RangePicker.less
@ -44,7 +44,7 @@
    float: left;
    .@{calendar-prefix-cls} {
      &-time-picker-inner {
-        border-right: 1.5px solid @border-color-split;
+        border-right: 1px solid @border-color-split;
      }
    }
  }
@ -53,7 +53,7 @@
    float: right;
    .@{calendar-prefix-cls} {
      &-time-picker-inner {
-        border-left: 1.5px solid @border-color-split;
+        border-left: 1px solid @border-color-split;
      }
    }
  }
@ -208,10 +208,7 @@
  }

  &-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
-    height: 247px;
-    &-panel {
-      height: 281px;
-    }
+    height: 233px;
  }
 }

--- a/components/divider/index.en-US.md
+++ b/components/divider/index.en-US.md
@ -18,8 +18,8 @@ A divider line separates different content.

 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| dashed | whether line is dashed | boolean | false |
-| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |
-| orientation | position of title inside divider | enum: `left` `right` `center` | `center` |
 | className | className of container | string | - |
+| dashed | whether line is dashed | boolean | false |
+| orientation | position of title inside divider | enum: `left` `right` `center` | `center` |
 | style | style object of container | object | - |
+| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |
--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@ -16,8 +16,8 @@ subtitle: 分割线

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| dashed | 是否虚线 | boolean | false |
-| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` |
-| orientation | 分割线标题的位置 | enum: `left` `right` | `center` |
 | className | 分割线样式类 | string | - |
+| dashed | 是否虚线 | boolean | false |
+| orientation | 分割线标题的位置 | enum: `left` `right` | `center` |
 | style | 分割线样式对象 | object | - |
+| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` |
--- a/components/dropdown/tests/dropdown-button.test.js
+++ b/components/dropdown/tests/dropdown-button.test.js
@ -24,7 +24,7 @@ describe('DropdownButton', () => {
    const dropdownProps = wrapper.find(Dropdown).props();

    Object.keys(props).forEach((key) => {
-      expect(dropdownProps[key]).toBe(props[key]);
+      expect(dropdownProps[key]).toBe(props[key]); // eslint-disable-line
    });
  });

--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@ -63,11 +63,13 @@ export default class Dropdown extends React.Component<DropDownProps, any> {
    // menu cannot be selectable in dropdown defaultly
    // menu should be focusable in dropdown defaultly
    const { selectable = false, focusable = true }  = overlay.props;
-    const fixedModeOverlay = React.cloneElement(overlay, {
-      mode: 'vertical',
-      selectable,
-      focusable,
-    });
+
+    const fixedModeOverlay = typeof overlay.type === 'string'
+      ? overlay : React.cloneElement(overlay, {
+        mode: 'vertical',
+        selectable,
+        focusable,
+      });

    const triggerActions = disabled ? [] : trigger;
    let alignPoint;
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -58,6 +58,17 @@ The following `options` are available:
 | onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) |
 | onValuesChange | A handler while value of any field is changed | (props, changedValues, allValues) => void |

+If you want to get `ref` after `Form.create`, you can use `wrappedComponentRef` provided by `rc-form`，[details can be viewed here](https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140).
+
+```jsx
+class CustomizedForm extends React.Component { ... }
+
+// use wrappedComponentRef
+const EnhancedForm =  Form.create()(CustomizedForm);
+<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
+this.form // => The instance of CustomizedForm
+```
+
 If the form has been decorated by `Form.create` then it has `this.props.form` property. `this.props.form` provides some APIs as follows:

 > Note: Before using `getFieldsValue` `getFieldValue` `setFieldsValue` and so on, please make sure that corresponding field had been registered with `getFieldDecorator`.
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -60,6 +60,17 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
 | onValuesChange | 任一表单域的值发生改变时的回调 | (props, changedValues, allValues) => void |

+经过 `Form.create` 之后如果要拿到 `ref`，可以使用 `rc-form` 提供的 `wrappedComponentRef`，[详细内容可以查看这里](https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140)。
+
+```jsx
+class CustomizedForm extends React.Component { ... }
+
+// use wrappedComponentRef
+const EnhancedForm =  Form.create()(CustomizedForm);
+<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
+this.form // => The instance of CustomizedForm
+```
+
 经过 `Form.create` 包装的组件将会自带 `this.props.form` 属性，`this.props.form` 提供的 API 如下：

 > 注意：使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时，应确保对应的 field 已经用 `getFieldDecorator` 注册过了。
--- a/components/input/tests/Search.test.js
+++ b/components/input/tests/Search.test.js
@ -9,7 +9,7 @@ describe('Input.Search', () => {

  it('should support custom button', () => {
    const wrapper = mount(
-      <Search enterButton={<button>ok</button>} />
+      <Search enterButton={<button type="button">ok</button>} />
    );
    expect(wrapper.render()).toMatchSnapshot();
  });
@ -71,7 +71,7 @@ describe('Input.Search', () => {
  it('should trigger onSearch when click search button of native', () => {
    const onSearch = jest.fn();
    const wrapper = mount(
-      <Search defaultValue="search text" enterButton={<button>antd button</button>} onSearch={onSearch} />
+      <Search defaultValue="search text" enterButton={<button type="button">antd button</button>} onSearch={onSearch} />
    );
    wrapper.find('button').simulate('click');
    expect(onSearch).toHaveBeenCalledTimes(1);
--- a/components/input/tests/snapshots/Search.test.js.snap
+++ b/components/input/tests/snapshots/Search.test.js.snap
@ -34,7 +34,9 @@ exports[`Input.Search should support custom button 1`] = `
  <span
    class="ant-input-suffix"
  >
-    <button>
+    <button
+      type="button"
+    >
      ok
    </button>
  </span>
--- a/components/input/tests/index.test.js
+++ b/components/input/tests/index.test.js
@ -60,10 +60,12 @@ describe('As Form Control', () => {
  it('should be reset when wrapped in form.getFieldDecorator without initialValue', () => {
    class Demo extends React.Component {
      reset = () => {
-        this.props.form.resetFields();
+        const { form } = this.props;
+        form.resetFields();
      }
+
      render() {
-        const { getFieldDecorator } = this.props.form;
+        const { form: { getFieldDecorator } } = this.props;
        return (
          <Form>
            <Form.Item>
@ -72,7 +74,7 @@ describe('As Form Control', () => {
            <Form.Item>
              {getFieldDecorator('textarea')(<Input.TextArea />)}
            </Form.Item>
-            <button onClick={this.reset}>reset</button>
+            <button type="button" onClick={this.reset}>reset</button>
          </Form>
        );
      }
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@ -76,8 +76,8 @@ The wrapper.
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | className | container className | string | - |
-| style | to customize the styles | object | - |
 | hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
+| style | to customize the styles | object | - |

 > APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.

@ -95,6 +95,7 @@ The sidebar.
 | defaultCollapsed | to set the initial status | boolean | false |
 | reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |
 | style | to customize the styles | object | - |
+| theme | color theme of the sidebar | string: `light` `dark` | `dark` |
 | trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - |
 | width | width of the sidebar | number\|string | 200 |
 | onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@ -77,8 +77,8 @@ title: Layout
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | className | 容器 className | string | - |
-| style | 指定样式 | object | - |
 | hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
+| style | 指定样式 | object | - |

 > `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同

@ -96,6 +96,7 @@ title: Layout
 | defaultCollapsed | 是否默认收起 | boolean | false |
 | reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
 | style | 指定样式 | object | - |
+| theme | 主题颜色 | string: `light` `dark` | `dark` |
 | trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
 | width | 宽度 | number\|string | 200 |
 | onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
--- a/components/list/tests/pagination.test.js
+++ b/components/list/tests/pagination.test.js
@ -19,7 +19,7 @@ describe('List.pagination', () => {
        pagination={pagination}
        dataSource={data}
        renderItem={item => (
-          <List.Item key={item.key} >
+          <List.Item key={item.key}>
            {item.name}
          </List.Item>
        )}
--- a/components/list/index.en-US.md
+++ b/components/list/index.en-US.md
@ -23,8 +23,8 @@ A list can be used to display content related to a single subject. The content c
 | header | List header renderer | string\|ReactNode | - |
 | itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |
 | loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/8659)) | false |
-| locale | i18n text including empty text | object | emptyText: 'No Data' <br> |
 | loadMore | Shows a load more content | string\|ReactNode | - |
+| locale | i18n text including empty text | object | emptyText: 'No Data' <br> |
 | pagination | Pagination [config](https://ant.design/components/pagination/), hide it by setting it to false | boolean \| object | false |
 | split | Toggles rendering of the split under the list item | boolean | true |

--- a/components/list/index.zh-CN.md
+++ b/components/list/index.zh-CN.md
@ -24,8 +24,8 @@ cols: 1
 | header | 列表头部 | string\|ReactNode | - |
 | itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - |
 | loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean\|[object](https://ant.design/components/spin-cn/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false |
-| locale | 默认文案设置，目前包括空数据文案 | object | emptyText: '暂无数据' |
 | loadMore | 加载更多 | string\|ReactNode | - |
+| locale | 默认文案设置，目前包括空数据文案 | object | emptyText: '暂无数据' |
 | pagination | 对应的 `pagination` 配置, 设置 `false` 不显示 | boolean\|object | false |
 | size | list 的尺寸 | `default` \| `middle` \| `small` | `default` |
 | split | 是否展示分割线 | boolean | true |
--- a/components/locale-provider/tests/index.test.js
+++ b/components/locale-provider/tests/index.test.js
@ -4,7 +4,7 @@ import { mount } from 'enzyme';
 import moment from 'moment';
 import MockDate from 'mockdate';
 import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
-  Popconfirm, Table, Modal, Select, Transfer } from '../../';
+  Popconfirm, Table, Modal, Select, Transfer } from '../..';
 import enGB from '../en_GB';
 import frFR from '../fr_FR';
 import nlBE from '../nl_BE';
@ -113,6 +113,7 @@ describe('Locale Provider', () => {
          title: 'Hello World!',
        });
      }
+
      render() {
        return null;
      }
@ -142,8 +143,9 @@ describe('Locale Provider', () => {
      }

      render() {
+        const { locale } = this.state;
        return (
-          <LocaleProvider locale={this.state.locale}>
+          <LocaleProvider locale={locale}>
            <div>
              <DatePicker defaultValue={moment()} open />
            </div>
--- a/components/message/tests/index.test.js
+++ b/components/message/tests/index.test.js
@ -103,6 +103,7 @@ describe('message', () => {
      componentDidMount() {
        hide = message.loading('Action in progress..', 0);
      }
+
      render() {
        return <div>test</div>;
      }
@ -123,6 +124,7 @@ describe('message', () => {
        message.loading('Action in progress2..', 0);
        setTimeout(() => message.destroy(), 1000);
      }
+
      render() {
        return <div>test</div>;
      }
--- a/components/message/index.en-US.md
+++ b/components/message/index.en-US.md
@ -35,6 +35,7 @@ Methods for global configuration and destruction are also provided:
 - `message.destroy()`

 `afterClose` can be called in then-able interface:
+
 - `message[level](content, [duration]).then(afterClose)`
 - `message[level](content, [duration], onClose).then(afterClose)`

@ -54,5 +55,5 @@ message.config({
 | -------- | ----------- | ---- | ------- |
 | duration | time before auto-dismiss, in seconds | number | 1.5 |
 | getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |
-| top | distance from top | number | 24 |
 | maxCount | max message show, drop oldest if exceed limit | number | - |
+| top | distance from top | number | 24 |
--- a/components/message/index.zh-CN.md
+++ b/components/message/index.zh-CN.md
@ -56,5 +56,5 @@ message.config({
 | --- | --- | --- | --- |
 | duration | 默认自动关闭延时，单位秒 | number | 3 |
 | getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body |
-| top | 消息距离顶部的位置 | number | 24 |
 | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - |
+| top | 消息距离顶部的位置 | number | 24 |
--- a/components/modal/tests/Modal.test.js
+++ b/components/modal/tests/Modal.test.js
@ -9,22 +9,27 @@ class ModalTester extends React.Component {
    super(props);
    this.state = { visible: false };
  }
+
  componentDidMount() {
    this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state
  }
+
  saveContainer = (container) => {
    this.container = container;
  }
+
  getContainer = () => {
    return this.container;
  }
+
  render() {
+    const { visible } = this.state;
    return (
      <div>
        <div ref={this.saveContainer} />
        <Modal
          {...this.props}
-          visible={this.state.visible}
+          visible={visible}
          getContainer={this.getContainer}
        >
          Here is content of Modal
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@ -65,13 +65,13 @@ The properties of the object are follows:
 | className | className of container | string | - |
 | content | Content | string\|ReactNode | - |
 | iconType | Icon `type` of the Icon component | string | `question-circle` |
+| keyboard | Whether support press esc to close | Boolean | true |
 | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` |
 | okText | Text of the OK button | string | `OK` |
 | okType | Button `type` of the OK button | string | `primary` |
 | title | Title | string\|ReactNode | - |
 | width | Width of the modal dialog | string\|number | 416 |
 | zIndex | The `z-index` of the Modal | Number | 1000 |
-| keyboard | Whether support press esc to close | Boolean | true |
 | onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - |
 | onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - |

--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@ -25,6 +25,7 @@ title: Modal
 | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |
 | footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | string\|ReactNode | 确定取消按钮 |
 | getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body |
+| keyboard | 是否支持键盘esc关闭 | boolean | true |
 | mask | 是否展示遮罩 | Boolean | true |
 | maskClosable | 点击蒙层是否允许关闭 | boolean | true |
 | maskStyle | 遮罩样式 | object | {} |
@ -38,7 +39,6 @@ title: Modal
 | width | 宽度 | string\|number | 520 |
 | wrapClassName | 对话框外层容器的类名 | string | - |
 | zIndex | 设置 Modal 的 `z-index` | Number | 1000 |
-| keyboard | 是否支持键盘esc关闭 | boolean | true |
 | onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
 | onOk | 点击确定回调 | function(e) | 无 |

--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@ -26,6 +26,6 @@ If it will take a long time to complete an operation, you can use `Progress` to
 | strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | number | 10 |
 | strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6 |
 | strokeColor | color of progress bar | string | - |
+| successPercent | segmented success percent, works when `type="line"` | number | 0 |
 | type | to set the type, options: `line` `circle` `dashboard` | string | `line` |
 | width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | number | 132 |
-| successPercent | segmented success percent, works when `type="line"` | number | 0 |
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@ -27,6 +27,6 @@ title: Progress
 | strokeWidth `(type=line)` | 进度条线的宽度，单位 px | number | 10 |
 | strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
 | strokeColor | 进度条的色彩 | string | - |
+| successPercent | 已完成的分段百分比，`type="line"` 时有效 | number | 0 |
 | type | 类型，可选 `line` `circle` `dashboard` | string | line |
 | width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 132 |
-| successPercent | 已完成的分段百分比，`type="line"` 时有效 | number | 0 |
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@ -42,13 +42,13 @@ Select component to select value from options.
 | optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
 | optionLabelProp | Which prop value of option will render as content of select. | string | `value` for `combobox`, `children` for other modes |
 | placeholder | Placeholder of select | string\|ReactNode | - |
+| showArrow | Whether to show the drop-down arrow | boolean | true |
 | showSearch | Whether show search input in single mode. | boolean | false |
-| showArrow | Whether to show the drop-down arrow | boolean |  true |
 | size | Size of Select input. `default` `large` `small` | string | default |
 | tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] |  |
 | value | Current selected option. | string\|number\|string\[]\|number\[] | - |
 | onBlur | Called when blur | function | - |
-| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, option:Option/Array<Option\>) | - |
+| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, option:Option/Array&lt;Option>) | - |
 | onDeselect | Called when a option is deselected, the params are option's value (or key) . only called for multiple or tags, effective in multiple or tags mode only. | function(value, option:Option) | - |
 | onFocus | Called when focus | function | - |
 | onInputKeyDown | Called when key pressed | function | - |
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@ -44,14 +44,14 @@ title: Select
 | optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索 | string | value |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |
 | placeholder | 选择框默认文字 | string | - |
+| showArrow | 是否显示下拉小箭头 | boolean | true |
 | showSearch | 使单选模式可搜索 | boolean | false |
-| showArrow | 是否显示下拉小箭头 | boolean |  true |
 | size | 选择框大小，可选 `large` `small` | string | default |
 | tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配（2.9 之后废弃，请使用 `mode`） | boolean | false |
 | tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] |  |
 | value | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
 | onBlur | 失去焦点的时回调 | function | - |
-| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value, option:Option/Array<Option\>) | - |
+| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value, option:Option/Array&lt;Option>) | - |
 | onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 | function(value，option:Option) | - |
 | onFocus | 获得焦点时回调 | function | - |
 | onMouseEnter | 鼠标移入时回调 | function | - |
--- a/components/steps/demo/step-next.md
+++ b/components/steps/demo/step-next.md
@ -50,20 +50,20 @@ class App extends React.Component {
        <Steps current={current}>
          {steps.map(item => <Step key={item.title} title={item.title} />)}
        </Steps>
-        <div className="steps-content">{steps[this.state.current].content}</div>
+        <div className="steps-content">{steps[current].content}</div>
        <div className="steps-action">
          {
-            this.state.current < steps.length - 1
+            current < steps.length - 1
            &&
            <Button type="primary" onClick={() => this.next()}>Next</Button>
          }
          {
-            this.state.current === steps.length - 1
+            current === steps.length - 1
            &&
            <Button type="primary" onClick={() => message.success('Processing complete!')}>Done</Button>
          }
          {
-            this.state.current > 0
+            current > 0
            &&
            <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
              Previous
--- a/components/steps/style/index.less
+++ b/components/steps/style/index.less
@ -2,7 +2,7 @@
@import "../../style/mixins/index";

@steps-prefix-cls: ~"@{ant-prefix}-steps";
-@process-icon-color: @processing-color;
+@process-icon-color: @primary-color;
@process-title-color: @heading-color;
@process-description-color: @text-color;
@process-tail-color: @border-color-split;
--- a/components/table/tests/Table.filter.test.js
+++ b/components/table/tests/Table.filter.test.js
@ -239,6 +239,7 @@ describe('Table.filter', () => {
      }

      render() {
+        const { filters } = this.state;
        return (
          <Table dataSource={data} onChange={this.handleChange}>
            <Column
@ -249,7 +250,7 @@ describe('Table.filter', () => {
                { text: 'Jack', value: 'Jack' },
                { text: 'Lucy', value: 'Lucy' },
              ]}
-              filteredValue={this.state.filters.name}
+              filteredValue={filters.name}
              onFilter={filterFn}
            />
          </Table>
--- a/components/table/tests/Table.rowSelection.test.js
+++ b/components/table/tests/Table.rowSelection.test.js
@ -306,13 +306,15 @@ describe('Table.rowSelection', () => {
      state = {
        disableName: 'Jack',
      };
+
      render() {
+        const { disableName } = this.state;
        return (
          <Table
            columns={columns}
            dataSource={data}
            rowSelection={{
-              getCheckboxProps: record => ({ disabled: record.name === this.state.disableName }),
+              getCheckboxProps: record => ({ disabled: record.name === disableName }),
            }}
          />
        );
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@ -66,7 +66,7 @@ const columns = [{
 | indentSize | Indent size in pixels of tree data | number | 15 |
 | loading | Loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` |
 | locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> [Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
-| pagination | Pagination [config](#pagination) or [`Pagination`] (/components/pagination/), hide it by setting it to `false` | object |  |
+| pagination | Pagination [config](#pagination) or [`Pagination`](/components/pagination/), hide it by setting it to `false` | object |  |
 | rowClassName | Row's className | Function(record, index):string | - |
 | rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
 | rowSelection | Row selection [config](#rowSelection) | object | null |
@ -107,6 +107,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t

 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
+| align | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' |
 | className | className of this column | string | - |
 | colSpan | Span of this column's title | number |  |
 | dataIndex | Display field of the data record, could be set like `a.b.c` | string | - |
@ -121,7 +122,6 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |
 | key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |
 | render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
-| align | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' |
 | sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - |
 | sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - |
 | title | Title of this column | string\|ReactNode | - |
@ -153,11 +153,11 @@ Properties for row selection.

 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
+| columnWidth | Set the width of the selection column | string\|number | - |
 | fixed | Fixed selection column on the left | boolean | - |
 | getCheckboxProps | Get Checkbox or Radio props | Function(record) | - |
 | hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` |
 | selectedRowKeys | Controlled selected row keys | string\[] | \[] |
-| columnWidth | Set the width of the selection column | string\|number | - |
 | selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[]\|boolean | - |
 | type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` |
 | onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - |
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@ -81,7 +81,6 @@ const columns = [{
 | onHeaderRow | 设置头部行属性 | Function(column, index) | - |
 | onRow | 设置行属性 | Function(record, index) | - |

-
 #### onRow 用法

 适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
@ -109,6 +108,7 @@ const columns = [{

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| align | 设置列内容的对齐方式 | 'left' \| 'right' \| 'center' | 'left' |
 | className | 列的 className | string | - |
 | colSpan | 表头列合并,设置为 0 时，不渲染 | number |  |
 | dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | string | - |
@ -122,7 +122,6 @@ const columns = [{
 | fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |
 | key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - |
 | render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
-| align | 设置列内容的对齐方式 | 'left' \| 'right' \| 'center' | 'left' |
 | sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - |
 | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - |
 | title | 列头显示文字 | string\|ReactNode | - |
@ -154,11 +153,11 @@ const columns = [{

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| columnWidth | 自定义列表选择框宽度 | string\|number | - |
 | fixed | 把选择框列固定在左边 | boolean | - |
 | getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
 | hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false |
 | selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] | \[] |
-| columnWidth | 自定义列表选择框宽度 | string\|number | - |
 | selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object\[]\|boolean | true |
 | type | 多选/单选，`checkbox` or `radio` | string | `checkbox` |
 | onChange | 选中项发生变化的时的回调 | Function(selectedRowKeys, selectedRows) | - |
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@ -27,6 +27,7 @@ Ant Design has 3 types of Tabs for different situations.
 | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` |
 | size | preset tab bar size | `large` \| `default` \| `small` | `default` |
 | tabBarExtraContent | Extra content in tab bar | React.ReactNode | - |
+| tabBarGutter | The gap between tabs | number | - |
 | tabBarStyle | Tab bar style object | object | - |
 | tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |
 | type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |
@ -35,7 +36,6 @@ Ant Design has 3 types of Tabs for different situations.
 | onNextClick | Callback executed when next button is clicked | Function | - |
 | onPrevClick | Callback executed when prev button is clicked | Function | - |
 | onTabClick | Callback executed when tab is clicked | Function | - |
-| tabBarGutter | The gap between tabs | number | - |

 ### Tabs.TabPane

--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@ -30,6 +30,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
 | size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | 'default' |
 | tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 |
+| tabBarGutter | tabs 之间的间隙 | number | 无 |
 | tabBarStyle | tab bar 的样式对象 | object | - |
 | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |
 | type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |
@ -38,7 +39,6 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | onNextClick | next 按钮被点击的回调 | Function | 无 |
 | onPrevClick | prev 按钮被点击的回调 | Function | 无 |
 | onTabClick | tab 被点击的回调 | Function | 无 |
-| tabBarGutter | tabs 之间的间隙 | number | 无 |

 ### Tabs.TabPane

--- a/components/time-picker/tests/snapshots/index.test.js.snap
+++ b/components/time-picker/tests/snapshots/index.test.js.snap
@ -4,7 +4,9 @@ exports[`TimePicker renders addon correctly 1`] = `
 <div
  class="ant-time-picker-panel-addon"
 >
-  <button>
+  <button
+    type="button"
+  >
    Ok
  </button>
 </div>
--- a/components/time-picker/tests/index.test.js
+++ b/components/time-picker/tests/index.test.js
@ -8,7 +8,7 @@ describe('TimePicker', () => {
  focusTest(TimePicker);

  it('renders addon correctly', () => {
-    const addon = () => (<button>Ok</button>);
+    const addon = () => (<button type="button">Ok</button>);
    const wrapper = mount(<TimePicker addon={addon} />);
    const rcTimePicker = wrapper.find(RcTimePicker);
    const addonWrapper = render(rcTimePicker.props().addon());
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@ -39,7 +39,7 @@ import moment from 'moment';
 | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
 | hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
 | hourStep | 小时选项间隔 | number | 1 |
-| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘）| boolean | false |
+| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |
 | minuteStep | 分钟选项间隔 | number | 1 |
 | open | 面板是否打开 | boolean | false |
 | placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
--- a/components/timeline/demo/basic.md
+++ b/components/timeline/demo/basic.md
@ -1,6 +1,6 @@
 ---
 order: 0
-title: 
+title:
  zh-CN: 基本用法
  en-US: Basic
 ---
@ -9,7 +9,7 @@ title:

 基本的时间轴。

-## en-US 
+## en-US

 Basic timeline.

--- a/components/tooltip/tests/tooltip.test.js
+++ b/components/tooltip/tests/tooltip.test.js
@ -14,7 +14,9 @@ describe('Tooltip', () => {
        mouseLeaveDelay={0}
        onVisibleChange={onVisibleChange}
      >
-        <div id="hello">Hello world!</div>
+        <div id="hello">
+          Hello world!
+        </div>
      </Tooltip>
    );

@ -60,7 +62,7 @@ describe('Tooltip', () => {
        mouseLeaveDelay={0}
        onVisibleChange={onVisibleChange}
      >
-        <button disabled>Hello world!</button>
+        <button type="button" disabled>Hello world!</button>
      </Tooltip>
    );

@ -122,7 +124,7 @@ describe('Tooltip', () => {
        mouseEnterDelay={0}
        mouseLeaveDelay={0}
      >
-        <button disabled>Hello world!</button>
+        <button type="button" disabled>Hello world!</button>
      </Tooltip>
    );

@ -143,7 +145,7 @@ describe('Tooltip', () => {
          mouseLeaveDelay={0}
          placement="bottomLeft"
        >
-          <button style={{ width: triggerWidth }}>
+          <button type="button" style={{ width: triggerWidth }}>
            Hello world!
          </button>
        </Tooltip>
@ -160,7 +162,7 @@ describe('Tooltip', () => {
          placement="bottomLeft"
          arrowPointAtCenter
        >
-          <button style={{ width: triggerWidth }}>
+          <button type="button" style={{ width: triggerWidth }}>
            Hello world!
          </button>
        </Tooltip>
--- a/components/transfer/tests/index.test.js
+++ b/components/transfer/tests/index.test.js
@ -214,12 +214,12 @@ describe('Transfer', () => {
  });

  it('should check correctly when there is a search text', () => {
-    const props = { ...listCommonProps };
-    delete props.targetKeys;
-    delete props.selectedKeys;
+    const newProps = { ...listCommonProps };
+    delete newProps.targetKeys;
+    delete newProps.selectedKeys;
    const handleSelectChange = jest.fn();
    const wrapper = mount(
-      <Transfer {...props} showSearch onSelectChange={handleSelectChange} render={item => item.title} />
+      <Transfer {...newProps} showSearch onSelectChange={handleSelectChange} render={item => item.title} />
    );
    wrapper.find(TransferItem).filterWhere(n => n.prop('item').key === 'b').simulate('click');
    expect(handleSelectChange).toHaveBeenLastCalledWith(['b'], []);
--- a/components/transfer/index.en-US.md
+++ b/components/transfer/index.en-US.md
@ -22,15 +22,15 @@ One or more elements can be selected from either column, one click on the proper
 | filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean |  |
 | footer | A function used for rendering the footer. | (props): ReactNode |  |
 | lazy | property of [react-lazy-load](https://github.com/loktar00/react-lazy-load) for lazy rendering items. Turn off it by set to `false`. | object\|boolean | `{ height: 32, offset: 32 }` |
-| style | A custom CSS style used for rendering wrapper element. | object |  |
 | listStyle | A custom CSS style used for rendering the transfer columns. | object |  |
-| operationStyle | A custom CSS style used for rendering the operations column. | object |  |
 | notFoundContent | Text to display when a column is empty. | string\|ReactNode | 'The list is empty' |
 | operations | A set of operations that are sorted from bottom to top. | string\[] | ['>', '<'] |
+| operationStyle | A custom CSS style used for rendering the operations column. | object |  |
 | render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a React element and `value` is for title | Function(record) |  |
 | searchPlaceholder | The hint text of the search box. | string | 'Search here' |
 | selectedKeys | A set of keys of selected items. | string\[] | \[] |
 | showSearch | If included, a search box is shown on each column. | boolean | false |
+| style | A custom CSS style used for rendering wrapper element. | object |  |
 | targetKeys | A set of keys of elements that are listed on the right column. | string\[] | \[] |
 | titles | A set of titles that are sorted from left to right. | string\[] | - |
 | onChange | A callback function that is executed when the transfer between columns is complete. | (targetKeys, direction, moveKeys): void |  |
--- a/components/tree-select/demo/basic.md
+++ b/components/tree-select/demo/basic.md
@ -22,7 +22,7 @@ class Demo extends React.Component {
    value: undefined,
  }
  onChange = (value) => {
-    console.log(arguments);
+    console.log(value);
    this.setState({ value });
  }
  render() {
--- a/components/tree-select/demo/checkable.md
+++ b/components/tree-select/demo/checkable.md
@ -50,7 +50,7 @@ class Demo extends React.Component {
    value: ['0-0-0'],
  }
  onChange = (value) => {
-    console.log('onChange ', value, arguments);
+    console.log('onChange ', value);
    this.setState({ value });
  }
  render() {
--- a/components/tree-select/demo/multiple.md
+++ b/components/tree-select/demo/multiple.md
@ -22,7 +22,7 @@ class Demo extends React.Component {
    value: undefined,
  }
  onChange = (value) => {
-    console.log(arguments);
+    console.log(value);
    this.setState({ value });
  }
  render() {
--- a/components/tree-select/demo/treeData.md
+++ b/components/tree-select/demo/treeData.md
@ -41,7 +41,7 @@ class Demo extends React.Component {
    value: undefined,
  }
  onChange = (value) => {
-    console.log(arguments);
+    console.log(value);
    this.setState({ value });
  }
  render() {
--- a/components/tree/Tree.tsx
+++ b/components/tree/Tree.tsx
@ -24,6 +24,7 @@ export interface AntdTreeNodeAttribute {
  disableCheckbox: boolean;
 }
 export interface AntTreeNodeProps {
+  className?: string;
  disabled?: boolean;
  disableCheckbox?: boolean;
  title?: string | React.ReactNode;
@ -92,6 +93,7 @@ export interface TreeProps {
  selectedKeys?: string[];
  /** 默认选中的树节点 */
  defaultSelectedKeys?: string[];
+  selectable?: boolean;
  /** 展开/收起节点时触发 */
  onExpand?: (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => void | PromiseLike<any>;
  /** 点击复选框触发 */
--- a/components/tree/demo/basic-controlled.md
+++ b/components/tree/demo/basic-controlled.md
@ -61,7 +61,7 @@ class Demo extends React.Component {
    selectedKeys: [],
  }
  onExpand = (expandedKeys) => {
-    console.log('onExpand', arguments);
+    console.log('onExpand', expandedKeys);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    this.setState({
--- a/components/tree/demo/search.md
+++ b/components/tree/demo/search.md
@ -90,7 +90,7 @@ class SearchTree extends React.Component {
  onChange = (e) => {
    const value = e.target.value;
    const expandedKeys = dataList.map((item) => {
-      if (item.key.indexOf(value) > -1) {
+      if (item.title.indexOf(value) > -1) {
        return getParentKey(item.key, gData);
      }
      return null;
@ -104,16 +104,16 @@ class SearchTree extends React.Component {
  render() {
    const { searchValue, expandedKeys, autoExpandParent } = this.state;
    const loop = data => data.map((item) => {
-      const index = item.key.indexOf(searchValue);
-      const beforeStr = item.key.substr(0, index);
-      const afterStr = item.key.substr(index + searchValue.length);
+      const index = item.title.indexOf(searchValue);
+      const beforeStr = item.title.substr(0, index);
+      const afterStr = item.title.substr(index + searchValue.length);
      const title = index > -1 ? (
        <span>
          {beforeStr}
          <span style={{ color: '#f50' }}>{searchValue}</span>
          {afterStr}
        </span>
-      ) : <span>{item.key}</span>;
+      ) : <span>{item.title}</span>;
      if (item.children) {
        return (
          <TreeNode key={item.key} title={title}>
--- a/components/upload/tests/snapshots/uploadlist.test.js.snap
+++ b/components/upload/tests/snapshots/uploadlist.test.js.snap
@ -17,7 +17,9 @@ exports[`Upload List handle error 1`] = `
        style="display: none;"
        type="file"
      />
-      <button>
+      <button
+        type="button"
+      >
        upload
      </button>
    </span>
@ -91,7 +93,9 @@ exports[`Upload List should be uploading when upload a file 1`] = `
        style="display: none;"
        type="file"
      />
-      <button>
+      <button
+        type="button"
+      >
        upload
      </button>
    </span>
@ -165,7 +169,9 @@ exports[`Upload List should be uploading when upload a file 2`] = `
        style="display: none;"
        type="file"
      />
-      <button>
+      <button
+        type="button"
+      >
        upload
      </button>
    </span>
@ -239,7 +245,9 @@ exports[`Upload List should non-image format file preview 1`] = `
        style="display: none;"
        type="file"
      />
-      <button>
+      <button
+        type="button"
+      >
        upload
      </button>
    </span>
--- a/components/upload/tests/upload.test.js
+++ b/components/upload/tests/upload.test.js
@ -16,6 +16,7 @@ describe('Upload', () => {
      componentDidMount() {
        ref = this.refs.input;
      }
+
      render() {
        return (
          <Upload supportServerRender={false}>
@ -32,9 +33,9 @@ describe('Upload', () => {
    const data = jest.fn();
    const props = {
      action: 'http://upload.com',
-      beforeUpload: () => new Promise(resolve =>
+      beforeUpload: () => new Promise(resolve => (
        setTimeout(() => resolve('success'), 100)
-      ),
+      )),
      data,
      onChange: ({ file }) => {
        if (file.status !== 'uploading') {
@ -46,7 +47,7 @@ describe('Upload', () => {

    const wrapper = mount(
      <Upload {...props}>
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );

@ -83,7 +84,7 @@ describe('Upload', () => {

    const wrapper = mount(
      <Upload {...props}>
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );

@ -118,7 +119,7 @@ describe('Upload', () => {

    const wrapper = mount(
      <Upload {...props}>
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );

@ -147,7 +148,7 @@ describe('Upload', () => {

    const wrapper = mount(
      <Upload {...props}>
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );

--- a/components/upload/tests/uploadlist.test.js
+++ b/components/upload/tests/uploadlist.test.js
@ -29,7 +29,7 @@ describe('Upload List', () => {
  it('should use file.thumbUrl for <img /> in priority', () => {
    const wrapper = mount(
      <Upload defaultFileList={fileList} listType="picture">
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );
    fileList.forEach((file, i) => {
@ -57,7 +57,7 @@ describe('Upload List', () => {
    }];
    const wrapper = mount(
      <Upload defaultFileList={list}>
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );
    expect(wrapper.find('.ant-upload-list-item').length).toBe(2);
@ -84,7 +84,7 @@ describe('Upload List', () => {
        onChange={onChange}
        customRequest={successRequest}
      >
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );
    wrapper.find('input').simulate('change', {
@ -110,7 +110,7 @@ describe('Upload List', () => {
        onChange={onChange}
        customRequest={errorRequest}
      >
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );
    wrapper.find('input').simulate('change', {
@ -131,7 +131,7 @@ describe('Upload List', () => {
        onChange={handleChange}
        beforeUpload={() => false}
      >
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );

@ -152,15 +152,14 @@ describe('Upload List', () => {
    let errors;
    class TestForm extends React.Component {
      handleSubmit = () => {
-        const { validateFields } = this.props.form;
+        const { form: { validateFields } } = this.props;
        validateFields((err) => {
          errors = err;
        });
      }

      render() {
-        const { getFieldDecorator } = this.props.form;
-
+        const { form: { getFieldDecorator } } = this.props;
        return (
          <Form onSubmit={this.handleSubmit}>
            <Form.Item>
@ -183,7 +182,7 @@ describe('Upload List', () => {
                <Upload
                  beforeUpload={() => false}
                >
-                  <button>upload</button>
+                  <button type="button">upload</button>
                </Upload>
              )}
            </Form.Item>
@ -216,7 +215,7 @@ describe('Upload List', () => {
        defaultFileList={fileList}
        onPreview={handlePreview}
      >
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );
    wrapper.find('.anticon-eye-o').at(0).simulate('click');
@ -235,7 +234,7 @@ describe('Upload List', () => {
        onRemove={handleRemove}
        onChange={handleChange}
      >
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );
    wrapper.find('.anticon-delete').at(0).simulate('click');
@ -258,7 +257,7 @@ describe('Upload List', () => {
        defaultFileList={newFileList}
        onPreview={handlePreview}
      >
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );
    wrapper.setState({});
@ -332,7 +331,7 @@ describe('Upload List', () => {
        listType="picture"
        defaultFileList={list}
      >
-        <button>upload</button>
+        <button type="button">upload</button>
      </Upload>
    );
    expect(wrapper.render()).toMatchSnapshot();
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "3.6.3",
+  "version": "3.6.4",
  "title": "Ant Design",
  "description": "An enterprise-class UI design language and React-based implementation",
  "homepage": "http://ant.design/",
@ -92,9 +92,9 @@
    "ansi-styles": "^3.2.0",
    "ant-design-palettes": "^1.0.0",
    "antd-theme-generator": "1.0.7",
-    "antd-tools": "^5.1.2",
+    "antd-tools": "^5.1.6",
    "babel-cli": "^6.18.0",
-    "babel-eslint": "^8.1.1",
+    "babel-eslint": "8.2.3",
    "babel-plugin-import": "^1.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.18.0",
@ -118,7 +118,7 @@
    "enzyme-adapter-react-16": "^1.0.0",
    "enzyme-to-json": "^3.1.2",
    "eslint": "^4.8.0",
-    "eslint-config-airbnb": "latest",
+    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-babel": "^5.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
--- a/scripts/sort-api-table.js
+++ b/scripts/sort-api-table.js
@ -55,9 +55,9 @@ function alphabetSort(nodes) {
 function sizeSort(nodes) {
  return nodes.sort((...comparison) => {
    return asciiSort(
-      ...comparison.map(val =>
+      ...comparison.map(val => (
        sizeBreakPoints.indexOf(getCellValue(val).toLowerCase())
-      )
+      ))
    );
  });
 }
--- a/site/bisheng.config.js
+++ b/site/bisheng.config.js
@ -13,9 +13,9 @@ function alertBabelConfig(rules) {
      if (rule.options.plugins.indexOf(replaceLib) === -1) {
        rule.options.plugins.push(replaceLib);
      }
-      rule.options.plugins = rule.options.plugins.filter(plugin =>
+      rule.options.plugins = rule.options.plugins.filter(plugin => (
        !plugin.indexOf || plugin.indexOf('babel-plugin-add-module-exports') === -1
-      );
+      ));
    } else if (rule.use) {
      alertBabelConfig(rule.use);
    }
--- a/site/theme/index.js
+++ b/site/theme/index.js
@ -10,8 +10,8 @@ function pickerGenerator(module) {
  const tester = new RegExp(`^docs/${module}`);
  return (markdownData) => {
    const { filename } = markdownData.meta;
-    if (tester.test(filename) &&
-        !/\/demo$/.test(path.dirname(filename))) {
+    if (tester.test(filename)
+        && !/\/demo$/.test(path.dirname(filename))) {
      return {
        meta: markdownData.meta,
      };
@ -29,8 +29,8 @@ module.exports = {
  pick: {
    components(markdownData) {
      const { filename } = markdownData.meta;
-      if (!/^components/.test(filename) ||
-          /[/\\]demo$/.test(path.dirname(filename))) return;
+      if (!/^components/.test(filename)
+          || /[/\\]demo$/.test(path.dirname(filename))) return;

      return {
        meta: markdownData.meta,
--- a/site/theme/template/Color/ColorBlock.jsx
+++ b/site/theme/template/Color/ColorBlock.jsx
@ -11,10 +11,12 @@ export default class ColorBlock extends Component {
      fontWeight: index === 6 ? 'bold' : 'normal',
    };
  }
+
  onCopied = () => {
    const { color } = this.props;
    message.success(`Copied: ${color}`);
  }
+
  render() {
    const { color, index } = this.props;
    return (
--- a/site/theme/template/Color/ColorPaletteTool.jsx
+++ b/site/theme/template/Color/ColorPaletteTool.jsx
@ -36,24 +36,25 @@ export default class ColorPaletteTool extends Component {
  }

  render() {
+    const { primaryColor } = this.state;
    return (
      <div className="color-palette-horizontal">
        <div className="color-palette-pick">
          <FormattedMessage id="app.docs.color.pick-primary" />
        </div>
        <div className="main-color">
-          <ColorPatterns color={this.state.primaryColor} />
+          <ColorPatterns color={primaryColor} />
        </div>
        <div className="color-palette-picker">
          <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
            <ColorPicker
              type="chrome"
-              color={this.state.primaryColor}
+              color={primaryColor}
              onChange={this.handleChangeColor}
            />
          </span>
          <span className="color-palette-picker-value">
-            {this.state.primaryColor}
+            {primaryColor}
          </span>
          {this.renderColorValidation()}
        </div>
--- a/site/theme/template/Color/ColorPicker.jsx
+++ b/site/theme/template/Color/ColorPicker.jsx
@ -22,34 +22,42 @@ export default class ColorPicker extends Component {
      color: props.color,
    };
  }
+
  componentWillReceiveProps(nextProps) {
    this.setState({ color: nextProps.color });
  }
+
  handleClick = () => {
-    this.setState({ displayColorPicker: !this.state.displayColorPicker });
+    const { displayColorPicker } = this.state;
+    this.setState({ displayColorPicker: !displayColorPicker });
  };
+
  handleClose = () => {
    this.setState({ displayColorPicker: false });
  };
+
  handleChange = (color) => {
+    const { onChange } = this.props;
    this.setState({ color: color.hex });
-    this.props.onChange(color.hex, color);
+    onChange(color.hex, color);
  };
+
  handleChangeComplete = (color) => {
+    const { onChangeComplete } = this.props;
    this.setState({ color: color.hex });
-    this.props.onChangeComplete(color.hex);
+    onChangeComplete(color.hex);
  };
+
  render() {
    const { small, type, position } = this.props;
-
+    const { color, displayColorPicker } = this.state;
    const Picker = pickers[type];
-
    const styles = {
      color: {
        width: small ? '80px' : '120px',
        height: small ? '16px' : '24px',
        borderRadius: '2px',
-        background: this.state.color,
+        background: color,
      },
      swatch: {
        padding: '4px',
@ -86,13 +94,13 @@ export default class ColorPicker extends Component {
        <div style={styles.color} />
      </div>
    );
-    const picker = this.state.displayColorPicker ? (
+    const picker = displayColorPicker ? (
      <div style={styles.popover}>
        <div style={styles.cover} onClick={this.handleClose} />
        <div style={styles.wrapper}>
          <Picker
            {...this.props}
-            color={this.state.color}
+            color={color}
            onChange={this.handleChange}
            onChangeComplete={this.handleChangeComplete}
          />
--- a/site/theme/template/Color/Palette.jsx
+++ b/site/theme/template/Color/Palette.jsx
@ -26,10 +26,10 @@ export default class Palette extends React.Component {
    });
    this.forceUpdate();
  }
+
  render() {
    this.colorNodes = this.colorNodes || {};
-    const { showTitle, direction } = this.props;
-    const { name, description, english, chinese } = this.props.color;
+    const { showTitle, direction, color: { name, description, english, chinese } } = this.props;
    const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette';
    const colors = [];
    const colorName = `${english} / ${chinese}`;
--- a/site/theme/template/Content/Article.jsx
+++ b/site/theme/template/Content/Article.jsx
@ -12,6 +12,7 @@ export default class Article extends React.Component {
  static contextTypes = {
    intl: PropTypes.object.isRequired,
  }
+
  componentDidMount() {
    // Add ga event click
    this.delegation = delegate(this.node, '.resource-card', 'click', (e) => {
@ -21,6 +22,7 @@ export default class Article extends React.Component {
    }, false);
    this.componentDidUpdate();
  }
+
  componentDidUpdate() {
    const links = [...document.querySelectorAll('.outside-link.internal')];
    if (links.length === 0) {
@ -34,12 +36,14 @@ export default class Article extends React.Component {
      }
    });
  }
+
  componentWillUnmount() {
    clearTimeout(this.pingTimer);
    if (this.delegation) {
      this.delegation.destroy();
    }
  }
+
  getArticle(article) {
    const { content } = this.props;
    const { meta } = content;
@ -64,13 +68,13 @@ export default class Article extends React.Component {
      children: <Timeline>{timelineItems}</Timeline>,
    });
  }
+
  render() {
    const { props } = this;
    const { content } = props;
-
    const { meta, description } = content;
    const { title, subtitle, filename } = meta;
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
    const isNotTranslated = locale === 'en-US' && typeof title === 'object';
    return (
      <DocumentTitle title={`${title[locale] || title} - Ant Design`}>
@ -89,26 +93,29 @@ export default class Article extends React.Component {
          <h1>
            {title[locale] || title}
            {
-              !subtitle || locale === 'en-US' ? null :
-              <span className="subtitle">{subtitle}</span>
+              !subtitle || locale === 'en-US'
+                ? null
+                : <span className="subtitle">{subtitle}</span>
            }
            <EditButton title={<FormattedMessage id="app.content.edit-page" />} filename={filename} />
          </h1>
          {
-            !description ? null :
-              props.utils.toReactComponent(
+            !description
+              ? null
+              : props.utils.toReactComponent(
                ['section', { className: 'markdown' }].concat(getChildren(description))
              )
          }
          {
-            (!content.toc || content.toc.length <= 1 || meta.toc === false) ? null :
-            <Affix className="toc-affix" offsetTop={16}>
-              {
-                props.utils.toReactComponent(
-                  ['ul', { className: 'toc' }].concat(getChildren(content.toc))
-                )
-              }
-            </Affix>
+            (!content.toc || content.toc.length <= 1 || meta.toc === false) ? null : (
+              <Affix className="toc-affix" offsetTop={16}>
+                {
+                  props.utils.toReactComponent(
+                    ['ul', { className: 'toc' }].concat(getChildren(content.toc))
+                  )
+                }
+              </Affix>
+            )
          }
          {
            this.getArticle(props.utils.toReactComponent(
--- a/site/theme/template/Content/ComponentDoc.jsx
+++ b/site/theme/template/Content/ComponentDoc.jsx
@ -22,8 +22,9 @@ export default class ComponentDoc extends React.Component {
  }

  handleExpandToggle = () => {
+    const { expandAll } = this.state;
    this.setState({
-      expandAll: !this.state.expandAll,
+      expandAll: !expandAll,
    });
  }

@ -31,15 +32,15 @@ export default class ComponentDoc extends React.Component {
    const { props } = this;
    const { doc, location } = props;
    const { content, meta } = doc;
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
    const demos = Object.keys(props.demos).map(key => props.demos[key]);
-    const expand = this.state.expandAll;
+    const { expandAll: { expand } } = this.state;

    const isSingleCol = meta.cols === 1;
    const leftChildren = [];
    const rightChildren = [];
-    const showedDemo = demos.some(demo => demo.meta.only) ?
-      demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview);
+    const showedDemo = demos.some(demo => demo.meta.only)
+      ? demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview);
    showedDemo.sort((a, b) => a.meta.order - b.meta.order)
      .forEach((demoData, index) => {
        const demoElem = (
@ -109,9 +110,10 @@ export default class ComponentDoc extends React.Component {
          </section>
          <Row gutter={16}>
            <Col span={isSingleCol ? '24' : '12'}
-              className={isSingleCol ?
-                'code-boxes-col-1-1' :
-                'code-boxes-col-2-1'
+              className={
+                isSingleCol
+                  ? 'code-boxes-col-1-1'
+                  : 'code-boxes-col-2-1'
              }
            >
              {leftChildren}
--- a/site/theme/template/Content/Demo.jsx
+++ b/site/theme/template/Content/Demo.jsx
@ -43,9 +43,11 @@ export default class Demo extends React.Component {
  }

  shouldComponentUpdate(nextProps, nextState) {
-    return (this.state.codeExpand || this.props.expand) !== (nextState.codeExpand || nextProps.expand)
-      || this.state.copied !== nextState.copied
-      || this.state.copyTooltipVisible !== nextState.copyTooltipVisible;
+    const { codeExpand, copied, copyTooltipVisible } = this.state;
+    const { expand } = this.props;
+    return (codeExpand || expand) !== (nextState.codeExpand || nextProps.expand)
+      || copied !== nextState.copied
+      || copyTooltipVisible !== nextState.copyTooltipVisible;
  }

  componentDidMount() {
@ -65,7 +67,8 @@ export default class Demo extends React.Component {
  }

  handleCodeExpand = () => {
-    this.setState({ codeExpand: !this.state.codeExpand });
+    const { codeExpand } = this.state;
+    this.setState({ codeExpand: !codeExpand });
  }

  saveAnchor = (anchor) => {
@ -102,6 +105,7 @@ export default class Demo extends React.Component {
      highlightedStyle,
      expand,
    } = props;
+    const { showRiddleButton, copied } = state;
    if (!this.liveDemo) {
      this.liveDemo = meta.iframe
        ? <BrowserFrame><iframe src={src} height={meta.iframe} title="demo" /></BrowserFrame>
@ -112,8 +116,7 @@ export default class Demo extends React.Component {
      'code-box': true,
      expand: codeExpand,
    });
-
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
    const localizedTitle = meta.title[locale] || meta.title;
    const localizeIntro = content[locale] || content;
    const introChildren = props.utils
@ -186,9 +189,9 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
        <section className="code-box-demo">
          {this.liveDemo}
          {
-            style ?
-              <style dangerouslySetInnerHTML={{ __html: style }} /> :
-              null
+            style
+              ? <style dangerouslySetInnerHTML={{ __html: style }} />
+              : null
          }
        </section>
        <section className="code-box-meta markdown">
@ -222,7 +225,7 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
        >
          <div className="highlight">
            <div className="code-box-actions">
-              {this.state.showRiddleButton ? (
+              {showRiddleButton ? (
                <form action="//riddle.alibaba-inc.com/riddles/define" method="POST" target="_blank">
                  <input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
                  <Tooltip title={<FormattedMessage id="app.demo.riddle" />}>
@ -249,11 +252,11 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
                <Tooltip
                  visible={state.copyTooltipVisible}
                  onVisibleChange={this.onCopyTooltipVisibleChange}
-                  title={
+                  title={(
                    <FormattedMessage
-                      id={`app.demo.${state.copied ? 'copied' : 'copy'}`}
+                      id={`app.demo.${copied ? 'copied' : 'copy'}`}
                    />
-                  }
+                  )}
                >
                  <Icon
                    type={(state.copied && state.copyTooltipVisible) ? 'check' : 'copy'}
@ -265,13 +268,14 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
            {props.utils.toReactComponent(highlightedCode)}
          </div>
          {
-            highlightedStyle ?
-              <div key="style" className="highlight">
-                <pre>
-                  <code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
-                </pre>
-              </div> :
-              null
+            highlightedStyle
+              ? (
+                <div key="style" className="highlight">
+                  <pre>
+                    <code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
+                  </pre>
+                </div>
+              ) : null
          }
        </section>
      </section>
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@ -12,18 +12,18 @@ const { SubMenu } = Menu;

 function getActiveMenuItem(props) {
  const { children } = props.params;
-  return (children && children.replace('-cn', '')) ||
-    props.location.pathname.replace(/(^\/|-cn$)/g, '');
+  return (children && children.replace('-cn', ''))
+    || props.location.pathname.replace(/(^\/|-cn$)/g, '');
 }

 function getModuleData(props) {
  const { pathname } = props.location;
-  const moduleName = /^\/?components/.test(pathname) ?
-    'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
-  const moduleData = moduleName === 'components' || moduleName === 'docs/react' ||
-    moduleName === 'changelog' || moduleName === 'changelog-cn' ?
-    [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] :
-    props.picked[moduleName];
+  const moduleName = /^\/?components/.test(pathname)
+    ? 'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
+  const moduleData = moduleName === 'components' || moduleName === 'docs/react'
+    || moduleName === 'changelog' || moduleName === 'changelog-cn'
+    ? [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog]
+    : props.picked[moduleName];
  const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md';
  return moduleData.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix));
 }
@ -58,10 +58,11 @@ export default class MainContent extends React.Component {
  }

  componentDidUpdate(prevProps) {
-    if (!prevProps || prevProps.location.pathname !== this.props.location.pathname) {
+    const { location } = this.props;
+    if (!prevProps || prevProps.location.pathname !== location.pathname) {
      this.bindScroller();
    }
-    if (!prevProps || (!window.location.hash && prevProps && prevProps.location.pathname !== this.props.location.pathname)) {
+    if (!prevProps || (!window.location.hash && prevProps && prevProps.location.pathname !== location.pathname)) {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      return;
@ -130,7 +131,7 @@ export default class MainContent extends React.Component {
  }

  generateMenuItem(isTop, item) {
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
    const key = fileNameToPath(item.filename);
    const title = item.title[locale] || item.title;
    const text = isTop ? title : [
@ -165,10 +166,11 @@ export default class MainContent extends React.Component {

  getMenuItems() {
    const { themeConfig } = this.props;
+    const { intl: { locale } } = this.context;
    const moduleData = getModuleData(this.props);
    const menuItems = utils.getMenuItems(
      moduleData,
-      this.context.intl.locale,
+      locale,
      themeConfig.categoryOrder,
      themeConfig.typeOrder,
    );
@ -221,6 +223,7 @@ export default class MainContent extends React.Component {
  render() {
    const { props } = this;
    const { isMobile } = this.context;
+    const { openKeys } = this.state;
    const activeMenuItem = getActiveMenuItem(props);
    const menuItems = this.getMenuItems();
    const { prev, next } = this.getFooterNav(menuItems, activeMenuItem);
@ -233,7 +236,7 @@ export default class MainContent extends React.Component {
        inlineIndent="40"
        className="aside-container menu-site"
        mode="inline"
-        openKeys={this.state.openKeys}
+        openKeys={openKeys}
        selectedKeys={[activeMenuItem]}
        onOpenChange={this.handleMenuOpenChange}
      >
@ -253,13 +256,12 @@ export default class MainContent extends React.Component {
              <Col xxl={4} xl={5} lg={6} md={24} sm={24} xs={24} className="main-menu">
                {menuChild}
              </Col>
-            )
-          }
+          )}
          <Col xxl={20} xl={19} lg={18} md={24} sm={24} xs={24} className={mainContainerClass}>
            {
-              props.demos ?
-                <ComponentDoc {...props} doc={localizedPageData} demos={props.demos} /> :
-                <Article {...props} content={localizedPageData} />
+              props.demos
+                ? <ComponentDoc {...props} doc={localizedPageData} demos={props.demos} />
+                : <Article {...props} content={localizedPageData} />
            }
          </Col>
        </Row>
@ -275,14 +277,14 @@ export default class MainContent extends React.Component {
          >
            <section className="prev-next-nav">
              {
-                prev ?
-                  React.cloneElement(prev.props.children || prev.children[0], { className: 'prev-page' }) :
-                  null
+                prev
+                  ? React.cloneElement(prev.props.children || prev.children[0], { className: 'prev-page' })
+                  : null
              }
              {
-                next ?
-                  React.cloneElement(next.props.children || next.children[0], { className: 'next-page' }) :
-                  null
+                next
+                  ? React.cloneElement(next.props.children || next.children[0], { className: 'next-page' })
+                  : null
              }
            </section>
          </Col>
--- a/site/theme/template/Content/index.jsx
+++ b/site/theme/template/Content/index.jsx
@ -9,16 +9,16 @@ function isChangelog(pathname) {
 export default collect(async (nextProps) => {
  const { pathname } = nextProps.location;
  const pageDataPath = pathname.replace('-cn', '').split('/');
-  const pageData = isChangelog(pathname) ?
-    nextProps.data.changelog.CHANGELOG :
-    nextProps.utils.get(nextProps.data, pageDataPath);
+  const pageData = isChangelog(pathname)
+    ? nextProps.data.changelog.CHANGELOG
+    : nextProps.utils.get(nextProps.data, pageDataPath);
  if (!pageData) {
    throw 404; // eslint-disable-line no-throw-literal
  }

  const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';
-  const pageDataPromise = typeof pageData === 'function' ?
-    pageData() : (pageData[locale] || pageData.index[locale] || pageData.index)();
+  const pageDataPromise = typeof pageData === 'function'
+    ? pageData() : (pageData[locale] || pageData.index[locale] || pageData.index)();
  const demosFetcher = nextProps.utils.get(nextProps.data, [...pageDataPath, 'demo']);
  if (demosFetcher) {
    const [localizedPageData, demos] = await Promise.all([pageDataPromise, demosFetcher()]);
--- a/site/theme/template/Home/Banner.jsx
+++ b/site/theme/template/Home/Banner.jsx
@ -19,15 +19,18 @@ class Banner extends React.PureComponent {
  static contextTypes = {
    intl: PropTypes.object.isRequired,
  }
+
  static propTypes = {
    className: PropTypes.string,
  }
+
  static defaultProps = {
    className: 'banner',
  }
+
  render() {
    const { className, isMobile } = this.props;
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
    const isZhCN = locale === 'zh-CN';
    return (
      <div className="home-page-wrapper banner-wrapper" id="banner">
--- a/site/theme/template/Home/BannerImage.jsx
+++ b/site/theme/template/Home/BannerImage.jsx
@ -59,7 +59,7 @@ function TweenOneG(props) {

 export default function BannerImage() {
  return (
-    <svg width="482px" height="500px" viewBox="0 0 482 500" >
+    <svg width="482px" height="500px" viewBox="0 0 482 500">
      <defs>
        <path d="M151,55 C129.666667,62.6666667 116,74.3333333 110,90 C104,105.666667 103,118.5 107,128.5 L225.5,96 C219.833333,79 209.666667,67 195,60 C180.333333,53 165.666667,51.3333333 151,55 L137,0 L306.5,6.5 L306.5,156 L227,187.5 L61.5,191 C4.5,175 -12.6666667,147.833333 10,109.5 C32.6666667,71.1666667 75,34.6666667 137,0 L151,55 Z" id="mask" />
      </defs>
@ -122,7 +122,7 @@ export default function BannerImage() {
          </mask>
          <g mask="url(#mask-2)">
            <TweenOneG animation={animate.track} style={{ transformOrigin: '122.7px 58px' }}>
-              <g transform="translate(-16, -52)" >
+              <g transform="translate(-16, -52)">
                <g transform="translate(16, 52)">
                  <path d="M83.1700911,35.9320015 C63.5256194,37.9279025 44.419492,43.1766434 25.8517088,51.6782243 C14.3939956,57.7126276 7.77167019,64.8449292 7.77167019,72.4866248 C7.77167019,94.1920145 61.1993389,111.787709 127.105708,111.787709 C193.012078,111.787709 246.439746,94.1920145 246.439746,72.4866248 C246.439746,55.2822262 212.872939,40.6598106 166.13127,35.3351955" id="line-s" stroke="#0D1A26" strokeWidth="1.35" strokeLinecap="round" transform="translate(127.105708, 73.561453) rotate(-16.000000) translate(-127.105708, -73.561453) " />
                </g>
@ -134,6 +134,6 @@ export default function BannerImage() {
          </g>
        </g>
      </g>
-    </svg >
+    </svg>
  );
 }
--- a/site/theme/template/Home/Page1.jsx
+++ b/site/theme/template/Home/Page1.jsx
@ -124,16 +124,19 @@ export default class Page1 extends React.PureComponent {
  state = {
    hoverKey: null,
  }
+
  onMouseOver = (key) => {
    this.setState({
      hoverKey: key,
    });
  }
+
  onMouseOut = () => {
    this.setState({
      hoverKey: null,
    });
  }
+
  getEnter = (i, e) => {
    const ii = e.index;
    const r = (Math.random() * 2) - 1;
@ -153,6 +156,7 @@ export default class Page1 extends React.PureComponent {
      },
    ];
  };
+
  getSvgChild = child => child.map((item, i) => {
    const props = { ...item.props };
    if (item.type === 'g') {
@ -165,18 +169,22 @@ export default class Page1 extends React.PureComponent {
      });
    }
    return (
-      <g key={i.toString()} >
+      <g key={i.toString()}>
        {React.cloneElement(item, props)}
      </g>
    );
  });
+
  leave = {
    opacity: 0, duration: 300, x: 100, y: 150, ease: 'easeInBack',
  };
+
  render() {
-    const isZhCN = this.props.locale === 'zh-CN';
+    const { locale, isMobile } = this.props;
+    const { hoverKey } = this.state;
+    const isZhCN = locale === 'zh-CN';
    const children = page1Data.map((item, i) => {
-      const isHover = item.nameEn === this.state.hoverKey;
+      const isHover = item.nameEn === hoverKey;
      return (
        <Col key={item.nameEn} md={6} xs={24}>
          <TweenOneGroup
@ -187,7 +195,7 @@ export default class Page1 extends React.PureComponent {
            component="svg"
            resetStyleBool={false}
          >
-            {(this.props.isMobile || isHover) && this.getSvgChild(item.svgBg.props.children)}
+            {(isMobile || isHover) && this.getSvgChild(item.svgBg.props.children)}
          </TweenOneGroup>
          <QueueAnim
            className="page1-block"
@ -200,14 +208,14 @@ export default class Page1 extends React.PureComponent {
            <div className="page1-image">
              <img src={item.img} alt="icon" />
            </div>
-            <h3 >{isZhCN ? item.name : item.nameEn}</h3>
+            <h3>{isZhCN ? item.name : item.nameEn}</h3>
          </QueueAnim>
        </Col>
      );
    });
    return (
      <div className="home-page-wrapper page1">
-        <div className="page" >
+        <div className="page">
          <h2><FormattedMessage id="app.home.design-language" /></h2>
          <ScrollOverPack playScale="0.3">
            <QueueAnim
--- a/site/theme/template/Home/Page2.jsx
+++ b/site/theme/template/Home/Page2.jsx
@ -35,7 +35,7 @@ const page2Data = [

 const svgBgChild = [
  (
-    <svg width="100%" height="100%" viewBox="0 0 1401 1109" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" preserveAspectRatio="xMidYMid slice" >
+    <svg width="100%" height="100%" viewBox="0 0 1401 1109" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" preserveAspectRatio="xMidYMid slice">
      <g transform="translate(-79.000000, -21.000000)">
        <circle id="Oval-13" stroke="none" fill="#EBEDF0" fillRule="evenodd" cx="98.5" cy="98.5" r="98.5" />
        <rect id="Rectangle-33" stroke="none" fill="#EBEDF0" fillRule="evenodd" transform="translate(1261.132034, 1217.132034) rotate(45.000000) translate(-1261.132034, -1217.132034) " x="1111.13203" y="1007.13203" width="300" height="300" rx="1" />
@ -66,8 +66,8 @@ const svgBgChild = [
 ];

 const svgBgChildArray = svgBgChild.map((item, i) => {
-  const { props } = item;
-  return React.cloneElement(item, { children: svgBgToParallax(props.children, i) });
+  const { props: { children } } = item;
+  return React.cloneElement(item, { children: svgBgToParallax(children, i) });
 });
 export default function Page2({ isMobile, locale }) {
  const isZhCN = locale === 'zh-CN';
@ -109,7 +109,7 @@ export default function Page2({ isMobile, locale }) {
  });
  return (
    <div className="home-page-wrapper page2" id="page2">
-      <div className="page" >
+      <div className="page">
        <h2><FormattedMessage id="app.home.solution" /></h2>
        <ScrollOverPack component={Row} className="page2-content" playScale="0.4">
          <QueueAnim
@ -136,10 +136,10 @@ export default function Page2({ isMobile, locale }) {
          </QueueAnim>
        </ScrollOverPack>
      </div>
-      <div className="parallax-bg bottom" >
+      <div className="parallax-bg bottom">
        {svgBgChildArray[0]}
      </div>
-      <div className="parallax-bg top" >
+      <div className="parallax-bg top">
        {svgBgChildArray[1]}
      </div>
    </div>
--- a/site/theme/template/Home/Page3.jsx
+++ b/site/theme/template/Home/Page3.jsx
@ -63,19 +63,19 @@ export default function Page3({ locale }) {
              <a href={item.link} target="_black">
                {child}
              </a>
-            )
+          )
        }
      </Col>
    );
  });
  return (
    <div className="home-page-wrapper page3" id="page3">
-      <div className="parallax-bg top" >
-        <svg width="1440px" height="557px" viewBox="0 0 1440 557" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" >
+      <div className="parallax-bg top">
+        <svg width="1440px" height="557px" viewBox="0 0 1440 557" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
          {svgChildren}
        </svg>
      </div>
-      <div className="page" >
+      <div className="page">
        <h2><FormattedMessage id="app.home.tool-title" /></h2>
        <ScrollOverPack location="page3">
          <QueueAnim key="queue" component={Row} type="bottom" leaveReverse>
--- a/site/theme/template/Home/index.jsx
+++ b/site/theme/template/Home/index.jsx
@ -61,11 +61,12 @@ class Home extends React.Component {
    intl: PropTypes.object.isRequired,
    isMobile: PropTypes.bool.isRequired,
  }
+
  render() {
    const { isMobile, intl } = this.context;
    const childProps = { ...this.props, isMobile, locale: intl.locale };
    return (
-      <DocumentTitle title={`Ant Design - ${this.props.intl.formatMessage({ id: 'app.home.slogan' })}`}>
+      <DocumentTitle title={`Ant Design - ${intl.formatMessage({ id: 'app.home.slogan' })}`}>
        <div className="main-wrapper">
          <Banner {...childProps} />
          <Page1 {...childProps} />
--- a/site/theme/template/IconSet/CopyableIcon.jsx
+++ b/site/theme/template/IconSet/CopyableIcon.jsx
@ -6,6 +6,7 @@ export default class CopyableIcon extends React.Component {
  state = {
    justCopied: false,
  };
+
  onCopied = () => {
    this.setState({ justCopied: true }, () => {
      setTimeout(() => {
@ -13,12 +14,14 @@ export default class CopyableIcon extends React.Component {
      }, 2000);
    });
  }
+
  render() {
    const { type, isNew } = this.props;
+    const { justCopied } = this.state;
    const text = `<Icon type="${type}" />`;
    return (
      <CopyToClipboard text={text} onCopy={this.onCopied}>
-        <li className={this.state.justCopied ? 'copied' : ''}>
+        <li className={justCopied ? 'copied' : ''}>
          <Icon type={type} />
          <span className="anticon-class">
            <Badge dot={isNew}>
--- a/site/theme/template/Layout/Footer.jsx
+++ b/site/theme/template/Layout/Footer.jsx
@ -25,8 +25,8 @@ class Footer extends React.Component {
    //   1. 点击『知道了』之后不再提示
    //   2. 超过截止日期后不再提示
    if (
-      localStorage.getItem('antd@3.0.0-notification-sent') !== 'true' &&
-        Date.now() < new Date('2017/12/20').getTime()
+      localStorage.getItem('antd@3.0.0-notification-sent') !== 'true'
+        && Date.now() < new Date('2017/12/20').getTime()
    ) {
      this.infoNewVersion();
    }
@ -34,7 +34,7 @@ class Footer extends React.Component {

  handleColorChange = (color) => {
    const changeColor = () => {
-      const { messages } = this.props.intl;
+      const { intl: { messages } } = this.props;
      window.less.modifyVars({
        '@primary-color': color,
      }).then(() => {
@ -59,7 +59,7 @@ class Footer extends React.Component {
  }

  infoNewVersion() {
-    const { messages } = this.props.intl;
+    const { intl: { messages } } = this.props;
    Modal.info({
      title: messages['app.publish.title'],
      content: (
@ -83,6 +83,7 @@ class Footer extends React.Component {
  }

  render() {
+    const { color } = this.state;
    return (
      <footer id="footer">
        <div className="footer-wrap">
@ -262,7 +263,7 @@ class Footer extends React.Component {
                  <ColorPicker
                    type="sketch"
                    small
-                    color={this.state.color}
+                    color={color}
                    position="top"
                    presetColors={[
                      '#F5222D',
--- a/site/theme/template/Layout/Header.jsx
+++ b/site/theme/template/Layout/Header.jsx
@ -84,7 +84,7 @@ export default class Header extends React.Component {
  }

  handleLangChange = () => {
-    const { pathname } = this.props.location;
+    const { location: { pathname } } = this.props;
    const currentProtocol = `${window.location.protocol}//`;
    const currentHref = window.location.href.substr(currentProtocol.length);

@ -113,7 +113,7 @@ export default class Header extends React.Component {
    if (activeMenuItem === 'components' || location.pathname === 'changelog') {
      activeMenuItem = 'docs/react';
    }
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
    const isZhCN = locale === 'zh-CN';

    const headerClassName = classNames({
--- a/Show More
+++ b/Show More