format webpack.config.js

fix #1970
2026-02-18 15:22:28 +08:00 · 2016-06-06 15:12:38 +08:00 · 2016-06-06 13:53:05 +08:00
315 changed files with 2872 additions and 4366 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -28,13 +28,13 @@ const eslintrc = {
    'arrow-body-style': 0,
    'react/sort-comp': 0,
    'react/prop-types': 0,
+    'react/jsx-closing-bracket-location': 0,
    'react/jsx-first-prop-new-line': 0,
    'import/no-unresolved': 0,
    'no-param-reassign': 0,
    'no-return-assign': 0,
    'max-len': 0,
    'consistent-return': 0,
-    'no-redeclare': 0,
  }
 };

--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,27 +1,53 @@
-<!-- Issue Template For Chinese Users -->
+If you want to ask a question, please read [some tips](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question) first :-)

-<!-- 请按照下列格式报告问题，务必提供复现步骤，否则恕难解决，感谢您的支持。-->
+If you are going to report a bug, please answer the following questions, thank you!

-#### 本地环境
+## What you did

-<!-- 务必提供 -->
+(e.g. I ate a hamburger)
+
+## What you would like to happen
+
+(e.g. I should be full)
+
+## What actually happened
+
+(e.g. But I am still hungry now T_T)
+
+## Online demo
+
+(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
+
+## Environment Information
+
+- The version of antd(e.g. 0.12.0):
+- Your operating system and it's version(e.g. OSX 10.11.0):
+- Your browser and it's version(e.g. Chrome 48.0.0.0(64-bit)):
+
+---
+
+提问之前，建议先阅读[这份提示](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question)。:-)
+
+如果是报告 bug，请按照下列格式编辑问题，务必提供复现步骤，否则恕难解决，非常感谢！
+
+## 你做了什么？
+
+（例如，我吃了一个汉堡）
+
+## 你期待的结果是：
+
+（例如，我应该饱了）
+
+## 实际上的结果和抱怨：
+
+（例如，我还是饿的，肯定是哪里出问题了）
+
+## 可重现的在线演示
+
+(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
+
+## 本地环境信息

 - antd 版本:
 - 操作系统及其版本：
 - 浏览器及其版本:
-
-#### 你做了什么？
-
-<!-- 引入 antd 了 Button -->
-
-#### 你期待的结果是：
-
-<!-- 像官网一样正常显示 -->
-
-#### 实际上的结果：
-
-<!-- 缺少样式 -->
-
-#### 可重现的在线演示
-
-<!-- 请修改并 Fork http://codepen.io/anon/pen/wGOWGW?editors=001 -->
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ---
 order: 3
-title: 更新日志
+chinese: 更新日志
 toc: false
 timeline: true
 ---
@@ -9,156 +9,6 @@ timeline: true

 ---

-## 1.7.0
-
-`2016-07-30`
-
-友情提示 [Ant Design Mobile](http://mobile.ant.design) 已经发布。
-
- Table
-  - 现可以定义页头。[demo](http://ant.design/components/table#components-table-demo-bordered)
-  - 修复当 `rowKey` 为 `String` 时的报错问题。[#2500](https://github.com/ant-design/ant-design/issues/2500)
-  - 修复 `Table` 会修改 `dataSource` 里面的值的问题。[#2501](https://github.com/ant-design/ant-design/issues/2501)
- Form 现在不再需要显式传递 `form={this.props.form}`。
- 优化 Breadcrumb.Item 的 hover 效果。
- 优化 Progress 的动画效果。
- DatePicker
-  - 优化清除按钮样式。
-  - 修复点击 `此刻` 时不触发 `onChange` 的问题。[#1902](https://github.com/ant-design/ant-design/issues/1902)
- Menu
-  - 修复子菜单中的 Item 被选中后，父级元素无样式变化的问题。[#2414](https://github.com/ant-design/ant-design/issues/2414)
-  - 修复 Menu.Item disabled 后的样式问题。
- TreeSelect
-  - treeNodes 可以设置是否可选。[#2401](https://github.com/ant-design/ant-design/issues/2401)
-  - 修复多选模式下进行搜索会把已选项清掉的问题。[#2393](https://github.com/ant-design/ant-design/issues/2393)
-  - 修复 TreeSelect 会修改原数据的问题。[#2459](https://github.com/ant-design/ant-design/issues/2459)
- 修复了 Select 组件 placeholder 溢出的问题。[#2480](https://github.com/ant-design/ant-design/pull/2480)
- 修复 Timeline.Item 无法自定义边框颜色的问题。[#2479](https://github.com/ant-design/ant-design/issues/2479)
- 修复 Spin 显示突兀的问题。[#2398](https://github.com/ant-design/ant-design/issues/2398)
- 修复 Cascader 选项文字过长导致的样式问题。[#2515](https://github.com/ant-design/ant-design/issues/2515)
-
-## 1.6.5
-
-`2016-07-16`
-
- 修复 Input 的 `value prop on input should not be null` 警告并且导致在表单中无法重置的问题。[#2335](https://github.com/ant-design/ant-design/issues/2335)
- 优化 FormItem 的布局实现，修复表单布局不支持响应式布局的问题。[#2305](https://github.com/ant-design/ant-design/issues/2305)
- 修复带时间的 DatePicker 的 onChange 触发逻辑。[#2399](https://github.com/ant-design/ant-design/issues/2399#issuecomment-232893146)
- 修复 Transfer 搜索后全选的问题。[#2396](https://github.com/ant-design/ant-design/issues/2396)
- 修复 Cascader 样式会被 ant-input 样式覆盖的问题。[#2400](https://github.com/ant-design/ant-design/issues/2400)
- 修复 Table 删除数据时导致当前页数溢出的问题。[#2301](https://github.com/ant-design/ant-design/pull/2301)
- 修复 resize 浏览器时 Affix 元素没有和原来的位置同步的问题。[#1987](https://github.com/ant-design/ant-design/issues/1987)
- 给 Affix 元素添加占位，修复固定时页面跳动的问题。
- 修复 Select combobox 模式会导致页面出现横向滚动条的问题。[#2353](https://github.com/ant-design/ant-design/issues/2353)
- 修复 Upload 组件已上传文件链接点击无效的问题。[#2331](https://github.com/ant-design/ant-design/issues/2331)
- 修复 Upload 上传过程中删除图片后的报错问题。[#2342](https://github.com/ant-design/ant-design/issues/2342)
-
-## 1.6.4
-
-`2016-07-08`
-
- 修复组件在 react@15.2.0 下报 Unknown props 警告的问题。[#2258](https://github.com/ant-design/ant-design/issues/2258)
- `Table`
-     - 修复 filterDropDown 中内容未改变也会调用 onChange 的问题。[#2228](https://github.com/ant-design/ant-design/issues/2228)
-     - 修复设置 scroll.y 高度后导致内容无法对齐的问题。[#2227](https://github.com/ant-design/ant-design/issues/2227)
- `Form`
-     - 修复 `FormItem` 中带空格后缀的冒号替换问题，关联issue：[#1877](https://github.com/ant-design/ant-design/issues/1877)
-     -  demo 优化。
- `Transfer`
-     - 修复重复 render 的问题，性能优化。[#2112](https://github.com/ant-design/ant-design/issues/2112)
-     - 优化搜索逻辑，修复搜索时未对特殊字符进行处理的问题。[#2260](https://github.com/ant-design/ant-design/issues/2260)
-     - 清除按钮样式优化。
- 修复 `Steps` 最后一步多余横线隐藏的问题。
- 修复 `Cascader` small size 样式下沉 1px，以及 hover/click 样式残缺的问题。[#2234](https://github.com/ant-design/ant-design/issues/2234)
- 修复 `RangePicker` 无清除按钮的问题。[#2252](https://github.com/ant-design/ant-design/issues/2252)
-
-## 1.6.3
-
-`2016-07-04`
-
- 修复 Transfer 的一个 unmount 的错误。[#2206](https://github.com/ant-design/ant-design/pull/2206)
- 修复了 Badge、Alert、Menu、Tag、Checkbox、Radio 组件的一些样式细节问题。
-
-## 1.6.2
-
-`2016-06-27`
-
- 修复 Table、Transfer 的样式错位问题。
- 修复 DatePicker 的一个样式问题。[#2182](https://github.com/ant-design/ant-design/issues/2182)
- 优化 Menu 的 hover 样式响应性能。
-
-## 1.6.1
-
-`2016-06-24`
-
- 回滚一个未完成的 DatePicker 时间选项改造效果。
-
-## 1.6.0
-
-`2016-06-24`
-
- 新增置顶组件 [BackTop](/components/back-top)。
- 全新的 [Spin](/components/spin) 样式。
- 给 `Modal.xxx` 系列方法添加了 `{ destory }` 的访问值，方便事后销毁。[#2110](https://github.com/ant-design/ant-design/issues/2110)
- Table 的 `rowKey` 属性支持直接使用字符串。[#2058](https://github.com/ant-design/ant-design/issues/2058)
- Table 增加 `column.filterDropdown` 属性用于自定义渲染筛选菜单的浮层。[#1736](https://github.com/ant-design/ant-design/issues/1736)
- 修复 Tooltip、Popover、Popconfirm 设置 `onVisibleChange` 后失效的问题。[#2134](https://github.com/ant-design/ant-design/issues/2134)
- 修复在 IE8 下 Checkbox 的勾样式变形的问题。[#2148](https://github.com/ant-design/ant-design/issues/2148)
- 优化 Checkbox、Radio 失效状态的文字颜色。[#2114](https://github.com/ant-design/ant-design/issues/2114)
- 优化 Checkbox、Radio 的默认边距过于拥挤的问题。[#2137](https://github.com/ant-design/ant-design/issues/2137)
- 优化 Pagination 在暗色背景下的样式。[#2126](https://github.com/ant-design/ant-design/issues/2126)
- 修复 Table 固定列时内容无法换行和高度对齐的问题，同时修复了一个 Chrome 下的表格内容错位问题。[#2130](https://github.com/ant-design/ant-design/issues/2130)
- 修复一个 Table 的 `rowSelection` 设为 null 时可能导致报错的问题。[#2127](https://github.com/ant-design/ant-design/issues/2127)
- 修复在 IE8 下点击 Table 选择框报错的问题。[#2154](https://github.com/ant-design/ant-design/issues/2154)
- 小幅优化了 Transfer 的渲染性能。[#2112](https://github.com/ant-design/ant-design/issues/2112)
- 将 DatePicker 的清除按钮从面板上移到外部输入框，解决用户容易误解为关闭的问题。[#1708](https://github.com/ant-design/ant-design/issues/1708)
- Upload 的 `onPreview` 现在没有 `file.url` 时也能生效。[#2163](https://github.com/ant-design/ant-design/issues/2163)
-
-## 1.5.1
-
-`2016-06-21`
-
- 修复一个 TypeScript 定义文件的语法错误。
- 修复 Table 固定表头高度和滚动条样式问题。
-
-## 1.5.0
-
-`2016-06-17`
-
- 升级 `rc-form` 到 0.17，支持 `getFieldProps('xx.yy')` 的写法，并支持单多选控件进行关联。[#](https://github.com/react-component/form/pull/21)
- Input 的 `addonBefore` 和 `addonAfter` 支持内嵌选择框。[#1927](https://github.com/ant-design/ant-design/issues/1927)
- 优化了两个 DatePicker 组成的时间范围选择演示的体验。
- 优化一个多个对话框的遮罩层高度的问题。[#2009](https://github.com/ant-design/ant-design/issues/2009)
- 优化 Table 的 `getCheckboxProps` 的调用次数。[#2086](https://github.com/ant-design/ant-design/issues/2086)
- 修复 Table 固定列时，表头无法左右滚动的问题。[#2068](https://github.com/ant-design/ant-design/issues/2068)
- 修复小型表格固定表头的样式。[#2023](https://github.com/ant-design/ant-design/issues/2023)
- 修复 Tabs 的 `tabPosition` 为左右时样式错位的问题。[#2046](https://github.com/ant-design/ant-design/issues/2046)
- 修复 RangePicker 的日期范围背景丢失的问题。
- 修复 Switch 失效状态下文字颜色太浅的问题。[#2051](https://github.com/ant-design/ant-design/issues/2051)
- 修复一个 Select 的 `disabled` 选项依然可以被移除的问题。[#2034](https://github.com/ant-design/ant-design/issues/2034)
- 修复官方站点在 IE 下的报错问题。
-
-## 1.4.1
-
-`2016-06-12`
-
- 修复一个展开 Tabs 会导致表格宽度溢出的问题。[#2013](https://github.com/ant-design/ant-design/issues/2013)
- 修复一个某些情况下表格布局被破坏的问题。
-
-## 1.4.0
-
-`2016-06-12`
-
-此版本之后你可能会遇到 [#2030](https://github.com/ant-design/ant-design/issues/2030)，请使用 `react@15+` 或 `npm@3+`。
-
- `Input[type="textarea"]` 支持自动调整高度。 [#](http://ant.design/components/input#components-input-demo-autosize-textarea)
- `Breadcrumb`
-  - `nameRender` 新增 `route` 和 `params` 参数。 [#1999](https://github.com/ant-design/ant-design/issues/1999)
-  - `linkRender` 新增 `paths` 参数。
- 再次修复 `Table` 组件 `rowSelection.onChange` 与 `onRowClick` 冲突问题。 [#1470](https://github.com/ant-design/ant-design/issues/1470)
- 修复 `Form.Item` 中 `Input` 高度抖动问题。 [#1955](https://github.com/ant-design/ant-design/issues/1955)
- 修复高级搜索的 `ant-advanced-search-form` 样式丢失的问题。
-
 ## 1.3.2

 `2016-06-06`
@@ -207,7 +57,6 @@ timeline: true
  - 修复了 Table 组件的分页相关的一系列问题 [#1669](https://github.com/ant-design/ant-design/issues/1669) [#1842](https://github.com/ant-design/ant-design/issues/1842)
  - 修复了当有列固定在左边时，选择框不显示的问题 [#1829](https://github.com/ant-design/ant-design/issues/1829)
 - 修复了当 Checkbox 的 label 为数字 0 时， label 不显示的问题 [#1811](https://github.com/ant-design/ant-design/issues/1811)
- 修复 Select combobox 模式下无法重置 `optionLabelProp` 的问题。[#1773](https://github.com/ant-design/ant-design/issues/1773)
 - 修复了 Tag 组件为 closeable 时，内部链接无法点击的问题 [#1862](https://github.com/ant-design/ant-design/issues/1862)
 - Tab 组件新增 `hideAdd` 属性，用于关闭右边的添加按钮 [#1750](https://github.com/ant-design/ant-design/issues/1750)
 - 修复了一个在某些情况下找不到 `normalize.css/normalize.css` 文件的问题。[ant-design/antd-init#52](https://github.com/ant-design/antd-init/issues/52)
@@ -258,7 +107,7 @@ timeline: true
 - **兼容 React@15.x**。
 - **全新单页站点**，使用 React 和 antd 进行了彻底重构，加载更快，访问更流畅。
 - **样式支持按需加载**。可参考 [antd-init](https://github.com/ant-design/antd-init) 的模版代码, 需要配合 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd#usage) 插件和 `style` 配置进行使用。[#900](https://github.com/ant-design/ant-design/issues/900)
- **提供独立的构建文件**。[文档](/docs/react/install#浏览器引入)
+- **提供独立的构建文件**。[文档](/docs/react/install?scrollTo=浏览器引入)
 - 新增卡片组件 [Card](/components/card)。
 - 新增评分组件 [Rate](/components/rate)。
 - 新增 [LocaleProvider](/components/locale-provider) 组件，提供组件文案的国际化支持，并新增了英语和俄语的语言配置。[#1411](https://github.com/ant-design/ant-design/issues/1411)
@@ -271,7 +120,7 @@ timeline: true

 此版本有部分不兼容的改动，升级时确保修改相应的使用代码。

- 推荐使用样式按需加载。如果依然需要整体载入样式，**样式入口文件已变为** `antd/dist/antd.css` 和 `antd/dist/antd.less`。如果你在项目中覆盖了 less 变量，less 文件的引用方式也有 [相应变更](https://github.com/ant-design/ant-design/issues/1558#issuecomment-218120000)。
+- 推荐使用样式按需加载, 如果需要整体载入样式, **样式入口文件变为** `antd/dist/antd.css` 和 `antd/dist/antd.less`。如果你在项目中覆盖了 less 变量，less 文件的引用方式也有 [相应变更](https://github.com/ant-design/ant-design/issues/1558#issuecomment-218120000)。

   ```diff
   - import 'antd/lib/index.css';  // import 'antd/style/index.less';
@@ -289,7 +138,7 @@ timeline: true

 这里的改动在升级后控制台会出现警告提示，请按提示进行修改。

- 废弃 QueueAnim，可以直接 import [rc-queue-anim](https://github.com/react-component/queue-anim) 用以代替。Ant Design 的动效方案已移至 [Ant Motion](http://motion.ant.design/components/queue-anim)，欢迎前往探索。
+- 废弃 QueueAnim，可以直接 import [rc-queue-anim](https://github.com/react-component/queue-anim) 用以代替。Ant Design 的动效方案已移至 [Ant Motion](http://motion.ant.design/#/components/queue-anim)，欢迎前往探索。
 - Affix 的 `offset` 属性重命名为 `offsetTop`。
 - Popover 的 `overlay` 属性重命名为 `content`。
 - Progress.Line 使用方式改为 `<Progress />` 或 `<Progress type="line" />`。
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -11,8 +11,9 @@
 ## 特性

 - 提炼和服务企业级中后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
- 基于 npm + webpack + babel 的工作流，支持 ES2015 和 TypeScript。
+- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
+- 基于 npm + webpack + babel 的工作流，支持 ES2015。
+

 ## 安装

@@ -56,13 +57,11 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 - [修改记录](CHANGELOG.md)
 - [开发脚手架](https://github.com/ant-design/antd-init/)
 - [开发工具文档](http://ant-tool.github.io/)
- [React 基础组件](http://react-component.github.io/)
- [移动端组件](http://mobile.ant.design)
+- [React 组件](http://react-component.github.io/)
 - [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
 - [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
 - [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-
+- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)

 ## 如何贡献

--- a/README.md
+++ b/README.md
@@ -14,8 +14,8 @@ We are now working on translate components document to English, and we need some

 ## Features

- 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/).
+- An enterprise-class design language and high quality UI style.
+- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
 - A npm + webpack + babel + dora [workflow](http://ant-tool.github.io/index.html).

 ## Install
@@ -54,9 +54,9 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

   ```jsx
   // import js and css modularly, parsed by babel-plugin-antd
-   import { DatePicker } from 'antd';
+   import { DatePicker } from 'antd'; 
   ```
-
+  
 - Manually import

   ```jsx
@@ -91,11 +91,10 @@ tsconfig.json
 - [Scaffold tool](https://github.com/ant-design/antd-init/)
 - [Development tool](http://ant-tool.github.io/)
 - [React components](http://react-component.github.io/)
- [Mobile UI](http://mobile.ant.design)
 - [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
 - [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
+- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
 - [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
 - [CodePen boilerplate](http://codepen.io/anon/pen/wGOWGW?editors=001) for bug reports

--- a/components/affix/demo/on-change.md
+++ b/components/affix/demo/on-change.md
@@ -8,8 +8,13 @@ title: 固定状态改变的回调
 ````jsx
 import { Affix, Button } from 'antd';

+
+const onChange = function (affixed) {
+  console.log(affixed); // true or false
+};
+
 ReactDOM.render(
-  <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
+  <Affix offsetTop={120} onChange={onChange}>
    <Button>固定在距离顶部 120px 的位置</Button>
  </Affix>
 , mountNode);
--- a/components/affix/index.jsx
+++ b/components/affix/index.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import addEventListener from 'rc-util/lib/Dom/addEventListener';
+import { Dom } from 'rc-util';
 import classNames from 'classnames';
 import warning from 'warning';
-import shallowequal from 'shallowequal';

 function getScroll(w, top) {
  let ret = w[`page${top ? 'Y' : 'X'}Offset`];
@@ -48,39 +47,10 @@ export default class Affix extends React.Component {
    super(props);
    this.state = {
      affixStyle: null,
-      placeholderStyle: null,
    };
  }

-  setAffixStyle(e, affixStyle) {
-    const originalAffixStyle = this.state.affixStyle;
-    if (e.type === 'scroll' && originalAffixStyle && affixStyle) {
-      return;
-    }
-    if (shallowequal(affixStyle, originalAffixStyle)) {
-      return;
-    }
-    this.setState({ affixStyle }, () => {
-      const affixed = !!this.state.affixStyle;
-      if ((affixStyle && !originalAffixStyle) ||
-          (!affixStyle && originalAffixStyle)) {
-        this.props.onChange(affixed);
-      }
-    });
-  }
-
-  setPlaceholderStyle(e, placeholderStyle) {
-    const originalPlaceholderStyle = this.state.placeholderStyle;
-    if (e.type === 'resize') {
-      return;
-    }
-    if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
-      return;
-    }
-    this.setState({ placeholderStyle });
-  }
-
-  handleScroll = (e) => {
+  handleScroll = () => {
    let { offsetTop, offsetBottom, offset } = this.props;

    // Backwards support
@@ -103,39 +73,40 @@ export default class Affix extends React.Component {

    if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
      // Fixed Top
-      this.setAffixStyle(e, {
-        position: 'fixed',
-        top: offsetTop,
-        left: elemOffset.left,
-        width: ReactDOM.findDOMNode(this).offsetWidth,
-      });
-      this.setPlaceholderStyle(e, {
-        width: ReactDOM.findDOMNode(this).offsetWidth,
-        height: ReactDOM.findDOMNode(this).offsetHeight,
-      });
+      if (!this.state.affixStyle) {
+        this.setState({
+          affixStyle: {
+            position: 'fixed',
+            top: offsetTop,
+            left: elemOffset.left,
+            width: ReactDOM.findDOMNode(this).offsetWidth,
+          },
+        }, () => this.props.onChange(!!this.state.affixStyle));
+      }
    } else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight &&
               offsetMode.bottom) {
      // Fixed Bottom
-      this.setAffixStyle(e, {
-        position: 'fixed',
-        bottom: offsetBottom,
-        left: elemOffset.left,
-        width: ReactDOM.findDOMNode(this).offsetWidth,
-      });
-      this.setPlaceholderStyle(e, {
-        width: ReactDOM.findDOMNode(this).offsetWidth,
-        height: ReactDOM.findDOMNode(this).offsetHeight,
-      });
-    } else {
-      this.setAffixStyle(e, null);
-      this.setPlaceholderStyle(e, null);
+      if (!this.state.affixStyle) {
+        this.setState({
+          affixStyle: {
+            position: 'fixed',
+            bottom: offsetBottom,
+            left: elemOffset.left,
+            width: ReactDOM.findDOMNode(this).offsetWidth,
+          },
+        }, () => this.props.onChange(!!this.state.affixStyle));
+      }
+    } else if (this.state.affixStyle) {
+      this.setState({
+        affixStyle: null,
+      }, () => this.props.onChange(!!this.state.affixStyle));
    }
  }

  componentDidMount() {
    warning(!('offset' in this.props), '`offset` prop of Affix is deprecated, use `offsetTop` instead.');
-    this.scrollEvent = addEventListener(window, 'scroll', this.handleScroll);
-    this.resizeEvent = addEventListener(window, 'resize', this.handleScroll);
+    this.scrollEvent = Dom.addEventListener(window, 'scroll', this.handleScroll);
+    this.resizeEvent = Dom.addEventListener(window, 'resize', this.handleScroll);
  }

  componentWillUnmount() {
@@ -152,12 +123,8 @@ export default class Affix extends React.Component {
      'ant-affix': this.state.affixStyle,
    });

-    const props = { ...this.props };
-    delete props.offsetTop;
-    delete props.offsetBottom;
-
    return (
-      <div {...props} style={this.state.placeholderStyle}>
+      <div {...this.props}>
        <div className={className} ref="fixedNode" style={this.state.affixStyle}>
          {this.props.children}
        </div>
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -16,13 +16,11 @@ ReactDOM.render(<div>
  <Alert message="警告提示的文案"
    type="warning"
    closable
-    onClose={onClose}
-  />
+    onClose={onClose} />
  <Alert message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
    type="error"
    closable
-    onClose={onClose}
-  />
+    onClose={onClose} />
 </div>, mountNode);
 ````
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -11,21 +11,17 @@ import { Alert } from 'antd';
 ReactDOM.render(<div>
  <Alert message="成功提示的文案"
    description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
-    type="success"
-  />
+    type="success" />
  <Alert message="消息提示的文案"
    description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
-    type="info"
-  />
+    type="info" />
  <Alert
    message="警告提示的文案"
    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
-    type="warning"
-  />
+    type="warning" />
  <Alert
    message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
-    type="error"
-  />
+    type="error" />
 </div>, mountNode);
 ````
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@@ -16,24 +16,20 @@ ReactDOM.render(<div>
  <Alert message="成功提示的文案"
    description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
    type="success"
-    showIcon
-  />
+    showIcon />
  <Alert message="消息提示的文案"
    description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
    type="info"
-    showIcon
-  />
+    showIcon />
  <Alert
    message="警告提示的文案"
    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
    type="warning"
-    showIcon
-  />
+    showIcon />
  <Alert
    message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
    type="error"
-    showIcon
-  />
+    showIcon />
 </div>, mountNode);
 ````
--- a/components/alert/index.jsx
+++ b/components/alert/index.jsx
@@ -29,7 +29,7 @@ export default class Alert extends React.Component {
    this.setState({
      closing: false,
    });
-    this.props.onClose(e);
+    this.props.onClose.call(this, e);
  }
  animationEnd = () => {
    this.setState({
@@ -81,9 +81,8 @@ export default class Alert extends React.Component {
    return this.state.closed ? null : (
      <Animate component=""
        showProp="data-show"
-        transitionName={`${prefixCls}-slide-up`}
-        onEnd={this.animationEnd}
-      >
+        transitionName="slide-up"
+        onEnd={this.animationEnd}>
        <div data-show={this.state.closing} className={alertCls}>
          {showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
          <span className={`${prefixCls}-message`}>{message}</span>
--- a/components/alert/index.md
+++ b/components/alert/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 警告提示
-type: Views
+type: Presentation
 english: Alert
 ---

--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@@ -121,43 +121,14 @@
    display: block;
  }

-  &&-close {
-    height: 0 !important;
+  &-close {
+    height: 0;
+    opacity: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
-    transition: all .3s @ease-in-out-circ;
+    transition: all .3s @ease-in-out;
    transform-origin: 50% 0;
-  }
-
-  &-slide-up-leave {
-    animation: antAlertSlideUpOut .3s @ease-in-out-circ;
-    animation-fill-mode: both;
-  }
-}
-
-@keyframes antAlertSlideUpIn {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-}
-
-@keyframes antAlertSlideUpOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0);
+    animation-timing-function: @ease-in-out !important;
  }
 }
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@@ -1,17 +0,0 @@
---
-order: 0
-title: 基本
---
-
-最简单的用法。
-
-````jsx
-import { BackTop } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <BackTop />
-    向下滚动后，见右下角灰色按钮
-  </div>
-, mountNode);
-````
--- a/components/back-top/demo/custom.md
+++ b/components/back-top/demo/custom.md
@@ -1,30 +0,0 @@
---
-order: 1
-title: 自定义样式
---
-
-可以自定义回到顶部按钮的样式，限制宽高：`40px * 40px`。
-
-````jsx
-import { BackTop } from 'antd';
-
-const style = {
-  height: 40,
-  width: 40,
-  lineHeight: '40px',
-  borderRadius: 4,
-  backgroundColor: '#57c5f7',
-  color: '#fff',
-  textAlign: 'center',
-  fontSize: 20,
-};
-
-ReactDOM.render(
-  <div>
-    <BackTop style={{ bottom: 100 }}>
-      <div style={style}>UP</div>
-    </BackTop>
-    向下滚动后，见右下角蓝色按钮
-  </div>
-, mountNode);
-````
--- a/components/back-top/index.jsx
+++ b/components/back-top/index.jsx
@@ -1,107 +0,0 @@
-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 'object.omit';
-
-function getScroll(w, top) {
-  let ret = w[`page${top ? 'Y' : 'X'}Offset`];
-  const method = `scroll${top ? 'Top' : 'Left'}`;
-  if (typeof ret !== 'number') {
-    const d = w.document;
-    // ie6,7,8 standard mode
-    ret = d.documentElement[method];
-    if (typeof ret !== 'number') {
-      // quirks mode
-      ret = d.body[method];
-    }
-  }
-  return ret;
-}
-
-export default class BackTop extends React.Component {
-
-  static propTypes = {
-    visibilityHeight: React.PropTypes.number,
-  }
-
-  static defaultProps = {
-    onClick() {},
-    visibilityHeight: 400,
-    prefixCls: 'ant-back-top',
-  }
-
-  constructor(props) {
-    super(props);
-    const scrollTop = getScroll(window, true);
-    this.state = {
-      visible: scrollTop > this.props.visibilityHeight,
-    };
-  }
-
-  scrollToTop = (e) => {
-    if (e) e.preventDefault();
-    this.setScrollTop(0);
-    this.props.onClick(e);
-  }
-
-  setScrollTop(value) {
-    document.body.scrollTop = value;
-    document.documentElement.scrollTop = value;
-  }
-
-  handleScroll = () => {
-    const scrollTop = getScroll(window, true);
-    this.setState({
-      visible: scrollTop > this.props.visibilityHeight,
-    });
-  }
-
-  componentDidMount() {
-    this.scrollEvent = addEventListener(window, 'scroll', this.handleScroll);
-  }
-
-  componentWillUnmount() {
-    if (this.scrollEvent) {
-      this.scrollEvent.remove();
-    }
-  }
-
-  render() {
-    const { prefixCls, className, children, ...otherProps } = this.props;
-    const classString = classNames({
-      [prefixCls]: true,
-      [className]: !!className,
-    });
-
-    const defaultElement = (
-      <div className={`${prefixCls}-content`}>
-        <Icon className={`${prefixCls}-icon`} type="to-top" />
-      </div>
-    );
-
-    const style = {
-      display: this.state.visible ? 'block' : 'none',
-    };
-
-    // fix https://fb.me/react-unknown-prop
-    const divProps = omit(otherProps, [
-      'visibilityHeight',
-    ]);
-
-    return (
-      <Animate component="" transitionName="fade">
-        {
-          this.state.visible ?
-            <div data-show={this.state.visible} style={style}>
-              <div {...divProps} className={classString} onClick={this.scrollToTop}>
-                {children || defaultElement}
-              </div>
-            </div>
-          : null
-        }
-      </Animate>
-    );
-  }
-}
--- a/components/back-top/index.md
+++ b/components/back-top/index.md
@@ -1,23 +0,0 @@
---
-category: Components
-chinese: 回到顶部
-type: Other
-english: BackTop
---
-
-返回页面顶部的操作按钮。
-
-## 何时使用
-
- 当页面内容区域比较长时；
- 当用户需要频繁返回顶部查看相关内容时。
-
-## API
-
-> 有默认样式，距离底部 `50px`，可覆盖。
-> 自定义样式宽高不大于 40px * 40px。
-
-| 参数        | 说明           | 类型               | 默认值       |
-|-------------|----------------|--------------------|--------------|
-| visibilityHeight    | 滚动高度达到此参数值才出现 `BackTop`   | Number | 400        |
-| onClick | 点击按钮的回调函数   | Function | -        |
--- a/components/back-top/style/index.js
+++ b/components/back-top/style/index.js
@@ -1,2 +0,0 @@
-import '../../style/index.less';
-import './index.less';
--- a/components/back-top/style/index.less
+++ b/components/back-top/style/index.less
@@ -1,33 +0,0 @@
-@import "../../style/themes/default";
-
-@backtop-prefix-cls: ant-back-top;
-
-.@{backtop-prefix-cls} {
-  z-index: @zindex-back-top;
-  position: fixed;
-  right: 100px;
-  bottom: 50px;
-  height: 40px;
-  width: 40px;
-  cursor: pointer;
-
-  &-content {
-    height: 40px;
-    width: 40px;
-    border-radius: 20px;
-    background-color: rgba(64, 64, 64, 0.4);
-    color: #fff;
-    text-align: center;
-    transition: all .3s @ease-in-out;
-
-    &:hover {
-      background-color: rgba(64, 64, 64, 0.6);
-      transition: all .3s @ease-in-out;
-    }
-  }
-
-  &-icon {
-    font-size: 20px;
-    margin-top: 10px;
-  }
-}
--- a/components/badge/ScrollNumber.jsx
+++ b/components/badge/ScrollNumber.jsx
@@ -1,7 +1,6 @@
 import React, { createElement } from 'react';
 import { findDOMNode } from 'react-dom';
 import isCssAnimationSupported from '../_util/isCssAnimationSupported';
-import omit from 'object.omit';

 function getNumberArray(num) {
  return num ?
@@ -105,8 +104,8 @@ export default class ScrollNumber extends React.Component {
      className: `${this.props.prefixCls}-only`,
      style: {
        transition: removeTransition && 'none',
-        WebkitTransform: `translateY(${-position * height}px)`,
-        transform: `translateY(${-position * height}px)`,
+        WebkitTransform: `translate3d(0, ${-position * height}px, 0)`,
+        transform: `translate3d(0, ${-position * height}px, 0)`,
        height,
      },
      key: i,
@@ -123,18 +122,12 @@ export default class ScrollNumber extends React.Component {
  }

  render() {
-    const { component, prefixCls, className, ...otherProps } = this.props;
-    // fix https://fb.me/react-unknown-prop
-    const restProps = omit(otherProps, [
-      'count',
-      'onAnimated',
-    ]);
    const props = {
-      ...restProps,
-      className: `${prefixCls} ${className}`,
+      ...this.props,
+      className: `${this.props.prefixCls} ${this.props.className}`,
    };
    return createElement(
-      component,
+      this.props.component,
      props,
      this.renderNumberElement()
    );
--- a/components/badge/index.jsx
+++ b/components/badge/index.jsx
@@ -21,7 +21,8 @@ export default class Badge extends React.Component {
  }

  render() {
-    let { count, prefixCls, overflowCount, className, style, children, dot } = this.props;
+    let { count, prefixCls, overflowCount, className, style, children } = this.props;
+    const dot = this.props.dot;

    count = count > overflowCount ? `${overflowCount}+` : count;

@@ -40,22 +41,16 @@ export default class Badge extends React.Component {
    });

    return (
-      <span className={badgeCls} title={count} style={null}>
+      <span className={badgeCls} title={count} {...this.props} style={null}>
        {children}
-        <Animate
-          component=""
+        <Animate component=""
          showProp="data-show"
          transitionName={`${prefixCls}-zoom`}
-          transitionAppear
-        >
+          transitionAppear>
          {
            hidden ? null :
-              <ScrollNumber
-                data-show={!hidden}
-                className={scrollNumberCls}
-                count={count}
-                style={style}
-              />
+              <ScrollNumber data-show={!hidden} className={scrollNumberCls}
+                count={count} style={style} />
          }
        </Animate>
      </span>
--- a/components/badge/index.md
+++ b/components/badge/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 徽标数
-type: Views
+type: Presentation
 english: Badge
 ---

--- a/components/breadcrumb/Breadcrumb.jsx
+++ b/components/breadcrumb/Breadcrumb.jsx
@@ -1,24 +1,12 @@
 import React, { cloneElement } from 'react';
 import BreadcrumbItem from './BreadcrumbItem';

-const defaultNameRender = (breadcrumbName, route, params) => {
-  if (!breadcrumbName) {
-    return null;
-  }
-  const paramsKeys = Object.keys(params).join('|');
-  const name = breadcrumbName.replace(
-    new RegExp(`:(${paramsKeys})`, 'g'),
-    (replacement, key) => params[key] || replacement
-  );
-  return <span>{name}</span>;
-};
-
 export default class Breadcrumb extends React.Component {
  static defaultProps = {
    prefixCls: 'ant-breadcrumb',
    separator: '/',
    linkRender: (href, name) => <a href={`#${href}`}>{name}</a>,
-    nameRender: defaultNameRender,
+    nameRender: (name) => <span>{name}</span>,
  }

  static propTypes = {
@@ -38,7 +26,6 @@ export default class Breadcrumb extends React.Component {
    const { separator, prefixCls, routes, params, children, linkRender, nameRender } = this.props;
    if (routes && routes.length > 0) {
      const paths = [];
-      const lastPath = routes.length - 1;
      crumbs = routes.map((route, i) => {
        route.path = route.path || '';
        let path = route.path.replace(/^\//, '');
@@ -48,12 +35,21 @@ export default class Breadcrumb extends React.Component {
        if (path) {
          paths.push(path);
        }
-        const name = nameRender(route.breadcrumbName, route, params);
-        if (name) {
-          const link = (i === lastPath) ? name : linkRender(`/${paths.join('/')}`, name, paths);
-          return <BreadcrumbItem separator={separator} key={route.breadcrumbName || i}>{link}</BreadcrumbItem>;
+
+        if (!route.breadcrumbName) {
+          return null;
        }
-        return null;
+        const name = route.breadcrumbName.replace(/:(.*)/g, (replacement, key) => {
+          return params[key] || replacement;
+        });
+
+        let link;
+        if (i === routes.length - 1) {
+          link = nameRender(name);
+        } else {
+          link = linkRender(`/${paths.join('/')}`, name);
+        }
+        return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
      });
    } else {
      crumbs = React.Children.map(children, (element, index) => {
--- a/components/breadcrumb/demo/basic.md
+++ b/components/breadcrumb/demo/basic.md
@@ -1,27 +1,19 @@
 ---
 order: 0
-title:   
-  zh-CN: 基本
-  en-US: Basic Usage
+title: 基本
 ---

-## zh-CN
-
 最简单的用法。

-## en-US
-
-The simplest use
-
 ````jsx
 import { Breadcrumb } from 'antd';

 ReactDOM.render(
  <Breadcrumb>
-    <Breadcrumb.Item>Home</Breadcrumb.Item>
-    <Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>
-    <Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
-    <Breadcrumb.Item>An Application</Breadcrumb.Item>
+    <Breadcrumb.Item>首页</Breadcrumb.Item>
+    <Breadcrumb.Item><a href="">应用中心</a></Breadcrumb.Item>
+    <Breadcrumb.Item><a href="">应用列表</a></Breadcrumb.Item>
+    <Breadcrumb.Item>某应用</Breadcrumb.Item>
  </Breadcrumb>
 , mountNode);
 ````
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@@ -1,61 +1,56 @@
 ---
 order: 2
 iframe: true
-title:
-  zh-CN: 路由
-  en-US: React Router Integration
+title: 路由
 ---

-## zh-CN
-
 和 `react-router@2.x` 进行结合使用。

-## en-US
-
-Used together with `react-router@2.x`.
-
 ````jsx
-import { Router, Route, Link, hashHistory } from 'react-router';
+const ReactRouter = require('react-router');
+let { Router, Route, Link, hashHistory } = ReactRouter;
 import { Breadcrumb } from 'antd';

-const Apps = () => (
-  <ul className="app-list">
-    <li>
-      <Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
-    </li>
-    <li>
-      <Link to="/apps/2">Application2</Link>：<Link to="/apps/2/detail">Detail</Link>
-    </li>
-  </ul>
-);
+function Apps() {
+  return (
+    <ul className="app-list">
+      <li>
+        <Link to="/apps/1">应用1</Link>：<Link to="/apps/1/detail">详情</Link>
+      </li>
+      <li>
+        <Link to="/apps/2">应用2</Link>：<Link to="/apps/2/detail">详情</Link>
+      </li>
+    </ul>
+  );
+}

-const Home = (props) => (
-  <div>
-    <div className="demo-nav">
-      <Link to="/">Home</Link>
-      <Link to="/apps">Application List</Link>
-    </div>
-    {props.children || 'Home'}
-    <div
-      style={{
+function Home(props) {
+  return (
+    <div>
+      <div className="demo-nav">
+        <Link to="/">首页</Link>
+        <Link to="/apps">应用列表</Link>
+      </div>
+      {props.children || 'Home'}
+      <div style={{
        marginBottom: 15,
        marginTop: 15,
        paddingBottom: 15,
        borderBottom: '1px dashed #ccc',
-      }}
-    >
-      Click the navigation above to switch:
+      }}>
+        点击上面的导航切换页面，面包屑在下面：
+      </div>
+      <Breadcrumb {...props} />
    </div>
-    <Breadcrumb {...props} />
-  </div>
-);
+  );
+}

 ReactDOM.render(
  <Router history={hashHistory}>
-    <Route name="home" breadcrumbName="Home" path="/" component={Home}>
-      <Route name="apps" breadcrumbName="Application List" path="apps" component={Apps}>
-        <Route name="app" breadcrumbName="Application:id" path=":id">
-          <Route name="detail" breadcrumbName="Detail" path="detail" />
+    <Route name="home" breadcrumbName="首页" path="/" component={Home}>
+      <Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
+        <Route name="app" breadcrumbName="应用:id" path=":id">
+          <Route name="detail" breadcrumbName="详情" path="detail" />
        </Route>
      </Route>
    </Route>
--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@@ -1,27 +1,19 @@
 ---
 order: 3
-title: 
-  zh-CN: 分隔符
-  en-US: Configuring the Separator
+title: 分隔符
 ---

-## zh-CN
-
 使用 `separator=">"` 可以自定义分隔符。

-## en-US
-
-The separator can be customized by setting the separator property: separator=">"
-
 ````jsx
 import { Breadcrumb } from 'antd';

 ReactDOM.render(
  <Breadcrumb separator=">">
-    <Breadcrumb.Item>Home</Breadcrumb.Item>
-    <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
-    <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
-    <Breadcrumb.Item>An Application</Breadcrumb.Item>
+    <Breadcrumb.Item>首页</Breadcrumb.Item>
+    <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
+    <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
+    <Breadcrumb.Item>某应用</Breadcrumb.Item>
  </Breadcrumb>
 , mountNode);
 ````
--- a/components/breadcrumb/demo/withIcon.md
+++ b/components/breadcrumb/demo/withIcon.md
@@ -1,18 +1,10 @@
 ---
 order: 1
-title:
-  zh-CN: 带有图标的
-  en-US: With an Icon
+title: 带有图标的
 ---

-## zh-CN
-
 图标放在文字前面。

-## en-US
-
-The icon should be placed in front of the text.
-
 ````jsx
 import { Breadcrumb, Icon } from 'antd';

@@ -23,11 +15,12 @@ ReactDOM.render(
    </Breadcrumb.Item>
    <Breadcrumb.Item href="">
      <Icon type="user" />
-      <span>Application List</span>
+      应用列表
    </Breadcrumb.Item>
    <Breadcrumb.Item>
-      Application
+      应用
    </Breadcrumb.Item>
  </Breadcrumb>
 , mountNode);
 ````
+
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@@ -1,32 +0,0 @@
---
-category: Components
-type: Navigation
-title: Breadcrumb
---
-
-A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up within the hierarchy.
-
-## When to use
-
- When the system has more than two layers in a hierarchy.
- When you need to inform the user of where they are.
- When the user may need to navigate back to a higher level When the application has multi-layer architecture.
-
-## API
-
-```html
-<Breadcrumb>
-  <Breadcrumb.Item>Home</Breadcrumb.Item>
-  <Breadcrumb.Item>Application Center</Breadcrumb.Item>
-  <Breadcrumb.Item>Application List</Breadcrumb.Item>
-  <Breadcrumb.Item>An Application</Breadcrumb.Item>
-</Breadcrumb>
-```
-
-| Property      | Description                              | Type              |  Optional | Default |
-|-----------|-----------------------------------|-----------------|---------|--------|
-| routes    | The routing stack information of router | Array             |         | -      |
-| params    | Routing parameter                        | Object            |         | -      |
-| separator | Custom separator                      | String or Element |         | '/'    |
-| linkRender | Custom link function，and react-router configuration | Function(href, name) |         | -    |
-| nameRender | Custom link function，and react-router configuration | Function(name) |         | -    |
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@@ -29,5 +29,5 @@ english: Breadcrumb
 | routes    | router 的路由栈信息               | Array             |         | -      |
 | params    | 路由的参数                        | Object            |         | -      |
 | separator | 分隔符自定义                      | String or Element |         | '/'    |
-| linkRender | 自定义链接函数，和 react-router 配置使用 | Function(href, name, paths) | | - |
-| nameRender | 自定义文字函数，和 react-router 配置使用 | Function(breadcrumbName, route, params) | | - |
+| linkRender | 自定义链接函数，和 react-router 配置使用 | Function(href, name) |         | -    |
+| nameRender | 自定义链接函数，和 react-router 配置使用 | Function(name) |         | -    |
--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@@ -8,10 +8,6 @@

  a {
    color: @text-color;
-    transition: color .3s;
-    &:hover {
-      color: tint(@primary-color, 20%);
-    }
  }

  & > span:last-child {
@@ -28,9 +24,7 @@
    color: @border-color-base;
  }

-  &-link {
-    > .anticon + span {
-      margin-left: 4px;
-    }
+  .anticon + span {
+    margin-left: 4px;
  }
 }
--- a/components/button/button.jsx
+++ b/components/button/button.jsx
@@ -104,8 +104,7 @@ export default class Button extends React.Component {
        type={htmlType || 'button'}
        className={classes}
        onMouseUp={this.handleMouseUp}
-        onClick={this.handleClick}
-      >
+        onClick={this.handleClick}>
        {iconType ? <Icon type={iconType} /> : null}{kids}
      </button>
    );
--- a/components/calendar/Header.jsx
+++ b/components/calendar/Header.jsx
@@ -45,8 +45,7 @@ export default class Header extends React.Component {
        dropdownMenuStyle={{ minWidth: 103 }}
        className={`${prefixCls}-year-select`}
        onChange={this.onYearChange}
-        value={String(year)}
-      >
+        value={String(year)}>
        {options}
      </Select>
    );
@@ -70,8 +69,7 @@ export default class Header extends React.Component {
        dropdownMatchSelectWidth={false}
        className={`${prefixCls}-month-select`}
        value={String(month)}
-        onChange={this.onMonthChange}
-      >
+        onChange={this.onMonthChange}>
        {options}
      </Select>
    );
--- a/components/calendar/demo/custom-render.md
+++ b/components/calendar/demo/custom-render.md
@@ -26,7 +26,6 @@ function monthCellRender(value) {

 ReactDOM.render(
  <Calendar defaultValue={new Date('2010-10-10')}
-    dateCellRender={dateCellRender} monthCellRender={monthCellRender}
-  />
+    dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
 , mountNode);
 ````
--- a/components/calendar/demo/notice-calendar.md
+++ b/components/calendar/demo/notice-calendar.md
@@ -45,7 +45,7 @@ function getListData(value) {
 }

 function dateCellRender(value) {
-  const listData = getListData(value);
+  let listData = getListData(value);
  return (
    <ul className="events">
      {
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@@ -1,6 +1,6 @@
 ---
 category: Components
-type: Views
+type: Presentation
 cols: 1
 title: Calendar
 ---
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@@ -139,8 +139,7 @@ export default class Calendar extends React.Component {
          locale={locale.lang}
          prefixCls={prefixCls}
          onTypeChange={this.setType}
-          onValueChange={this.setValue}
-        />
+          onValueChange={this.setValue} />
        <FullCalendar
          {...props}
          Select={noop}
@@ -150,8 +149,7 @@ export default class Calendar extends React.Component {
          showHeader={false}
          value={value}
          monthCellRender={this.monthCellRender}
-          dateCellRender={this.dateCellRender}
-        />
+          dateCellRender={this.dateCellRender} />
      </div>
    );
  }
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@@ -1,6 +1,6 @@
 ---
 category: Components
-type: Views
+type: Presentation
 chinese: 日历
 cols: 1
 english: Calendar
--- a/components/card/demo/grid.md
+++ b/components/card/demo/grid.md
@@ -35,11 +35,11 @@ ReactDOM.render(

 ````css
 /* Increase grid spacing of 16px  */
-.code-box-demo .ant-row {
+.code-box-demo .row {
  margin-left: -8px;
  margin-right: -8px;
 }
-.code-box-demo .ant-row > div {
+.code-box-demo .row > div {
  padding: 0 8px;
 }
 ````
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@@ -1,8 +1,7 @@
 ---
 category: Components
-type: Views
+type: Presentation
 title: Card
-cols: 1
 ---

 Common card container.
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@@ -1,9 +1,8 @@
 ---
 category: Components
-type: Views
+type: Presentation
 title: Card
 subtitle: 卡片
-cols: 1
 ---

 通用卡片容器。
--- a/components/carousel/demo/autoplay.md
+++ b/components/carousel/demo/autoplay.md
@@ -1,18 +1,10 @@
 ---
 order: 3
-title:
-  zh-CN: 自动切换
-  en-US: Scroll automatically
+title: 自动切换
 ---

-## zh-CN
-
 定时切换下一张。

-## en-US
-
-Timing of scrolling to the next card/picture.
-
 ````jsx
 import { Carousel } from 'antd';

--- a/components/carousel/demo/basic.md
+++ b/components/carousel/demo/basic.md
@@ -1,18 +1,10 @@
 ---
 order: 0
-title:
-  zh-CN: 基本
-  en-US: Basic
+title: 基本
 ---

-## zh-CN
-
 最简单的用法。

-## en-US
-
-Basic usage.
-
 ````jsx
 import { Carousel } from 'antd';

--- a/components/carousel/demo/fade.md
+++ b/components/carousel/demo/fade.md
@@ -1,18 +1,10 @@
 ---
 order: 2
-title:
-  zh-CN: 渐显
-  en-US: Fade in
+title: 渐显
 ---

-## zh-CN
-
 切换效果为渐显。

-## en-US
-
-Slides use fade for transition.
-
 ````jsx
 import { Carousel } from 'antd';

--- a/components/carousel/demo/vertical.md
+++ b/components/carousel/demo/vertical.md
@@ -1,18 +1,10 @@
 ---
 order: 1
-title:
-  zh-CN: 垂直
-  en-US: Vertical
+title: 垂直
 ---

-## zh-CN
-
 垂直显示。

-## en-US
-
-Vertical pagination.
-
 ````jsx
 import { Carousel } from 'antd';

--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@@ -1,41 +0,0 @@
---
-category: Components
-type: Views
-title: Carousel
---
-
-A carousel component. Scales with its container.
-
-## When to use
-
- When there is a group of content on the same level.
- When there is insufficient content space, it can be used to save space in the form of a resolving door.
- Commonly used in a carousel for a group of pictures/cards.
-
-## API
-
-| Property             | Description                                         | Type     | Default                          |
-|------------------|----------------------------------------------|----------|---------------------------------|
-| effect           | Animation effect, either `scrollx` or `fade`   | String | scrollx |
-| dots | Should we show the dots at the bottom of the gallery                | Boolean    | true |
-| vertical | Whether to use a vertical display                               | Boolean   | false |
-| autoplay | Whether to scroll automatically                                 | Boolean   | false |
-| easing | Transition name                                                   | String   | linear |
-| beforeChange | Callback function called before the current index changes   | function(from, to) |
-| afterChange  | Callback function called after the current index changes    | function(current)  |
-
-For more info on the parameters, refer to the https://github.com/akiran/react-slick
-
-<style>
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 100px;
-  line-height: 100px;
-  background: #71B5DE;
-  color: #fff;
-  overflow: hidden;
-}
-#components-carousel-demo-vertical .ant-carousel {
-  margin-right: 35px;
-}
-</style>
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@@ -1,8 +1,8 @@
 ---
 category: Components
-type: Views
-title: Carousel
-subtitle: 走马灯
+chinese: 走马灯
+type: Presentation
+english: Carousel
 ---

 旋转木马，一组轮播的区域。
--- a/components/cascader/demo/basic.md
+++ b/components/cascader/demo/basic.md
@@ -16,31 +16,7 @@ const options = [{
    label: '杭州',
    children: [{
      value: 'xihu',
-      label: '西湖西湖西湖西湖西湖西湖',
-    }, {
-      value: 'xihu1',
-      label: '西湖西湖西湖西湖西湖西湖',
-    }, {
-      value: 'xihu2',
-      label: '西湖西湖西湖西湖西湖西湖',
-    }, {
-      value: 'xihu3',
-      label: '西湖西湖西湖西湖西湖西湖',
-    }, {
-      value: 'xihu4',
-      label: '西湖西湖西湖西湖西湖西湖',
-    }, {
-      value: 'xihu5',
-      label: '西湖西湖西湖西湖西湖西湖',
-    }, {
-      value: 'xihu6',
-      label: '西湖西湖西湖西湖西湖西湖',
-    }, {
-      value: 'xihu7',
-      label: '西湖西湖西湖西湖西湖西湖',
-    }, {
-      value: 'xihu8',
-      label: '西湖西湖西湖西湖西湖西湖',
+      label: '西湖',
    }],
  }],
 }, {
@@ -51,7 +27,7 @@ const options = [{
    label: '南京',
    children: [{
      value: 'zhonghuamen',
-      label: '中华门中华门中华门中华门中华门',
+      label: '中华门',
    }],
  }],
 }];
--- a/components/cascader/demo/custom-render.md
+++ b/components/cascader/demo/custom-render.md
@@ -56,7 +56,6 @@ ReactDOM.render(
    options={options}
    defaultValue={['zhejiang', 'hangzhou', 'xihu']}
    displayRender={displayRender}
-    style={{ width: 200 }}
-  />
+    style={{ width: 200 }} />
 , mountNode);
 ````
--- a/components/cascader/demo/hover.md
+++ b/components/cascader/demo/hover.md
@@ -43,7 +43,6 @@ function displayRender(label) {

 ReactDOM.render(
  <Cascader options={options} expandTrigger="hover"
-    displayRender={displayRender} onChange={onChange}
-  />
+    displayRender={displayRender} onChange={onChange} />
 , mountNode);
 ````
--- a/components/cascader/index.jsx
+++ b/components/cascader/index.jsx
@@ -4,7 +4,6 @@ import Input from '../input';
 import Icon from '../icon';
 import arrayTreeFilter from 'array-tree-filter';
 import classNames from 'classnames';
-import omit from 'object.omit';

 export default class Cascader extends React.Component {
  static defaultProps = {
@@ -74,7 +73,6 @@ export default class Cascader extends React.Component {
    const props = this.props;
    const { prefixCls, children, placeholder, size, disabled,
            className, style, allowClear, ...otherProps } = props;
-
    const sizeCls = classNames({
      'ant-input-lg': size === 'large',
      'ant-input-sm': size === 'small',
@@ -82,8 +80,7 @@ export default class Cascader extends React.Component {
    const clearIcon = (allowClear && !disabled && this.state.value.length > 0) ?
      <Icon type="cross-circle"
        className={`${prefixCls}-picker-clear`}
-        onClick={this.clearSelection}
-      /> : null;
+        onClick={this.clearSelection} /> : null;
    const arrowCls = classNames({
      [`${prefixCls}-picker-arrow`]: true,
      [`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible,
@@ -95,41 +92,24 @@ export default class Cascader extends React.Component {
    });

    // Fix bug of https://github.com/facebook/react/pull/5004
-    // and https://fb.me/react-unknown-prop
-    const inputProps = omit(otherProps, [
-      'onChange',
-      'options',
-      'popupPlacement',
-      'transitionName',
-      'displayRender',
-      'onPopupVisibleChange',
-      'changeOnSelect',
-      'expandTrigger',
-      'popupVisible',
-      'getPopupContainer',
-      'loadData',
-      'popupClassName',
-    ]);
+    delete otherProps.onChange;

    return (
      <RcCascader {...props}
        value={this.state.value}
        popupVisible={this.state.popupVisible}
        onPopupVisibleChange={this.handlePopupVisibleChange}
-        onChange={this.handleChange}
-      >
+        onChange={this.handleChange}>
        {children ||
          <span
            style={style}
-            className={pickerCls}
-          >
-            <Input {...inputProps}
+            className={pickerCls}>
+            <Input {...otherProps}
              placeholder={this.state.value && this.state.value.length > 0 ? null : placeholder}
-              className={`${prefixCls}-input ${sizeCls}`}
+              className={`${prefixCls}-input ant-input ${sizeCls}`}
              value={null}
              disabled={disabled}
-              readOnly
-            />
+              readOnly />
            <span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
            {clearIcon}
            <Icon type="down" className={arrowCls} />
--- a/components/cascader/index.md
+++ b/components/cascader/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 级联选择
-type: Form Controls
+type: Form Control
 english: Cascader
 ---

--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@@ -5,12 +5,10 @@

 .@{cascader-prefix-cls} {
  font-size: @font-size-base;
-  &-input.ant-input {
+  &-input {
    display: block;
    cursor: pointer;
    width: 100%;
-    background: rgba(255, 255, 255, 0);
-    z-index: 1;
  }
  &-picker {
    position: relative;
@@ -18,8 +16,7 @@
    cursor: pointer;
    vertical-align: middle;
    font-size: @font-size-base;
-    background-color: #fff;
-    border-radius: @border-radius-base;
+    overflow: hidden;

    &-disabled {
      cursor: not-allowed;
@@ -27,16 +24,13 @@

    &-label {
      position: absolute;
-      left: 0;
+      top: 0;
+      left: 8px;
      height: 20px;
      line-height: 20px;
      top: 50%;
      margin-top: -10px;
      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      width: 100%;
-      padding: 0 12px 0 8px;
    }

    &-clear {
@@ -140,9 +134,11 @@
    }
  }
  &-menu-item {
-    padding: 7px 26px 7px 16px;
+    padding: 7px 16px;
    cursor: pointer;
    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
    transition: all 0.3s ease;
    &:hover {
      background: tint(@primary-color, 90%);
@@ -164,7 +160,8 @@
    &-expand {
      position: relative;
      &:after {
-        .iconfont-font("\e600");
+        content: '\e600';
+        font-family: 'anticon';
        .iconfont-size-under-12px(8px);
        color: #999;
        position: absolute;
--- a/components/checkbox/Group.jsx
+++ b/components/checkbox/Group.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Checkbox from './index';
-import PureRenderMixin from 'react-addons-pure-render-mixin';

 export default class CheckboxGroup extends React.Component {
  static defaultProps = {
@@ -31,9 +30,6 @@ export default class CheckboxGroup extends React.Component {
      });
    }
  }
-  shouldComponentUpdate(...args) {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
-  }
  getOptions() {
    const { options } = this.props;
    return options.map(option => {
@@ -68,8 +64,7 @@ export default class CheckboxGroup extends React.Component {
            <Checkbox disabled={'disabled' in option ? option.disabled : this.props.disabled}
              checked={this.state.value.indexOf(option.value) !== -1}
              onChange={() => this.toggleOption(option)}
-              className="ant-checkbox-group-item" key={option.value}
-            >
+              className="ant-checkbox-group-item" key={option.value}>
              {option.label}
            </Checkbox>
          )
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@@ -13,6 +13,6 @@ function onChange(e) {
 }

 ReactDOM.render(
-  <Checkbox onChange={onChange}>Checkbox</Checkbox>
+  <Checkbox defaultChecked={false} onChange={onChange}>Checkbox</Checkbox>
 , mountNode);
 ````
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@@ -22,21 +22,18 @@ const App = React.createClass({
        <p style={{ marginBottom: '20px' }}>
          <Checkbox checked={this.state.checked}
            disabled={this.state.disabled}
-            onChange={this.onChange}
-          >
+            onChange={this.onChange}>
            {label}
          </Checkbox>
        </p>
        <p>
          <Button type="primary" size="small"
-            onClick={this.toggleChecked}
-          >
+            onClick={this.toggleChecked}>
            {!this.state.checked ? '选中' : '取消'}
          </Button>
          <Button style={{ marginLeft: '10px' }}
            type="primary" size="small"
-            onClick={this.toggleDisable}
-          >
+            onClick={this.toggleDisable}>
            {!this.state.disabled ? '不可用' : '可用'}
          </Button>
        </p>
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/index.jsx
@@ -2,16 +2,12 @@ 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';

 export default class Checkbox extends React.Component {
  static Group = CheckboxGroup;
  static defaultProps = {
    prefixCls: 'ant-checkbox',
  }
-  shouldComponentUpdate(...args) {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
-  }
  render() {
    const { prefixCls, style, children, className, ...restProps } = this.props;
    const classString = classNames({
--- a/components/checkbox/index.md
+++ b/components/checkbox/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 多选框
-type: Form Controls
+type: Form Control
 english: Checkbox
 ---

@@ -16,17 +16,17 @@ english: Checkbox

 ### Checkbox

-| 参数      | 说明             | 类型      | 默认值  |
-|----------|------------------|----------|--------|
-| checked | 指定当前是否选中 | boolean  | false |
-| defaultChecked | 初始是否选中 | boolean | false |
-| onChange | 变化时回调函数 | Function(e:Event) | - |
+| 参数      | 说明                                     | 类型       |  可选值 |默认值 |
+|-----------|------------------------------------------|------------|-------|--------|
+| checked | 指定当前是否选中 | boolean  |   | false    |
+| defaultChecked | 初始是否选中 | boolean |  | false |
+| onChange | 变化时回调函数 | Function(e:Event) |  |  | |

 ### Checkbox Group

-| 参数      | 说明             | 类型      | 默认值  |
-|----------|------------------|----------|--------|
-| defaultValue | 默认选中的选项 | array | [] |
-| value | 指定选中的选项| array | [] |
-| options  | 指定可选项 | array | [] |
-| onChange | 变化时回调函数 | Function(checkedValue) | - |
+| 参数      | 说明                                     | 类型       |  可选值 | 默认值 |
+|-----------|------------------------------------------|------------|---------|--------|
+| defaultValue | 默认选中的选项 | array |   | [] |
+| value | 指定选中的选项| array |   | [] |
+| options  | 指定可选项 | array |   | [] |
+| onChange | 变化时回调函数 | Function(checkedValue) |  |  | |
--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@@ -151,20 +151,11 @@
    .@{checkbox-inner-prefix-cls}-input {
      cursor: default;
    }
-
-    & + span {
-      color: #ccc;
-      cursor: @cursor-disabled;
-    }
  }

  .@{checkbox-prefix-cls}-wrapper {
    cursor: pointer;
    font-size: @font-size-base;
-    display: inline-block;
-    & + & {
-      margin-left: 8px;
-    }
  }

  .@{checkbox-prefix-cls}-wrapper + span,
@@ -183,21 +174,4 @@
      display: inline-block;
    }
  }
-
-  @ie8: \0screen;
-
-  // IE8 hack for https://github.com/ant-design/ant-design/issues/2148
-  @media @ie8 {
-    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:before,
-    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:after {
-      .iconfont-font("\e62e");
-      font-weight: bold;
-      font-size: 8px;
-      border: 0;
-      color: #fff;
-      left: 2px;
-      top: 3px;
-      position: absolute;
-    }
-  }
 }
--- a/components/collapse/index.md
+++ b/components/collapse/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 折叠面板
-type: Views
+type: Presentation
 english: Collapse
 ---

--- a/components/date-picker/RangePicker.jsx
+++ b/components/date-picker/RangePicker.jsx
@@ -3,7 +3,6 @@ import GregorianCalendar from 'gregorian-calendar';
 import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
-import Icon from '../icon';

 export default class RangePicker extends React.Component {
  static defaultProps = {
@@ -34,13 +33,6 @@ export default class RangePicker extends React.Component {
    }
  }

-  clearSelection = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    this.setState({ value: [] });
-    this.handleChange([]);
-  }
-
  handleChange = (value) => {
    const props = this.props;
    if (!('value' in props)) {
@@ -70,15 +62,21 @@ export default class RangePicker extends React.Component {
      'ant-calendar-time': showTime,
    });

-    // 需要选择时间时，点击 ok 时才触发 onChange
    let pickerChangeHandler = {
      onChange: this.handleChange,
    };
+
    let calendarHandler = {
      onOk: this.handleChange,
    };
+
    if (props.timePicker) {
-      pickerChangeHandler = {};
+      pickerChangeHandler.onChange = (value) => {
+        // Click clear button
+        if (value === null || value.length === 0) {
+          this.handleChange(value);
+        }
+      };
    } else {
      calendarHandler = {};
    }
@@ -102,13 +100,6 @@ export default class RangePicker extends React.Component {
      />
    );

-    const clearIcon = (!props.disabled && state.value && (state.value[0] || state.value[1]))
-      ? <Icon
-        type="cross-circle"
-        className="ant-calendar-picker-clear"
-        onClick={this.clearSelection}
-      /> : null;
-
    return (<span className={props.pickerClass} style={style}>
      <RcDatePicker
        formatter={props.getFormatter()}
@@ -132,20 +123,17 @@ export default class RangePicker extends React.Component {
              <span className={props.pickerInputClass} disabled={disabled}>
                <input
                  disabled={disabled}
-                  readOnly
+                  onChange={props.handleInputChange}
                  value={start ? props.getFormatter().format(start) : ''}
                  placeholder={startPlaceholder}
-                  className="ant-calendar-range-picker-input"
-                />
+                  className="ant-calendar-range-picker-input" />
                <span className="ant-calendar-range-picker-separator"> ~ </span>
                <input
                  disabled={disabled}
-                  readOnly
+                  onChange={props.handleInputChange}
                  value={end ? props.getFormatter().format(end) : ''}
                  placeholder={endPlaceholder}
-                  className="ant-calendar-range-picker-input"
-                />
-                {clearIcon}
+                  className="ant-calendar-range-picker-input" />
                <span className="ant-calendar-picker-icon" />
              </span>
            );
--- a/components/date-picker/createPicker.jsx
+++ b/components/date-picker/createPicker.jsx
@@ -3,7 +3,6 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import GregorianCalendar from 'gregorian-calendar';
 import classNames from 'classnames';
-import Icon from '../icon';

 export default function createPicker(TheCalendar) {
  return class CalenderWrapper extends React.Component {
@@ -23,13 +22,6 @@ export default function createPicker(TheCalendar) {
      }
    }

-    clearSelection = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this.setState({ value: null });
-      this.handleChange(null);
-    }
-
    handleChange = (value) => {
      const props = this.props;
      if (!('value' in props)) {
@@ -58,25 +50,6 @@ export default function createPicker(TheCalendar) {
        'ant-calendar-month': MonthCalendar === TheCalendar,
      });

-      // 需要选择时间时，点击 ok 时才触发 onChange
-      let pickerChangeHandler = {
-        onChange: this.handleChange,
-      };
-      let 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);
-          }
-        },
-      };
-      if (props.showTime) {
-        pickerChangeHandler = {};
-      } else {
-        calendarHandler = {};
-      }
-
      const calendar = (
        <TheCalendar
          formatter={props.getFormatter()}
@@ -88,8 +61,6 @@ export default function createPicker(TheCalendar) {
          dateInputPlaceholder={placeholder}
          prefixCls="ant-calendar"
          className={calendarClassName}
-          onOk={props.onOk}
-          {...calendarHandler}
        />
      );

@@ -99,11 +70,6 @@ export default function createPicker(TheCalendar) {
        pickerStyle.width = 180;
      }

-      const clearIcon = (!props.disabled && this.state.value) ?
-        <Icon type="cross-circle"
-          className="ant-calendar-picker-clear"
-          onClick={this.clearSelection}
-        /> : null;
      return (
        <span className={props.pickerClass} style={{ ...pickerStyle, ...props.style }}>
          <RcDatePicker
@@ -115,10 +81,9 @@ export default function createPicker(TheCalendar) {
            style={props.popupStyle}
            align={props.align}
            getCalendarContainer={props.getCalendarContainer}
-            open={props.open}
            onOpen={props.toggleOpen}
            onClose={props.toggleOpen}
-            {...pickerChangeHandler}
+            onChange={this.handleChange}
          >
            {
              ({ value }) => {
@@ -126,12 +91,10 @@ export default function createPicker(TheCalendar) {
                  <span>
                    <input
                      disabled={props.disabled}
-                      readOnly
+                      onChange={props.handleInputChange}
                      value={value ? props.getFormatter().format(value) : ''}
                      placeholder={placeholder}
-                      className={props.pickerInputClass}
-                    />
-                    {clearIcon}
+                      className={props.pickerInputClass} />
                    <span className="ant-calendar-picker-icon" />
                  </span>
                );
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@@ -1,18 +1,10 @@
 ---
 order: 0
-title:
-  zh-CN: 基本
-  en-US: Basic
+title: 基本
 ---

-## zh-CN
-
 最简单的用法。

-## en-US
-
-The most basic usage.
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@@ -1,22 +1,12 @@
 ---
 order: 6
-title:
-  zh-CN: 指定不可选择日期
-  en-US: Specify the date that cannot be selected
+title: 指定不可选择日期
 ---

-## zh-CN
-
 设置 `disabledDate` 方法，来确定不可选时段。

 如上例：不可选择今天之后的日期。

-## en-US
-
-Specify unselectable period by `disabledDate`.
-
-As in the example above: you can't select a date later than today.
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@@ -1,18 +1,10 @@
 ---
 order: 5
-title:
-  zh-CN: 禁用
-  en-US: Disabled
+title: 禁用
 ---

-## zh-CN
-
 选择框的不可用状态。

-## en-US
-
-A disabled state of the `DatePicker`.
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/formatter.md
+++ b/components/date-picker/demo/formatter.md
@@ -1,18 +1,10 @@
 ---
 order: 1
-title:
-  zh-CN: 日期格式
-  en-US: Date format
+title: 日期格式
 ---

-## zh-CN
-
 使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。

-## en-US
-
-By using `format`, you can customize the format(such as `yyyy/MM/dd`) the date is displayed in. 
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/locale.md
+++ b/components/date-picker/demo/locale.md
@@ -1,19 +1,10 @@
 ---
 order: 10
-title: 
-  zh-CN: 国际化
-  en-US: Locale
+title: 国际化
 ---

-## zh-CN
-
 通过 `locale` 配置时区、语言等, 默认支持 `en_US`，`zh_CN`。

-## en-US
-
-Use locale to set the properties like time zone, language and etc. en_US, zh_CN are supported by default.
-
-
 ````jsx
 import { DatePicker } from 'antd';
 import enUS from 'antd/lib/date-picker/locale/en_US';
--- a/components/date-picker/demo/month-picker.md
+++ b/components/date-picker/demo/month-picker.md
@@ -1,17 +1,9 @@
 ---
 order: 9
-title: 
-  zh-CN: 月选择器
-  en-US: MonthPicker
+title: 月选择器
 ---

-## zh-CN
-
-使用 `MonthPicker` 实现月选择器。
-
-## en-US
-
-You can get a month selector by using `MonthPicker`.
+使用 `MonthPicker` 实现月选择器.

 ````jsx
 import { DatePicker } from 'antd';
--- a/components/date-picker/demo/range.md
+++ b/components/date-picker/demo/range.md
@@ -1,20 +1,10 @@
 ---
 order: 8
-title: 
-  zh-CN: 日期范围二
-  en-US: Date range, case 2
+title: 日期范围二
 ---

-## zh-CN
-
 使用 `RangePicker` 实现日期范围选择有更好的交互体验。

-## en-US
-
-By using `RangePicker` to specify a date range, you can achieve a better interactive experience.
-
-
-
 ````jsx
 import { DatePicker } from 'antd';
 const RangePicker = DatePicker.RangePicker;
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@@ -1,19 +1,10 @@
 ---
 order: 1
-title: 
-  zh-CN: 三种大小
-  en-US: Three sizes
+title: 三种大小
 ---

-## zh-CN
-
 三种大小的输入框，大的用在表单中，中的为默认。

-## en-US
-
-The input box comes in three sizes. `large` is used in the form, while the medium size is the default.
-
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@@ -1,19 +1,10 @@
 ---
 order: 7
-title: 
-  zh-CN: 日期范围一
-  en-US: Date range, case 1
+title: 日期范围一
 ---

-## zh-CN
-
 可以设置 `disabledDate` 方法，来约束开始和结束日期。

-## en-US
-
-You can use the `disabledDate` property to limit the start and end dates.
-
-
 ````jsx
 import { DatePicker } from 'antd';

@@ -22,7 +13,6 @@ const DateRange = React.createClass({
    return {
      startValue: null,
      endValue: null,
-      endOpen: false,
    };
  },
  disabledStartDate(startValue) {
@@ -49,36 +39,17 @@ const DateRange = React.createClass({
  onEndChange(value) {
    this.onChange('endValue', value);
  },
-  handleStartToggle({ open }) {
-    if (!open) {
-      this.setState({ endOpen: true });
-    }
-  },
-  handleEndToggle({ open }) {
-    this.setState({ endOpen: open });
-  },
  render() {
    return (
      <div>
-        <DatePicker
-          disabledDate={this.disabledStartDate}
-          showTime
-          format="yyyy-MM-dd HH:mm:ss"
+        <DatePicker disabledDate={this.disabledStartDate}
          value={this.state.startValue}
          placeholder="开始日期"
-          onChange={this.onStartChange}
-          toggleOpen={this.handleStartToggle}
-        />
-        <DatePicker
-          disabledDate={this.disabledEndDate}
-          showTime
-          format="yyyy-MM-dd HH:mm:ss"
+          onChange={this.onStartChange} />
+        <DatePicker disabledDate={this.disabledEndDate}
          value={this.state.endValue}
          placeholder="结束日期"
-          onChange={this.onEndChange}
-          open={this.state.endOpen}
-          toggleOpen={this.handleEndToggle}
-        />
+          onChange={this.onEndChange} />
      </div>
    );
  },
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@@ -1,18 +1,10 @@
 ---
 order: 4
-title:
-  zh-CN: 日期时间选择
-  en-US: To choose time
+title: 日期时间选择
 ---

-## zh-CN
-
 增加选择时间功能，当 `showTime` 为一个对象时，其属性会传递给内建的 `TimePicker`。

-## en-US
-
-This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to `TimePicker`, witch is a built-in function.
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/with-time-picker.md
+++ b/components/date-picker/demo/with-time-picker.md
@@ -1,19 +1,11 @@
 ---
 order: 4
 hidden: true
-title: 
-  zh-CN: 日期时间选择二
-  en-US: To select a date, case 2
+title: 日期时间选择二
 ---

-## 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';

--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -1,74 +0,0 @@
---
-category: Components
-type: Form Controls
-english: DatePicker
---
-
-To select/input a date.
-
-## When To Use
-
-By clicking the input box, you can select a date from a popup calendar.
-
-## API
-
-### DatePicker
-
-```html
-<DatePicker defaultValue="2015-01-01" />
-```
-
-> Warning: `Datepicker` is renamed to `DatePicker` after `0.11`.
-
-
-| Property         | Description           | Type     | Default       |
-|--------------|----------------|----------|--------------|
-| value        | to set date           | String/Date   | -           |
-| defaultValue | to set default date        | String/Date   | -           |
-| format       | to set the date format, refer to [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | 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, dateString) | -           |
-| 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) | - |
-| toggleOpen   | 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) |
-
-### MonthPicker
-
-| Property         | Description           | Type     | Default       |
-|--------------|----------------|----------|--------------|
-| value        | to set date          | String/Date   | -           |
-| defaultValue | to set default date       | String/Date   | -           |
-| format       | to set the date format, refer to [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | 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 value) | -           |
-| 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          | [String/Date, String/Date]   | -           |
-| defaultValue | to set default date       | [String/Date, String/Date]   | -           |
-| 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(date[], dateString[]) | -           |
-| 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`
-
-
-<style>
-.code-box-demo .ant-calendar-picker {
-  margin: 0 8px 12px 0;
-}
-</style>
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 日期选择框
-type: Form Controls
+type: Form Control
 english: DatePicker
 ---

@@ -28,12 +28,13 @@ english: DatePicker
 | defaultValue | 默认日期       | string or Date   | 无           |
 | format       | 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | string   | "yyyy-MM-dd" |
 | disabledDate | 不可选择的日期 | function | 无           |
-| onChange     | 时间发生变化的回调 | function(date, dateString) | 无           |
+| onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(date, dateString) | 无           |
 | 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)  |
+| onOk         | 点击确定按钮的回调 | function(Date value) | 无 |
 | toggleOpen   | 弹出日历和关闭日历的回调 | function(status) | 无 |
 | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
 | showTime     | 增加时间选择功能  | Object or Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |
--- a/components/date-picker/style/Calendar.less
+++ b/components/date-picker/style/Calendar.less
@@ -38,7 +38,7 @@
    position: absolute;
    top: 0;
    color: #999;
-    font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
+    font-family: Arial,"Hiragino Sans GB","Microsoft Yahei","Microsoft Sans Serif",sans-serif;
    padding: 0 5px;
    font-size: 16px;
    display: inline-block;
@@ -246,7 +246,6 @@
  }

  .@{calendar-prefix-cls}-clear-btn {
-    display: none;
    position: absolute;
    right: 5px;
    text-indent: -76px;
@@ -260,7 +259,8 @@
  }

  .@{calendar-prefix-cls}-clear-btn:after {
-    .iconfont-font("\e631");
+    content: "\e631";
+    font-family: "anticon";
    font-size: 12px;
    color: #ccc;
    display: inline-block;
--- a/components/date-picker/style/Picker.less
+++ b/components/date-picker/style/Picker.less
@@ -37,29 +37,7 @@
  > input {
    outline: none;
  }
-  &-clear {
-    opacity: 0;
-    position: absolute;
-    right: 7px;
-    z-index: 1;
-    background: #fff;
-    top: 50%;
-    font-size: 12px;
-    color: #ccc;
-    width: 14px;
-    height: 14px;
-    margin-top: -7px;
-    line-height: 14px;
-    cursor: pointer;
-    transition: color 0.3s ease, opacity 0.15s ease;
-    &:hover {
-      color: #999;
-    }
-  }

-  &:hover &-clear {
-    opacity: 1;
-  }
  &-icon {
    position: absolute;
    user-select: none;
--- a/components/date-picker/style/RangePicker.less
+++ b/components/date-picker/style/RangePicker.less
@@ -62,7 +62,6 @@
  }

  .@{calendar-prefix-cls}-input-wrap {
-    position: relative;
    height: @input-box-height;
  }
  .@{calendar-prefix-cls}-input {
@@ -110,22 +109,11 @@

  .@{calendar-prefix-cls}-in-range-cell {
    border-radius: 0;
-    position: relative;
-    > div {
-      position: relative;
-      z-index: 1;
-    }
-    &:before {
-      content: '';
-      display: block;
+    > span {
      background: tint(@primary-color, 90%);
+      width: 100%;
      border-radius: 0;
      border: 0;
-      position: absolute;
-      top: 4px;
-      bottom: 4px;
-      left: 0;
-      right: 0;
    }
  }

--- a/components/date-picker/wrapPicker.jsx
+++ b/components/date-picker/wrapPicker.jsx
@@ -18,12 +18,22 @@ export default function wrapPicker(Picker, defaultFormat) {
      align: {
        offset: [0, -9],
      },
+      open: false,
    }

    static contextTypes = {
      antLocale: PropTypes.object,
    }

+    constructor(props) {
+      super(props);
+
+      this.state = {};
+    }
+
+    // remove input readonly warning
+    handleInputChange() {}
+
    getLocale() {
      const props = this.props;
      let locale = defaultLocale;
@@ -56,14 +66,19 @@ export default function wrapPicker(Picker, defaultFormat) {
      return value;
    }

-    toggleOpen = ({ open }) => {
-      this.props.toggleOpen({ open });
+    toggleOpen = (e) => {
+      this.setState({
+        open: e.open,
+      });
+      this.props.toggleOpen(e);
    }

    render() {
      const props = this.props;
+      const state = this.state;
      const pickerClass = classNames({
        'ant-calendar-picker': true,
+        'ant-calendar-picker-open': state.open,
      });
      const pickerInputClass = classNames({
        'ant-calendar-range-picker': true,
@@ -88,17 +103,18 @@ export default function wrapPicker(Picker, defaultFormat) {
          placeholder={locale.timePickerLocale.placeholder}
          locale={locale.timePickerLocale}
          transitionName="slide-up"
-        />
+          />
      ) : null;

      return (
        <Picker
-          {...props}
+          {...this.props}
          pickerClass={pickerClass}
          pickerInputClass={pickerInputClass}
          locale={locale}
          timePicker={timePicker}
          toggleOpen={this.toggleOpen}
+          handleInputChange={this.handleInputChange}
          getFormatter={this.getFormatter}
          parseDateFromValue={this.parseDateFromValue}
        />
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-visible.md
@@ -33,8 +33,7 @@ const OverlayVisible = React.createClass({
    return (
      <Dropdown overlay={menu}
        onVisibleChange={this.handleVisibleChange}
-        visible={this.state.visible}
-      >
+        visible={this.state.visible}>
        <a className="ant-dropdown-link" href="#">
          鼠标移入 <Icon type="down" />
        </a>
--- a/components/dropdown/dropdown-button.jsx
+++ b/components/dropdown/dropdown-button.jsx
@@ -23,7 +23,7 @@ export default class DropdownButton extends React.Component {
    const { type, overlay, trigger, align, children, className, onClick, ...restProps } = this.props;
    const cls = classNames({
      'ant-dropdown-button': true,
-      [className]: !!className,
+      className: !!className,
    });
    return (
      <ButtonGroup {...restProps} className={cls}>
--- a/components/dropdown/dropdown.jsx
+++ b/components/dropdown/dropdown.jsx
@@ -10,6 +10,12 @@ export default class Dropdown extends React.Component {
  }

  render() {
-    return <RcDropdown {...this.props} />;
+    const { overlay, ...otherProps } = this.props;
+    const menu = React.cloneElement(overlay, {
+      openTransitionName: 'zoom-big',
+    });
+    return (
+      <RcDropdown {...otherProps} overlay={menu} />
+    );
  }
 }
--- a/components/dropdown/index.md
+++ b/components/dropdown/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 下拉菜单
-type: Views
+type: Presentation
 english: Dropdown
 ---

@@ -33,7 +33,7 @@ english: Dropdown
 |-------------|------------------|--------------------|--------------|
 | type        | 按钮类型，和 [Button](/components/button) 一致 | String | 'default' |
 | onClick     | 点击左侧按钮的回调，和 [Button](/components/button) 一致 | Function   | - |
-| trigger     | 触发下拉的行为   | ['click'] or ['hover'] | ['hover']        |
+| trigger     | 触发下拉的行为   | "click" or "hover" | hover        |
 | overlay     | 菜单         | [Menu](/components/menu) | -     |
 | visible     | 菜单是否显示 | Bool   | 无           |
 | onVisibleChange  | 菜单显示状态改变时调用，参数为 { visible } | Function | - |
--- a/components/form/Form.jsx
+++ b/components/form/Form.jsx
@@ -1,8 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-import omit from 'object.omit';
-import warning from 'warning';

 export default class Form extends React.Component {
  static defaultProps = {
@@ -16,36 +13,33 @@ export default class Form extends React.Component {
    prefixCls: React.PropTypes.string,
    horizontal: React.PropTypes.bool,
    inline: React.PropTypes.bool,
+    form: React.PropTypes.object,
    children: React.PropTypes.any,
    onSubmit: React.PropTypes.func,
  }

-  constructor(props) {
-    super(props);
-
-    warning(!props.form, 'It is unnessary to pass `form` to `Form` after antd@1.7.0.');
+  static childContextTypes = {
+    form: React.PropTypes.object,
  }

-  shouldComponentUpdate(...args) {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
+  getChildContext() {
+    return {
+      form: this.props.form,
+    };
  }

  render() {
-    const { prefixCls, className, inline, horizontal } = this.props;
+    const { prefixCls, className, style } = this.props;
    const formClassName = classNames({
-      [`${prefixCls}-horizontal`]: horizontal,
-      [`${prefixCls}-inline`]: inline,
+      [`${prefixCls}-horizontal`]: this.props.horizontal,
+      [`${prefixCls}-inline`]: this.props.inline,
      [className]: !!className,
    });

-    const formProps = omit(this.props, [
-      'prefixCls',
-      'className',
-      'inline',
-      'horizontal',
-      'form',
-    ]);
-
-    return <form {...formProps} className={formClassName} />;
+    return (
+      <form {...this.props} className={formClassName} style={style}>
+        {this.props.children}
+      </form>
+    );
  }
 }
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-import Row from '../row';
-import Col from '../col';
-import { FIELD_META_PROP } from './constants';
+
+function prefixClsFn(prefixCls, ...args) {
+  return args.map((s) => `${prefixCls}-${s}`).join(' ');
+}

 export default class FormItem extends React.Component {
  static defaultProps = {
@@ -28,8 +28,14 @@ export default class FormItem extends React.Component {
    form: React.PropTypes.object,
  }

-  shouldComponentUpdate(...args) {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
+  getLayoutClass(colDef) {
+    if (!colDef) {
+      return '';
+    }
+    const { span, offset } = colDef;
+    const col = span ? `col-${span}` : '';
+    const offsetCol = offset ? ` col-offset-${offset}` : '';
+    return col + offsetCol;
  }

  getHelpMsg() {
@@ -45,7 +51,7 @@ export default class FormItem extends React.Component {
  getOnlyControl() {
    const children = React.Children.toArray(this.props.children);
    const child = children.filter((c) => {
-      return c.props && FIELD_META_PROP in c.props;
+      return c.props && '__meta' in c.props;
    })[0];
    return child !== undefined ? child : null;
  }
@@ -60,14 +66,15 @@ export default class FormItem extends React.Component {
  }

  getMeta() {
-    return this.getChildProp(FIELD_META_PROP);
+    return this.getChildProp('__meta');
  }

  renderHelp() {
-    const prefixCls = this.props.prefixCls;
+    const props = this.props;
+    const prefixCls = props.prefixCls;
    const help = this.getHelpMsg();
    return help ? (
-      <div className={`${prefixCls}-explain`} key="help">
+      <div className={prefixClsFn(prefixCls, 'explain')} key="help">
        {help}
      </div>
    ) : null;
@@ -76,7 +83,7 @@ export default class FormItem extends React.Component {
  renderExtra() {
    const { prefixCls, extra } = this.props;
    return extra ? (
-      <span className={`${prefixCls}-extra`}>{extra}</span>
+      <span className={prefixClsFn(prefixCls, 'extra')}>{extra}</span>
    ) : null;
  }

@@ -125,9 +132,9 @@ export default class FormItem extends React.Component {
  renderWrapper(children) {
    const wrapperCol = this.props.wrapperCol;
    return (
-      <Col {...wrapperCol} key="wrapper">
+      <div className={this.getLayoutClass(wrapperCol)} key="wrapper">
        {children}
-      </Col>
+      </div>
    );
  }

@@ -151,21 +158,20 @@ export default class FormItem extends React.Component {
      props.required;

    const className = classNames({
+      [this.getLayoutClass(labelCol)]: true,
      [`${props.prefixCls}-item-required`]: required,
    });

    // remove user input colon
    let label = props.label;
-    if (typeof label === 'string' && label.trim() !== '') {
-      label = props.label.replace(/[：|:]\s*$/, '');
+    if (typeof props.label === 'string') {
+      label = props.label.replace(/：|:$/, '');
    }

    return props.label ? (
-      <Col {...labelCol} key="label" className={`${props.prefixCls}-item-label`}>
-        <label htmlFor={props.id || this.getId()} className={className}>
-          {label}
-        </label>
-      </Col>
+      <label htmlFor={props.id || this.getId()} className={className} key="label">
+        {label}
+      </label>
    ) : null;
  }

@@ -200,9 +206,9 @@ export default class FormItem extends React.Component {
    };

    return (
-      <Row className={classNames(itemClassName)} style={style}>
+      <div className={classNames(itemClassName)} style={style}>
        {children}
-      </Row>
+      </div>
    );
  }

--- a/components/form/constants.js
+++ b/components/form/constants.js
@@ -1 +0,0 @@
-export const FIELD_META_PROP = 'data-__meta';
--- a/components/form/demo/advanced-search-form.md
+++ b/components/form/demo/advanced-search-form.md
@@ -18,22 +18,19 @@ ReactDOM.render(
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
        <FormItem
          label="较长搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <DatePicker size="default" />
        </FormItem>
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
      </Col>
@@ -41,22 +38,19 @@ ReactDOM.render(
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
        <FormItem
          label="较长搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <DatePicker size="default" />
        </FormItem>
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
      </Col>
@@ -64,22 +58,19 @@ ReactDOM.render(
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
        <FormItem
          label="较长搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <DatePicker size="default" />
        </FormItem>
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
      </Col>
@@ -105,7 +96,7 @@ ReactDOM.render(
 }

 /* 由于输入标签长度不确定，所以需要微调使之看上去居中 */
-.ant-advanced-search-form > .ant-row {
+.ant-advanced-search-form > .row {
  position: relative;
  left: -6px;
 }
--- a/components/form/demo/dynamic-form-item.md
+++ b/components/form/demo/dynamic-form-item.md
@@ -36,12 +36,7 @@ let Demo = React.createClass({
  },
  submit(e) {
    e.preventDefault();
-    this.props.form.validateFields((errors, values) => {
-      if (errors) {
-        console.log(errors);
-      }
-      console.log(values);
-    });
+    console.log(this.props.form.getFieldsValue());
  },
  render() {
    const { getFieldProps, getFieldValue } = this.props.form;
@@ -57,14 +52,7 @@ let Demo = React.createClass({
    const formItems = getFieldValue('keys').map((k) => {
      return (
        <Form.Item {...formItemLayout} label={`好朋友${k}：`} key={k}>
-          <Input {...getFieldProps(`name${k}`, {
-            rules: [{
-              required: true,
-              whitespace: true,
-              message: '你好友的名字捏！',
-            }],
-          })} style={{ width: '80%', marginRight: 8 }}
-          />
+          <Input {...getFieldProps(`name${k}`)} style={{ width: '80%', marginRight: 8 }} />
          <Button onClick={() => this.remove(k)}>删除</Button>
        </Form.Item>
      );
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@@ -23,8 +23,7 @@ ReactDOM.render(
      id="control-input"
      label="输入框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}
-    >
+      wrapperCol={{ span: 14 }}>
      <Input id="control-input" placeholder="Please enter..." />
    </FormItem>

@@ -32,8 +31,7 @@ ReactDOM.render(
      id="control-textarea"
      label="文本域"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}
-    >
+      wrapperCol={{ span: 14 }}>
      <Input type="textarea" id="control-textarea" rows="3" />
    </FormItem>

@@ -41,8 +39,7 @@ ReactDOM.render(
      id="select"
      label="Select 选择器"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}
-    >
+      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>
@@ -54,8 +51,7 @@ ReactDOM.render(
    <FormItem
      label="Checkbox 多选框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
-    >
+      wrapperCol={{ span: 18 }} >
      <Checkbox className="ant-checkbox-vertical">选项一</Checkbox>
      <Checkbox className="ant-checkbox-vertical">选项二</Checkbox>
      <Checkbox className="ant-checkbox-vertical" disabled>选项三（不可选）</Checkbox>
@@ -64,8 +60,7 @@ ReactDOM.render(
    <FormItem
      label="Checkbox 多选框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
-    >
+      wrapperCol={{ span: 18 }} >
      <Checkbox className="ant-checkbox-inline">选项一</Checkbox>
      <Checkbox className="ant-checkbox-inline">选项二</Checkbox>
      <Checkbox className="ant-checkbox-inline">选项三</Checkbox>
@@ -74,8 +69,7 @@ ReactDOM.render(
    <FormItem
      label="Radio 单选框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
-    >
+      wrapperCol={{ span: 18 }} >
      <RadioGroup defaultValue="b">
        <Radio value="a">A</Radio>
        <Radio value="b">B</Radio>
--- a/components/form/demo/form-in-modal.md
+++ b/components/form/demo/form-in-modal.md
@@ -42,14 +42,12 @@ let Demo = React.createClass({
          <Form horizontal form={this.props.form}>
            <FormItem
              {...formItemLayout}
-              label="用户名"
-            >
+              label="用户名">
              <Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
            </FormItem>
            <FormItem
              {...formItemLayout}
-              label="密码"
-            >
+              label="密码">
              <Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
            </FormItem>
          </Form>
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@@ -26,20 +26,17 @@ let Demo = React.createClass({
      <Form horizontal onSubmit={this.handleSubmit}>
        <FormItem
          {...formItemLayout}
-          label="用户名"
-        >
+          label="用户名">
          <p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
        </FormItem>
        <FormItem
          {...formItemLayout}
-          label="密码"
-        >
-          <Input type="password" {...getFieldProps('pass', { initialValue: '' })} placeholder="请输入密码" />
+          label="密码">
+          <Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
        </FormItem>
        <FormItem
          {...formItemLayout}
-          label="您的性别"
-        >
+          label="您的性别">
          <RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
            <Radio value="male">男的</Radio>
            <Radio value="female">女的</Radio>
@@ -48,15 +45,13 @@ let Demo = React.createClass({
        <FormItem
          {...formItemLayout}
          label="备注"
-          help="随便写点什么"
-        >
-          <Input type="textarea" placeholder="随便写" {...getFieldProps('remark', { initialValue: '' })} />
+          help="随便写点什么">
+          <Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
        </FormItem>
        <FormItem
          {...formItemLayout}
-          label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}
-        >
-          <Checkbox {...getFieldProps('agreement', { initialValue: false, valuePropName: 'checked' })}>同意</Checkbox>
+          label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}>
+          <Checkbox {...getFieldProps('agreement')}>同意</Checkbox>
        </FormItem>
        <FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
          <Button type="primary" htmlType="submit">确定</Button>
--- a/components/form/demo/inline-form.md
+++ b/components/form/demo/inline-form.md
@@ -20,18 +20,14 @@ let Demo = React.createClass({
    return (
      <Form inline onSubmit={this.handleSubmit}>
        <FormItem
-          label="账户"
-        >
+          label="账户">
          <Input placeholder="请输入账户名"
-            {...getFieldProps('userName')}
-          />
+            {...getFieldProps('userName')} />
        </FormItem>
        <FormItem
-          label="密码"
-        >
+          label="密码">
          <Input type="password" placeholder="请输入密码"
-            {...getFieldProps('password')}
-          />
+            {...getFieldProps('password')} />
        </FormItem>
        <FormItem>
          <Checkbox {...getFieldProps('agreement')}>记住我</Checkbox>
--- a/components/form/demo/input-group.md
+++ b/components/form/demo/input-group.md
@@ -11,22 +11,12 @@ 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="标签输入框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
+      wrapperCol={{ span: 16 }}>
      <Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
    </FormItem>

@@ -34,24 +24,31 @@ ReactDOM.render(
      label="标签输入框"
      labelCol={{ span: 6 }}
      validateStatus="success"
-      wrapperCol={{ span: 16 }}
-    >
+      wrapperCol={{ span: 16 }}>
      <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
    </FormItem>

    <FormItem
      label="select 标签输入框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
-      <Input addonAfter={selectAfter} placeholder="www.mysite" id="site4" />
+      wrapperCol={{ span: 16 }}>
+      <InputGroup>
+        <Input id="site4" placeholder="www.mysite" />
+        <div className="ant-input-group-wrap">
+          <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>
+        </div>
+      </InputGroup>
    </FormItem>

    <FormItem
      label="输入身份证"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
+      wrapperCol={{ span: 16 }}>
      <InputGroup>
        <Col span="6">
          <Input id="certNo1" />
@@ -71,8 +68,7 @@ ReactDOM.render(
    <FormItem
      label="电话号码"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
+      wrapperCol={{ span: 16 }}>
      <InputGroup>
        <Col span="4">
          <Input id="tel1" defaultValue="086" />
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@@ -46,19 +46,16 @@ let Demo = React.createClass({
        <FormItem
          label="InputNumber 数字输入框"
          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 10 }}
-        >
+          wrapperCol={{ span: 10 }}>
          <InputNumber min={1} max={10} style={{ width: 100 }}
-            {...getFieldProps('inputNumber', { initialValue: 3 })}
-          />
+            {...getFieldProps('inputNumber', { initialValue: 3 })} />
          <span className="ant-form-text"> 台机器</span>
        </FormItem>

        <FormItem
          label="我是标题"
          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 10 }}
-        >
+          wrapperCol={{ span: 10 }}>
          <p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
          <p className="ant-form-text">
            <a href="#">链接文字</a>
@@ -69,8 +66,7 @@ let Demo = React.createClass({
          label="Switch 开关"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 10 }}
-          required
-        >
+          required>
          <Switch {...getFieldProps('switch', { valuePropName: 'checked' })} />
        </FormItem>

@@ -78,8 +74,7 @@ let Demo = React.createClass({
          label="Slider 滑动输入条"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 10 }}
-          required
-        >
+          required>
          <Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')} />
        </FormItem>

@@ -87,11 +82,9 @@ let Demo = React.createClass({
          label="Select 选择器"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
-          required
-        >
+          required>
          <Select style={{ width: 200 }}
-            {...getFieldProps('select')}
-          >
+            {...getFieldProps('select')}>
            <Option value="jack">jack</Option>
            <Option value="lucy">lucy</Option>
            <Option value="disabled" disabled>disabled</Option>
@@ -104,16 +97,14 @@ let Demo = React.createClass({
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          required
-          hasFeedback
-        >
+          hasFeedback>
          <Cascader style={{ width: 200 }} options={areaData} {...getFieldProps('area')} />
        </FormItem>

        <FormItem
          label="DatePicker 日期选择框"
          labelCol={{ span: 8 }}
-          required
-        >
+          required>
          <Col span="6">
            <FormItem>
              <DatePicker {...getFieldProps('startDate')} />
@@ -134,15 +125,13 @@ let Demo = React.createClass({
          label="TimePicker 时间选择器"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
-          required
-        >
+          required>
          <TimePicker {...getFieldProps('time')} />
        </FormItem>

        <FormItem
          label="选项"
-          labelCol={{ span: 8 }}
-        >
+          labelCol={{ span: 8 }}>
          <RadioGroup {...getFieldProps('rg')}>
            <RadioButton value="a">选项一</RadioButton>
            <RadioButton value="b">选项二</RadioButton>
@@ -154,8 +143,7 @@ let Demo = React.createClass({
          label="logo图"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
-          help="提示信息要长长长长长长长长长长长长长长"
-        >
+          help="提示信息要长长长长长长长长长长长长长长">
          <Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}
            {...getFieldProps('upload', {
              valuePropName: 'fileList',
--- a/components/form/demo/validate-basic.md
+++ b/components/form/demo/validate-basic.md
@@ -114,43 +114,36 @@ let BasicDemo = React.createClass({
          {...formItemLayout}
          label="用户名"
          hasFeedback
-          help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}
-        >
+          help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
          <Input {...nameProps} placeholder="实时校验，输入 JasonWood 看看" />
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="邮箱"
-          hasFeedback
-        >
+          hasFeedback>
          <Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="密码"
-          hasFeedback
-        >
+          hasFeedback>
          <Input {...passwdProps} type="password" autoComplete="off"
-            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-          />
+            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="确认密码"
-          hasFeedback
-        >
+          hasFeedback>
          <Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
-            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-          />
+            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="备注"
-        >
+          label="备注">
          <Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
        </FormItem>

--- a/components/form/demo/validate-customized.md
+++ b/components/form/demo/validate-customized.md
@@ -145,8 +145,7 @@ let Demo = React.createClass({
            <Col span="18">
              <FormItem
                {...formItemLayout}
-                label="密码"
-              >
+                label="密码">
                <Input {...passProps} type="password"
                  onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                  autoComplete="off" id="pass"
@@ -162,8 +161,7 @@ let Demo = React.createClass({
            <Col span="18">
              <FormItem
                {...formItemLayout}
-                label="确认密码"
-              >
+                label="确认密码">
                <Input {...rePassProps} type="password"
                  onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                  autoComplete="off" id="rePass"
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@@ -110,8 +110,7 @@ let Demo = React.createClass({
      <Form horizontal form={this.props.form}>
        <FormItem
          {...formItemLayout}
-          label="国籍"
-        >
+          label="国籍">
          <Select {...selectProps} placeholder="请选择国家" style={{ width: '100%' }}>
            <Option value="china">中国</Option>
            <Option value="use">美国</Option>
@@ -123,8 +122,7 @@ let Demo = React.createClass({

        <FormItem
          {...formItemLayout}
-          label="喜欢的颜色"
-        >
+          label="喜欢的颜色">
          <Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
            <Option value="red">红色</Option>
            <Option value="orange">橙色</Option>
@@ -136,8 +134,7 @@ let Demo = React.createClass({

        <FormItem
          {...formItemLayout}
-          label="性别"
-        >
+          label="性别">
          <RadioGroup {...radioProps}>
            <Radio value="male">男</Radio>
            <Radio value="female">女</Radio>
@@ -147,8 +144,7 @@ let Demo = React.createClass({

        <FormItem
          {...formItemLayout}
-          label="兴趣爱好"
-        >
+          label="兴趣爱好">
          <Checkbox {...getFieldProps('eat', {
            valuePropName: 'checked',
          })}>吃饭饭</Checkbox>
@@ -162,35 +158,30 @@ let Demo = React.createClass({

        <FormItem
          {...formItemLayout}
-          label="生日"
-        >
+          label="生日">
          <DatePicker {...birthdayProps} />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="选一个时间"
-        >
+          label="选一个时间">
          <TimePicker {...timeProps} />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="8~12间的质数"
-        >
+          label="8~12间的质数">
          <InputNumber {...primeNumberProps} min={8} max={12} />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="选择地址"
-        >
+          label="选择地址">
          <Cascader {...addressProps} options={address} />
        </FormItem>

        <FormItem
-          wrapperCol={{ span: 12, offset: 7 }}
-        >
+          wrapperCol={{ span: 12, offset: 7 }} >
          <Button type="primary" onClick={this.handleSubmit}>确定</Button>
          &nbsp;&nbsp;&nbsp;
          <Button type="ghost" onClick={this.handleReset}>重置</Button>
--- a/components/form/demo/validate-static.md
+++ b/components/form/demo/validate-static.md
@@ -22,8 +22,7 @@ ReactDOM.render(
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
      validateStatus="error"
-      help="请输入数字和字母组合"
-    >
+      help="请输入数字和字母组合">
      <Input defaultValue="无效选择" id="error" />
    </FormItem>

@@ -31,8 +30,7 @@ ReactDOM.render(
      label="警告校验"
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
-      validateStatus="warning"
-    >
+      validateStatus="warning">
      <Input defaultValue="前方高能预警" id="warning" />
    </FormItem>

@@ -42,8 +40,7 @@ ReactDOM.render(
      wrapperCol={{ span: 12 }}
      hasFeedback
      validateStatus="validating"
-      help="信息审核中..."
-    >
+      help="信息审核中...">
      <Input defaultValue="我是被校验的内容" id="validating" />
    </FormItem>

@@ -52,8 +49,7 @@ ReactDOM.render(
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
      hasFeedback
-      validateStatus="success"
-    >
+      validateStatus="success">
      <Input defaultValue="我是正文" id="success" />
    </FormItem>

@@ -62,8 +58,7 @@ ReactDOM.render(
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
      hasFeedback
-      validateStatus="warning"
-    >
+      validateStatus="warning">
      <Input defaultValue="前方高能预警" id="warning" />
    </FormItem>

@@ -73,16 +68,14 @@ ReactDOM.render(
      wrapperCol={{ span: 12 }}
      hasFeedback
      validateStatus="error"
-      help="请输入数字和字母组合"
-    >
+      help="请输入数字和字母组合">
      <Input defaultValue="无效选择" id="error" />
    </FormItem>

    <FormItem
      label="行内校验"
      labelCol={{ span: 5 }}
-      help
-    >
+      help>
      <Col span="6">
        <FormItem validateStatus="error" help="请选择正确日期">
          <DatePicker />
--- a/components/form/index.jsx
+++ b/components/form/index.jsx
@@ -1,35 +1,16 @@
-import React, { PropTypes } from 'react';
-import createDOMForm from 'rc-form/lib/createDOMForm';
 import Form from './Form';
 import FormItem from './FormItem';
 import ValueMixin from './ValueMixin';
-import { FIELD_META_PROP } from './constants';
+import createDOMForm from 'rc-form/lib/createDOMForm';

 Form.create = (o = {}) => {
  const options = {
    ...o,
    fieldNameProp: 'id',
-    fieldMetaProp: FIELD_META_PROP,
+    fieldMetaProp: '__meta',
  };
-  const formWrapper = createDOMForm(options);

-  /* eslint-disable react/prefer-es6-class */
-  return (Component) => formWrapper(React.createClass({
-    propTypes: {
-      form: PropTypes.object.isRequired,
-    },
-    childContextTypes: {
-      form: PropTypes.object.isRequired,
-    },
-    getChildContext() {
-      return {
-        form: this.props.form,
-      };
-    },
-    render() {
-      return <Component {...this.props} />;
-    },
-  }));
+  return createDOMForm(options);
 };
 Form.Item = FormItem;

--- a/components/form/index.md
+++ b/components/form/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 表单
-type: Form Controls
+type: Form Control
 cols: 1
 english: Form
 ---
@@ -34,11 +34,11 @@ english: Form

 ### Form

-**更多示例参考 [rc-form](http://react-component.github.io/form/)**。
+更多示例参考 [rc-form](http://react-component.github.io/form/)。

 | 参数      | 说明                                     | 类型       | 默认值 |
 |-----------|------------------------------------------|------------|-------|
-| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 |
+| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可 | object | 无 |
 | horizontal | 水平排列布局 | boolean  | false    |
 | inline | 行内排列布局 | boolean | false |
 | onSubmit | 数据验证成功后回调事件 | Function(e:Event) |  |
@@ -76,9 +76,9 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | resetFields | 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) |
 | getFieldProps | 用于和表单进行双向绑定，详见下方描述 | |

-### this.props.form.getFieldProps(id, options)
+#### this.props.form.getFieldProps(id, options)

-#### 特别注意
+##### 特别注意

 `getFieldProps` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534

@@ -86,8 +86,6 @@ CustomizedForm = Form.create({})(CustomizedForm);

 > 在表单中 `defaultValue` 也不应该被设置，请使用下面的 `initialValue`。

-#### getFieldProps options
-
 | 参数      | 说明                                     | 类型 | 默认值 |
 |-----------|-----------------------------------------|-----|--------|
 | options.id | 必填输入控件唯一标志 | string | |
@@ -98,7 +96,6 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | options.validateTrigger | 校验子节点值的时机 | string | 'onChange' |
 | options.rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | |
 | options.onXXX | 由于 `getFieldProps` 会占用 `onChange` 等事件（即你所设置的 `trigger` `validateTrigger`），所以如果仍需绑定事件，请在 `options` 内设置 | function | 无 |
-| options.exclusive | 是否和其他控件互斥，特别用于 Radio 单选控件 | boolean | false |

 ### Form.Item

@@ -116,6 +113,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | bool |  | false  |
 | prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string |  |  'ant-form' |

+
 <style>
 .code-box-demo .ant-form-horizontal {
  max-width: 540px;
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@@ -47,7 +47,6 @@ input[type="checkbox"] {
    cursor: @cursor-disabled;
  }
 }
-
 // These classes are used on elements with <label> descendants
 .ant-radio,
 .ant-checkbox {
@@ -81,21 +80,17 @@ input[type="checkbox"] {
    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - 3;
  }

-  &-label {
+  > label {
+    color: @label-color;
    text-align: right;
    vertical-align: middle;
    padding: 7px 0;
-    display: inline-block;

-    label {
-      color: @label-color;
-
-      &:after {
-        content: ":";
-        margin: 0 8px 0 2px;
-        position: relative;
-        top: -0.5px;
-      }
+    &:after {
+      content: ":";
+      margin: 0 8px 0 2px;
+      position: relative;
+      top: -0.5px;
    }
  }

@@ -166,11 +161,6 @@ form {
    display: block;
  }

-  .ant-checkbox-vertical + .ant-checkbox-vertical,
-  .ant-radio-vertical + .ant-radio-vertical {
-    margin-left: 0;
-  }
-
  .ant-input-number {
    margin-top: -1px;
    margin-right: 8px;
@@ -238,6 +228,11 @@ form {
    }
  }

+  .ant-input {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
  .@{form-prefix-cls}-text {
    display: inline-block;
  }
@@ -272,12 +267,12 @@ form {
    top: 0;
    right: 0;
    visibility: visible;
+    font-family: "anticon" !important;
    .square(@input-height-lg);
-    line-height: @input-height-lg;
+    line-height: @input-height-lg + 2;
    text-align: center;
    font-size: 14px;
    animation: zoomIn .3s @ease-out-back;
-    .iconfont-font("");
  }
 }

@@ -399,7 +394,7 @@ form {
  }
 }

-.ant-advanced-search-form {
+.advanced-search-form {
  .@{form-prefix-cls}-item {
    margin-bottom: 16px;
  }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
ddcat1115	e051e8ae32	format webpack.config.js	2016-06-06 15:12:38 +08:00
ddcat1115	9558aa2c64	fix #1970	2016-06-06 13:53:05 +08:00
				`@@ -1 +0,0 @@`
				`export const FIELD_META_PROP = 'data-__meta';`