changelog for 2.2.1

feat: add DatePicker[allowClear], close: #3618

.eslintrc.js

@@ -38,6 +38,7 @@ const eslintrc = {
     'react/jsx-indent': 0,
     'jsx-a11y/no-static-element-interactions': 0,
     'jsx-a11y/anchor-has-content': 0,
+    'react/no-danger': 0,
   },
 };
 

.github/ISSUE_TEMPLATE.md

@@ -1,6 +1,14 @@
 <!-- Issue Template -->
 
-<!-- 请按照下列格式报告问题，务必提供复现步骤，否则恕难解决，感谢您的支持。-->
+<!--
+antd 的用法咨询，建议通过以下渠道，官方 issues 目前没有足够精力提供此类咨询服务：
+
+1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)
+2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
+3. [Gitter](https://gitter.im/ant-design/ant-design)
+
+如果是报告 bug，请按照下列格式书写，并务必提供复现步骤，否则恕难解决，感谢您的支持。
+-->
 
 #### 发生问题的环境是：
 
@@ -10,17 +18,17 @@
 - 操作系统及其版本:
 - 浏览器及其版本:
 
-#### 您做了什么？
+#### 您做了什么？请提供尽可能详细的重现步骤。
 
 <!-- 如：引入 antd 了 Button -->
 
-#### 您期待的结果是：
+#### 您期待的结果是:
 
 <!-- 如：像官网一样正常显示 -->
 
-#### 实际上的结果是：
+#### 实际上的结果是:
 
-<!-- 如：样式错位了 -->
+<!-- 如：样式错位了，最好提供截图 -->
 
 #### 可重现的在线演示
 

.gitignore

@@ -29,3 +29,4 @@ elasticsearch-*
 config/base.yaml
 components/**/*.js
 components/**/*.jsx
+/.vscode/

.travis.yml

@@ -3,4 +3,4 @@ sudo: false
 language: node_js
 
 node_js:
-  - "5"
+  - "6"

CHANGELOG.en-US.md

@@ -9,6 +9,111 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
 
 ---
 
+## 2.2.1
+
+`2016-11-02`
+
+* Fix controlled DatePicker[showTime] not working bug. [#3665](https://github.com/ant-design/ant-design/issues/3665)
+
+## 2.2.0
+
+`2016-10-28`
+
+* Supports TypeScript@2.0. [@AlbertZheng](https://github.com/AlbertZheng) [#3358](https://github.com/ant-design/ant-design/issues/3358)
+* Not rely on specific version of React now. [#3627](https://github.com/ant-design/ant-design/pull/3627)
+* Alert supports `className` `style`.
+* DatePicker & MonthPicker & RangePicker allow developers to set whether to show the clear button. [#3618](https://github.com/ant-design/ant-design/issues/3618)
+* Form.Item can generate `validateStatus` & `help` for nested form control automatically. [#3212](https://github.com/ant-design/ant-design/issues/3212)
+* RangePicker can set some hours or minutes or seconds to be not selectable. [#](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date)
+* Switch
+  * The width of Switch will resize automatically, according to `checkedChildren/unCheckedChildren`. [#3380](https://github.com/ant-design/ant-design/issues/3380)
+  * Improve the switch animation.
+* Upload can [customized request](https://github.com/react-component/upload#customrequest) now. [@edgji](https://github.com/edgji)
+* Icon
+  * New icons `bulb` `select` `like-o` `dislike-o`.
+  * Adjust existing icons `loading` `like` `dislike`.
+* Improve the TypeScript definition of Card & DatePicker & Icon & Table. [@infeng](https://github.com/infeng) [3468](https://github.com/ant-design/ant-design/pull/3468) [#3603](https://github.com/ant-design/ant-design/pull/3603) [#3531](https://github.com/ant-design/ant-design/pull/3531)
+
+* Fix Cascader `defaultValue` should work. [#3470](https://github.com/ant-design/ant-design/issues/3470)
+* Fix the alignment of Button & Input & DatePicker & Select. [#3481](https://github.com/ant-design/ant-design/issues/3481)
+* DatePicker
+  * Fix wrong timing of triggering `onChange` while `DatePicker[showTime]` is set. [#3523](https://github.com/ant-design/ant-design/issues/3523)
+* Fix `Dropdown.Button[disabled]` doesn't works for behaviour. [#3535](https://github.com/ant-design/ant-design/issues/3535)
+* Menu
+  * Fix errors in SSR, thanks to  [@xpcode](https://github.com/xpcode) to find the solution. [#2061](https://github.com/ant-design/ant-design/issues/2061) [#2406](https://github.com/ant-design/ant-design/issues/2406) [#3293](https://github.com/ant-design/ant-design/issues/3293)
+  * Fix children don't support `null`. [#3599](https://github.com/ant-design/ant-design/issues/3599)
+* Fix loading status animation for message.[#3536](https://github.com/ant-design/ant-design/issues/3536)
+* Form
+  * Fix style issue while using `Form[inline]` and `Input[addonBefore|addonAfter]` together. [#3524](https://github.com/ant-design/ant-design/issues/3524)
+  * Fix style issue for Radio.Button in Form.Item.
+  * Fix style issue for search button in Form.Item. [#3630](https://github.com/ant-design/ant-design/issues/3630)
+  * Fix Form.Item should not treat no user input as validate success. [#3613](https://github.com/ant-design/ant-design/issues/3613)
+* Should not limit the min width of Popover while `Popover[title]` is not set.
+* Table
+  * Fix style of fixed header of Table while `dataSource` is empty.[#3567](https://github.com/ant-design/ant-design/issues/3567)
+  * Fix Table will overlap SubMenu while `dataSource` is empty. [#3521](https://github.com/ant-design/ant-design/issues/3521)
+* Tabs
+  * Height of header of `Tabs[type="card|editable-card"]` should follow design.
+  * Fix height of TabPane should follow height of its content. [#3304](https://github.com/ant-design/ant-design/issues/3304)
+* Fix style of `TreeSelect[showSearch]`. [#3520](https://github.com/ant-design/ant-design/issues/3520)
+
+## 2.1.0
+
+`2016-10-16`
+
+- Supports spinning Icon.
+- Tabs's switch animation could be disabled now. [#3324](https://github.com/ant-design/ant-design/issues/3324)
+- Add Spanish localization for LocaleProvider. @Danjavia
+- Update Russian localization for LocaleProvider. @plandem
+- Add `onSelect` event for AutoComplete.
+- Improve style of Modal.
+- Improve animation of Tooltip.
+- Improve style of Transfer's buttons.
+- Improve style of Tree.
+- Fix some less variables.
+- Fix errors while import the whole antd in SSR.
+- Fix errors while render Affix and BackTop on server. [#3283](https://github.com/ant-design/ant-design/issues/3283) [#3343](https://github.com/ant-design/ant-design/issues/3343)
+- Fix conflicts between Cascader search mode and browser's autocomplete behaviour. [#3350](https://github.com/ant-design/ant-design/issues/3350)
+- Fix bug that `h3` cannot be the value of Card[title]. [#3388](https://github.com/ant-design/ant-design/issues/3388)
+- DatePicker
+  - Fix bug that `onChange` will be trigger twice when `showTime` is set. [#3376](https://github.com/ant-design/ant-design/issues/3376)
+  - Fix differences between overlay's and trigger's date format. [#3405](https://github.com/ant-design/ant-design/issues/3405) [#3298](https://github.com/ant-design/ant-design/issues/3298)
+  - Fix style conflicts with TimePicker. [#3312](https://github.com/ant-design/ant-design/issues/3312) [#3307](https://github.com/ant-design/ant-design/issues/3307)
+- Fix overflow issue for Form.Item label.
+- Fix that Icon should not show border in Safari.
+- Fix infinite loop while inc/dec InputNubmer with keyboard. [#3239](https://github.com/ant-design/ant-design/issues/3239)
+- Fix the style of the arrow of Popover.
+- Fix bug Popover and Popconfirm `arrowPointAtCenter` doesn't work.
+- Select
+  - Fix bug that styles of Select are imported twice. [#3332](https://github.com/ant-design/ant-design/issues/3332)
+  - Fix bug `notFoundContent` cannot be set as `''`. [#3345](https://github.com/ant-design/ant-design/issues/3345)
+  - Fix the unstable width of table cell with Select[showSearch]. [#3413](https://github.com/ant-design/ant-design/issues/3413)
+- Fix style conflicts while use `border` & `title` & `footer` of Table at the same time. [#3301](https://github.com/ant-design/ant-design/issues/3301)
+- Fix that the height of TabPane doesn't follow height of content. [#3377](https://github.com/ant-design/ant-design/issues/3377)
+- Fix bug Transfer[titles] is not under the control of LocaleProvider. [#3264](https://github.com/ant-design/ant-design/pull/3264)
+- Upload
+  - Fix bug users' `onRemove` will override default behaviour. [#3317](https://github.com/ant-design/ant-design/issues/3317)
+  - Fix style for `listType='picture-card'`.[#3316](https://github.com/ant-design/ant-design/issues/3316)
+- Fix bug that moment locales is not found while built. [#3204](https://github.com/ant-design/ant-design/issues/3204) [#3411](https://github.com/ant-design/ant-design/issues/3411)
+
+## 2.0.1
+
+`2016-10-01`
+
+- Fix developers cannot call methods of react-slick. [#3164](https://github.com/ant-design/ant-design/issues/3164)
+- Fix Steps.Step[icon] should support React.ReactNode. [#3159](https://github.com/ant-design/ant-design/issues/3159)
+- Fix server-side render for Affix. [#3216](https://github.com/ant-design/ant-design/issues/3216)
+- Fix Mention should supoort `onSelect` `placeholder`. [#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226)
+- Fix Transfer cannot work with `getFieldDecorator`.
+- Fix LocaleProvider doesn't work for time-related components.
+- Fix Cascader doesn't show search text in search mode.
+- Fix the animation & text Spin should be placed in vertical middle.
+- Fix styles of RangePicker Modal Tag Progress.
+
+## 2.0.0
+
+`2016-09-28`
+
 After four months, `antd@2.0.0` is published. We had refactored code and improve functionalities and details of existing components. What's more, we provide English version of the documentation. The antd community help us a lot in developing `antd@2.0.0`.
 
 If you meet any problem while you try to upgrade from `antd@1.0.0`, feel free to [create issues on GitHub](https://github.com/ant-design/ant-design/issues).
@@ -40,7 +145,9 @@ There are some breaking changes in `antd@2.0.0`, and you need to modify your cod
   - <Calendar defaultValue={new Date('2010-10-10')} />
   + <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />
   ```
-* Parameters of type `Date/GregorianCalendar` of functions such as `onChange` and `onPanelChange`, plus other callback functions had been changed to type moment. Please consult [APIs of gregorian-calendar](https://github.com/yiminghe/gregorian-calendar) and [APIs of moment](http://momentjs.com/docs/), and update your code accordingly. Because the return value of `JSON.stringy(date: moment)` will lost time zone, we should use `.format` to convert date to string first, see related issue [#3082](https://github.com/ant-design/ant-design/issues/3082) for details:
+* Parameters of type `Date/GregorianCalendar` of functions such as `onChange` and `onPanelChange`, plus other callback functions had been changed to type moment. Please consult [APIs of gregorian-calendar](https://github.com/yiminghe/gregorian-calendar) and [APIs of moment](http://momentjs.com/docs/), and update your code accordingly. And you can consult this [commit](https://github.com/ant-design/ant-design/commit/5a4ebe535f0353089b30ac331bc4fb7877963371) to see how to upate.
+
+  Because the return value of `JSON.stringy(date: moment)` will lost time zone, we should use `.format` to convert date to string first, see related issue [#3082](https://github.com/ant-design/ant-design/issues/3082) for details:
   ```js
   handleSubmit() {
     const values = this.props.form.getFieldsValue();
@@ -49,22 +156,28 @@ There are some breaking changes in `antd@2.0.0`, and you need to modify your cod
     // send data to server
   }
   ```
-* The `format` of time-related components is the same as [moment's format](http://momentjs.com/docs/) now.
+* For the value of time-related components becomes an instance of `moment`, you should replace `type: 'date'` with `type: 'object'` in form validation.
+* The `format` of time-related components is changed from [gregorian-calendar-format](https://github.com/yiminghe/gregorian-calendar-format#api) to [moment  format](http://momentjs.com/docs/#/parsing/string-format/) now, for instance the format `yyyy-MM-dd` should change to `YYYY-MM-DD`.
 * `linkRender` and `nameRender` of Breadcrumb are removed, please use `itemRender`.
 * `onClose` and `onOpen` of Menu are removed, please use `onOpenChange`. As being totally different, please check [this demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current) first.
 * Paging columns of Table were removed, please use [fixed columns](http://ant.design/components/table/#components-table-demo-fixed-columns).
+* `Popover[overlay]` is removed, please use `Popover[content]` instead.
 
 The following change will throw some warnings in the console and it will still work, but we recommend to update your code.
 
 * `getFieldProps` of Form is deprecated, please use `getFieldDecorator`:
+
   ```diff
-  + getFieldDecorator('userName', { ... })(
-      <Input placeholder="请输入账户名"
-  -     {...getFieldProps('userName', { ... })}
-      />
-  + )
+  -  <Input placeholder="text" {...getFieldProps('userName', { ... })} />
+  +  {getFieldDecorator('userName', { ... })(
+  +    <Input placeholder="text" />
+  +  )}
   ```
+
+  Look up to [#1533](https://github.com/ant-design/ant-design/issues/1533) for related discussion.
+
 * `toggleOpen` of DatePicker is deprecated, please use `onOpenChange`:
+
   ```diff
   - handleToggleOpen({ open }) {
   + handleOpenChange(open) {
@@ -106,7 +219,9 @@ The following change will throw some warnings in the console and it will still w
 
 * [AntD Library](http://library.ant.design/) a collection of Axure files which includes components and patterns that follow Ant Design Specification.
 * Rename `babel-plugin-antd` to [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import), and this means that `babel-plugin-import` becomes an common load-on-demand solution and not just for `antd`.
+
   Please update `package.json`:
+
   ```diff
   {
     "devDependencies": {
@@ -115,15 +230,18 @@ The following change will throw some warnings in the console and it will still w
     }
   }
   ```
+
   And update your babel config in `.babelrc` or other place:
+
   ```diff
   {
   -  "plugins": [["antd", { style: "css" }]]
   +  "plugins": [["import", { libraryName: "antd", style: "css" }]]
   }
   ```
-* [`dva@1.0.0`](https://github.com/dvajs/dva) is published and it is officially recommended framework [in real world](http://ant.design/docs/react/practical-projects).
-* The officially recommended scaffold is [`dva-cli`](https://github.com/dvajs/dva-cli) now, the old `antd-init` is just for studying and demo.
+
+* [dva@1.0.0](https://github.com/dvajs/dva) is published and it is officially recommended framework [in real world](http://ant.design/docs/react/practical-projects).
+* The officially recommended scaffold is [dva-cli](https://github.com/dvajs/dva-cli) now, the old `antd-init` is just for studying and demo.
 
 ## 1.0.0
 

CHANGELOG.zh-CN.md

@@ -9,16 +9,117 @@ timeline: true
 
 ---
 
+## 2.2.1
+
+`2016-11-02`
+
+* 修复 Form 中 DatePicker[showTime]（受控）无法使用的问题。[#3665](https://github.com/ant-design/ant-design/issues/3665)
+
+## 2.2.0
+
+`2016-10-28`
+
+* 支持 TypeScript@2.0。[@AlbertZheng](https://github.com/AlbertZheng) [#3358](https://github.com/ant-design/ant-design/issues/3358)
+* 不再强依赖于 React 特定版本。[#3627](https://github.com/ant-design/ant-design/pull/3627)
+* Alert 支持 `className` `style` 属性。
+* DatePicker MonthPicker RangePicker 现在允许设置是否显示清除按钮。[#3618](https://github.com/ant-design/ant-design/issues/3618)
+* Form.Item 现在可以感知深层嵌套的表单域，以自动为其生成错误信息和状态。[#3212](https://github.com/ant-design/ant-design/issues/3212)
+* RangePicker 现在可以设置不可选的时间。[#](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date)
+* Switch
+  * 宽度现在会随着 `checkedChildren/unCheckedChildren` 自动调整。[#3380](https://github.com/ant-design/ant-design/issues/3380)
+  * 优化切换动画。
+* Upload 现在可以 [自定义上传方式](https://github.com/react-component/upload#customrequest)。[@edgji](https://github.com/edgji)
+* Icon
+  * 新增 `bulb` `select` `like-o` `dislike-o`。
+  * 调整 `loading` `like` `dislike`。
+* 优化 Card DatePicker Icon Table 的 TypeScript 定义。[@infeng](https://github.com/infeng) [3468](https://github.com/ant-design/ant-design/pull/3468) [#3603](https://github.com/ant-design/ant-design/pull/3603) [#3531](https://github.com/ant-design/ant-design/pull/3531)
+
+* 修复 Cascader `defaultValue` 失效的问题。[#3470](https://github.com/ant-design/ant-design/issues/3470)
+* 修复在一行内同时使用 Button Input DatePicker Select 时对齐的问题。[#3481](https://github.com/ant-design/ant-design/issues/3481)
+* DatePicker
+  * 修复设置 `DatePicker[showTime]` 后 `onChange` 事件触发时机问题。[#3523](https://github.com/ant-design/ant-design/issues/3523)
+* 修复 Dropdown.Button disabled 后仍然响应操作的问题。[#3535](https://github.com/ant-design/ant-design/issues/3535)
+* Menu
+  * 修复服务端渲染问题，感谢 [@xpcode](https://github.com/xpcode) 定位问题。[#2061](https://github.com/ant-design/ant-design/issues/2061) [#2406](https://github.com/ant-design/ant-design/issues/2406) [#3293](https://github.com/ant-design/ant-design/issues/3293)
+  * 修复 children 不能为 `null` 的问题。[#3599](https://github.com/ant-design/ant-design/issues/3599)
+* 修复 message 加载状态无动画的问题。[#3536](https://github.com/ant-design/ant-design/issues/3536)
+* Form
+  * 修复 `Form[inline]` 与 `Input[addonBefore|addonAfter]` 一起使用时的样式问题。[#3524](https://github.com/ant-design/ant-design/issues/3524)
+  * 修复 Form.Item 内 Radio.Button 样式问题。
+  * 修复 Form.Item 内搜索按钮的样式问题。[#3630](https://github.com/ant-design/ant-design/issues/3630)
+  * 修复用户无输入时 Form.Item 识别为校验成功的问题。[#3613](https://github.com/ant-design/ant-design/issues/3613)
+* 当 `Popover[title]` 没有设置时，不再限制 Popover 的最小宽度。
+* Table
+  * 修复固定表头在没有数据情况下的样式问题。[#3567](https://github.com/ant-design/ant-design/issues/3567)
+  * 修复无数据时会覆盖 SubMenu 的问题。[#3521](https://github.com/ant-design/ant-design/issues/3521)
+* Tabs
+  * 修复卡片叶签头部高度与设计稿不一致的问题。
+  * 修复 TabPane 的高度会被同级 TabPane 撑高的问题。[#3304](https://github.com/ant-design/ant-design/issues/3304)
+* 修复 `TreeSelect[showSearch]` 样式问题。[#3520](https://github.com/ant-design/ant-design/issues/3520)
+
+## 2.1.0
+
+`2016-10-16`
+
+- Icon 现在支持旋转动画。
+- Tabs 现在可以禁用切换动画。[#3324](https://github.com/ant-design/ant-design/issues/3324)
+- 新增西班牙语的 localization 支持。@Danjavia
+- 更新俄语的 localization 文案。@plandem
+- 新增 AutoComplete[onSelect] 回调。
+- 优化 Modal 样式细节。
+- 优化 Tooltip 动画。
+- 优化 Transfer 按钮的样式。
+- 优化 Tree 的样式细节。
+- 整理和修复了部分 less 变量。
+- 修复服务端渲染时全量引入 antd 报错的问题。
+- 修复 Affix 与 BackTop 的服务端渲染问题。[#3283](https://github.com/ant-design/ant-design/issues/3283) [#3343](https://github.com/ant-design/ant-design/issues/3343)
+- 修复 Card[title] 内无法使用 `h3` 之类的标签的问题。[#3388](https://github.com/ant-design/ant-design/issues/3388)
+- 修复 Cascader 搜索模式与浏览器自动完成有冲突的问题。[#3350](https://github.com/ant-design/ant-design/issues/3350)
+- DatePicker
+  - 修复设置 `showTime` 后，`onChange` 重复触发的问题。[#3376](https://github.com/ant-design/ant-design/issues/3376)
+  - 修复浮层与 Trigger 日期格式不一致的问题。[#3405](https://github.com/ant-design/ant-design/issues/3405) [#3298](https://github.com/ant-design/ant-design/issues/3298)
+  - 修复与 TimePicker 样式冲突问题。[#3312](https://github.com/ant-design/ant-design/issues/3312) [#3307](https://github.com/ant-design/ant-design/issues/3307)
+- 修复 Form.Item 标签文案过长溢出的问题。
+- 修复 Icon 在 Safari 下会出现边框的问题。
+- 修复 InputNubmer 键盘事件死循环问题。[#3239](https://github.com/ant-design/ant-design/issues/3239)
+- 修复 Popover 箭头样式问题。
+- 修复 Popover 和 Popconfirm 的 `arrowPointAtCenter` 无效的问题。
+- Select
+  - 修复样式重复引入的问题。[#3376](https://github.com/ant-design/ant-design/issues/3376)
+  - 修复 `notFoundContent` 无法置空的问题。[#3345](https://github.com/ant-design/ant-design/issues/3345)
+  - 修复 Table 内使用 Select[showSearch] 后宽度会跳动的问题。[#3413](https://github.com/ant-design/ant-design/issues/3413)
+- 修复 Table 边框线与页头页脚冲突的问题。[#3301](https://github.com/ant-design/ant-design/issues/3301)
+- 修复 TabPane 高度不随内容变化的问题。[#3377](https://github.com/ant-design/ant-design/issues/3377)
+- 修复 Transfer[titles] 不受 LocaleProvider 控制的问题。[#3264](https://github.com/ant-design/ant-design/pull/3264)
+- Upload
+  - 修复用户自定义 `onRemove` 事件会覆盖默认行为的问题。[#3317](https://github.com/ant-design/ant-design/issues/3317)
+  - 修复图片卡片样式问题。[#3316](https://github.com/ant-design/ant-design/issues/3316)
+- 修复项目构建时 moment locales 找不到的问题。[#3204](https://github.com/ant-design/ant-design/issues/3204) [#3411](https://github.com/ant-design/ant-design/issues/3411)
+
+## 2.0.1
+
+`2016-10-01`
+
+- 修复无法调用 react-slick 方法的问题。[#3164](https://github.com/ant-design/ant-design/issues/3164)
+- 修复 Steps.Step[icon] 不支持 React.ReactNode 的问题。[#3159](https://github.com/ant-design/ant-design/issues/3159)
+- 修复 Affix 不支持服务端渲染的问题。[#3216](https://github.com/ant-design/ant-design/issues/3216)
+- 修复 Mention 不支持 `onSelect` `placeholder` 的问题。[#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226)
+- 修复 Transfer 与 `getFieldDecorator` 一起使用时的报错问题。
+- 修复 LocaleProvider 对时间组件无效的问题。
+- 修复 Cascader 搜索模式搜索文字显示不了的问题。
+- 修复 Spin 动画与文案整体不垂直居中的问题。
+- 修复 RangePicker Modal Tag Progress 等组件样式问题。
+
 ## 2.0.0
 
-`2016-09-x`
+`2016-09-28`
 
 很高兴的通知各位，经过四个月时间的紧密开发，`antd@2.0.0` 终于发布了。这个版本我们重构了底层代码，持续完善现有组件功能和优化细节，并提供了英文版的文档，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时 [反馈给我们](https://github.com/ant-design/ant-design/issues)。
 
 ### 2.x 主要变化
 
 * 开发语言改为 TypeScript，提供 **官方支持的 `.d.ts` 文件**，感谢 [#1846](https://github.com/ant-design/ant-design/issues/1846) 中所有参与到这次重构的人以及后期 @infeng 对其的完善。
-* **新增英文文档**， 以后将同时提供中英双语文档，感谢 [#1471](https://github.com/ant-design/ant-design/issues/1471) 里所有参与到翻译、review 中的人。
+* **新增英文文档**， 以后将同时提供中英双语文档，感谢 [#1471](https://github.com/ant-design/ant-design/issues/1471) 里所有参与到翻译和审阅工作中的人。
 * 时间类组件 DatePicker、TimePicker、Calendar 等的底层 **使用 [moment](http://momentjs.com/) 替换 [gregorian-calendar](github.com/yiminghe/gregorian-calendar)**。
 * 全新设计的 [图标](http://ant.design/components/icon/)。
 * 新增提及组件 [Mention](http://ant.design/components/mention/)。
@@ -42,7 +143,9 @@ timeline: true
   - <Calendar defaultValue={new Date('2010-10-10')} />
   + <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />
   ```
-* 时间类组件的 `onChange` 和 `onPanelChange` 及其他回调函数中为 `Date/GregorianCalendar` 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 [moment 的 API 文档](http://momentjs.com/docs/) 和 [gregorian-calendar 的文档](https://github.com/yiminghe/gregorian-calendar) 进行修改。由于 `JSON.stringy(date: moment)` 返回的值会丢失时区设置，所以要先使用 `.format` 把日期转成字符串，相关 issue 见 [#3082](https://github.com/ant-design/ant-design/issues/3082)：
+* 时间类组件的 `onChange` 和 `onPanelChange` 及其他回调函数中为 `Date/GregorianCalendar` 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 [moment 的 API 文档](http://momentjs.com/docs/) 和 [gregorian-calendar 的文档](https://github.com/yiminghe/gregorian-calendar) 进行修改。你也可以参考这个 [commit](https://github.com/ant-design/ant-design/commit/5a4ebe535f0353089b30ac331bc4fb7877963371) 来进行修改。
+
+  由于 `JSON.stringy(date: moment)` 返回的值会丢失时区设置，所以要先使用 `.format` 把日期转成字符串，相关 issue 见 [#3082](https://github.com/ant-design/ant-design/issues/3082)：
   ```js
   handleSubmit() {
     const values = this.props.form.getFieldsValue();
@@ -51,22 +154,29 @@ timeline: true
     // 发送 data 到服务器
   }
   ```
-* 时间类组件的 `format` 属性配置也调整为与 [moment](http://momentjs.com/docs/) 的一致。
+
+* 时间类组件与表单校验一起使用时，`type: 'date'` 改为 `type: 'object'`。
+* 时间类组件的 `format` 属性也发生了变化，从 [gregorian-calendar-format 的格式](https://github.com/yiminghe/gregorian-calendar-format#api) 变化为与 [moment 的格式](http://momentjs.com/docs/#/parsing/string-format/)，例如原来的 `yyyy-MM-dd` 将变为 `YYYY-MM-DD`。
 * Breadcrumb 移除 `linkRender` 和 `nameRender`，请使用 `itemRender`。
 * Menu 移除 `onClose` `onOpen`，请使用 `onOpenChange`。API 差异较大，请先研究 [demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current)。
 * Table 移除列分页功能，请使用 [固定列](http://ant.design/components/table/#components-table-demo-fixed-columns)。
+* Popover 移除 `overlay` ，请使用 `content`。
 
 以下变化升级后旧代码仍然能正常运行，但是控制台会出现警告提示，建议按提示进行修改。
 
 * Form 废弃 `getFieldProps`，请使用 `getFieldDecorator`：
+
   ```diff
-  + getFieldDecorator('userName', { ... })(
-      <Input placeholder="请输入账户名"
-  -     {...getFieldProps('userName', { ... })}
-      />
-  + )
+  -  <Input placeholder="text" {...getFieldProps('userName', { ... })} />
+  +  {getFieldDecorator('userName', { ... })(
+  +    <Input placeholder="text" />
+  +  )}
   ```
+
+  相关讨论可以看 [#1533](https://github.com/ant-design/ant-design/issues/1533)。
+
 * DatePicker 废弃 `toggleOpen`，请使用 `onOpenChange`：
+
   ```diff
   - handleToggleOpen({ open }) {
   + handleOpenChange(open) {
@@ -107,8 +217,10 @@ timeline: true
 ### 2.x 相关工具发布
 
 * 新增配套网站 [AntD Library](http://library.ant.design/)，提供遵循 Ant Design 设计规范的组件、模式等的 Axure 资源。
-* `babel-plugin-antd` 更名为 [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import)，标志着该插件将作为一个通用的按需加载方案存在，而不再是 `antd` 专有。
+* `babel-plugin-antd` 更名为 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)，标志着该插件将作为一个通用的按需加载方案存在，而不再是 `antd` 专有。
+
   请更新 `package.json`：
+
   ```diff
   {
     "devDependencies": {
@@ -117,15 +229,18 @@ timeline: true
     }
   }
   ```
+
   同时更新 `.babelrc` 或你在其它地方对其的配置：
+
   ```diff
   {
   -  "plugins": [["antd", { style: "css" }]]
   +  "plugins": [["import", { libraryName: "antd", style: "css" }]]
   }
   ```
-* [`dva@1.0.0`](https://github.com/dvajs/dva) 也已经发布，并推荐 [在实战项目中使用](http://ant.design/docs/react/practical-projects)。
-* 脚手架工具推荐使用 [`dva-cli`](https://github.com/dvajs/dva-cli)，原来的 `antd-init` 以后仅会用于学习以及 demo。
+
+* [dva@1.0.0](https://github.com/dvajs/dva) 也已经发布，并推荐 [在实战项目中使用](http://ant.design/docs/react/practical-projects)。
+* 脚手架工具推荐使用 [dva-cli](https://github.com/dvajs/dva-cli)，原来的 `antd-init` 以后仅会用于学习以及 demo。
 
 ## 1.11.2
 

README-zh_CN.md

@@ -4,7 +4,13 @@
   </a>
 </p>
 
-# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+# Ant Design
+[![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
+[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
+[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd)
+[![CDNJS](https://img.shields.io/cdnjs/v/antd.svg?style=flat-square)](https://cdnjs.com/libraries/antd)
+[![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 一套企业级的 UI 设计语言和 React 实现。
 
@@ -12,7 +18,8 @@
 
 - 提炼和服务企业级中后台产品的交互语言和视觉风格。
 - [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
-- 基于 npm + webpack + babel 的工作流，支持 ES2015 和 TypeScript。
+- 使用 TypeScript 构建，提供完整的类型定义文件。
+- 基于 npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) 的企业级业务开发框架。
 
 ## 安装
 
@@ -44,16 +51,23 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 
 ## TypeScript
 
-```js
-///<reference path='./node_modules/antd/type-definitions/antd.d.ts'/>
-...
+tsconfig.json
+
+```
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "allowSyntheticDefaultImports": true
+  }
+}
 ```
 
 ## 链接
 
 - [首页](http://ant.design/)
-- [React 实现](http://ant.design/#/docs/react/introduce)
-- [修改记录](CHANGELOG.md)
+- [React 实现](http://ant.design/docs/react/introduce)
+- [修改记录](CHANGELOG.zh-CN.md)
 - [开发脚手架](https://github.com/ant-design/antd-init/)
 - [开发工具文档](http://ant-tool.github.io/)
 - [React 基础组件](http://react-component.github.io/)
@@ -67,7 +81,6 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 - [CodePen 模板](http://codepen.io/benjycui/pen/KgPZrE?editors=001)
 - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
 
-
 ## 如何贡献
 
 我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。

README.md

@@ -4,7 +4,13 @@
   </a>
 </p>
 
-# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+# Ant Design
+[![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
+[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
+[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd)
+[![CDNJS](https://img.shields.io/cdnjs/v/antd.svg?style=flat-square)](https://cdnjs.com/libraries/antd)
+[![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 An enterprise-class UI design language and React-based implementation.
 
@@ -12,7 +18,8 @@ An enterprise-class UI design language and React-based implementation.
 
 - An enterprise-class design language and high quality UI.
 - Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
-- A npm + webpack + babel + dora [workflow](http://ant-tool.github.io/index.html).
+- Writen in TypeScript with complete define types.
+- A npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) development framework.
 
 ## Install
 
@@ -57,6 +64,7 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 
    ```jsx
    import DatePicker from 'antd/lib/date-picker';  // just for js
+   import 'antd/lib/date-picker/style/css';  // with style
    ```
 
 
@@ -74,7 +82,8 @@ tsconfig.json
 {
   "compilerOptions": {
     "moduleResolution": "node",
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "allowSyntheticDefaultImports": true
   }
 }
 ```
@@ -82,8 +91,8 @@ tsconfig.json
 ## Links
 
 - [Home page](http://ant.design/)
-- [React UI page](http://ant.design/#/docs/react/introduce)
-- [ChangeLog](CHANGELOG.md)
+- [UI library](http://ant.design/docs/react/introduce)
+- [ChangeLog](CHANGELOG.en-US.md)
 - [Scaffold tool](https://github.com/ant-design/antd-init/)
 - [Development tool](http://ant-tool.github.io/)
 - [React components](http://react-component.github.io/)

components/_util/getLocale.tsx

@@ -0,0 +1,10 @@
+import assign from 'object-assign';
+
+export default function getLocale(props, context, componentName, getDefaultLocale) {
+  const locale = context && context.antLocale && context.antLocale[componentName] ?
+    context.antLocale[componentName] : getDefaultLocale();
+
+  const result = assign({}, locale, props.locale);
+  result.lang = assign({}, locale.lang, props.locale.lang);
+  return result;
+}

components/_util/getRequestAnimationFrame.tsx

@@ -0,0 +1,12 @@
+export default function getRequestAnimationFrame() {
+  if (typeof window === 'undefined') {
+    return () => {};
+  }
+  if (window.requestAnimationFrame) {
+    return window.requestAnimationFrame;
+  }
+  const prefix = ['moz', 'ms', 'webkit'].filter(key => `${key}RequestAnimationFrame` in window)[0];
+  return prefix
+    ? window[`${prefix}RequestAnimationFrame`]
+    : callback => setTimeout(callback, 1000 / 60);
+}

components/_util/getScroll.tsx

@@ -0,0 +1,17 @@
+export default function getScroll(target, top): number {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+
+  const prop = top ? 'pageYOffset' : 'pageXOffset';
+  const method = top ? 'scrollTop' : 'scrollLeft';
+  const isWindow = target === window;
+
+  let ret = isWindow ? target[prop] : target[method];
+  // ie6,7,8 standard mode
+  if (isWindow && typeof ret !== 'number') {
+    ret = window.document.documentElement[method];
+  }
+
+  return ret;
+}

components/_util/splitObject.tsx

@@ -1,6 +1,6 @@
 export default function splitObject(obj, parts): Array<any> {
-  let left = {};
-  let right = {};
+  const left = {};
+  const right = {};
   Object.keys(obj).forEach((k) => {
     if (parts.indexOf(k) !== -1) {
       left[k] = obj[k];

components/affix/index.tsx

@@ -4,28 +4,15 @@ import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
 import shallowequal from 'shallowequal';
 import omit from 'omit.js';
+import getScroll from '../_util/getScroll';
 
-function getScroll(target, top) {
-  const prop = top ? 'pageYOffset' : 'pageXOffset';
-  const method = top ? 'scrollTop' : 'scrollLeft';
-  const isWindow = target === window;
-
-  let ret = isWindow ? target[prop] : target[method];
-  // ie6,7,8 standard mode
-  if (isWindow && typeof ret !== 'number') {
-    ret = window.document.documentElement[method];
-  }
-
-  return ret;
-}
-
-function getTargetRect(target): any {
+function getTargetRect(target): ClientRect {
   return target !== window ?
     target.getBoundingClientRect() :
     { top: 0, left: 0, bottom: 0 };
 }
 
-function getOffset(element, target) {
+function getOffset(element: HTMLElement, target) {
   const elemRect = element.getBoundingClientRect();
   const targetRect = getTargetRect(target);
 
@@ -44,6 +31,13 @@ function getOffset(element, target) {
   };
 }
 
+function noop() {}
+
+function getDefaultTarget() {
+  return typeof window !== 'undefined' ?
+    window : null;
+};
+
 // Affix
 export interface AffixProps {
   /**
@@ -55,7 +49,7 @@ export interface AffixProps {
   offsetBottom?: number;
   style?: React.CSSProperties;
   /** 固定状态改变时触发的回调函数 */
-  onChange?: (affixed?: boolean) => any;
+  onChange?: (affixed?: boolean) => void;
   /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
   target?: () => Window | HTMLElement;
   prefixCls?: string;
@@ -68,18 +62,9 @@ export default class Affix extends React.Component<AffixProps, any> {
     target: React.PropTypes.func,
   };
 
-  static defaultProps = {
-    target() {
-      return window;
-    },
-    onChange() {},
-    prefixCls: 'ant-affix',
-  };
-
   scrollEvent: any;
   resizeEvent: any;
   refs: {
-    [key: string]: any;
     fixedNode: HTMLElement;
   };
 
@@ -92,7 +77,7 @@ export default class Affix extends React.Component<AffixProps, any> {
   }
 
   setAffixStyle(e, affixStyle) {
-    const { onChange, target } = this.props;
+    const { onChange = noop, target = getDefaultTarget } = this.props;
     const originalAffixStyle = this.state.affixStyle;
     const isWindow = target() === window;
     if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
@@ -122,7 +107,7 @@ export default class Affix extends React.Component<AffixProps, any> {
   }
 
   updatePosition = (e) => {
-    let { offsetTop, offsetBottom, offset, target } = this.props;
+    let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
     const targetNode = target();
 
     // Backwards support
@@ -136,8 +121,8 @@ export default class Affix extends React.Component<AffixProps, any> {
     };
 
     const offsetMode = {
-      top: null as boolean,
-      bottom: null as boolean,
+      top: false,
+      bottom: false,
     };
     // Default to `offsetTop=0`.
     if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
@@ -186,7 +171,7 @@ export default class Affix extends React.Component<AffixProps, any> {
   }
 
   componentDidMount() {
-    const target = this.props.target;
+    const target = this.props.target || getDefaultTarget;
     this.setTargetEventListeners(target);
   }
 
@@ -220,7 +205,7 @@ export default class Affix extends React.Component<AffixProps, any> {
 
   render() {
     const className = classNames({
-      [this.props.prefixCls]: this.state.affixStyle,
+      [this.props.prefixCls || 'ant-affix']: this.state.affixStyle,
     });
 
     const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);

components/alert/index.tsx

@@ -4,6 +4,8 @@ import Animate from 'rc-animate';
 import Icon from '../icon';
 import classNames from 'classnames';
 
+function noop() {}
+
 export interface AlertProps {
   /**
    * Type of Alert styles, options:`success`, `info`, `warning`, `error`
@@ -18,19 +20,17 @@ export interface AlertProps {
   /** Additional content of Alert */
   description?: React.ReactNode;
   /** Callback when close Alert */
-  onClose?: (event) => void;
+  onClose?: React.MouseEventHandler<any>;
   /** Whether to show icon */
   showIcon?: boolean;
   style?: React.CSSProperties;
   prefixCls?: string;
+  className?: string;
   banner?: boolean;
 }
 
 export default class Alert extends React.Component<AlertProps, any> {
   static defaultProps = {
-    prefixCls: 'ant-alert',
-    showIcon: false,
-    onClose() {},
     type: 'info',
   };
   constructor(props) {
@@ -51,7 +51,7 @@ export default class Alert extends React.Component<AlertProps, any> {
     this.setState({
       closing: false,
     });
-    this.props.onClose(e);
+    (this.props.onClose || noop)(e);
   }
   animationEnd = () => {
     this.setState({
@@ -61,7 +61,8 @@ export default class Alert extends React.Component<AlertProps, any> {
   }
   render() {
     let {
-      closable, description, type, prefixCls, message, closeText, showIcon, banner,
+      closable, description, type, prefixCls = 'ant-alert', message, closeText, showIcon, banner,
+      className = '', style,
     } = this.props;
 
     // banner模式默认有 Icon
@@ -99,6 +100,7 @@ export default class Alert extends React.Component<AlertProps, any> {
       [`${prefixCls}-with-description`]: !!description,
       [`${prefixCls}-no-icon`]: !showIcon,
       [`${prefixCls}-banner`]: !!banner,
+      [className]: !!className,
     });
 
     // closeable when closeText is assigned
@@ -107,12 +109,13 @@ export default class Alert extends React.Component<AlertProps, any> {
     }
 
     return this.state.closed ? null : (
-      <Animate component=""
+      <Animate
+        component=""
         showProp="data-show"
         transitionName={`${prefixCls}-slide-up`}
         onEnd={this.animationEnd}
       >
-        <div data-show={this.state.closing} className={alertCls}>
+        <div data-show={this.state.closing} className={alertCls} style={style}>
           {showIcon ? <Icon className={`${prefixCls}-icon`} type={iconType} /> : null}
           <span className={`${prefixCls}-message`}>{message}</span>
           <span className={`${prefixCls}-description`}>{description}</span>

components/auto-complete/demo/basic.md

@@ -16,6 +16,10 @@ Basic Usage, set datasource of autocomplete with `dataSource` property.
 ````jsx
 import { AutoComplete } from 'antd';
 
+function onSelect(value) {
+  console.log('onSelect', value);
+}
+
 const Complete = React.createClass({
   getInitialState() {
     return {
@@ -37,6 +41,7 @@ const Complete = React.createClass({
       <AutoComplete
         dataSource={dataSource}
         style={{ width: 200 }}
+        onSelect={onSelect}
         onChange={this.handleChange}
       />
     );

components/auto-complete/index.en-US.md

@@ -25,5 +25,6 @@ const dataSource = ['12345', '23456', '34567'];
 | value    | selected option | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  -  |
 | defaultValue | Initial selected option. | string/Array<String>   |  -  |
 | allowClear   | Show clear button, effective in multiple mode only. | boolean | false |
-| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - |
+| onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
+| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | -   |
 | disabled | Whether disabled select | boolean | false |

components/auto-complete/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import Select, { Option, OptGroup } from '../select';
+import Select, { OptionProps, OptGroupProps } from '../select';
+import { Option, OptGroup } from 'rc-select';
 import classNames from 'classnames';
 
 export interface SelectedValue {
@@ -23,13 +24,13 @@ export interface AutoCompleteProps {
   defaultValue?: string | Array<any> | SelectedValue | Array<SelectedValue>;
   value?: string | Array<any> | SelectedValue | Array<SelectedValue>;
   allowClear?: boolean;
-  onChange?: (value) => void;
+  onChange?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>) => void;
   disabled?: boolean;
 }
 
 export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
-  static Option = Option;
-  static OptGroup = OptGroup;
+  static Option = Option as React.ClassicComponentClass<OptionProps>;
+  static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
 
   static defaultProps = {
     prefixCls: 'ant-select',
@@ -45,7 +46,7 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
 
   render() {
     let {
-      size, className, notFoundContent, prefixCls, optionLabelProp, dataSource, children,
+      size, className = '', notFoundContent, prefixCls, optionLabelProp, dataSource, children,
     } = this.props;
 
     const cls = classNames({
@@ -55,7 +56,7 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
       [`${prefixCls}-show-search`]: true,
     });
 
-    const options = children || (dataSource ? dataSource.map((item, index) => {
+    const options = children || (dataSource ? dataSource.map((item) => {
       switch (typeof item) {
         case 'string':
           return <Option key={item}>{item}</Option>;

components/auto-complete/index.zh-CN.md

@@ -22,9 +22,10 @@ const dataSource = ['12345', '23456', '34567'];
 
 | 参数           | 说明                             | 类型        | 默认值 |
 |----------------|----------------------------------|------------|---------|
-| dataSource          | 自动完成的数据源 | Array     |         | 
+| dataSource          | 自动完成的数据源 | Array     |         |
 | value    | 指定当前选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  无  |
 | defaultValue | 指定默认选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  无  |
 | allowClear   | 支持清除, 单选模式有效 | boolean | false |
-| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value) | 无 |
+| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
+| onSelect | 被选中时调用，参数为选中项的 value 值	| function(value, option)	| 无 |
 | disabled | 是否禁用 | boolean | false |

components/auto-complete/style/index.less

@@ -1,2 +0,0 @@
-@import "../../style/themes/default";
-@import "../../select/style/index";

components/auto-complete/style/index.tsx

@@ -1,2 +1,4 @@
 import '../../style/index.less';
 import './index.less';
+
+import '../../select/style';

components/back-top/index.tsx

@@ -1,22 +1,16 @@
 import React from 'react';
 import Animate from 'rc-animate';
-import Icon from '../icon';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
 import omit from 'omit.js';
+import Icon from '../icon';
+import getScroll from '../_util/getScroll';
+import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
 
-const reqAnimFrame = (() => {
-  if (window.requestAnimationFrame) {
-    return window.requestAnimationFrame;
-  }
-  const a = ['moz', 'ms', 'webkit'];
-  const raf = a.filter(key => `${key}RequestAnimationFrame` in window);
-  return raf[0] ? window[`${raf[0]}RequestAnimationFrame`] :
-    ((callback) => window.setTimeout(callback, 1000 / 60));
-})();
+const reqAnimFrame = getRequestAnimationFrame();
 
 const currentScrollTop = () => {
-  return  window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+  return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
 };
 
 const easeInOutCubic = (t, b, c, d) => {
@@ -29,27 +23,16 @@ const easeInOutCubic = (t, b, c, d) => {
   }
 };
 
-function getScroll(target, top) {
-  if (typeof window === 'undefined') {
-    return 0;
-  }
+function noop() {}
 
-  const prop = top ? 'pageYOffset' : 'pageXOffset';
-  const method = top ? 'scrollTop' : 'scrollLeft';
-  const isWindow = target === window;
-
-  let ret = isWindow ? target[prop] : target[method];
-  // ie6,7,8 standard mode
-  if (isWindow && typeof ret !== 'number') {
-    ret = window.document.documentElement[method];
-  }
-
-  return ret;
+function getDefaultTarget() {
+  return typeof window !== 'undefined' ?
+    window : null;
 }
 
 export interface BackTopProps {
   visibilityHeight?: number;
-  onClick?: (event) => void;
+  onClick?: React.MouseEventHandler<any>;
   target?: () => HTMLElement | Window;
   prefixCls?: string;
   className?: string;
@@ -58,21 +41,15 @@ export interface BackTopProps {
 
 export default class BackTop extends React.Component<BackTopProps, any> {
   static defaultProps = {
-    onClick() {},
     visibilityHeight: 400,
-    target() {
-      return window;
-    },
-    prefixCls: 'ant-back-top',
   };
 
   scrollEvent: any;
 
   constructor(props) {
     super(props);
-    const scrollTop = getScroll(props.target(), true);
     this.state = {
-      visible: scrollTop > props.visibilityHeight,
+      visible: false,
     };
   }
 
@@ -88,11 +65,11 @@ export default class BackTop extends React.Component<BackTopProps, any> {
       }
     };
     reqAnimFrame(frameFunc);
-    this.props.onClick(e);
+    (this.props.onClick || noop)(e);
   }
 
   setScrollTop(value) {
-    const targetNode = this.props.target();
+    const targetNode = (this.props.target || getDefaultTarget)();
     if (targetNode === window) {
       document.body.scrollTop = value;
       document.documentElement.scrollTop = value;
@@ -102,7 +79,7 @@ export default class BackTop extends React.Component<BackTopProps, any> {
   }
 
   handleScroll = () => {
-    const { visibilityHeight, target } = this.props;
+    const { visibilityHeight, target = getDefaultTarget } = this.props;
     const scrollTop = getScroll(target(), true);
     this.setState({
       visible: scrollTop > visibilityHeight,
@@ -110,7 +87,8 @@ export default class BackTop extends React.Component<BackTopProps, any> {
   }
 
   componentDidMount() {
-    this.scrollEvent = addEventListener(this.props.target(), 'scroll', this.handleScroll);
+    this.handleScroll();
+    this.scrollEvent = addEventListener((this.props.target || getDefaultTarget)(), 'scroll', this.handleScroll);
   }
 
   componentWillUnmount() {
@@ -120,7 +98,7 @@ export default class BackTop extends React.Component<BackTopProps, any> {
   }
 
   render() {
-    const { prefixCls, className, children } = this.props;
+    const { prefixCls = 'ant-back-top', className = '', children } = this.props;
     const classString = classNames({
       [prefixCls]: true,
       [className]: !!className,

components/badge/ScrollNumber.tsx

@@ -13,26 +13,25 @@ function getNumberArray(num) {
       .map(i => Number(i)) : [];
 }
 
-export default class ScrollNumber extends Component<any, any> {
+export interface ScrollNumberProps {
+  prefixCls?: string;
+  className?: string;
+  count?: string | number;
+  component?: string;
+  onAnimated?: Function;
+  height?: number;
+  style: React.CSSProperties;
+}
+
+export default class ScrollNumber extends Component<ScrollNumberProps, any> {
   static defaultProps = {
     prefixCls: 'ant-scroll-number',
     count: null,
-    component: 'sup',
     onAnimated() {
     },
     height: 18,
   };
 
-  static propTypes = {
-    count: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number,
-    ]),
-    component: React.PropTypes.string,
-    onAnimated: React.PropTypes.func,
-    height: React.PropTypes.number,
-  };
-
   lastCount: any;
 
   constructor(props) {
@@ -85,7 +84,10 @@ export default class ScrollNumber extends Component<any, any> {
             animateStarted: false,
             count: nextProps.count,
           }, () => {
-            this.props.onAnimated();
+            const onAnimated = this.props.onAnimated;
+            if (onAnimated) {
+              onAnimated();
+            }
           });
         }, 5);
       });
@@ -93,10 +95,10 @@ export default class ScrollNumber extends Component<any, any> {
   }
 
   renderNumberList(position) {
-    const childrenToReturn = [];
+    const childrenToReturn: React.ReactElement<any>[] = [];
     for (let i = 0; i < 30; i++) {
-      const currentClassName = (position === i) ? 'current' : null;
-      childrenToReturn.push(<p key={i} className={currentClassName}>{i % 10}</p>);
+      const currentClassName = (position === i) ? 'current' : '';
+      childrenToReturn.push(<p key={i.toString()} className={currentClassName}>{i % 10}</p>);
     }
     return childrenToReturn;
   }
@@ -138,7 +140,7 @@ export default class ScrollNumber extends Component<any, any> {
       className: `${this.props.prefixCls} ${this.props.className}`,
     });
     return createElement(
-      this.props.component,
+      this.props.component || 'sup',
       props,
       this.renderNumberElement()
     );

components/badge/demo/basic.md

@@ -24,7 +24,7 @@ ReactDOM.render(
 ````
 
 ````css
-.ant-badge {
+.ant-badge:not(.ant-badge-status) {
   margin-right: 16px;
 }
 .head-example {

components/badge/demo/status.md

@@ -18,19 +18,21 @@ import { Badge } from 'antd';
 
 ReactDOM.render(
   <div>
-    <span>Status: &nbsp;</span>
     <Badge status="success" />
     <Badge status="error" />
     <Badge status="default" />
     <Badge status="processing" />
     <Badge status="warning" />
     <br />
-    <Badge status="success" text="Success" /><br />
-    <Badge status="error" text="Error" /><br />
-    <Badge status="default" text="Default" /><br />
-    <Badge status="processing" text="Processing" /><br />
+    <Badge status="success" text="Success" />
+    <br />
+    <Badge status="error" text="Error" />
+    <br />
+    <Badge status="default" text="Default" />
+    <br />
+    <Badge status="processing" text="Processing" />
+    <br />
     <Badge status="warning" text="Warning" />
-  </div>,
-  mountNode
-);
+  </div>
+, mountNode);
 ````

components/badge/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Animate from 'rc-animate';
 import ScrollNumber from './ScrollNumber';
 import classNames from 'classnames';
+import warning from 'warning';
 import splitObject from '../_util/splitObject';
 
 export interface BadgeProps {
@@ -24,7 +25,6 @@ export default class Badge extends React.Component<BadgeProps, any> {
     count: null,
     dot: false,
     overflowCount: 99,
-    // status: 'default',
   };
 
   static propTypes = {
@@ -57,18 +57,34 @@ export default class Badge extends React.Component<BadgeProps, any> {
     const scrollNumberCls = classNames({
       [`${prefixCls}-dot`]: isDot,
       [`${prefixCls}-count`]: !isDot,
-      [`${prefixCls}-status`]: status,
-      [`${prefixCls}-status-${status}`]: status,
-      [`${prefixCls}-status-with-text`]: text,
     });
     const badgeCls = classNames({
       [className]: !!className,
       [prefixCls]: true,
+      [`${prefixCls}-status`]: !!status,
       [`${prefixCls}-not-a-wrapper`]: !children,
     });
 
+    warning(
+      !(children && status),
+      '`Badge[children]` and `Badge[status]` cannot be used at the same time.'
+    );
+    // <Badge status="success" />
+    if (!children && status) {
+      const statusCls = classNames({
+        [`${prefixCls}-status-dot`]: !!status,
+        [`${prefixCls}-status-${status}`]: true,
+      });
+      return (
+        <span className={badgeCls}>
+          <span className={statusCls} />
+          <span className={`${prefixCls}-status-text`}>{text}</span>
+        </span>
+      );
+    }
+
     return (
-      <span className={badgeCls} title={count} style={null} {...restProps}>
+      <span {...restProps} className={badgeCls} title={count}>
         {children}
         <Animate
           component=""

components/badge/style/index.less

@@ -48,9 +48,15 @@
   }
 
   &-status {
-    width: 6px;
-    height: 6px;
+    line-height: inherit;
+    vertical-align: baseline;
 
+    &-dot {
+      width: 8px;
+      height: 8px;
+      display: inline-block;
+      border-radius: 50%;
+    }
     &-success {
       background-color: @success-color;
     }
@@ -67,15 +73,10 @@
     &-warning {
       background-color: @warning-color;
     }
-
-    &-with-text {
-      top: 5px;
-    }
-
     &-text {
       color: @text-color;
       font-size: @font-size-base;
-      margin-left: 8px; // 8 - (6 / 2) === 5
+      margin-left: 8px;
     }
   }
 
@@ -94,7 +95,7 @@
     top: auto;
     display: block;
     position: relative;
-    transform: translateX(0);
+    transform: none!important;
   }
 }
 

components/breadcrumb/Breadcrumb.tsx

@@ -8,11 +8,11 @@ export interface BreadcrumbProps {
   routes?: Array<any>;
   params?: Object;
   separator?: string | React.ReactNode;
-  itemRender?: (route, params, routes, paths) => React.ReactNode;
+  itemRender?: (route: any, params: any, routes: Array<any>, paths: Array<string>) => React.ReactNode;
   style?: React.CSSProperties;
 };
 
-function getBreadcrumbName(route, params, routes) {
+function getBreadcrumbName(route, params) {
   if (!route.breadcrumbName) {
     return null;
   }
@@ -24,19 +24,20 @@ function getBreadcrumbName(route, params, routes) {
   return name;
 }
 
+function defaultItemRender(route, params, routes, paths) {
+  const isLastItem = routes.indexOf(route) === routes.length - 1;
+  const name = getBreadcrumbName(route, params);
+  return isLastItem
+    ? <span>{name}</span>
+    : <a href={`#/${paths.join('/')}`}>{name}</a>;
+}
+
 export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
   static Item: any;
 
   static defaultProps = {
     prefixCls: 'ant-breadcrumb',
     separator: '/',
-    itemRender: (route, params, routes, paths) => {
-      const isLastItem = routes.indexOf(route) === routes.length - 1;
-      const name = getBreadcrumbName(route, params, routes);
-      return isLastItem
-        ? <span>{name}</span>
-        : <a href={`#/${paths.join('/')}`}>{name}</a>;
-    },
   };
 
   static propTypes = {
@@ -62,12 +63,12 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
 
   render() {
     let crumbs;
-    const { separator, prefixCls, routes, params, children, itemRender } = this.props;
+    const { separator, prefixCls, routes, params = {}, children, itemRender = defaultItemRender } = this.props;
     if (routes && routes.length > 0) {
-      const paths = [];
-      crumbs = routes.map((route, i) => {
+      const paths: string[] = [];
+      crumbs = routes.map((route) => {
         route.path = route.path || '';
-        let path = route.path.replace(/^\//, '');
+        let path: string = route.path.replace(/^\//, '');
         Object.keys(params).forEach(key => {
           path = path.replace(`:${key}`, params[key]);
         });
@@ -83,7 +84,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
         }
         return null;
       });
-    } else {
+    } else if (children) {
       crumbs = React.Children.map(children, (element: any, index) => {
         return cloneElement(element, {
           separator,

components/button/button.tsx

@@ -34,8 +34,8 @@ export interface ButtonProps {
   icon?: string;
   shape?: ButtonShape;
   size?: ButtonSize;
-  onClick?: React.FormEventHandler;
-  onMouseUp?: React.FormEventHandler;
+  onClick?: React.FormEventHandler<any>;
+  onMouseUp?: React.FormEventHandler<any>;
   loading?: boolean;
   disabled?: boolean;
   style?: React.CSSProperties;
@@ -48,7 +48,6 @@ export default class Button extends React.Component<ButtonProps, any> {
 
   static defaultProps = {
     prefixCls: 'ant-btn',
-    onClick() {},
     loading: false,
   };
 
@@ -87,7 +86,10 @@ export default class Button extends React.Component<ButtonProps, any> {
     clearTimeout(this.timeout);
     this.timeout = setTimeout(() => this.clearButton(buttonNode), 500);
 
-    this.props.onClick(e);
+    const onClick = this.props.onClick;
+    if (onClick) {
+      onClick(e);
+    }
   }
 
   // Handle auto focus when click button in Chrome

components/button/style/mixin.less

@@ -6,21 +6,9 @@
   border-radius: @border-radius;
 }
 
-.button-variant(@color; @background; @border) {
-  .button-color(@color; @background; @border);
-
-  &:hover,
-  &:focus {
-    .button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
-  }
-  &:active,
-  &.active {
-    .button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
-  }
-
+.button-disabled() {
   &.disabled,
-  &[disabled],
-  fieldset[disabled] & {
+  &[disabled] {
     &,
     &:hover,
     &:focus,
@@ -31,6 +19,38 @@
   }
 }
 
+.button-variant-primary(@color; @background) {
+  .button-color(@color; @background; @background);
+
+  &:hover,
+  &:focus {
+    .button-color(@color; tint(@background, 20%); tint(@background, 20%));
+  }
+
+  &:active,
+  &.active {
+    .button-color(@color; shade(@background, 5%); shade(@background, 5%));
+  }
+
+  .button-disabled();
+}
+
+.button-variant-other(@color; @background; @border) {
+  .button-color(@color; @background; @border);
+
+  &:hover,
+  &:focus {
+    .button-color(tint(@primary-color, 20%); @background; tint(@primary-color, 20%));
+  }
+
+  &:active,
+  &.active {
+    .button-color(shade(@primary-color, 5%); @background; shade(@primary-color, 5%));
+  }
+
+  .button-disabled();
+}
+
 .button-color(@color; @background; @border) {
   color: @color;
   background-color: @background;
@@ -57,7 +77,6 @@
   vertical-align: middle;
   > .@{btnClassName} {
     position: relative;
-    float: left;
     &:hover,
     &:focus,
     &:active,
@@ -86,12 +105,10 @@
   margin-bottom: 0;
   font-weight: @btn-font-weight;
   text-align: center;
-  vertical-align: middle;
   touch-action: manipulation;
   cursor: pointer;
   background-image: none;
   border: 1px solid transparent;
-  // outline: none;
   white-space: nowrap;
   line-height: @line-height-base;
   .button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base);
@@ -127,67 +144,39 @@
   }
 
   &-lg {
-    .button-size(@btn-padding-lg; @btn-font-size-lg; @border-radius-base);
+    .button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
   }
 
   &-sm {
-    .button-size(@btn-padding-sm; @font-size-base; @border-radius-sm);
+    .button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
   }
 }
 
 // primary button style
 .btn-primary() {
-  .button-variant(@btn-primary-color; @btn-primary-bg; @primary-color);
-
-  &:hover,
-  &:focus,
-  &:active,
-  &.active {
-    color: @btn-primary-color;
-  }
+  .button-variant-primary(@btn-primary-color; @btn-primary-bg);
 }
 
 // default button style
 .btn-default() {
-  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
-
+  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
   &:hover,
-  &:focus {
-    .button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
-  }
+  &:focus,
   &:active,
   &.active {
-    .button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
+    background: #fff;
   }
 }
 
 // ghost button style
 .btn-ghost() {
-  .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
-
-  &:hover,
-  &:focus {
-    .button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
-  }
-  &:active,
-  &.active {
-    .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
-  }
+  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
 }
 
 // ghost button style
 .btn-dashed() {
-  .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
   border-style: dashed;
-
-  &:hover,
-  &:focus {
-    .button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
-  }
-  &:active,
-  &.active {
-    .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
-  }
 }
 
 // circle button: the content only contains icon

components/calendar/Header.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import { PropTypes } from 'react';
+import moment from 'moment';
 import { PREFIX_CLS } from './Constants';
 import Select from '../select';
 import { Group, Button } from '../radio';
 const Option = Select.Option;
 
-function noop() {}
-
 export interface HeaderProps {
   prefixCls?: string;
   locale?: any;
@@ -24,21 +22,6 @@ export default class Header extends React.Component<HeaderProps, any> {
     prefixCls: `${PREFIX_CLS}-header`,
     yearSelectOffset: 10,
     yearSelectTotal: 20,
-    onValueChange: noop,
-    onTypeChange: noop,
-  };
-
-  static propTypes = {
-    value: PropTypes.object,
-    locale: PropTypes.object,
-    yearSelectOffset: PropTypes.number,
-    yearSelectTotal: PropTypes.number,
-    onValueChange: PropTypes.func,
-    onTypeChange: PropTypes.func,
-    prefixCls: PropTypes.string,
-    selectPrefixCls: PropTypes.string,
-    type: PropTypes.string,
-    fullscreen: PropTypes.bool,
   };
 
   getYearSelectElement(year) {
@@ -47,13 +30,13 @@ export default class Header extends React.Component<HeaderProps, any> {
     const end = start + yearSelectTotal;
     const suffix = locale.year === '年' ? '年' : '';
 
-    const options = [];
+    const options: React.ReactElement<any>[] = [];
     for (let index = start; index < end; index++) {
       options.push(<Option key={`${index}`}>{index + suffix}</Option>);
     }
     return (
       <Select
-        size={fullscreen ? null : 'small'}
+        size={fullscreen ? 'default' : 'small'}
         dropdownMatchSelectWidth={false}
         className={`${prefixCls}-year-select`}
         onChange={this.onYearChange}
@@ -64,10 +47,10 @@ export default class Header extends React.Component<HeaderProps, any> {
     );
   }
 
-  getMonthsLocale(value) {
+  getMonthsLocale(value: moment.Moment) {
     const current = value.clone();
     const localeData = value.localeData();
-    const months = [];
+    const months: any[] = [];
     for (let i = 0; i < 12; i++) {
       current.month(i);
       months.push(localeData.monthsShort(current));
@@ -78,7 +61,7 @@ export default class Header extends React.Component<HeaderProps, any> {
   getMonthSelectElement(month, months) {
     const props = this.props;
     const { prefixCls, fullscreen } = props;
-    const options = [];
+    const options: React.ReactElement<any>[] = [];
 
     for (let index = 0; index < 12; index++) {
       options.push(<Option key={`${index}`}>{months[index]}</Option>);
@@ -86,7 +69,7 @@ export default class Header extends React.Component<HeaderProps, any> {
 
     return (
       <Select
-        size={fullscreen ? null : 'small'}
+        size={fullscreen ? 'default' : 'small'}
         dropdownMatchSelectWidth={false}
         className={`${prefixCls}-month-select`}
         value={String(month)}
@@ -100,17 +83,27 @@ export default class Header extends React.Component<HeaderProps, any> {
   onYearChange = (year) => {
     const newValue = this.props.value.clone();
     newValue.year(parseInt(year, 10));
-    this.props.onValueChange(newValue);
+
+    const onValueChange = this.props.onValueChange;
+    if (onValueChange) {
+      onValueChange(newValue);
+    }
   }
 
   onMonthChange = (month) => {
     const newValue = this.props.value.clone();
     newValue.month(parseInt(month, 10));
-    this.props.onValueChange(newValue);
+    const onValueChange = this.props.onValueChange;
+    if (onValueChange) {
+      onValueChange(newValue);
+    }
   }
 
   onTypeChange = (e) => {
-    this.props.onTypeChange(e.target.value);
+    const onTypeChange = this.props.onTypeChange;
+    if (onTypeChange) {
+      onTypeChange(e.target.value);
+    }
   }
 
   render() {

components/calendar/demo/custom-render.md

@@ -18,11 +18,11 @@ import { Calendar } from 'antd';
 import moment from 'moment';
 
 function dateCellRender(value) {
-  return <div>自定义日数据 {value.date()}</div>;
+  return <div>Custom date {value.date()}</div>;
 }
 
 function monthCellRender(value) {
-  return <div>自定义月数据 {value.month()}</div>;
+  return <div>Custom monthly {value.month()}</div>;
 }
 
 ReactDOM.render(

components/calendar/demo/notice-calendar.md

@@ -21,23 +21,23 @@ function getListData(value) {
   switch (value.date()) {
     case 8:
       listData = [
-        { type: 'warning', content: '这里是警告事项.' },
-        { type: 'normal', content: '这里是普通事项.' },
+        { type: 'warning', content: 'This is warning event.' },
+        { type: 'normal', content: 'This is usual event.' },
       ]; break;
     case 10:
       listData = [
-        { type: 'warning', content: '这里是警告事项.' },
-        { type: 'normal', content: '这里是普通事项.' },
-        { type: 'error', content: '这里是错误事项.' },
+        { type: 'warning', content: 'This is warning event.' },
+        { type: 'normal', content: 'This is usual event.' },
+        { type: 'error', content: 'This is error event.' },
       ]; break;
     case 15:
       listData = [
-        { type: 'warning', content: '这里是警告事项.' },
-        { type: 'normal', content: '这里是普通事项好长啊。。....' },
-        { type: 'error', content: '这里是错误事项.' },
-        { type: 'error', content: '这里是错误事项.' },
-        { type: 'error', content: '这里是错误事项.' },
-        { type: 'error', content: '这里是错误事项.' },
+        { type: 'warning', content: 'This is warning event' },
+        { type: 'normal', content: 'This is very long usual event。。....' },
+        { type: 'error', content: 'This is error event.' },
+        { type: 'error', content: 'This is error event.' },
+        { type: 'error', content: 'This is error event.' },
+        { type: 'error', content: 'This is error event.' },
       ]; break;
     default:
   }
@@ -70,7 +70,7 @@ function monthCellRender(value) {
   const num = getMonthData(value);
   return num ? <div className="notes-month">
     <section>{num}</section>
-    <span>待办事项数</span>
+    <span>Backlog number</span>
   </div> : null;
 }
 

components/calendar/index.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { PropTypes } from 'react';
 import moment from 'moment';
 import FullCalendar from 'rc-calendar/lib/FullCalendar';
-import defaultLocale from './locale/zh_CN';
 import { PREFIX_CLS } from './Constants';
 import Header from './Header';
-import assign from 'object-assign';
+import getLocale from '../_util/getLocale';
+declare const require: Function;
 
 function noop() { return null; }
 
@@ -38,12 +38,9 @@ export interface CalendarProps {
 
 export default class Calendar extends React.Component<CalendarProps, any> {
   static defaultProps = {
-    monthCellRender: noop,
-    dateCellRender: noop,
     locale: {},
     fullscreen: true,
     prefixCls: PREFIX_CLS,
-    onPanelChange: noop,
     mode: 'month',
   };
 
@@ -81,42 +78,29 @@ export default class Calendar extends React.Component<CalendarProps, any> {
     }
   }
 
-  getLocale = () => {
-    const props = this.props;
-    const context = this.context;
-    let locale = defaultLocale;
-    if (context && context.antLocale && context.antLocale.Calendar) {
-      locale = context.antLocale.Calendar;
-    }
-    // 统一合并为完整的 Locale
-    const result = assign({}, locale, props.locale);
-    result.lang = assign({}, locale.lang, props.locale.lang);
-    return result;
-  }
-
   monthCellRender = (value) => {
-    const prefixCls = this.props.prefixCls;
+    const { prefixCls, monthCellRender = noop as Function } = this.props;
     return (
       <div className={`${prefixCls}-month`}>
         <div className={`${prefixCls}-value`}>
           {value.localeData().monthsShort(value)}
         </div>
         <div className={`${prefixCls}-content`}>
-          {this.props.monthCellRender(value)}
+          {monthCellRender(value)}
         </div>
       </div>
     );
   }
 
   dateCellRender = (value) => {
-    const prefixCls = this.props.prefixCls;
+    const { prefixCls, dateCellRender = noop as Function } = this.props;
     return (
       <div className={`${prefixCls}-date`}>
         <div className={`${prefixCls}-value`}>
           {zerofixed(value.date())}
         </div>
         <div className={`${prefixCls}-content`}>
-          {this.props.dateCellRender(value)}
+          {dateCellRender(value)}
         </div>
       </div>
     );
@@ -126,14 +110,20 @@ export default class Calendar extends React.Component<CalendarProps, any> {
     if (!('value' in this.props) && this.state.value !== value) {
       this.setState({ value });
     }
-    this.props.onPanelChange(value, this.state.mode);
+    const onPanelChange = this.props.onPanelChange;
+    if (onPanelChange) {
+      onPanelChange(value, this.state.mode);
+    }
   }
 
   setType = (type) => {
     const mode = (type === 'date') ? 'month' : 'year';
     if (this.state.mode !== mode) {
       this.setState({ mode });
-      this.props.onPanelChange(this.state.value, mode);
+      const onPanelChange = this.props.onPanelChange;
+      if (onPanelChange) {
+        onPanelChange(this.state.value, mode);
+      }
     }
   }
 
@@ -142,7 +132,10 @@ export default class Calendar extends React.Component<CalendarProps, any> {
     const { value, mode } = this.state;
     const { prefixCls, style, className, fullscreen } = props;
     const type = (mode === 'year') ? 'month' : 'date';
-    const locale = this.getLocale();
+    const locale = getLocale(
+      props, this.context, 'Calendar',
+      () => require('./locale/zh_CN')
+    );
 
     let cls = className || '';
     if (fullscreen) {

components/card/index.tsx

@@ -11,6 +11,7 @@ export interface CardProps {
   loading?: boolean;
   children?: any;
   id?: string;
+  className?: string;
 }
 
 export default (props: CardProps) => {
@@ -39,11 +40,20 @@ export default (props: CardProps) => {
     );
   }
 
-  const head = title ? (
-    <div className={`${prefixCls}-head`}>
-      <h3 className={`${prefixCls}-head-title`}>{title}</h3>
-    </div>
-  ) : null;
+  let head;
+  if (!title) {
+    head = null;
+  } else {
+    head = typeof title === 'string' ? (
+      <div className={`${prefixCls}-head`}>
+        <h3 className={`${prefixCls}-head-title`}>{title}</h3>
+      </div>
+    ) : (
+      <div className={`${prefixCls}-head`}>
+        <div className={`${prefixCls}-head-title`}>{title}</div>
+      </div>
+    );
+  }
 
   return (
     <div {...others} className={classString}>

components/card/style/index.less

@@ -16,8 +16,7 @@
   }
 
   &-bordered {
-    border: 1px solid @border-color-base;
-    border-color: @border-color-split;
+    border: 1px solid @border-color-split;
   }
 
   &-head {

components/carousel/index.tsx

@@ -62,7 +62,7 @@ export default class Carousel extends React.Component<CarouselProps, any> {
 
     return (
       <div className={className}>
-        <SlickCarousel {...props} />
+        <SlickCarousel ref="slick" {...props} />
       </div>
     );
   }

components/cascader/demo/custom-render.md

@@ -64,7 +64,7 @@ ReactDOM.render(
     options={options}
     defaultValue={['zhejiang', 'hangzhou', 'xihu']}
     displayRender={displayRender}
-    style={{ width: 200 }}
+    style={{ width: 270 }}
   />
 , mountNode);
 ````

components/cascader/demo/search.md

@@ -49,7 +49,6 @@ ReactDOM.render(
     options={options}
     onChange={onChange}
     placeholder="Please select"
-    style={{ width: 230 }}
     showSearch
   />,
   mountNode

components/cascader/index.en-US.md

@@ -38,6 +38,7 @@ Cascade selection box.
 | changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false |
 | showSearch | Whether show search input in single mode. | Boolean or Object | false |
 | notFoundContent | Specify content to show when no result matches. | String | 'Not Found' |
+| 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](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
 
 Fields in `showSearch`:
 
@@ -48,3 +49,8 @@ Fields in `showSearch`:
 | sort | Used to sort filtered options. | `function(a, b, inputValue)` | |
 | matchInputWidth | Whether the width of result list equals to input's | boolean | |
 
+<style>
+.ant-cascader-picker {
+  width: 220px;
+}
+</style>

components/cascader/index.tsx

@@ -89,6 +89,8 @@ function defaultSortFilteredOption(a, b, inputValue) {
   return a.findIndex(callback) - b.findIndex(callback);
 }
 
+const defaultDisplayRender = label => label.join(' / ');
+
 export default class Cascader extends React.Component<CascaderProps, any> {
   static defaultProps = {
     prefixCls: 'ant-cascader',
@@ -96,14 +98,11 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     placeholder: 'Please select',
     transitionName: 'slide-up',
     popupPlacement: 'bottomLeft',
-    onChange() {},
     options: [],
-    displayRender: label => label.join(' / '),
     disabled: false,
     allowClear: true,
     showSearch: false,
     notFoundContent: 'Not Found',
-    onPopupVisibleChange() {},
   };
 
   cachedOptions: CascaderOptionType[];
@@ -117,7 +116,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
   constructor(props) {
     super(props);
     this.state = {
-      value: props.value || props.defautValue || [],
+      value: props.value || props.defaultValue || [],
       inputValue: '',
       inputFocused: false,
       popupVisible: false,
@@ -144,8 +143,13 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     this.setState({
       popupVisible,
       inputFocused: popupVisible,
+      inputValue: popupVisible ? this.state.inputValue : '',
      });
-    this.props.onPopupVisibleChange(popupVisible);
+
+    const onPopupVisibleChange = this.props.onPopupVisibleChange;
+    if (onPopupVisibleChange) {
+      onPopupVisibleChange(popupVisible);
+    }
   }
 
   handleInputBlur = () => {
@@ -172,11 +176,14 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     if (!('value' in this.props)) {
       this.setState({ value });
     }
-    this.props.onChange(value, selectedOptions);
+    const onChange = this.props.onChange;
+    if (onChange) {
+      onChange(value, selectedOptions);
+    }
   }
 
   getLabel() {
-    const { options, displayRender } = this.props;
+    const { options, displayRender = defaultDisplayRender as Function } = this.props;
     const value = this.state.value;
     const unwrappedValue = Array.isArray(value[0]) ? value[0] : value;
     const selectedOptions = arrayTreeFilter(options, (o, level) => o.value === unwrappedValue[level]);
@@ -196,7 +203,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
   }
 
   flattenTree(options, changeOnSelect, ancestor = []) {
-    let flattenOptions = [];
+    let flattenOptions: any = [];
     options.forEach((option) => {
       const path = ancestor.concat(option);
       if (changeOnSelect || !option.children) {
@@ -256,6 +263,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     const pickerCls = classNames({
       [className]: !!className,
       [`${prefixCls}-picker`]: true,
+      [`${prefixCls}-picker-with-value`]: state.inputValue,
       [`${prefixCls}-picker-disabled`]: disabled,
     });
 
@@ -291,10 +299,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
       this.cachedOptions = options;
     }
 
-    const dropdownMenuColumnStyle = {
-      width: undefined,
-      height: undefined,
-    };
+    const dropdownMenuColumnStyle: { width?: number, height?: string } = {};
     const isNotFound = (options || []).length === 1 && options[0].value === 'ANT_CASCADER_NOT_FOUND';
     if (isNotFound) {
       dropdownMenuColumnStyle.height = 'auto'; // Height of one row.
@@ -305,7 +310,8 @@ export default class Cascader extends React.Component<CascaderProps, any> {
       dropdownMenuColumnStyle.width = this.refs.input.refs.input.offsetWidth;
     }
     return (
-      <RcCascader {...props}
+      <RcCascader
+        {...props}
         options={options}
         value={value}
         popupVisible={state.popupVisible}
@@ -318,18 +324,22 @@ export default class Cascader extends React.Component<CascaderProps, any> {
             style={style}
             className={pickerCls}
           >
-            <Input {...inputProps}
+            <Input
+              {...inputProps}
               ref="input"
               placeholder={value && value.length > 0 ? null : placeholder}
               className={`${prefixCls}-input ${sizeCls}`}
               value={state.inputValue}
               disabled={disabled}
               readOnly={!showSearch}
-              onClick={showSearch ? this.handleInputClick : null}
-              onBlur={showSearch ? this.handleInputBlur : null}
-              onChange={showSearch ? this.handleInputChange : null}
+              autoComplete="off"
+              onClick={showSearch ? this.handleInputClick : undefined}
+              onBlur={showSearch ? this.handleInputBlur : undefined}
+              onChange={showSearch ? this.handleInputChange : undefined}
             />
-            <span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
+            <span className={`${prefixCls}-picker-label`}>
+              {this.getLabel()}
+            </span>
             {clearIcon}
             <Icon type="down" className={arrowCls} />
           </span>

components/cascader/index.zh-CN.md

@@ -39,6 +39,7 @@ subtitle: 级联选择
 | changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | Boolean | false |
 | showSearch | 在选择框中显示搜索框 | Boolean | false |
 | notFoundContent | 当下拉列表为空时显示的内容 | String | 'Not Found' |
+| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
 
 `showSearch` 为对象时，其中的字段：
 
@@ -48,3 +49,9 @@ subtitle: 级联选择
 | render | 用于渲染 filter 后的选项 | `function(inputValue, path): React.ReactNode` | |
 | sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | |
 | matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | |
+
+<style>
+.ant-cascader-picker {
+  width: 220px;
+}
+</style>

components/cascader/style/index.less

@@ -11,8 +11,6 @@
     cursor: pointer;
     width: 100%;
     z-index: 1;
-    background: transparent;
-    color: transparent;
   }
   &-picker {
     position: relative;
@@ -23,6 +21,10 @@
     background-color: #fff;
     border-radius: @border-radius-base;
 
+    &-with-value &-label {
+      color: transparent;
+    }
+
     &-disabled {
       cursor: not-allowed;
 
@@ -97,7 +99,6 @@
     background: #fff;
     position: absolute;
     z-index: @zindex-dropdown;
-    border: 1px solid @border-color-base;
     border-radius: @border-radius-base;
     box-shadow: @box-shadow-base;
     white-space: nowrap;

components/checkbox/Group.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Checkbox from './index';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
 
 export interface CheckboxOptionType {
   label: string;
@@ -29,7 +29,6 @@ export interface CheckboxGroupState {
 export default class CheckboxGroup extends React.Component<CheckboxGroupProps, CheckboxGroupState> {
   static defaultProps = {
     options: [],
-    onChange() {},
     prefixCls: 'ant-checkbox-group',
   };
   static propTypes = {
@@ -78,7 +77,10 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps, C
     if (!('value' in this.props)) {
       this.setState({ value });
     }
-    this.props.onChange(value);
+    const onChange = this.props.onChange;
+    if (onChange) {
+      onChange(value);
+    }
   }
   render() {
     const { prefixCls } = this.props;

components/checkbox/index.tsx

@@ -2,7 +2,7 @@ import RcCheckbox from 'rc-checkbox';
 import React from 'react';
 import CheckboxGroup from './Group';
 import classNames from 'classnames';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
 import splitObject from '../_util/splitObject';
 
 export interface CheckboxProps {
@@ -13,7 +13,7 @@ export interface CheckboxProps {
   /** indeterminate 状态，只负责样式控制 */
   indeterminate?: boolean;
   /** 变化时回调函数 */
-  onChange?: React.FormEventHandler;
+  onChange?: React.FormEventHandler<any>;
   style?: React.CSSProperties;
   disabled?: boolean;
   className?: string;

components/date-picker/RangePicker.tsx

@@ -8,6 +8,7 @@ import Icon from '../icon';
 export default class RangePicker extends React.Component<any, any> {
   static defaultProps = {
     prefixCls: 'ant-calendar',
+    allowClear: true,
   };
 
   constructor(props) {
@@ -45,7 +46,7 @@ export default class RangePicker extends React.Component<any, any> {
 
   render() {
     const props = this.props;
-    const { disabledDate, showTime, prefixCls, popupStyle, style, onOk, locale } = props;
+    const { disabledDate, disabledTime, showTime, prefixCls, popupStyle, style, onOk, locale } = props;
     const state = this.state;
 
     const calendarClassName = classNames({
@@ -77,6 +78,7 @@ export default class RangePicker extends React.Component<any, any> {
         className={calendarClassName}
         timePicker={props.timePicker}
         disabledDate={disabledDate}
+        disabledTime={disabledTime}
         dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
         locale={locale.lang}
         onOk={onOk}
@@ -84,7 +86,7 @@ export default class RangePicker extends React.Component<any, any> {
       />
     );
 
-    const clearIcon = (!props.disabled && state.value && (state.value[0] || state.value[1]))
+    const clearIcon = (!props.disabled && props.allowClear && state.value && (state.value[0] || state.value[1]))
       ? <Icon
         type="cross-circle"
         className={`${prefixCls}-picker-clear`}

components/date-picker/createPicker.tsx

@@ -4,6 +4,7 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
 import assign from 'object-assign';
+import omit from 'omit.js';
 import Icon from '../icon';
 
 export interface PickerProps {
@@ -13,10 +14,11 @@ export interface PickerProps {
 
 export default function createPicker(TheCalendar) {
   // use class typescript error
-  const CalenderWrapper = React.createClass({
+  const CalenderWrapper = React.createClass<any, any>({
     getDefaultProps() {
       return {
         prefixCls: 'ant-calendar',
+        allowClear: true,
       };
     },
 
@@ -24,13 +26,15 @@ export default function createPicker(TheCalendar) {
       const props = this.props;
       return {
         value: props.value || props.defaultValue,
+        tempValue: undefined,
       };
     },
 
     componentWillReceiveProps(nextProps: PickerProps) {
-      if ('value' in nextProps) {
+      if (nextProps.value !== undefined) {
         this.setState({
           value: nextProps.value,
+          tempValue: nextProps.value,
         });
       }
     },
@@ -44,14 +48,30 @@ export default function createPicker(TheCalendar) {
 
     handleChange(value) {
       const props = this.props;
-      if (!('value' in props)) {
+      if (props.value === undefined) {
         this.setState({ value });
       }
       props.onChange(value, (value && value.format(props.format)) || '');
     },
 
+    handleTempChange(tempValue) {
+      this.setState({ tempValue });
+    },
+
+    // Clear temp value when hide picker panel
+    handleOpenChange(open) {
+      if (!open) {
+        this.setState({
+          tempValue: undefined,
+        });
+      }
+      if (this.props.onOpenChange) {
+        this.props.onOpenChange(open);
+      }
+    },
+
     render() {
-      const props = this.props;
+      const props = omit(this.props, ['onChange']);
       const prefixCls = props.prefixCls;
       const locale = props.locale;
 
@@ -66,18 +86,24 @@ export default function createPicker(TheCalendar) {
       });
 
       // 需要选择时间时，点击 ok 时才触发 onChange
-      let pickerChangeHandler: Object = {
-        onChange: this.handleChange,
-      };
-      let calendarHandler: Object = {
-        onOk: this.handleChange,
-        // fix https://github.com/ant-design/ant-design/issues/1902
-        onSelect: value => this.handleChange(value),
-      };
+      let pickerChangeHandler: Object = {};
+      let calendarHandler: Object = {};
       if (props.showTime) {
-        pickerChangeHandler = {};
+        calendarHandler = {
+          onOk: this.handleChange,
+          // fix https://github.com/ant-design/ant-design/issues/1902
+          onSelect: (value, cause) => {
+            if (cause && cause.source === 'todayButton') {
+              this.handleChange(value);
+            } else {
+              this.handleTempChange(value);
+            }
+          },
+        };
       } else {
-        calendarHandler = {};
+        pickerChangeHandler = {
+          onChange: this.handleChange,
+        };
       }
 
       const calendar = (
@@ -91,17 +117,18 @@ export default function createPicker(TheCalendar) {
           prefixCls={prefixCls}
           className={calendarClassName}
           onOk={props.onOk}
+          format={props.format}
           {...calendarHandler}
         />
       );
 
       // default width for showTime
-      const pickerStyle = { width: undefined };
+      const pickerStyle: { width?: number } = {};
       if (props.showTime) {
         pickerStyle.width = 180;
       }
 
-      const clearIcon = (!props.disabled && this.state.value) ?
+      const clearIcon = (!props.disabled && props.allowClear && this.state.value) ?
         <Icon type="cross-circle"
           className={`${prefixCls}-picker-clear`}
           onClick={this.clearSelection}
@@ -111,8 +138,9 @@ export default function createPicker(TheCalendar) {
           <RcDatePicker
             {...props}
             {...pickerChangeHandler}
+            onOpenChange={this.handleOpenChange}
             calendar={calendar}
-            value={this.state.value}
+            value={this.state.tempValue || this.state.value}
             prefixCls={`${prefixCls}-picker-container`}
             style={props.popupStyle}
           >

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

@@ -8,6 +8,7 @@ title:
 ## zh-CN
 
 设置 `disabledDate` 方法，来确定不可选时段。
+设置 `disabledTime` 方法，来确定 showTime 的 RangePicker 的不可选时间段。
 
 如上例：不可选择今天之后的日期。
 
@@ -19,13 +20,54 @@ As in the example above: you can't select a date later than today.
 
 ````jsx
 import { DatePicker } from 'antd';
+const RangePicker = DatePicker.RangePicker;
+
+function newArray(start, end) {
+  const result = [];
+  for (let i = start; i < end; i++) {
+    result.push(i);
+  }
+  return result;
+}
+
 
 const disabledDate = function (current) {
   // can not select days after today
   return current && current.valueOf() > Date.now();
 };
 
-ReactDOM.render(
-  <DatePicker disabledDate={disabledDate} />
+function disabledTime(time, type) {
+  console.log('disabledTime', time, type);
+  if (type === 'start') {
+    return {
+      disabledHours() {
+        return newArray(0, 60).splice(4, 20);
+      },
+      disabledMinutes() {
+        return newArray(30, 60);
+      },
+      disabledSeconds() {
+        return [55, 56];
+      },
+    };
+  }
+  return {
+    disabledHours() {
+      return newArray(0, 60).splice(20, 4);
+    },
+    disabledMinutes() {
+      return newArray(0, 31);
+    },
+    disabledSeconds() {
+      return [55, 56];
+    },
+  };
+}
+
+ReactDOM.render(<div>
+    <DatePicker disabledDate={disabledDate} />
+    <br />
+    <RangePicker showTime disabledDate={disabledDate} disabledTime={disabledTime} />
+  </div>
 , mountNode);
 ````

components/date-picker/demo/locale.md

@@ -9,13 +9,13 @@ title:
 
 通过 `locale` 语言, 默认支持 `en_US`，`zh_CN`。
 
-moment 会自动使用当前时区，如果需要使用别的时区，则需要自行设置，设置方法请参考 [下面的文档](http://ant.design/components/date-picker/#DatePicker)。
+moment 会自动使用当前时区，如果需要使用别的时区，则需要自行设置，设置方法请参考 [下面的文档](/components/date-picker/#DatePicker)。
 
 ## en-US
 
 Use locale to set the language. `en_US`, `zh_CN` are supported by default.
 
-moment will use your time zone automatically. If you want to set other time zone, please set it by yourself. [More](http://ant.design/components/date-picker/#DatePicker)
+moment will use your time zone automatically. If you want to set other time zone, please set it by yourself. [More](/components/date-picker/#DatePicker)
 
 
 ````jsx

components/date-picker/demo/range.md

@@ -24,7 +24,7 @@ function onChange(dates, dateStrings) {
   console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
 }
 ReactDOM.render(<div>
-  <RangePicker style={{ width: 184 }} onChange={onChange} />
+  <RangePicker style={{ width: 200 }} onChange={onChange} />
   <br />
   <RangePicker showTime format="YYYY/MM/DD HH:mm:ss" onChange={onChange} />
 </div>, mountNode);

components/date-picker/demo/start-end.md

@@ -64,7 +64,7 @@ const DateRange = React.createClass({
           showTime
           format="YYYY-MM-DD HH:mm:ss"
           value={this.state.startValue}
-          placeholder="开始日期"
+          placeholder="Start"
           onChange={this.onStartChange}
           onOpenChange={this.handleStartOpenChange}
         />
@@ -73,7 +73,7 @@ const DateRange = React.createClass({
           showTime
           format="YYYY-MM-DD HH:mm:ss"
           value={this.state.endValue}
-          placeholder="结束日期"
+          placeholder="End"
           onChange={this.onEndChange}
           open={this.state.endOpen}
           onOpenChange={this.handleEndOpenChange}

components/date-picker/demo/time.md

@@ -16,11 +16,12 @@ This property provide an additional time selection. When `showTime` is an Object
 ````jsx
 import { DatePicker } from 'antd';
 
-function onChange(value) {
-  console.log('选择了时间：', value);
+function onChange(value, dateString) {
+  console.log('Selected Time: ', value);
+  console.log('Formatted Selected Time: ', dateString);
 }
 
 ReactDOM.render(
-  <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" onChange={onChange} />
+  <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="Select Time" onChange={onChange} />
 , mountNode);
 ````

components/date-picker/demo/with-time-picker.md

@@ -1,68 +0,0 @@
----
-order: 4
-hidden: true
-title: 
-  zh-CN: 日期时间选择二
-  en-US: To select a date, case 2
----
-
-## zh-CN
-
-和 <a href="/components/time-picker">时间选择框</a> 配合使用。
-
-## en-US
-
-Cooperate with `<a href="/components/time-picker">time-picker</a>`
-
-````jsx
-import { DatePicker, TimePicker } from 'antd';
-
-const DateTimePicker = React.createClass({
-  handleChange(from, value) {
-    this.result = this.result || new Date();
-    if (!value) {
-      if (from === 'date') {
-        this.selectedDate = false;
-      } else {
-        this.selectedTime = false;
-      }
-      return;
-    }
-    if (from === 'date') {
-      this.result.setFullYear(value.getFullYear());
-      this.result.setMonth(value.getMonth());
-      this.result.setDate(value.getDate());
-      this.selectedDate = true;
-    } else {
-      this.result.setHours(value.getHours());
-      this.result.setMinutes(value.getMinutes());
-      this.result.setSeconds(value.getSeconds());
-      this.selectedTime = true;
-    }
-    if (this.selectedDate && this.selectedTime) {
-      this.props.onSelect(this.result);
-    }
-  },
-  handleDateChange(value) {
-    this.handleChange('date', value);
-  },
-  handleTimeChange(value) {
-    this.handleChange('time', value);
-  },
-  render() {
-    return (
-      <div>
-        <DatePicker onChange={this.handleDateChange} />
-        <TimePicker onChange={this.handleTimeChange} />
-      </div>
-    );
-  },
-});
-
-function onSelect(value) {
-  console.log('选择了时间：', value);
-}
-
-ReactDOM.render(<DateTimePicker onSelect={onSelect} />
-, mountNode);
-````

components/date-picker/index.en-US.md

@@ -12,7 +12,7 @@ By clicking the input box, you can select a date from a popup calendar.
 
 ## API
 
-### DatePicker
+Note: Part of locale of DatePicker, MonthPicker, RangePicker is read from value. So, please set the locale of moment correctly.
 
 ```jsx
 import moment from 'moment-timezone/moment-timezone';
@@ -27,23 +27,32 @@ moment.tz.setDefault('Asia/Shanghai')
 <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
 ```
 
-| Property         | Description           | Type     | Default       |
+### Common API
+
+The following APIs are shared by DatePicker, MonthPicker, RangePicker.
+
+| Property     | Description    | Type     | Default      |
 |--------------|----------------|----------|--------------|
-| value        | to set date           | [moment](http://momentjs.com/)   | -           |
-| defaultValue | to set default date        | [moment](http://momentjs.com/)   | -           |
-| format       | to set the date format, refer to [moment.js](http://momentjs.com/) | String   | "YYYY-MM-DD" |
-| disabledDate | to specify the date that cannot be selected | function | -           |
-| onChange     | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | -           |
+| allowClear   | Whether to show clear button | bool | true |
 | disabled     | determine whether the DatePicker is disabled           | Boolean     | false        |
 | style        | to customize the style of the input box     | Object     | {}   |
 | popupStyle   | to customize the style of the popup calendar   | Object     | {}   |
 | size         | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | String   | -  |
 | locale       | localization configuration | Object   | [default](https://github.com/ant-design/ant-design/issues/424)  |
-| onOk         | a callback function, can be executed when OK-button is clicked | function(Date value) | - |
+| disabledDate | to specify the date that cannot be selected | function | -           |
+| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
+
+### DatePicker
+
+| Property         | Description           | Type     | Default       |
+|--------------|----------------|----------|--------------|
+| value        | to set date           | [moment](http://momentjs.com/)   | -           |
+| defaultValue | to set default date        | [moment](http://momentjs.com/)   | -           |
+| format       | to set the date format, refer to [moment.js](http://momentjs.com/) | String   | "YYYY-MM-DD" |
+| onChange     | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | -           |
 | open | open state of picker | bool | - |
 | onOpenChange   | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
-| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
-| showTime     | to provide an additional time selection  | Object/Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |
+| showTime     | to provide an additional time selection  | Object/Boolean | [TimePicker Options](/components/time-picker/#api) |
 
 ### MonthPicker
 
@@ -52,27 +61,18 @@ moment.tz.setDefault('Asia/Shanghai')
 | value        | to set date          | [moment](http://momentjs.com/)   | -           |
 | defaultValue | to set default date       | [moment](http://momentjs.com/)   | -           |
 | format       | to set the date format, refer to [moment.js](http://momentjs.com/) | String   | "YYYY-MM" |
-| disabledDate | to specify the date that cannot be selected | function | -           |
 | onChange     | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | -           |
-| disabled     | determine whether the MonthPicker is disabled           | Boolean     | false        |
-| style        | to customize the style of the input box     | Object     | {}   |
-| popupStyle   | to customize the style of the popup calendar   | Object     | {}   |
-| size         | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | String   | -  |
-| locale       | localization configuration | Object   | [default](https://github.com/ant-design/ant-design/issues/424)  |
-| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
 
 ### RangePicker
 
 | Property         | Description           | Type     | Default       |
 |--------------|----------------|----------|--------------|
-| value        | to set date          | [moment, moment]   | -           |
-| defaultValue | to set default date       | [moment, moment]   | -           |
+| value        | to set date          | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)]   | -           |
+| defaultValue | to set default date       | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)]   | -           |
 | format       | to set the date format  | String    | "YYYY-MM-DD HH:mm:ss" |
 | onChange     | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) | -           |
-| showTime     | to provide an additional time selection  | Object/Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |
-
-The following properties are the same with `DatePicker`: `disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer`
-
+| showTime     | to provide an additional time selection  | Object/Boolean | [TimePicker Options](/components/time-picker/#api) |
+| disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - |
 
 <style>
 .code-box-demo .ant-calendar-picker {

components/date-picker/index.tsx

@@ -10,15 +10,16 @@ import Calendar from './Calendar';
 import { TimePickerProps } from '../time-picker';
 
 export interface PickerProps {
+  prefixCls?: string;
+  inputPrefixCls?: string;
   format?: string;
   disabled?: boolean;
+  allowClear?: boolean;
   style?: React.CSSProperties;
   popupStyle?: React.CSSProperties;
   locale?: any;
   size?: 'large' | 'small' | 'default';
-  getCalendarContainer?: (trigger) => React.ReactNode;
-  prefixCls?: string;
-  inputPrefixCls?: string;
+  getCalendarContainer?: (trigger: any) => React.ReactNode;
 }
 
 export interface SinglePickerProps {
@@ -32,12 +33,15 @@ export interface DatePickerProps extends PickerProps, SinglePickerProps {
   showTime?: TimePickerProps | boolean;
   open?: boolean;
   toggleOpen?: (e: {open: boolean}) => void;
+  disabledDate?: (current: moment.Moment) => boolean;
+  onOpenChange?: (status: boolean) => void;
 }
 const DatePicker = wrapPicker(createPicker(RcCalendar)) as React.ClassicComponentClass<DatePickerProps>;
 
 export interface MonthPickerProps extends PickerProps, SinglePickerProps {
+  disabledDate?: (current: moment.Moment) => boolean;
 }
-const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'YYYY-MM') as React.ClassicComponentClass<MonthPickerProps>;
+const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'YYYY-MM');
 
 export interface RangePickerProps extends PickerProps {
   value?: [moment.Moment, moment.Moment];
@@ -48,9 +52,14 @@ export interface RangePickerProps extends PickerProps {
 }
 
 assign(DatePicker, {
-  RangePicker: wrapPicker(RangePicker) as React.ClassicComponentClass<RangePickerProps>,
+  RangePicker: wrapPicker(RangePicker),
   Calendar,
   MonthPicker,
 });
 
-export default DatePicker;
+export interface DatePickerDecorator extends React.ClassicComponentClass<DatePickerProps> {
+  RangePicker: React.ClassicComponentClass<RangePickerProps>;
+  MonthPicker: React.ClassicComponentClass<MonthPickerProps>;
+}
+
+export default DatePicker as DatePickerDecorator;

components/date-picker/index.zh-CN.md

@@ -13,7 +13,7 @@ subtitle: 日期选择框
 
 ## API
 
-### DatePicker
+注意：DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
 
 ```jsx
 import moment from 'moment-timezone/moment-timezone';
@@ -28,50 +28,52 @@ moment.tz.setDefault('Asia/Shanghai')
 <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
 ```
 
+### 共同的 API
+
+以下 API 为 DatePicker、MonthPicker、RangePicker 共享的 API。
+
+| 参数          | 说明            | 类型     | 默认值        |
+|--------------|----------------|----------|--------------|
+| allowClear   | 是否显示清除按钮 | bool     | true         |
+| disabled     | 禁用           | bool     | false        |
+| style        | 自定义输入框样式     | object     | {}   |
+| popupStyle   | 格外的弹出日历样式   | object     | {}   |
+| size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |
+| locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
+| disabledDate | 不可选择的日期 | function | 无           |
+| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
+
+### DatePicker
+
 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
 | value        | 日期           | [moment](http://momentjs.com/)   | 无           |
 | defaultValue | 默认日期       | [moment](http://momentjs.com/)   | 无           |
 | format       | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string   | "YYYY-MM-DD" |
-| disabledDate | 不可选择的日期 | function | 无           |
 | onChange     | 时间发生变化的回调 | function(date: moment, dateString: string) | 无           |
-| disabled     | 禁用           | bool     | false        |
-| style        | 自定义输入框样式     | object     | {}   |
-| popupStyle   | 格外的弹出日历样式   | object     | {}   |
-| size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |
-| locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
 | open | 控制弹层是否展开 | bool | - |
 | onOpenChange   | 弹出日历和关闭日历的回调 | function(status) | 无 |
-| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
-| showTime     | 增加时间选择功能  | Object or Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |
+| showTime     | 增加时间选择功能  | Object or Boolean | [TimePicker Options](/components/time-picker/#api) |
 
 ### MonthPicker
 
 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
-| value        | 日期           | moment   | 无           |
-| defaultValue | 默认日期       | moment   | 无           |
+| value        | 日期           | [moment](http://momentjs.com/)   | 无           |
+| defaultValue | 默认日期       | [moment](http://momentjs.com/)   | 无           |
 | format       | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string   | "YYYY-MM" |
-| disabledDate | 不可选择的日期 | function | 无           |
 | onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | 无           |
-| disabled     | 禁用           | bool     | false        |
-| style        | 自定义输入框样式     | object     | {}   |
-| popupStyle   | 格外的弹出日历样式   | object     | {}   |
-| size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |
-| locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
-| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
 
 ### RangePicker
 
 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
-| value        | 日期          | [moment, moment]   | 无           |
-| defaultValue | 默认日期       | [moment, moment]   | 无           |
+| value        | 日期          | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)]   | 无           |
+| defaultValue | 默认日期       | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)]   | 无           |
 | format       | 展示的日期格式  | string    | "YYYY-MM-DD HH:mm:ss" |
 | onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(dates: [moment, moment], dateStrings: [string, string]) | 无           |
-| showTime     | 增加时间选择功能  | Object or Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |
-
-`disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer` 属性与 DatePicker 的一致。
+| showTime     | 增加时间选择功能  | Object or Boolean | [TimePicker Options](/components/time-picker/#api) |
+| disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 |
 
 <style>
 .code-box-demo .ant-calendar-picker {

components/date-picker/style/Calendar.less

@@ -86,7 +86,7 @@
   position: relative;
   outline: none;
   width: 231px;
-  border: 1px solid @border-color-base;
+  border: 1px solid #fff;
   list-style: none;
   font-size: @font-size-base;
   text-align: left;
@@ -238,7 +238,7 @@
   }
 
   &-footer {
-    padding: 0 15px;
+    padding: 0 16px;
     height: 38px;
     line-height: 38px;
     border-top: 1px solid @border-color-split;

components/date-picker/style/RangePicker.less

@@ -75,23 +75,20 @@
   }
 
   &.@{calendar-prefix-cls}-time &-middle {
-    margin-left: -29px;
+    margin-left: -12px;
   }
 
   &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
-    margin-left: -15px;
+    margin-left: 0;
   }
 
   .@{calendar-prefix-cls}-input-wrap {
     position: relative;
     height: @input-box-height;
   }
-  .@{calendar-prefix-cls}-input {
-    border: 1px solid @border-color-base;
-    border-radius: @border-radius-sm;
-  }
+
   .@{calendar-prefix-cls}-input,
-  .@{timepicker-prefix-cls}-input {
+  .@{calendar-timepicker-prefix-cls}-input {
     .input;
     border-radius: @border-radius-sm;
     height: @input-height-sm;
@@ -102,7 +99,8 @@
       box-shadow: none;
     }
   }
-  .@{timepicker-prefix-cls}-icon {
+
+  .@{calendar-timepicker-prefix-cls}-icon {
     display: none;
   }
 
@@ -164,7 +162,7 @@
   }
 
   &.@{calendar-prefix-cls}-time {
-    .@{timepicker-prefix-cls} {
+    .@{calendar-timepicker-prefix-cls} {
       height: 207px;
       top: 68px;
       z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
@@ -195,13 +193,7 @@
     .@{calendar-prefix-cls}-footer-btn {
       padding-right: 12px;
       display: block;
-      &::after {
-        content: 'x';
-        height: 0;
-        font-size: 0;
-        overflow: hidden;
-        clear: both;
-      }
+      .clearfix;
     }
     .@{calendar-prefix-cls}-ok-btn {
       position: static;

components/date-picker/style/TimePicker.less

@@ -1,8 +1,8 @@
-.@{timepicker-prefix-cls} {
+.@{calendar-timepicker-prefix-cls} {
   position: absolute;
   width: 100%;
   top: 34px;
-  background-color: white;
+  background-color: #fff;
   height: 206px;
 
   &-panel {
@@ -39,58 +39,8 @@
     }
   }
 
-  &-input {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    width: 100%;
-    cursor: auto;
-    line-height: 1.5;
-    outline: 0;
-
-    &-wrap {
-      display: none;
-      box-sizing: border-box;
-      position: relative;
-      padding: 6px;
-      border-bottom: 1px solid @border-color-split;
-    }
-
-    &-invalid {
-      border-color: red;
-    }
-  }
-
-  &-clear-btn {
-    position: absolute;
-    right: 5px;
-    cursor: pointer;
-    overflow: hidden;
-    width: 20px;
-    height: 20px;
-    text-align: center;
-    line-height: 20px;
-    top: 5px;
-    margin: 0;
-  }
-
-  &-clear-btn:after {
-    content: "\e62e";
-    font-family: "anticon";
-    font-size: 12px;
-    color: #ccc;
-    display: inline-block;
-    line-height: 1;
-    width: 20px;
-    transition: color 0.3s ease;
-  }
-
-  &-clear-btn:hover:after {
-    color: #999;
-  }
-
-  &-narrow &-input-wrap {
-    max-width: 111px;
+  &-input-wrap {
+    display: none;
   }
 
   &-select {
@@ -162,115 +112,43 @@
       }
     }
   }
-
-  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
-  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
-  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
-  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
-    animation-name: antSlideDownIn;
-  }
-
-  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
-  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
-  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
-  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
-    animation-name: antSlideUpIn;
-  }
-
-  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
-  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
-    animation-name: antSlideDownOut;
-  }
-
-  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
-  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
-    animation-name: antSlideUpOut;
-  }
 }
 
-.@{timepicker-prefix-cls} {
-  display: inline-block;
-  outline: none;
-  font-size: @font-size-base;
-
-  &-input {
-    .input;
-    width: 100px;
+.@{calendar-prefix-cls}-time {
+  .@{calendar-prefix-cls}-day-select {
+    padding: 0 2px;
+    font-weight: bold;
+    display: inline-block;
+    color: #666;
+    line-height: 34px;
   }
 
-  &-large &-input {
-    .input-lg;
-  }
+  .@{calendar-prefix-cls}-footer {
+    border-top: 1px solid @border-color-split;
+    padding: 10px 0;
+    text-align: right;
+    position: relative;
+    height: auto;
+    line-height: auto;
 
-  &-small &-input {
-    .input-sm;
-  }
-
-  &-open {
-    opacity: 0;
-  }
-
-  &-icon {
-    position: absolute;
-    user-select: none;
-    transition: all .3s @ease-in-out;
-    width: 12px;
-    height: 12px;
-    line-height: 12px;
-    right: 8px;
-    color: #999;
-    top: 50%;
-    margin-top: -6px;
-    &:after {
-      content: "\e643";
-      font-family: "anticon";
-      font-size: 12px;
-      color: #999;
-      display: inline-block;
-      line-height: 1;
-      vertical-align: bottom;
-    }
-  }
-}
-
-
-.@{calendar-prefix-cls} {
-  &-time {
-    .@{calendar-prefix-cls}-day-select {
-      padding: 0 2px;
-      font-weight: bold;
-      display: inline-block;
-      color: #666;
-      line-height: 34px;
-    }
-
-    .@{calendar-prefix-cls}-footer {
-      border-top: 1px solid @border-color-split;
-      padding: 10px 0;
+    &-btn {
+      line-height: 1.5;
       text-align: right;
-      position: relative;
-      height: auto;
-      line-height: auto;
+    }
 
-      &-btn {
-        line-height: 1.5;
-        text-align: right;
-      }
+    .@{calendar-prefix-cls}-today-btn {
+      float: left;
+      margin: 0;
+      padding-left: 12px;
+    }
 
-      .@{calendar-prefix-cls}-today-btn {
-        float: left;
-        margin: 0;
-        padding-left: 12px;
-      }
+    .@{calendar-prefix-cls}-time-picker-btn {
+      display: inline-block;
+      text-align: center;
+      margin-right: 60px;
 
-      .@{calendar-prefix-cls}-time-picker-btn {
-        display: inline-block;
-        text-align: center;
-        margin-right: 60px;
-
-        &-disabled {
-          color: #ccc;
-        }
+      &-disabled {
+        color: #ccc;
       }
     }
   }

components/date-picker/style/index.less

@@ -4,7 +4,7 @@
 @import "../../button/style/mixin";
 
 @calendar-prefix-cls: ~"@{ant-prefix}-calendar";
-@timepicker-prefix-cls: ~"@{ant-prefix}-calendar-time-picker";
+@calendar-timepicker-prefix-cls: ~"@{ant-prefix}-calendar-time-picker";
 
 @import "Picker";
 @import "Calendar";

components/date-picker/wrapPicker.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { PropTypes } from 'react';
 import TimePickerPanel from 'rc-time-picker/lib/Panel';
 import classNames from 'classnames';
-import defaultLocale from './locale/zh_CN';
-import assign from 'object-assign';
 import warning from 'warning';
+import getLocale from '../_util/getLocale';
+declare const require: Function;
 
 export default function wrapPicker(Picker, defaultFormat?) {
   const PickerWrapper = React.createClass({
@@ -32,19 +32,6 @@ export default function wrapPicker(Picker, defaultFormat?) {
       antLocale: PropTypes.object,
     },
 
-    getLocale() {
-      const props = this.props;
-      const context = this.context;
-      let locale = defaultLocale;
-      if (context.antLocale && context.antLocale.DatePicker) {
-        locale = context.antLocale.DatePicker;
-      }
-      // 统一合并为完整的 Locale
-      const result = assign({}, locale, props.locale);
-      result.lang = assign({}, locale.lang, props.locale.lang);
-      return result;
-    },
-
     handleOpenChange(open) {
       const { onOpenChange, toggleOpen } = this.props;
       onOpenChange(open);
@@ -72,7 +59,10 @@ export default function wrapPicker(Picker, defaultFormat?) {
         [`${inputPrefixCls}-sm`]: props.size === 'small',
       });
 
-      const locale = this.getLocale();
+      const locale = getLocale(
+        props, this.context, 'DatePicker',
+        () => require('./locale/zh_CN')
+      );
 
       const timeFormat = (props.showTime && props.showTime.format) || 'HH:mm:ss';
       const rcTimePickerProps = {

components/dropdown/demo/basic.md

@@ -19,13 +19,13 @@ import { Menu, Dropdown, Icon } from 'antd';
 const menu = (
   <Menu>
     <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">第一个菜单项</a>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
     </Menu.Item>
     <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">第二个菜单项</a>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
     </Menu.Item>
     <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">第三个菜单项</a>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3d menu item</a>
     </Menu.Item>
   </Menu>
 );
@@ -33,7 +33,7 @@ const menu = (
 ReactDOM.render(
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" href="#">
-      触发链接 <Icon type="down" />
+      Hover me <Icon type="down" />
     </a>
   </Dropdown>
 , mountNode);

components/dropdown/demo/dropdown-button.md

@@ -14,39 +14,41 @@ title:
 A button is on the left, and a related functional menu is on the right.
 
 ````jsx
-import { Menu, Dropdown, Button, Icon } from 'antd';
+import { Menu, Dropdown, Button, Icon, message } from 'antd';
 
 function handleButtonClick(e) {
+  message.info('Click on left button.');
   console.log('click left button', e);
 }
 
 function handleMenuClick(e) {
+  message.info('Click on menu item.');
   console.log('click', e);
 }
 
 const menu = (
   <Menu onClick={handleMenuClick}>
-    <Menu.Item key="1">第一个菜单项</Menu.Item>
-    <Menu.Item key="2">第二个菜单项</Menu.Item>
-    <Menu.Item key="3">第三个菜单项</Menu.Item>
+    <Menu.Item key="1">1st menu item</Menu.Item>
+    <Menu.Item key="2">2nd menu item</Menu.Item>
+    <Menu.Item key="3">3d menu item</Menu.Item>
   </Menu>
 );
 
 ReactDOM.render(
   <div>
     <Dropdown.Button onClick={handleButtonClick} overlay={menu} type="ghost">
-      某功能按钮
+      Dropdown
     </Dropdown.Button>
     <Dropdown.Button
       onClick={handleButtonClick} overlay={menu}
       type="ghost" disabled
       style={{ marginLeft: 8 }}
     >
-      某功能按钮
+      Dropdown
     </Dropdown.Button>
     <Dropdown overlay={menu}>
       <Button type="ghost" style={{ marginLeft: 8 }}>
-        按钮 <Icon type="down" />
+        Button <Icon type="down" />
       </Button>
     </Dropdown>
   </div>

components/dropdown/demo/event.md

@@ -14,23 +14,23 @@ title:
 An event will be triggered when you click menu items, in which you can make different operations according to item's key.
 
 ````jsx
-import { Menu, Dropdown, Icon } from 'antd';
+import { Menu, Dropdown, Icon, message } from 'antd';
 const onClick = function ({ key }) {
-  console.log(`点击了菜单${key}`);
+  message.info(`Click on item ${key}`);
 };
 
 const menu = (
   <Menu onClick={onClick}>
-    <Menu.Item key="1">第一个菜单项</Menu.Item>
-    <Menu.Item key="2">第二个菜单项</Menu.Item>
-    <Menu.Item key="3">第三个菜单项</Menu.Item>
+    <Menu.Item key="1">1st menu item</Menu.Item>
+    <Menu.Item key="2">2nd memu item</Menu.Item>
+    <Menu.Item key="3">3d menu item</Menu.Item>
   </Menu>
 );
 
 ReactDOM.render(
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" href="#">
-      鼠标移入，点击菜单 <Icon type="down" />
+      Hover me, Click menu item <Icon type="down" />
     </a>
   </Dropdown>
 , mountNode);

components/dropdown/demo/item.md

@@ -19,20 +19,20 @@ import { Menu, Dropdown, Icon } from 'antd';
 const menu = (
   <Menu>
     <Menu.Item key="0">
-      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">第一个菜单项</a>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
     </Menu.Item>
     <Menu.Item key="1">
-      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">第二个菜单项</a>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
     </Menu.Item>
     <Menu.Divider />
-    <Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
+    <Menu.Item key="3" disabled>3d menu item（disabled）</Menu.Item>
   </Menu>
 );
 
 ReactDOM.render(
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" href="#">
-      鼠标移入 <Icon type="down" />
+      Hover me <Icon type="down" />
     </a>
   </Dropdown>
 , mountNode);

components/dropdown/demo/overlay-visible.md

@@ -33,9 +33,9 @@ const OverlayVisible = React.createClass({
   render() {
     const menu = (
       <Menu onClick={this.handleMenuClick}>
-        <Menu.Item key="1">点我不会关闭菜单</Menu.Item>
-        <Menu.Item key="2">点我还是不会关闭菜单</Menu.Item>
-        <Menu.Item key="3">点我才会关闭菜单</Menu.Item>
+        <Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
+        <Menu.Item key="2">Clicking me will not close the menu also.</Menu.Item>
+        <Menu.Item key="3">Clicking me will close the menu</Menu.Item>
       </Menu>
     );
     return (
@@ -44,7 +44,7 @@ const OverlayVisible = React.createClass({
         visible={this.state.visible}
       >
         <a className="ant-dropdown-link" href="#">
-          鼠标移入 <Icon type="down" />
+          Hover me <Icon type="down" />
         </a>
       </Dropdown>
     );

components/dropdown/demo/sub-menu.md

@@ -19,11 +19,11 @@ const SubMenu = Menu.SubMenu;
 
 const menu = (
   <Menu>
-    <Menu.Item>第一个菜单项</Menu.Item>
-    <Menu.Item>第二个菜单项</Menu.Item>
-    <SubMenu title="子菜单">
-      <Menu.Item>第三个菜单项</Menu.Item>
-      <Menu.Item>第四个菜单项</Menu.Item>
+    <Menu.Item>1st menu item</Menu.Item>
+    <Menu.Item>2nd menu item</Menu.Item>
+    <SubMenu title="sub menu">
+      <Menu.Item>3d menu item</Menu.Item>
+      <Menu.Item>4th menu item</Menu.Item>
     </SubMenu>
   </Menu>
 );
@@ -31,7 +31,7 @@ const menu = (
 ReactDOM.render(
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" href="#">
-      多级菜单 <Icon type="down" />
+      Cascading menu <Icon type="down" />
     </a>
   </Dropdown>
 , mountNode);

components/dropdown/demo/trigger.md

@@ -19,20 +19,20 @@ import { Menu, Dropdown, Icon } from 'antd';
 const menu = (
   <Menu>
     <Menu.Item key="0">
-      <a href="http://www.alipay.com/">第一个菜单项</a>
+      <a href="http://www.alipay.com/">1st menu item</a>
     </Menu.Item>
     <Menu.Item key="1">
-      <a href="http://www.taobao.com/">第二个菜单项</a>
+      <a href="http://www.taobao.com/">2nd menu item</a>
     </Menu.Item>
     <Menu.Divider />
-    <Menu.Item key="3">第三个菜单项</Menu.Item>
+    <Menu.Item key="3">3d menu item</Menu.Item>
   </Menu>
 );
 
 ReactDOM.render(<div>
   <Dropdown overlay={menu} trigger={['click']}>
     <a className="ant-dropdown-link" href="#">
-      点击触发 <Icon type="down" />
+      Click me <Icon type="down" />
     </a>
   </Dropdown>
 </div>, mountNode);

components/dropdown/dropdown-button.tsx

@@ -8,7 +8,7 @@ import splitObject from '../_util/splitObject';
 
 export interface DropdownButtonProps {
   type?: 'primary' | 'ghost' | 'dash';
-  onClick?: React.FormEventHandler;
+  onClick?: React.FormEventHandler<any>;
   trigger?: 'click' | 'hover';
   overlay: React.ReactNode;
   visible?: boolean;
@@ -44,7 +44,7 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
     return (
       <ButtonGroup {...restProps} className={cls}>
         <Button type={type} onClick={onClick} disabled={disabled}>{children}</Button>
-        <Dropdown align={align} overlay={overlay} trigger={trigger}>
+        <Dropdown align={align} overlay={overlay} trigger={disabled ? [] : trigger}>
           <Button type={type} disabled={disabled}>
             <Icon type="down" />
           </Button>

components/dropdown/style/index.less

@@ -47,11 +47,10 @@
     border-radius: @border-radius-base;
     box-shadow: @box-shadow-base;
     background-clip: padding-box;
-    border: 1px solid @border-color-base;
 
     &-item,
     &-submenu-title {
-      padding: 7px 15px;
+      padding: 7px 16px;
       margin: 0;
       clear: both;
       font-size: 12px;
@@ -64,8 +63,8 @@
       > a {
         color: #666;
         display: block;
-        padding: 7px 15px;
-        margin: -7px -15px;
+        padding: 7px 16px;
+        margin: -7px -16px;
       }
 
       &:hover {
@@ -108,7 +107,7 @@
       font-family: "anticon" !important;
       position: absolute;
       content: "\e61f";
-      right: 15px;
+      right: 16px;
       color: #999;
       .iconfont-size-under-12px(9px);
     }

components/form/Form.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PropTypes } from 'react';
 import classNames from 'classnames';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
 import omit from 'omit.js';
 import warning from 'warning';
 import assign from 'object-assign';
@@ -20,7 +20,7 @@ export interface FormProps {
   inline?: boolean;
   vertical?: boolean;
   form?: WrappedFormUtils;
-  onSubmit?: React.FormEventHandler;
+  onSubmit?: React.FormEventHandler<any>;
   style?: React.CSSProperties;
   className?: string;
   prefixCls?: string;
@@ -42,11 +42,9 @@ export type WrappedFormUtils = {
   validateFields(options: Object, callback: (erros: any, values: any) => void): any;
   validateFields(callback: (erros: any, values: any) => void): any;
   /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */
-  validateFieldsAndScroll(
-    fieldNames?: Array<string>,
-    options?: Object,
-    callback?: (erros: any, values: any) => void
-  ): void;
+  validateFieldsAndScroll(fieldNames?: Array<string>,
+                          options?: Object,
+                          callback?: (erros: any, values: any) => void): void;
   /** 获取某个输入控件的 Error */
   getFieldError(name: string): Object[];
   /** 判断一个输入控件是否在校验状态*/
@@ -62,7 +60,7 @@ export type WrappedFormUtils = {
     /** 收集子节点的值的时机 */
     trigger?: string;
     /** 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：(date, dateString) => dateString */
-    getValueFromEvent?: (...args) => any;
+    getValueFromEvent?: (...args: any[]) => any;
     /** 校验子节点值的时机 */
     validateTrigger?: string;
     /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */
@@ -83,6 +81,8 @@ export interface ComponentDecorator {
   <T extends (typeof FormComponent)>(component: T): T;
 }
 
+let warnedGetFieldProps = false;
+
 export default class Form extends React.Component<FormProps, any> {
   static defaultProps = {
     prefixCls: 'ant-form',
@@ -103,8 +103,9 @@ export default class Form extends React.Component<FormProps, any> {
   static Item = FormItem;
 
   static create = (options?: FormCreateOption): ComponentDecorator => {
-    const formWrapper = createDOMForm(assign({}, options, {
+    const formWrapper = createDOMForm(assign({
       fieldNameProp: 'id',
+    }, options, {
       fieldMetaProp: FIELD_META_PROP,
     }));
 
@@ -121,16 +122,25 @@ export default class Form extends React.Component<FormProps, any> {
           form: this.props.form,
         };
       },
-      render() {
-        const getFieldProps = this.props.form.getFieldProps;
-        function deprecatedGetFieldProps(name, option) {
+      componentWillMount() {
+        if (!warnedGetFieldProps) {
+          this.getFieldProps = this.props.form.getFieldProps;
+        }
+      },
+      deprecatedGetFieldProps(name, option) {
+        if (!warnedGetFieldProps) {
+          warnedGetFieldProps = true;
           warning(
             false,
-            '`getFieldProps` is deprecated and will be removed in future, please use `getFieldDecorator` instead'
+            '`getFieldProps` is not recommended, please use `getFieldDecorator` instead'
           );
-          return getFieldProps(name, option);
         }
-        this.props.form.getFieldProps = deprecatedGetFieldProps;
+        return this.getFieldProps(name, option);
+      },
+      render() {
+        if (!warnedGetFieldProps) {
+          this.props.form.getFieldProps = this.deprecatedGetFieldProps;
+        }
 
         const withRef: any = {};
         if (options && options.withRef) {
@@ -152,7 +162,7 @@ export default class Form extends React.Component<FormProps, any> {
   }
 
   render() {
-    const { prefixCls, className, inline, horizontal, vertical } = this.props;
+    const { prefixCls, className = '', inline, horizontal, vertical } = this.props;
     const formClassName = classNames({
       [`${prefixCls}`]: true,
       [`${prefixCls}-horizontal`]: horizontal,

components/form/FormItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+import warning from 'warning';
+import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
 import Row from '../row';
 import Col from '../col';
 import { WrappedFormUtils } from './Form';
@@ -14,7 +15,7 @@ export interface FormItemLabelColOption {
 export interface FormItemProps {
   prefixCls?: string;
   id?: string;
-  label?: string | React.ReactNode;
+  label?: React.ReactNode;
   labelCol?: FormItemLabelColOption;
   wrapperCol?: FormItemLabelColOption;
   help?: React.ReactNode;
@@ -25,12 +26,14 @@ export interface FormItemProps {
   required?: boolean;
   style?: React.CSSProperties;
   colon?: boolean;
+  children: any;
 }
 
 export interface FormItemContext {
   form: WrappedFormUtils;
 }
 
+let autoGenerateWarning = false;
 export default class FormItem extends React.Component<FormItemProps, any> {
   static defaultProps = {
     hasFeedback: false,
@@ -58,6 +61,17 @@ export default class FormItem extends React.Component<FormItemProps, any> {
 
   context: FormItemContext;
 
+  componentDidMount() {
+    if (!autoGenerateWarning && (this.getControls(this.props.children, true).length > 1)) {
+      autoGenerateWarning = true;
+      warning(
+        false,
+        '`Form.Item` cannot generate `validateStatus` and `help` automatically, ' +
+        'while there are more than one `getFieldDecorator` in it.'
+      );
+    }
+  }
+
   shouldComponentUpdate(...args) {
     return PureRenderMixin.shouldComponentUpdate.apply(this, args);
   }
@@ -72,11 +86,32 @@ export default class FormItem extends React.Component<FormItemProps, any> {
     return props.help;
   }
 
+  getControls(children, recursively) {
+    let controls: React.ReactElement<any>[] = [];
+    const childrenArray = React.Children.toArray(children);
+    for (let i = 0; i < childrenArray.length; i++) {
+      if (!recursively && controls.length > 0) {
+        break;
+      }
+
+      const child = childrenArray[i] as React.ReactElement<any>;
+      if (child.type as any === FormItem) {
+        continue;
+      }
+      if (!child.props) {
+        continue;
+      }
+      if (FIELD_META_PROP in child.props) {
+        controls.push(child);
+      } else if (child.props.children) {
+        controls = controls.concat(this.getControls(child.props.children, recursively));
+      }
+    }
+    return controls;
+  }
+
   getOnlyControl() {
-    const children = React.Children.toArray(this.props.children);
-    const child = children.filter((c: React.ReactElement<any>) => {
-      return c.props && FIELD_META_PROP in c.props;
-    })[0];
+    const child = this.getControls(this.props.children, false)[0];
     return child !== undefined ? child : null;
   }
 
@@ -112,15 +147,18 @@ export default class FormItem extends React.Component<FormItemProps, any> {
 
   getValidateStatus() {
     const { isFieldValidating, getFieldError, getFieldValue } = this.context.form;
-    const field = this.getId();
-    if (!field) {
+    const fieldId = this.getId();
+    if (!fieldId) {
       return '';
     }
-    if (isFieldValidating(field)) {
+    if (isFieldValidating(fieldId)) {
       return 'validating';
-    } else if (!!getFieldError(field)) {
+    }
+    if (!!getFieldError(fieldId)) {
       return 'error';
-    } else if (getFieldValue(field) !== undefined && getFieldValue(field) !== null) {
+    }
+    const fieldValue = getFieldValue(fieldId);
+    if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
       return 'success';
     }
     return '';
@@ -186,7 +224,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
 
     // remove user input colon
     let label = props.label;
-    if (typeof label === 'string' && label.trim() !== '') {
+    if (typeof label === 'string' && (label as string).trim() !== '') {
       label = (props.label as string).replace(/[：|:]\s*$/, '');
     }
 

components/form/demo/advanced-search-form.md

@@ -1,134 +0,0 @@
----
-order: 10
-title:
-  zh-CN: 高级搜索
-  en-US: Advanced search
----
-
-## zh-CN
-
-三列栅格式的表单排列方式，常用于数据表格的高级搜索。
-
-有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
-
-## en-US
-
-Three columns layout is often used for advanced searching of data table.
-
-Because the width of label is not fixed, you may need to adjust it by customizing its style.
-
-
-````jsx
-import { Form, Input, Row, Col, Button, DatePicker } from 'antd';
-const FormItem = Form.Item;
-
-ReactDOM.render(
-  <Form horizontal className="ant-advanced-search-form">
-    <Row gutter={16}>
-      <Col sm={8}>
-        <FormItem
-          label="Search name"
-          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
-          <Input placeholder="Please input the search name" size="default" />
-        </FormItem>
-        <FormItem
-          label="Long search name"
-          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
-          <DatePicker size="default" />
-        </FormItem>
-        <FormItem
-          label="Search name"
-          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
-          <Input placeholder="Please input the search name" size="default" />
-        </FormItem>
-      </Col>
-      <Col sm={8}>
-        <FormItem
-          label="Search name"
-          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
-          <Input placeholder="Please input the search name" size="default" />
-        </FormItem>
-        <FormItem
-          label="Long search name"
-          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
-          <DatePicker size="default" />
-        </FormItem>
-        <FormItem
-          label="Search name"
-          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
-          <Input placeholder="Please input the search name" size="default" />
-        </FormItem>
-      </Col>
-      <Col sm={8}>
-        <FormItem
-          label="Search name"
-          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
-          <Input placeholder="Please input the search name" size="default" />
-        </FormItem>
-        <FormItem
-          label="Long search name"
-          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
-          <DatePicker size="default" />
-        </FormItem>
-        <FormItem
-          label="Search name"
-          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
-          <Input placeholder="Please input the search name" size="default" />
-        </FormItem>
-      </Col>
-    </Row>
-    <Row>
-      <Col span={12} offset={12} style={{ textAlign: 'right' }}>
-        <Button type="primary" htmlType="submit">Search</Button>
-        <Button>Clear</Button>
-      </Col>
-    </Row>
-  </Form>
-, mountNode);
-````
-
-````css
-/* custom style */
-
-.ant-advanced-search-form {
-  padding: 16px 8px;
-  background: #f8f8f8;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-}
-
-/* because the label length is variable, you may need to adjust the left edge to have the form centered */
-
-.ant-advanced-search-form > .ant-row {
-  position: relative;
-  left: -6px;
-}
-
-.ant-advanced-search-form .ant-btn + .ant-btn {
-  margin-left: 8px;
-}
-````
-
-<style>
-#components-form-demo-advanced-search-form .ant-form-horizontal {
-  max-width: none;
-}
-</style>

components/form/demo/advanced-search.md

@@ -0,0 +1,128 @@
+---
+order: 3
+title:
+  zh-CN: 高级搜索
+  en-US: Advanced search
+---
+
+## zh-CN
+
+三列栅格式的表单排列方式，常用于数据表格的高级搜索。
+
+有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
+
+## en-US
+
+Three columns layout is often used for advanced searching of data table.
+
+Because the width of label is not fixed, you may need to adjust it by customizing its style.
+
+
+````jsx
+import { Form, Row, Col, Input, Button, Icon } from 'antd';
+const FormItem = Form.Item;
+
+const usualShowedChildren = 2 * 3; // row * col
+const AdvancedSearchForm = Form.create()(React.createClass({
+  getInitialState() {
+    return {
+      expand: false,
+    };
+  },
+  handleSearch(e) {
+    e.preventDefault();
+
+    this.props.form.validateFields((err, values) => {
+      if (err) {
+        return;
+      }
+
+      console.log('Received values of form: ', values);
+    });
+  },
+  handleReset() {
+    this.props.form.resetFields();
+  },
+  toggle(expand) {
+    this.setState({ expand });
+  },
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    const formItemLayout = {
+      labelCol: { span: 5 },
+      wrapperCol: { span: 19 },
+    };
+
+    // To generate mock Form.Item
+    const children = [];
+    for (let i = 0; i < 10; i++) {
+      children.push(
+        <Col span={8} key={i}>
+          <FormItem
+            {...formItemLayout}
+            label={`Field ${i}`}
+          >
+            {getFieldDecorator(`field-${i}`)(
+              <Input placeholder="placeholder" />
+            )}
+          </FormItem>
+        </Col>
+      );
+    }
+
+    const expand = this.state.expand;
+    const showedChildren = expand ? children.length : usualShowedChildren;
+    return (
+      <Form
+        horizontal
+        className="ant-advanced-search-form"
+        onSubmit={this.handleSearch}
+      >
+        <Row gutter={40}>
+          {children.slice(0, showedChildren)}
+        </Row>
+        <Row>
+          <Col span={24} style={{ textAlign: 'right' }}>
+            <Button type="primary" htmlType="submit">Search</Button>
+            <Button onClick={this.handleReset}>Clear</Button>
+            {
+              expand ? (
+                <a className="ant-dropdown-link" onClick={() => this.toggle(false)}>
+                  Collapse <Icon type="up" />
+                </a>
+              ) : (
+                <a className="ant-dropdown-link" onClick={() => this.toggle(true)}>
+                  Expand <Icon type="down" />
+                </a>
+              )
+            }
+          </Col>
+        </Row>
+      </Form>
+    );
+  },
+}));
+
+ReactDOM.render(<AdvancedSearchForm />, mountNode);
+````
+
+````css
+#components-form-demo-advanced-search .ant-advanced-search-form {
+  padding: 24px;
+  background: #f8f8f8;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+}
+#components-form-demo-advanced-search .ant-advanced-search-form .ant-btn + .ant-btn {
+  margin-left: 8px;
+}
+#components-form-demo-advanced-search .ant-advanced-search-form .ant-dropdown-link {
+  margin-left: 16px;
+}
+````
+
+<style>
+#components-form-demo-advanced-search .ant-form-horizontal {
+  max-width: none;
+}
+</style>

components/form/demo/form-controls.md

@@ -1,98 +0,0 @@
----
-order: 3
-title:
-  zh-CN: 表单控件
-  en-US: Form controls
----
-
-## zh-CN
-
-展示所有支持的表单控件。
-
-**注**： 输入框：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
-
-## en-US
-
-A list off all the controls that can be used with form.
-
-**Note**: Input control: Only if set correct type for it, then it will be set correct style.
-
-````jsx
-import { Form, Input, Select, Checkbox, Radio } from 'antd';
-const FormItem = Form.Item;
-const Option = Select.Option;
-const RadioGroup = Radio.Group;
-
-function handleSelectChange(value) {
-  console.log(`selected ${value}`);
-}
-
-ReactDOM.render(
-  <Form horizontal>
-    <FormItem
-      id="control-input"
-      label="input control"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}
-    >
-      <Input id="control-input" placeholder="Please enter..." />
-    </FormItem>
-
-    <FormItem
-      id="control-textarea"
-      label="text area"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}
-    >
-      <Input type="textarea" id="control-textarea" rows="3" />
-    </FormItem>
-
-    <FormItem
-      id="select"
-      label="Select box"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}
-    >
-      <Select id="select" size="large" defaultValue="lucy" style={{ width: 200 }} onChange={handleSelectChange}>
-        <Option value="jack">jack</Option>
-        <Option value="lucy">lucy</Option>
-        <Option value="disabled" disabled>disabled</Option>
-        <Option value="yiminghe">yiminghe</Option>
-      </Select>
-    </FormItem>
-
-    <FormItem
-      label="Checkbox"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
-    >
-      <Checkbox className="ant-checkbox-vertical">item 1</Checkbox>
-      <Checkbox className="ant-checkbox-vertical">item 2</Checkbox>
-      <Checkbox className="ant-checkbox-vertical" disabled>item 3 (disabled)</Checkbox>
-    </FormItem>
-
-    <FormItem
-      label="Checkbox"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
-    >
-      <Checkbox className="ant-checkbox-inline">item 1</Checkbox>
-      <Checkbox className="ant-checkbox-inline">item 2</Checkbox>
-      <Checkbox className="ant-checkbox-inline">item 3</Checkbox>
-    </FormItem>
-
-    <FormItem
-      label="Radio"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
-    >
-      <RadioGroup defaultValue="b">
-        <Radio value="a">A</Radio>
-        <Radio value="b">B</Radio>
-        <Radio value="c">C</Radio>
-        <Radio value="d">D</Radio>
-      </RadioGroup>
-    </FormItem>
-  </Form>
-, mountNode);
-````

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

@@ -1,77 +1,106 @@
 ---
-order: 14
+order: 4
 title:
-  zh-CN: 与 Modal 配合使用
-  en-US: With Modal
+  zh-CN: 弹出层中的新建表单
+  en-US: Form in Modal to Create
 ---
 
 ## zh-CN
 
-在 Modal 中使用 Form，当点击 Modal 的确定时，调用 `this.props.form.getFieldsValue` 获取表单内的值。
+当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。
 
 ## en-US
 
-If you use Form in Modal, when you click the Modal, it could invoke `this.props.form.getFieldsValue` to get values of form.
+When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fills in the form to create an item.
 
 ````jsx
-import { Button, Form, Input, Modal } from 'antd';
-const createForm = Form.create;
+import { Button, Modal, Form, Input, Radio } from 'antd';
 const FormItem = Form.Item;
 
-let Demo = React.createClass({
+const CollectionCreateForm = Form.create()(
+  (props) => {
+    const { visible, onCancel, onCreate, form } = props;
+    const { getFieldDecorator } = form;
+    return (
+      <Modal
+        visible={visible}
+        title="Create a new collection"
+        okText="Create"
+        onCancel={onCancel}
+        onOk={onCreate}
+      >
+        <Form vertical>
+          <FormItem label="Title">
+            {getFieldDecorator('title', {
+              rules: [{ required: true, message: 'Please input the title of collection!' }],
+            })(
+              <Input />
+            )}
+          </FormItem>
+          <FormItem label="Description">
+            {getFieldDecorator('description')(<Input type="textarea" />)}
+          </FormItem>
+          <FormItem className="collection-create-form_last-form-item">
+            {getFieldDecorator('modifier', {
+              initialValue: 'public',
+            })(
+              <Radio.Group>
+                <Radio value="public">Public</Radio>
+                <Radio value="private">Private</Radio>
+              </Radio.Group>
+            )}
+          </FormItem>
+        </Form>
+      </Modal>
+    );
+  }
+);
+
+const CollectionsPage = React.createClass({
   getInitialState() {
     return { visible: false };
   },
-
-  handleSubmit() {
-    console.log(this.props.form.getFieldsValue());
-    this.hideModal();
-  },
-
   showModal() {
     this.setState({ visible: true });
   },
-
-  hideModal() {
+  handleCancel() {
     this.setState({ visible: false });
   },
+  handleCreate() {
+    const form = this.form;
+    form.validateFields((err, values) => {
+      if (err) {
+        return;
+      }
 
+      console.log('Received values of form: ', values);
+      form.resetFields();
+      this.setState({ visible: false });
+    });
+  },
+  saveFormRef(form) {
+    this.form = form;
+  },
   render() {
-    const { getFieldDecorator } = this.props.form;
-
-    const formItemLayout = {
-      labelCol: { span: 4 },
-      wrapperCol: { span: 20 },
-    };
     return (
       <div>
-        <Button type="primary" onClick={this.showModal}>Surprise</Button>
-        <Modal title="login" visible={this.state.visible} onOk={this.handleSubmit} onCancel={this.hideModal}>
-          <Form horizontal>
-            <FormItem
-              {...formItemLayout}
-              label="User name"
-            >
-              {getFieldDecorator('username')(
-                <Input type="text" autoComplete="off" />
-              )}
-            </FormItem>
-            <FormItem
-              {...formItemLayout}
-              label="Password"
-            >
-              {getFieldDecorator('password')(
-                <Input type="password" autoComplete="off" />
-              )}
-            </FormItem>
-          </Form>
-        </Modal>
+        <Button type="primary" onClick={this.showModal}>New Collection</Button>
+        <CollectionCreateForm
+          ref={this.saveFormRef}
+          visible={this.state.visible}
+          onCancel={this.handleCancel}
+          onCreate={this.handleCreate}
+        />
       </div>
     );
   },
 });
 
-Demo = createForm()(Demo);
-
-ReactDOM.render(<Demo />, mountNode);
+ReactDOM.render(<CollectionsPage />, mountNode);
+````
+
+````css
+.collection-create-form_last-form-item {
+  margin-bottom: 0;
+}
 ````

components/form/demo/horizontal-form.md

@@ -1,88 +0,0 @@
----
-order: 2
-title:
-  zh-CN: 典型表单
-  en-US: Horizontal form
----
-
-## zh-CN
-
-示例展示了如何通过使用 `Form.create` 来获取和更新表单提交的数值。
-
-## en-US
-
-How to use `Form.create` to get and update values of form.
-
-````jsx
-import { Form, Input, Button, Checkbox, Radio, Tooltip, Icon } from 'antd';
-const FormItem = Form.Item;
-const RadioGroup = Radio.Group;
-
-let Demo = React.createClass({
-  handleSubmit(e) {
-    e.preventDefault();
-    console.log('Received values of form:', this.props.form.getFieldsValue());
-  },
-
-  render() {
-    const { getFieldDecorator } = this.props.form;
-    const formItemLayout = {
-      labelCol: { span: 6 },
-      wrapperCol: { span: 14 },
-    };
-    return (
-      <Form horizontal onSubmit={this.handleSubmit}>
-        <FormItem
-          {...formItemLayout}
-          label="User name"
-        >
-          <p className="ant-form-text" id="userName" name="userName">Big eye minion</p>
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label="Password"
-        >
-          {getFieldDecorator('pass', { initialValue: '' })(
-            <Input type="password" placeholder="Please input the password" />
-          )}
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label="Gender"
-        >
-          {getFieldDecorator('gender', { initialValue: 'female' })(
-            <RadioGroup>
-              <Radio value="male">male</Radio>
-              <Radio value="female">female</Radio>
-            </RadioGroup>
-          )}
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label="remarks"
-          help="Please input something"
-        >
-          {getFieldDecorator('remark', { initialValue: '' })(
-            <Input type="textarea" placeholder="Please input something" />
-          )}
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={<span>Sold myself <Tooltip title="I come for Qiu Xiang"><Icon type="question-circle-o" /></Tooltip></span>}
-        >
-          {getFieldDecorator('agreement', { initialValue: false, valuePropName: 'checked' })(
-            <Checkbox>agree</Checkbox>
-          )}
-        </FormItem>
-        <FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
-          <Button type="primary" htmlType="submit">OK</Button>
-        </FormItem>
-      </Form>
-    );
-  },
-});
-
-Demo = Form.create()(Demo);
-
-ReactDOM.render(<Demo />, mountNode);
-````

components/form/demo/horizontal-login.md

@@ -0,0 +1,59 @@
+---
+order: 0
+title:
+  zh-CN: 水平登陆栏
+  en-US: Horizontal Login Form
+---
+
+## zh-CN
+
+水平登陆栏，常用在顶部导航栏中。
+
+## en-US
+
+Horizontal login form is often used in navigation bar.
+
+````jsx
+import { Form, Icon, Input, Button } from 'antd';
+const FormItem = Form.Item;
+
+const HorizontalLoginForm = Form.create()(React.createClass({
+  handleSubmit(e) {
+    e.preventDefault();
+
+    this.props.form.validateFields((err, values) => {
+      if (err) {
+        return;
+      }
+
+      console.log('Received values of form: ', values);
+    });
+  },
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form inline onSubmit={this.handleSubmit}>
+        <FormItem>
+          {getFieldDecorator('userName', {
+            rules: [{ required: true, message: 'Please input your username!' }],
+          })(
+            <Input addonBefore={<Icon type="user" />} placeholder="Username" />
+          )}
+        </FormItem>
+        <FormItem>
+          {getFieldDecorator('password', {
+            rules: [{ required: true, message: 'Please input your Password!' }],
+          })(
+            <Input addonBefore={<Icon type="lock" />} type="password" placeholder="Password" />
+          )}
+        </FormItem>
+        <FormItem>
+          <Button type="primary" htmlType="submit">Log in</Button>
+        </FormItem>
+      </Form>
+    );
+  },
+}));
+
+ReactDOM.render(<HorizontalLoginForm />, mountNode);
+````

components/form/demo/inline-form.md

@@ -1,58 +0,0 @@
----
-order: 1
-title:
-  zh-CN: 平行排列
-  en-US: Inline form
----
-
-## zh-CN
-
-行内排列，常用于登录界面。
-
-## en-US
-
-Inline form is often used for login.
-
-````jsx
-import { Form, Input, Button, Checkbox } from 'antd';
-const FormItem = Form.Item;
-
-let Demo = React.createClass({
-  handleSubmit(e) {
-    e.preventDefault();
-    console.log('Received values of form:', this.props.form.getFieldsValue());
-  },
-
-  render() {
-    const { getFieldDecorator } = this.props.form;
-    return (
-      <Form inline onSubmit={this.handleSubmit}>
-        <FormItem
-          label="Account"
-        >
-          {getFieldDecorator('userName')(
-            <Input placeholder="Please input the account" />
-          )}
-        </FormItem>
-        <FormItem
-          label="Password"
-        >
-          {getFieldDecorator('password')(
-            <Input type="password" placeholder="Please input the password" />
-          )}
-        </FormItem>
-        <FormItem>
-          {getFieldDecorator('agreement')(
-            <Checkbox>Remember me</Checkbox>
-          )}
-        </FormItem>
-        <Button type="primary" htmlType="submit">Submit</Button>
-      </Form>
-    );
-  },
-});
-
-Demo = Form.create()(Demo);
-
-ReactDOM.render(<Demo />, mountNode);
-````

components/form/demo/input-group.md

@@ -1,105 +0,0 @@
----
-order: 4
-title:
-  zh-CN: 输入框组合
-  en-US: Input group
----
-
-## zh-CN
-
-各类输入框的组合展现。
-
-## en-US
-
-Input group of different type input controls.
-
-````jsx
-import { Form, Input, Select, Col } from 'antd';
-const FormItem = Form.Item;
-const InputGroup = Input.Group;
-const Option = Select.Option;
-
-const selectAfter = (
-  <Select defaultValue=".com" style={{ width: 70 }}>
-    <Option value=".com">.com</Option>
-    <Option value=".jp">.jp</Option>
-    <Option value=".cn">.cn</Option>
-    <Option value=".org">.org</Option>
-  </Select>
-);
-
-ReactDOM.render(
-  <Form horizontal>
-    <FormItem
-      label="Input control"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
-      <Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
-    </FormItem>
-
-    <FormItem
-      label="Input control"
-      labelCol={{ span: 6 }}
-      validateStatus="success"
-      wrapperCol={{ span: 16 }}
-    >
-      <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
-    </FormItem>
-
-    <FormItem
-      label="Select input control"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
-      <Input addonAfter={selectAfter} placeholder="www.mysite" id="site4" />
-    </FormItem>
-
-    <FormItem
-      label="Identity number"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
-      <InputGroup>
-        <Col span="6">
-          <Input id="certNo1" />
-        </Col>
-        <Col span="6">
-          <Input id="certNo2" />
-        </Col>
-        <Col span="6">
-          <Input id="certNo3" />
-        </Col>
-        <Col span="6">
-          <Input id="certNo4" />
-        </Col>
-      </InputGroup>
-    </FormItem>
-
-    <FormItem
-      label="Tel"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
-      <InputGroup>
-        <Col span="4">
-          <Input id="tel1" defaultValue="086" />
-        </Col>
-        <Col span="2">
-          <p className="ant-form-split">--</p>
-        </Col>
-        <Col span="6">
-          <Input id="tel1" />
-        </Col>
-        <Col span="6">
-          <Input id="tel2" />
-        </Col>
-        <Col span="6">
-          <Input id="tel3" />
-        </Col>
-      </InputGroup>
-    </FormItem>
-  </Form>
-
-, mountNode);
-````

components/form/demo/mix.md

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
   zh-CN: 表单组合
   en-US: Mix
@@ -106,10 +106,10 @@ let Demo = React.createClass({
         >
           {getFieldDecorator('select')(
             <Select style={{ width: 200 }}>
-              <Option value="jack">jack</Option>
-              <Option value="lucy">lucy</Option>
+              <Option value="Jack">jack</Option>
+              <Option value="Lucy">lucy</Option>
               <Option value="disabled" disabled>disabled</Option>
-              <Option value="yiminghe">yiminghe</Option>
+              <Option value="Yiminghe">yiminghe</Option>
             </Select>
           )}
         </FormItem>

components/form/demo/normal-login.md

@@ -0,0 +1,81 @@
+---
+order: 1
+title:
+  zh-CN: 登陆框
+  en-US: Login Form
+---
+
+## zh-CN
+
+普通的登陆框，可以容纳更多的元素。
+
+## en-US
+
+Normal login form which can contain more elements.
+
+````jsx
+import { Form, Icon, Input, Button, Checkbox } from 'antd';
+const FormItem = Form.Item;
+
+const NormalLoginForm = Form.create()(React.createClass({
+  handleSubmit(e) {
+    e.preventDefault();
+
+    this.props.form.validateFields((err, values) => {
+      if (err) {
+        return;
+      }
+
+      console.log('Received values of form: ', values);
+    });
+  },
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form onSubmit={this.handleSubmit} className="login-form">
+        <FormItem>
+          {getFieldDecorator('userName', {
+            rules: [{ required: true, message: 'Please input your username!' }],
+          })(
+            <Input addonBefore={<Icon type="user" />} placeholder="Username" />
+          )}
+        </FormItem>
+        <FormItem>
+          {getFieldDecorator('password', {
+            rules: [{ required: true, message: 'Please input your Password!' }],
+          })(
+            <Input addonBefore={<Icon type="lock" />} type="password" placeholder="Password" />
+          )}
+        </FormItem>
+        <FormItem>
+          {getFieldDecorator('remember', {
+            valuePropName: 'checked',
+            initialValue: true,
+          })(
+            <Checkbox>Remember me</Checkbox>
+          )}
+          <a className="login-form-forgot">Forgot password</a>
+          <Button type="primary" htmlType="submit" className="login-form-button">
+            Log in
+          </Button>
+          Or <a>register now!</a>
+        </FormItem>
+      </Form>
+    );
+  },
+}));
+
+ReactDOM.render(<NormalLoginForm />, mountNode);
+````
+
+```css
+#components-form-demo-normal-login .login-form {
+  max-width: 300px;
+}
+#components-form-demo-normal-login .login-form-forgot {
+  float: right;
+}
+#components-form-demo-normal-login .login-form-button {
+  width: 100%;
+}
+```

components/form/demo/register.md

@@ -0,0 +1,224 @@
+---
+order: 2
+title:
+  zh-CN: 注册新用户
+  en-US: Registration
+---
+
+## zh-CN
+
+用户填写必须的信息以注册新用户。
+
+## en-US
+
+Fill in this form to create a new account for you.
+
+````jsx
+import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
+const FormItem = Form.Item;
+const Option = Select.Option;
+
+const residences = [{
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  children: [{
+    value: 'hangzhou',
+    label: 'Hangzhou',
+    children: [{
+      value: 'xihu',
+      label: 'West Lake',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  children: [{
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [{
+      value: 'zhonghuamen',
+      label: 'Zhong Hua Men',
+    }],
+  }],
+}];
+
+const RegistrationForm = Form.create()(React.createClass({
+  getInitialState() {
+    return {
+      passwordDirty: false,
+    };
+  },
+  handleSubmit(e) {
+    e.preventDefault();
+
+    this.props.form.validateFields((err, values) => {
+      if (err) {
+        return;
+      }
+
+      console.log('Received values of form: ', values);
+    });
+  },
+  handlePasswordBlur(e) {
+    const value = e.target.value;
+    this.setState({ passwordDirty: this.state.passwordDirty || !!value });
+  },
+  checkPassowrd(rule, value, callback) {
+    const form = this.props.form;
+    if (value && value !== form.getFieldValue('password')) {
+      callback('Two passwords that you enter is inconsistent!');
+    } else {
+      callback();
+    }
+  },
+  checkConfirm(rule, value, callback) {
+    const form = this.props.form;
+    if (value && this.state.passwordDirty) {
+      form.validateFields(['confirm'], { force: true });
+    }
+
+    callback();
+  },
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    const formItemLayout = {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 14 },
+    };
+    const prefixSelector = getFieldDecorator('prefix', {
+      initialValue: '86',
+    })(
+      <Select className="icp-selector">
+        <Option value="86">+86</Option>
+      </Select>
+    );
+    return (
+      <Form horizontal onSubmit={this.handleSubmit}>
+        <FormItem
+          {...formItemLayout}
+          label="E-mail"
+          hasFeedback
+        >
+          {getFieldDecorator('email', {
+            rules: [{
+              type: 'email', message: 'The input is not valid E-mail!',
+            }, {
+              required: true, message: 'Please input your E-mail!',
+            }],
+          })(
+            <Input />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="Password"
+          hasFeedback
+        >
+          {getFieldDecorator('password', {
+            rules: [{
+              required: true, message: 'Please input your password!',
+            }, {
+              validator: this.checkConfirm,
+            }],
+          })(
+            <Input type="password" onBlur={this.handlePasswordBlur} />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="Confirm Password"
+          hasFeedback
+        >
+          {getFieldDecorator('confirm', {
+            rules: [{
+              required: true, message: 'Please confirm your password!',
+            }, {
+              validator: this.checkPassowrd,
+            }],
+          })(
+            <Input type="password" />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={(
+            <span>
+              Nickname&nbsp;
+              <Tooltip title="What do you want other to call you?">
+                <Icon type="question-circle-o" />
+              </Tooltip>
+            </span>
+          )}
+          hasFeedback
+        >
+          {getFieldDecorator('nickname', {
+            rules: [{ required: true, message: 'Please input your nickname!' }],
+          })(
+            <Input />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="Habitual Residence"
+        >
+          {getFieldDecorator('residence', {
+            initialValue: ['zhejiang', 'hangzhou', 'xihu'],
+            rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
+          })(
+            <Cascader options={residences} />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="Phone Number"
+        >
+          {getFieldDecorator('phone', {
+            rules: [{ required: true, message: 'Please input your phone number!' }],
+          })(
+            <Input addonBefore={prefixSelector} />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="Captcha"
+        >
+          <Row gutter={8}>
+            <Col span={12}>
+              {getFieldDecorator('captcha', {
+                rules: [{ required: true, message: 'Please input the captcha you got!' }],
+              })(
+                <Input size="large" />
+              )}
+            </Col>
+            <Col span={12}>
+              <Button size="large">Get captcha</Button>
+            </Col>
+          </Row>
+        </FormItem>
+        <FormItem>
+          <Row>
+            <Col span={14} offset={6}>
+              <p>
+                {getFieldDecorator('agreement', {
+                  valuePropName: 'checked',
+                })(
+                  <Checkbox>I had read the <a>agreement</a></Checkbox>
+                )}
+              </p>
+              <Button type="primary" htmlType="submit" size="large">Register</Button>
+            </Col>
+          </Row>
+        </FormItem>
+      </Form>
+    );
+  },
+}));
+
+ReactDOM.render(<RegistrationForm />, mountNode);
+````
+
+````css
+#components-form-demo-register .icp-selector {
+  width: 60px;
+}
+````

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

@@ -0,0 +1,92 @@
+---
+order: 5
+title:
+  zh-CN: 时间类控件
+  en-US: Time-related Controls
+---
+
+## zh-CN
+
+`antd@2.0` 之后，时间类组件的 `value` 改为 `moment` 类型，所以在提交前需要预处理。
+
+## en-US
+
+After `antd@2.0`, the `value` of time-related components had been changed to `moment`. So, we need to pre-process those values.
+
+````jsx
+import { Form, DatePicker, TimePicker, Row, Col, Button } from 'antd';
+const FormItem = Form.Item;
+const MonthPicker = DatePicker.MonthPicker;
+const RangePicker = DatePicker.RangePicker;
+
+const TimeRelatedForm = Form.create()(React.createClass({
+  handleSubmit(e) {
+    e.preventDefault();
+
+    const fieldsValue = this.props.form.getFieldsValue();
+
+    // Should format date value before submit.
+    const rangeValue = fieldsValue['range-picker'];
+    const values = {
+      ...fieldsValue,
+      'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
+      'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
+      'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
+      'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
+    };
+    console.log('Received values of form: ', values);
+  },
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    const formItemLayout = {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 14 },
+    };
+    return (
+      <Form horizontal onSubmit={this.handleSubmit}>
+        <FormItem
+          {...formItemLayout}
+          label="DatePicker"
+        >
+          {getFieldDecorator('date-picker')(
+            <DatePicker />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="MonthPicker"
+        >
+          {getFieldDecorator('month-picker')(
+            <MonthPicker />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="RangePicker"
+        >
+          {getFieldDecorator('range-picker')(
+            <RangePicker />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="TimePicker"
+        >
+          {getFieldDecorator('time-picker')(
+            <TimePicker />
+          )}
+        </FormItem>
+        <FormItem>
+          <Row>
+            <Col span={14} offset={6}>
+              <Button type="primary" htmlType="submit" size="large">Submit</Button>
+            </Col>
+          </Row>
+        </FormItem>
+      </Form>
+    );
+  },
+}));
+
+ReactDOM.render(<TimeRelatedForm />, mountNode);
+````

components/form/demo/validate-basic.md

@@ -1,183 +0,0 @@
----
-order: 11
-title:
-  zh-CN: 表单校验
-  en-US: Basic validate
----
-
-## zh-CN
-
-基本的表单校验例子。
-
-## en-US
-
-Basic validation for form.
-
-````jsx
-import { Button, Form, Input } from 'antd';
-const createForm = Form.create;
-const FormItem = Form.Item;
-
-function noop() {
-  return false;
-}
-
-let BasicDemo = React.createClass({
-  handleReset(e) {
-    e.preventDefault();
-    this.props.form.resetFields();
-  },
-
-  handleSubmit(e) {
-    e.preventDefault();
-    this.props.form.validateFields((errors, values) => {
-      if (errors) {
-        console.log('Errors in form!!!');
-        return;
-      }
-      console.log('Submit!!!');
-      console.log(values);
-    });
-  },
-
-  userExists(rule, value, callback) {
-    if (!value) {
-      callback();
-    } else {
-      setTimeout(() => {
-        if (value === 'JasonWood') {
-          callback([new Error('Sorry, the user name is already in use.')]);
-        } else {
-          callback();
-        }
-      }, 800);
-    }
-  },
-
-  checkPass(rule, value, callback) {
-    const { validateFields } = this.props.form;
-    if (value) {
-      validateFields(['rePasswd'], { force: true });
-    }
-    callback();
-  },
-
-  checkPass2(rule, value, callback) {
-    const { getFieldValue } = this.props.form;
-    if (value && value !== getFieldValue('passwd')) {
-      callback('The two passwords you enter is inconsistent!');
-    } else {
-      callback();
-    }
-  },
-
-  render() {
-    const { getFieldDecorator, getFieldError, isFieldValidating } = this.props.form;
-    const formItemLayout = {
-      labelCol: { span: 7 },
-      wrapperCol: { span: 12 },
-    };
-    return (
-      <Form horizontal>
-        <FormItem
-          {...formItemLayout}
-          label="User name"
-          hasFeedback
-          help={isFieldValidating('name') ? 'validating...' : (getFieldError('name') || []).join(', ')}
-        >
-          {getFieldDecorator('name', {
-            rules: [
-              { required: true, min: 5, message: 'User name for at least 5 characters' },
-              { validator: this.userExists },
-            ],
-          })(
-            <Input placeholder="Real-tiem validation, try to input JasonWood" />
-          )}
-        </FormItem>
-
-        <FormItem
-          {...formItemLayout}
-          label="Email"
-          hasFeedback
-        >
-          {getFieldDecorator('email', {
-            validate: [{
-              rules: [
-                { required: true },
-              ],
-              trigger: 'onBlur',
-            }, {
-              rules: [
-                { type: 'email', message: 'Please input the correct email' },
-              ],
-              trigger: ['onBlur', 'onChange'],
-            }],
-          })(
-            <Input type="email" placeholder="This control uses onBlur and onChange" />
-          )}
-        </FormItem>
-
-        <FormItem
-          {...formItemLayout}
-          label="Password"
-          hasFeedback
-        >
-          {getFieldDecorator('passwd', {
-            rules: [
-              { required: true, whitespace: true, message: 'Please enter your password' },
-              { validator: this.checkPass },
-            ],
-          })(
-            <Input type="password" autoComplete="off"
-              onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-            />
-          )}
-        </FormItem>
-
-        <FormItem
-          {...formItemLayout}
-          label="Confirm password"
-          hasFeedback
-        >
-          {getFieldDecorator('rePasswd', {
-            rules: [{
-              required: true,
-              whitespace: true,
-              message: 'Please confirm your password',
-            }, {
-              validator: this.checkPass2,
-            }],
-          })(
-            <Input type="password" autoComplete="off" placeholder="Two passwords that you enter must be consistent"
-              onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-            />
-          )}
-        </FormItem>
-
-        <FormItem
-          {...formItemLayout}
-          label="remark"
-        >
-          {getFieldDecorator('textarea', {
-            rules: [
-              { required: true, message: 'Really not supposed to write something?' },
-            ],
-          })(
-            <Input type="textarea" placeholder="Please write something" id="textarea" name="textarea" />
-          )}
-        </FormItem>
-
-        <FormItem wrapperCol={{ span: 12, offset: 7 }}>
-          <Button type="primary" onClick={this.handleSubmit}>OK</Button>
-          &nbsp;&nbsp;&nbsp;
-          <Button type="ghost" onClick={this.handleReset}>Reset</Button>
-        </FormItem>
-      </Form>
-    );
-  },
-});
-
-BasicDemo = createForm()(BasicDemo);
-
-ReactDOM.render(<BasicDemo />, mountNode);
-````

components/form/demo/validate-customized.md

@@ -1,239 +0,0 @@
----
-order: 13
-title:
-  zh-CN: 自定义校验规则
-  en-US: Customized validation
----
-
-## zh-CN
-
-密码校验实例。
-
-这里使用了 `this.props.form.validateFields` 方法，在对第一次输入的密码进行校验时会触发二次密码的校验。
-
-## en-US
-
-Customized validation for Password.
-
-To use `this.props.form.validateFields` method, when validating first password you enter will trigger the second password validation.
-
-````jsx
-import { Button, Form, Input, Row, Col } from 'antd';
-import classNames from 'classnames';
-const createForm = Form.create;
-const FormItem = Form.Item;
-
-function noop() {
-  return false;
-}
-
-let Demo = React.createClass({
-  getInitialState() {
-    return {
-      dirty: false,
-      passBarShow: false, // Whether to display a tooltip of password strength
-      rePassBarShow: false,
-      passStrength: 'L', // Password strength
-      rePassStrength: 'L',
-    };
-  },
-
-  handleSubmit() {
-    this.props.form.validateFields((errors, values) => {
-      if (errors) {
-        console.log('Errors in form!!!');
-        return;
-      }
-      console.log('Submit!!!');
-      console.log(values);
-    });
-  },
-
-  getPassStrenth(value, type) {
-    if (value) {
-      let strength;
-      // Customized the password strength, here is just a simple example
-      if (value.length < 6) {
-        strength = 'L';
-      } else if (value.length <= 9) {
-        strength = 'M';
-      } else {
-        strength = 'H';
-      }
-      this.setState({
-        [`${type}BarShow`]: true,
-        [`${type}Strength`]: strength,
-      });
-    } else {
-      this.setState({
-        [`${type}BarShow`]: false,
-      });
-    }
-  },
-
-  checkPass(rule, value, callback) {
-    const form = this.props.form;
-    this.getPassStrenth(value, 'pass');
-
-    if (form.getFieldValue('pass') && this.state.dirty) {
-      form.validateFields(['rePass'], { force: true });
-    }
-
-    callback();
-  },
-
-  checkPass2(rule, value, callback) {
-    const form = this.props.form;
-    this.getPassStrenth(value, 'rePass');
-
-    if (value && value !== form.getFieldValue('pass')) {
-      callback('Two passwords you enter is inconsistent!');
-    } else {
-      callback();
-    }
-  },
-
-  renderPassStrengthBar(type) {
-    const strength = type === 'pass' ? this.state.passStrength : this.state.rePassStrength;
-    const classSet = classNames({
-      'ant-pwd-strength': true,
-      'ant-pwd-strength-low': strength === 'L',
-      'ant-pwd-strength-medium': strength === 'M',
-      'ant-pwd-strength-high': strength === 'H',
-    });
-    const level = {
-      L: 'Low',
-      M: 'Middle',
-      H: 'High',
-    };
-
-    return (
-      <div>
-        <ul className={classSet}>
-          <li className="ant-pwd-strength-item ant-pwd-strength-item-1" />
-          <li className="ant-pwd-strength-item ant-pwd-strength-item-2" />
-          <li className="ant-pwd-strength-item ant-pwd-strength-item-3" />
-          <span className="ant-form-text">
-            {level[strength]}
-          </span>
-        </ul>
-      </div>
-    );
-  },
-
-  render() {
-    const { getFieldDecorator } = this.props.form;
-    return (
-      <div>
-        <Form vertical style={{ maxWidth: 600 }}>
-          <Row type="flex" align="middle">
-            <Col span={12}>
-              <FormItem label="Password">
-                {getFieldDecorator('pass', {
-                  rules: [
-                    { required: true, whitespace: true, message: 'Please enter your password' },
-                    { validator: this.checkPass },
-                  ],
-                })(
-                  <Input type="password"
-                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-                    autoComplete="off" id="pass"
-                    onChange={(e) => {
-                      console.log('Your password is stolen in this way', e.target.value);
-                    }}
-                    onBlur={(e) => {
-                      const value = e.target.value;
-                      this.setState({ dirty: this.state.dirty || !!value });
-                    }}
-                  />
-                )}
-              </FormItem>
-            </Col>
-            <Col span={12}>
-              {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null}
-            </Col>
-          </Row>
-          <Row type="flex" align="middle">
-            <Col span={12}>
-              <FormItem label="Confirm">
-                {getFieldDecorator('rePass', {
-                  rules: [{
-                    required: true,
-                    whitespace: true,
-                    message: 'Please confirm your password',
-                  }, {
-                    validator: this.checkPass2,
-                  }],
-                })(
-                  <Input type="password"
-                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-                    autoComplete="off" id="rePass"
-                  />
-                )}
-              </FormItem>
-            </Col>
-            <Col span={12}>
-              {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null}
-            </Col>
-          </Row>
-          <FormItem><Button type="primary" onClick={this.handleSubmit}>提交</Button></FormItem>
-        </Form>
-      </div>
-    );
-  },
-});
-
-Demo = createForm()(Demo);
-
-ReactDOM.render(<Demo />, mountNode);
-````
-
-````css
-.ant-pwd-strength {
-  display: inline-block;
-  margin-left: 8px;
-  line-height: 32px;
-  height: 32px;
-  vertical-align: middle;
-}
-
-.ant-pwd-strength-item {
-  float: left;
-  margin-right: 1px;
-  margin-top: 12px;
-  width: 19px;
-  height: 8px;
-  line-height: 8px;
-  list-style: none;
-  background-color: #f3f3f3;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-.ant-pwd-strength-item-1 {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
-.ant-pwd-strength-item-2 {
-  width: 20px;
-}
-
-.ant-pwd-strength-item-3 {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-  margin-right: 8px;
-}
-
-.ant-pwd-strength-low .ant-pwd-strength-item-1, .ant-pwd-strength-medium .ant-pwd-strength-item-1, .ant-pwd-strength-high .ant-pwd-strength-item-1 {
-  background-color: #FAC450;
-}
-
-.ant-pwd-strength-medium .ant-pwd-strength-item-2, .ant-pwd-strength-high .ant-pwd-strength-item-2 {
-  background-color: rgba(135, 208, 104, .6);
-  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9987D068,endColorstr=#9987D068);
-}
-
-.ant-pwd-strength-high .ant-pwd-strength-item-3 {
-  background-color: #87D068;
-}
-````

components/form/demo/validate-other.md

@@ -137,20 +137,8 @@ let Demo = React.createClass({
           {...formItemLayout}
           label="Hobby"
         >
-          {getFieldDecorator('eat', {
-            valuePropName: 'checked',
-          })(
-            <Checkbox>eat</Checkbox>
-          )}
-          {getFieldDecorator('sleep', {
-            valuePropName: 'checked',
-          })(
-            <Checkbox>sleeping</Checkbox>
-          )}
-          {getFieldDecorator('beat', {
-            valuePropName: 'checked',
-          })(
-            <Checkbox>dozen doug</Checkbox>
+          {getFieldDecorator('hobby')(
+            <Checkbox.Group options={['eat', 'sleeping', 'dozen doug']} />
           )}
         </FormItem>
 

components/form/index.en-US.md

@@ -5,8 +5,7 @@ cols: 1
 title: Form
 ---
 
-Forms are used to collect, validate, and submit the user input. They contain one or more form items.
-There are many types of form items including checkbox, radio, input, select, and more.
+Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.
 
 ## Form
 
@@ -77,6 +76,13 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
 
 ### this.props.form.getFieldDecorator(id, options)
 
+After wrapped by `getFieldDecorator`, `value` `onChange` props will be added to form controls，the flow of form data will be handled by Form which will cause:
+
+
+1. You don't need to use `onChange` and should not add `value` `onChange` to controls. (There are warnings after `antd@2.0`)
+2. You can not set default value via `defaultValue` prop, you should use `initialValue` in `getFieldDecorator` instead.
+3. You don't need to call `setState` manully, please use `this.props.form.setFieldsValue` to change value programmatically.
+
 #### Special attention
 
 If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless component: https://github.com/facebook/react/pull/6534

components/form/index.zh-CN.md

@@ -8,7 +8,6 @@ title: Form
 
 具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
 
-
 ## 表单
 
 我们为 `form` 提供了以下两种排列方式：
@@ -79,6 +78,12 @@ CustomizedForm = Form.create({})(CustomizedForm);
 
 ### this.props.form.getFieldDecorator(id, options)
 
+经过 `getFieldDecorator` 包装的控件，表单控件会自动添加 `value` `onChange` 等属性，数据同步将被 Form 接管，这会导致以下结果：
+
+1. 你不再需要用 `onChange` 来做同步，也不应该给控件单独添加 `value` `onChange` 等属性。（2.0 后会在控制台进行警告）
+2. 你不能用控件的 `defaultValue` 属性来设置默认值，请用 `getFieldDecorator` 里的 `initialValue`。
+3. 你不需要用 `setState`，可以使用 `this.props.form.setFieldsValue` 来动态改变表单值。
+
 #### 特别注意
 
 如果使用的是 `react@<15.3.0`，则 `getFieldDecorator` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534

components/form/style/index.less

@@ -31,8 +31,7 @@ label {
 input[type="radio"],
 input[type="checkbox"] {
   &[disabled],
-  &.disabled,
-  fieldset[disabled] & {
+  &.disabled {
     cursor: @cursor-disabled;
   }
 }
@@ -42,8 +41,7 @@ input[type="checkbox"] {
 .@{ant-prefix}-radio-vertical,
 .@{ant-prefix}-checkbox-inline,
 .@{ant-prefix}-checkbox-vertical {
-  &.disabled,
-  fieldset[disabled] & {
+  &.disabled {
     cursor: @cursor-disabled;
   }
 }
@@ -51,8 +49,7 @@ input[type="checkbox"] {
 // These classes are used on elements with <label> descendants
 .@{ant-prefix}-radio,
 .@{ant-prefix}-checkbox {
-  &.disabled,
-  fieldset[disabled] & {
+  &.disabled {
     label {
       cursor: @cursor-disabled;
     }
@@ -65,6 +62,7 @@ input[type="checkbox"] {
   font-size: @font-size-base;
   margin-bottom: @form-item-margin-bottom;
   color: #666;
+  vertical-align: top;
 
   // nested FormItem
   & > &,
@@ -87,6 +85,9 @@ input[type="checkbox"] {
     vertical-align: middle;
     padding: 7px 0;
     display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     label {
       color: @label-color;

components/icon/index.en-US.md

@@ -56,6 +56,13 @@ ReactDOM.render(<IconSet className="icons" catigory="suggestion" />, mountNode);
 ReactDOM.render(<IconSet className="icons" catigory="other" />, mountNode);
 ```
 
+## Props
+
+| Property | Description      | Type   | Default |
+|----------|------------------|------- |---------|
+| type | Type of ant design icons | String | - |
+| spin | Rotate icon with animation | Boolean | false |
+
 <style>
 .markdown .icons {
   width: 100%;

components/icon/index.tsx

@@ -1,13 +1,23 @@
 import * as React from 'react';
+import classNames from 'classnames';
+import omit from 'omit.js';
 
 export interface IconProps {
   type: string;
   className?: string;
   title?: string;
-  onClick?: (e) => void;
+  onClick?: React.MouseEventHandler<any>;
+  spin?: boolean;
+  style?: React.CSSProperties;
 }
 
 export default (props: IconProps) => {
-  const { type, className = '' } = props;
-  return <i {...props} className={`${className} anticon anticon-${type}`.trim()} />;
+  const { type, className = '', spin } = props;
+  const classString = classNames({
+    anticon: true,
+    'anticon-spin': !!spin || type === 'loading',
+    [`anticon-${type}`]: true,
+    [className]: true,
+  });
+  return <i {...omit(props, ['type', 'spin'])} className={classString} />;
 };

components/icon/index.zh-CN.md

@@ -6,7 +6,7 @@ title: Icon
 toc: false
 ---
 
-有含义的矢量图形，每一个图标打倒一个敌人。
+语义化的矢量图形。
 
 ## 图标的命名规范
 
@@ -57,6 +57,13 @@ ReactDOM.render(<IconSet className="icons" catigory="suggestion" />, mountNode);
 ReactDOM.render(<IconSet className="icons" catigory="other" />, mountNode);
 ```
 
+## Props
+
+| 参数      | 说明             | 类型      | 默认值  |
+|----------|------------------|----------|--------|
+| type | 图标类型 | String | - |
+| spin | 是否有旋转动画 | Boolean | false |
+
 <style>
 .markdown .icons {
   width: 100%;

components/index.tsx

@@ -1,143 +1,95 @@
-import Affix from './affix';
-export { Affix };
+export { default as Affix } from './affix';
 
-import AutoComplete from './auto-complete';
-export { AutoComplete };
+export { default as AutoComplete } from './auto-complete';
 
-import Alert from './alert';
-export { Alert };
+export { default as Alert } from './alert';
 
-import BackTop from './back-top';
-export { BackTop };
+export { default as BackTop } from './back-top';
 
-import Badge from './badge';
-export { Badge };
+export { default as Badge } from './badge';
 
-import Breadcrumb from './breadcrumb';
-export { Breadcrumb };
+export { default as Breadcrumb } from './breadcrumb';
 
-import Button from './button';
-export { Button };
+export { default as Button } from './button';
 
-import Calendar from './calendar';
-export { Calendar };
+export { default as Calendar } from './calendar';
 
-import Card from './card';
-export { Card };
+export { default as Card } from './card';
 
-import Collapse from './collapse';
-export { Collapse };
+export { default as Collapse } from './collapse';
 
-import Carousel from './carousel';
-export { Carousel };
+export { default as Carousel } from './carousel';
 
-import Cascader from './cascader';
-export { Cascader };
+export { default as Cascader } from './cascader';
 
-import Checkbox from './checkbox';
-export { Checkbox };
+export { default as Checkbox } from './checkbox';
 
-import Col from './col';
-export { Col };
+export { default as Col } from './col';
 
-import DatePicker from './date-picker';
-export { DatePicker };
+export { default as DatePicker } from './date-picker';
 
-import Dropdown from './dropdown';
-export { Dropdown };
+export { default as Dropdown } from './dropdown';
 
-import Form from './form';
-export { Form };
+export { default as Form } from './form';
 
-import Icon from './icon';
-export { Icon };
+export { default as Icon } from './icon';
 
-import Input from './input';
-export { Input };
+export { default as Input } from './input';
 
-import InputNumber from './input-number';
-export { InputNumber };
+export { default as InputNumber } from './input-number';
 
-import LocaleProvider from './locale-provider';
-export { LocaleProvider };
+export { default as LocaleProvider } from './locale-provider';
 
-import message from './message';
-export { message };
+export { default as message } from './message';
 
-import Menu from './menu';
-export { Menu };
+export { default as Menu } from './menu';
 
-import Modal from './modal';
-export { Modal };
+export { default as Modal } from './modal';
 
-import notification from './notification';
-export { notification };
+export { default as notification } from './notification';
 
-import Pagination from './pagination';
-export { Pagination };
+export { default as Pagination } from './pagination';
 
-import Popconfirm from './popconfirm';
-export { Popconfirm };
+export { default as Popconfirm } from './popconfirm';
 
-import Popover from './popover';
-export { Popover };
+export { default as Popover } from './popover';
 
-import Progress from './progress';
-export { Progress };
+export { default as Progress } from './progress';
 
-import Radio from './radio';
-export { Radio };
+export { default as Radio } from './radio';
 
-import Rate from './rate';
-export { Rate };
+export { default as Rate } from './rate';
 
-import Row from './row';
-export { Row };
+export { default as Row } from './row';
 
-import Select from './select';
-export { Select };
+export { default as Select } from './select';
 
-import Slider from './slider';
-export { Slider };
+export { default as Slider } from './slider';
 
-import Spin from './spin';
-export { Spin };
+export { default as Spin } from './spin';
 
-import Steps from './steps';
-export { Steps };
+export { default as Steps } from './steps';
 
-import Switch from './switch';
-export { Switch };
+export { default as Switch } from './switch';
 
-import Table from './table';
-export { Table };
+export { default as Table } from './table';
 
-import Transfer from './transfer';
-export { Transfer };
+export { default as Transfer } from './transfer';
 
-import Tree from './tree';
-export { Tree };
+export { default as Tree } from './tree';
 
-import TreeSelect from './tree-select';
-export { TreeSelect };
+export { default as TreeSelect } from './tree-select';
 
-import Tabs from './tabs';
-export { Tabs }
+export { default as Tabs } from './tabs';
 
-import Tag from './tag';
-export { Tag }
+export { default as Tag } from './tag';
 
-import TimePicker from './time-picker';
-export { TimePicker }
+export { default as TimePicker } from './time-picker';
 
-import Timeline from './timeline';
-export { Timeline }
+export { default as Timeline } from './timeline';
 
-import Tooltip from './tooltip';
-export { Tooltip }
+export { default as Tooltip } from './tooltip';
 
-import Mention from './mention';
-export { Mention };
+export { default as Mention } from './mention';
 
-import Uplaod from './upload';
-export { Uplaod };
+export { default as Upload } from './upload';

components/input-number/index.tsx

@@ -14,6 +14,8 @@ export interface InputNumberProps {
   disabled?: boolean;
   size?: 'large' | 'small' | 'default';
   placeholder?: string;
+  style?: React.CSSProperties;
+  className?: string;
 }
 
 export default class InputNumber extends React.Component<InputNumberProps, any> {

components/input/Group.tsx

@@ -10,14 +10,15 @@ export interface GroupProps {
 }
 
 const Group: React.StatelessComponent<GroupProps> = (props) => {
-  const className = classNames({
-    [props.prefixCls]: true,
-    [`${props.prefixCls}-lg`]: props.size === 'large',
-    [`${props.prefixCls}-sm`]: props.size === 'small',
-    [props.className]: !!props.className,
+  const { prefixCls = 'ant-input-group', className = '' } = props;
+  const cls = classNames({
+    [prefixCls]: true,
+    [`${prefixCls}-lg`]: props.size === 'large',
+    [`${prefixCls}-sm`]: props.size === 'small',
+    [className]: !!className,
   });
   return (
-    <span className={className} style={props.style}>
+    <span className={cls} style={props.style}>
       {props.children}
     </span>
   );
@@ -27,8 +28,4 @@ Group.propTypes = {
   children: React.PropTypes.any,
 };
 
-Group.defaultProps = {
-  prefixCls: 'ant-input-group',
-};
-
 export default Group;

components/input/Input.tsx

@@ -45,11 +45,11 @@ export interface InputProps {
   readOnly?: boolean;
   addonBefore?: React.ReactNode;
   addonAfter?: React.ReactNode;
-  onPressEnter?: React.FormEventHandler;
-  onKeyDown?: React.FormEventHandler;
-  onChange?: React.FormEventHandler;
-  onClick?: React.FormEventHandler;
-  onBlur?: React.FormEventHandler;
+  onPressEnter?: React.FormEventHandler<any>;
+  onKeyDown?: React.FormEventHandler<any>;
+  onChange?: React.FormEventHandler<any>;
+  onClick?: React.FormEventHandler<any>;
+  onBlur?: React.FormEventHandler<any>;
   autosize?: boolean | AutoSizeType;
   autoComplete?: 'on' | 'off';
   style?: React.CSSProperties;
@@ -61,9 +61,6 @@ export default class Input extends Component<InputProps, any> {
     disabled: false,
     prefixCls: 'ant-input',
     type: 'text',
-    onPressEnter() {},
-    onKeyDown() {},
-    onChange() {},
     autosize: false,
   };
 
@@ -114,17 +111,23 @@ export default class Input extends Component<InputProps, any> {
   }
 
   handleKeyDown = (e) => {
-    if (e.keyCode === 13) {
-      this.props.onPressEnter(e);
+    const { onPressEnter, onKeyDown } = this.props;
+    if (e.keyCode === 13 && onPressEnter) {
+      onPressEnter(e);
+    }
+    if (onKeyDown) {
+      onKeyDown(e);
     }
-    this.props.onKeyDown(e);
   }
 
   handleTextareaChange = (e) => {
     if (!('value' in this.props)) {
       this.resizeTextarea();
     }
-    this.props.onChange(e);
+    const onChange = this.props.onChange;
+    if (onChange) {
+      onChange(e);
+    }
   }
 
   resizeTextarea = () => {

components/input/calculateNodeHeight.tsx

@@ -87,8 +87,8 @@ function calculateNodeStyling(node, useCache = false) {
 export default function calculateNodeHeight(
   uiTextNode,
   useCache = false,
-  minRows = null,
-  maxRows = null
+  minRows: number | null = null,
+  maxRows: number | null = null
 ) {
   if (!hiddenTextarea) {
     hiddenTextarea = document.createElement('textarea');

components/input/style/mixin.less

@@ -62,9 +62,8 @@
     .active();
   }
 
-  &[disabled],
-  fieldset[disabled] & {
-   .disabled();
+  &[disabled] {
+    .disabled();
   }
 
   // Reset height for `textarea`s
@@ -131,7 +130,7 @@
 
   &-addon,
   &-wrap {
-    width: 1%;
+    width: 1px; // To make addon/wrap as small as possible
     white-space: nowrap;
     vertical-align: middle;
   }

components/input/style/search-input.less

@@ -33,10 +33,6 @@
     &:hover {
       border-color: @border-color-base;
     }
-    form & {
-      padding-top: 6px;
-      padding-bottom: 6px;
-    }
   }
   &&-focus .@{ant-prefix}-search-btn-noempty,
   &:hover .@{ant-prefix}-search-btn-noempty {

components/layout/col.tsx

@@ -30,52 +30,53 @@ export interface ColProps {
   style?: React.CSSProperties;
 }
 
-const Col: React.StatelessComponent<ColProps> = (props) => {
-  const [{ span, order, offset, push, pull, className, children, prefixCls = 'ant-col' }, others] = splitObject(props,
-    ['span', 'order', 'offset', 'push', 'pull', 'className', 'children', 'prefixCls']);
-  let sizeClassObj = {};
-  ['xs', 'sm', 'md', 'lg'].forEach(size => {
-    let sizeProps: ColSize = {};
-    if (typeof props[size] === 'number') {
-      sizeProps.span = props[size];
-    } else if (typeof props[size] === 'object') {
-      sizeProps = props[size] || {};
-    }
+export default class Col extends React.Component<ColProps, any> {
+  static propTypes = {
+    span: stringOrNumber,
+    order: stringOrNumber,
+    offset: stringOrNumber,
+    push: stringOrNumber,
+    pull: stringOrNumber,
+    className: PropTypes.string,
+    children: PropTypes.node,
+    xs: objectOrNumber,
+    sm: objectOrNumber,
+    md: objectOrNumber,
+    lg: objectOrNumber,
+  };
 
-    delete others[size];
+  render() {
+    const props = this.props;
+    const [{ span, order, offset, push, pull, className, children, prefixCls = 'ant-col' }, others] = splitObject(props,
+      ['span', 'order', 'offset', 'push', 'pull', 'className', 'children', 'prefixCls']);
+    let sizeClassObj = {};
+    ['xs', 'sm', 'md', 'lg'].forEach(size => {
+      let sizeProps: ColSize = {};
+      if (typeof props[size] === 'number') {
+        sizeProps.span = props[size];
+      } else if (typeof props[size] === 'object') {
+        sizeProps = props[size] || {};
+      }
 
-    sizeClassObj = assign({}, sizeClassObj, {
-      [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-      [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order,
-      [`${prefixCls}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
-      [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push,
-      [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
+      delete others[size];
+
+      sizeClassObj = assign({}, sizeClassObj, {
+        [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+        [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order,
+        [`${prefixCls}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
+        [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push,
+        [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
+      });
     });
-  });
-  const classes = classNames(assign({}, {
-    [`${prefixCls}-${span}`]: span !== undefined,
-    [`${prefixCls}-order-${order}`]: order,
-    [`${prefixCls}-offset-${offset}`]: offset,
-    [`${prefixCls}-push-${push}`]: push,
-    [`${prefixCls}-pull-${pull}`]: pull,
-    [className]: !!className,
-  }, sizeClassObj));
+    const classes = classNames(assign({}, {
+      [`${prefixCls}-${span}`]: span !== undefined,
+      [`${prefixCls}-order-${order}`]: order,
+      [`${prefixCls}-offset-${offset}`]: offset,
+      [`${prefixCls}-push-${push}`]: push,
+      [`${prefixCls}-pull-${pull}`]: pull,
+      [className]: !!className,
+    }, sizeClassObj));
 
-  return <div {...others} className={classes}>{children}</div>;
-};
-
-Col.propTypes = {
-  span: stringOrNumber,
-  order: stringOrNumber,
-  offset: stringOrNumber,
-  push: stringOrNumber,
-  pull: stringOrNumber,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  xs: objectOrNumber,
-  sm: objectOrNumber,
-  md: objectOrNumber,
-  lg: objectOrNumber,
-};
-
-export default Col;
+    return <div {...others} className={classes}>{children}</div>;
+  }
+}