format webpack.config.js

fix #1970
2026-02-16 14:22:28 +08:00 · 2016-06-06 15:12:38 +08:00 · 2016-06-06 13:53:05 +08:00
263 changed files with 2269 additions and 3491 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -28,6 +28,7 @@ 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,
--- 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
@@ -9,92 +9,6 @@ timeline: true

 ---

-## 1.6.3
-
-`2016-07-04`
-
- 修复 Transfer 的一个 unmount 的错误。[#2206](https://github.com/ant-design/ant-design/pull/2206)
-
-## 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`
@@ -143,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)
@@ -207,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';
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -61,8 +61,7 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 - [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
@@ -94,7 +94,7 @@ tsconfig.json
 - [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/index.jsx
+++ b/components/affix/index.jsx
@@ -1,6 +1,6 @@
 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';

@@ -105,8 +105,8 @@ export default class Affix extends React.Component {

  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() {
--- 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,109 +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';
-
-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,
-    });
-  }
-
-  animationEnd = () => {
-    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, ...restProps } = 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',
-    };
-
-    return (
-      <Animate
-        showProp="data-show"
-        transitionName="fade"
-        onEnd={this.animationEnd}
-        transitionAppear
-      >
-        <div data-show={this.state.visible} style={style}>
-          <div {...restProps} className={classString} onClick={this.scrollToTop}>
-            {children || defaultElement}
-          </div>
-        </div>
-      </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
@@ -104,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,
--- a/components/badge/index.jsx
+++ b/components/badge/index.jsx
@@ -46,13 +46,11 @@ export default class Badge extends React.Component {
        <Animate component=""
          showProp="data-show"
          transitionName={`${prefixCls}-zoom`}
-          transitionAppear
-        >
+          transitionAppear>
          {
            hidden ? null :
              <ScrollNumber data-show={!hidden} className={scrollNumberCls}
-                count={count} style={style}
-              />
+                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 the page,breadcrumb is right here:
+      }}>
+        点击上面的导航切换页面，面包屑在下面：
+      </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,10 +15,10 @@ ReactDOM.render(
    </Breadcrumb.Item>
    <Breadcrumb.Item href="">
      <Icon type="user" />
-      Application List
+      应用列表
    </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/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/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/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
@@ -80,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,
@@ -100,20 +99,17 @@ export default class Cascader extends React.Component {
        value={this.state.value}
        popupVisible={this.state.popupVisible}
        onPopupVisibleChange={this.handlePopupVisibleChange}
-        onChange={this.handleChange}
-      >
+        onChange={this.handleChange}>
        {children ||
          <span
            style={style}
-            className={pickerCls}
-          >
+            className={pickerCls}>
            <Input {...otherProps}
              placeholder={this.state.value && this.state.value.length > 0 ? null : placeholder}
              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/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
 ---

--- 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,22 +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 {
-      font-family: 'anticon';
-      content: '\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
@@ -123,19 +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"
-                />
+                  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)) {
@@ -78,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
@@ -94,7 +81,6 @@ export default function createPicker(TheCalendar) {
            style={props.popupStyle}
            align={props.align}
            getCalendarContainer={props.getCalendarContainer}
-            open={props.open}
            onOpen={props.toggleOpen}
            onClose={props.toggleOpen}
            onChange={this.handleChange}
@@ -105,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
 ---

--- a/components/date-picker/style/Calendar.less
+++ b/components/date-picker/style/Calendar.less
@@ -246,7 +246,6 @@
  }

  .@{calendar-prefix-cls}-clear-btn {
-    display: none;
    position: absolute;
    right: 5px;
    text-indent: -76px;
--- 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/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,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import PureRenderMixin from 'react-addons-pure-render-mixin';

 export default class Form extends React.Component {
  static defaultProps = {
@@ -23,10 +22,6 @@ export default class Form extends React.Component {
    form: React.PropTypes.object,
  }

-  shouldComponentUpdate(...args) {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
-  }
-
  getChildContext() {
    return {
      form: this.props.form,
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+function prefixClsFn(prefixCls, ...args) {
+  return args.map((s) => `${prefixCls}-${s}`).join(' ');
+}

 export default class FormItem extends React.Component {
  static defaultProps = {
@@ -25,17 +28,13 @@ 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 ? `ant-col-${span}` : '';
-    const offsetCol = offset ? ` ant-col-offset-${offset}` : '';
+    const col = span ? `col-${span}` : '';
+    const offsetCol = offset ? ` col-offset-${offset}` : '';
    return col + offsetCol;
  }

@@ -71,10 +70,11 @@ export default class FormItem extends React.Component {
  }

  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;
@@ -83,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;
  }

@@ -164,7 +164,7 @@ export default class FormItem extends React.Component {

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

--- 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/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="密码"
-        >
+          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,14 +45,12 @@ let Demo = React.createClass({
        <FormItem
          {...formItemLayout}
          label="备注"
-          help="随便写点什么"
-        >
+          help="随便写点什么">
          <Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
        </FormItem>
        <FormItem
          {...formItemLayout}
-          label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}
-        >
+          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 }}>
--- 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.md
+++ b/components/form/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 表单
-type: Form Controls
+type: Form Control
 cols: 1
 english: Form
 ---
@@ -34,7 +34,7 @@ english: Form

 ### Form

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

 | 参数      | 说明                                     | 类型       | 默认值 |
 |-----------|------------------------------------------|------------|-------|
@@ -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
@@ -161,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;
@@ -274,7 +269,7 @@ form {
    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;
@@ -399,7 +394,7 @@ form {
  }
 }

-.ant-advanced-search-form {
+.advanced-search-form {
  .@{form-prefix-cls}-item {
    margin-bottom: 16px;
  }
--- a/components/icon/index.jsx
+++ b/components/icon/index.jsx
@@ -3,5 +3,5 @@ import React from 'react';
 export default props => {
  let { type, className = '', ...other } = props;
  className += ` anticon anticon-${type}`;
-  return <i className={className.trim()} {...other} />;
+  return <i className={className} {...other} />;
 };
--- a/components/input-number/index.md
+++ b/components/input-number/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 数字输入框
-type: Form Controls
+type: Form Control
 english: InputNumber
 ---

--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -1,6 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import calculateNodeHeight from './calculateNodeHeight';

 function fixControlledValue(value) {
  if (typeof value === 'undefined' || value === null) {
@@ -9,22 +8,7 @@ function fixControlledValue(value) {
  return value;
 }

-function onNextFrame(cb) {
-  if (window.requestAnimationFrame) {
-    return window.requestAnimationFrame(cb);
-  }
-  return window.setTimeout(cb, 1);
-}
-
-function clearNextFrameAction(nextFrameId) {
-  if (window.cancelAnimationFrame) {
-    window.cancelAnimationFrame(nextFrameId);
-  } else {
-    window.clearTimeout(nextFrameId);
-  }
-}
-
-export default class Input extends Component {
+export default class Input extends React.Component {
  static defaultProps = {
    defaultValue: '',
    disabled: false,
@@ -32,47 +16,24 @@ export default class Input extends Component {
    type: 'text',
    onPressEnter() {},
    onKeyDown() {},
-    autosize: false,
  }

  static propTypes = {
-    type: PropTypes.string,
-    id: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
+    type: React.PropTypes.string,
+    id: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
    ]),
-    size: PropTypes.oneOf(['small', 'default', 'large']),
-    disabled: PropTypes.bool,
-    value: PropTypes.any,
-    defaultValue: PropTypes.any,
-    className: PropTypes.string,
-    addonBefore: PropTypes.node,
-    addonAfter: PropTypes.node,
-    prefixCls: PropTypes.string,
-    autosize: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    onPressEnter: PropTypes.func,
-    onKeyDown: PropTypes.func,
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      textareaStyles: null,
-    };
-  }
-
-  componentDidMount() {
-    this.resizeTextarea();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    // Re-render with the new content then recalculate the height as required.
-    if (this.props.value !== nextProps.value) {
-      if (this.nextFrameActionId) {
-        clearNextFrameAction(this.nextFrameActionId);
-      }
-      this.nextFrameActionId = onNextFrame(this.resizeTextarea);
-    }
+    size: React.PropTypes.oneOf(['small', 'default', 'large']),
+    disabled: React.PropTypes.bool,
+    value: React.PropTypes.any,
+    defaultValue: React.PropTypes.any,
+    className: React.PropTypes.string,
+    addonBefore: React.PropTypes.node,
+    addonAfter: React.PropTypes.node,
+    prefixCls: React.PropTypes.string,
+    onPressEnter: React.PropTypes.func,
+    onKeyDown: React.PropTypes.func,
  }

  handleKeyDown = (e) => {
@@ -82,24 +43,6 @@ export default class Input extends Component {
    this.props.onKeyDown(e);
  }

-  handleTextareaChange = (e) => {
-    this.resizeTextarea();
-    if (this.props.onChange) {
-      this.props.onChange(e);
-    }
-  }
-
-  resizeTextarea = () => {
-    const { type, autosize } = this.props;
-    if (type !== 'textarea' || !autosize || !this.refs.input) {
-      return;
-    }
-    const minRows = autosize ? autosize.minRows : null;
-    const maxRows = autosize ? autosize.maxRows : null;
-    const textareaStyles = calculateNodeHeight(this.refs.input, false, minRows, maxRows);
-    this.setState({ textareaStyles });
-  }
-
  renderLabledInput(children) {
    const props = this.props;
    const wrapperClassName = `${props.prefixCls}-group`;
@@ -144,6 +87,7 @@ export default class Input extends Component {
      [props.className]: !!props.className,
    });

+    let placeholder = props.placeholder;
    if ('value' in props) {
      props.value = fixControlledValue(props.value);
      // Input elements must be either controlled or uncontrolled,
@@ -154,26 +98,13 @@ export default class Input extends Component {
    switch (props.type) {
      case 'textarea':
        return (
-          <textarea
-            {...props}
-            style={{
-              ...props.style,
-              ...this.state.textareaStyles,
-            }}
-            className={inputClassName}
-            onKeyDown={this.handleKeyDown}
-            onChange={this.handleTextareaChange}
-            ref="input"
-          />
+          <textarea {...props} placeholder={placeholder}
+            className={inputClassName} onKeyDown={this.handleKeyDown} ref="input" />
        );
      default:
        return (
-          <input
-            {...props}
-            className={inputClassName}
-            onKeyDown={this.handleKeyDown}
-            ref="input"
-          />
+          <input {...props} placeholder={placeholder}
+            className={inputClassName} onKeyDown={this.handleKeyDown} ref="input" />
        );
    }
  }
--- a/components/input/calculateNodeHeight.js
+++ b/components/input/calculateNodeHeight.js
@@ -1,143 +0,0 @@
-// Thanks to https://github.com/andreypopp/react-textarea-autosize/
-
-/**
- * calculateNodeHeight(uiTextNode, useCache = false)
- */
-
-const HIDDEN_TEXTAREA_STYLE = `
-  min-height:0 !important;
-  max-height:none !important;
-  height:0 !important;
-  visibility:hidden !important;
-  overflow:hidden !important;
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important
-`;
-
-const SIZING_STYLE = [
-  'letter-spacing',
-  'line-height',
-  'padding-top',
-  'padding-bottom',
-  'font-family',
-  'font-weight',
-  'font-size',
-  'text-rendering',
-  'text-transform',
-  'width',
-  'text-indent',
-  'padding-left',
-  'padding-right',
-  'border-width',
-  'box-sizing',
-];
-
-let computedStyleCache = {};
-let hiddenTextarea;
-
-function calculateNodeStyling(node, useCache = false) {
-  const nodeRef = (
-    node.getAttribute('id') ||
-    node.getAttribute('data-reactid') ||
-    node.getAttribute('name')
-  );
-
-  if (useCache && computedStyleCache[nodeRef]) {
-    return computedStyleCache[nodeRef];
-  }
-
-  const style = window.getComputedStyle(node);
-
-  const boxSizing = (
-    style.getPropertyValue('box-sizing') ||
-    style.getPropertyValue('-moz-box-sizing') ||
-    style.getPropertyValue('-webkit-box-sizing')
-  );
-
-  const paddingSize = (
-    parseFloat(style.getPropertyValue('padding-bottom')) +
-    parseFloat(style.getPropertyValue('padding-top'))
-  );
-
-  const borderSize = (
-    parseFloat(style.getPropertyValue('border-bottom-width')) +
-    parseFloat(style.getPropertyValue('border-top-width'))
-  );
-
-  const sizingStyle = SIZING_STYLE
-    .map(name => `${name}:${style.getPropertyValue(name)}`)
-    .join(';');
-
-  const nodeInfo = {
-    sizingStyle,
-    paddingSize,
-    borderSize,
-    boxSizing,
-  };
-
-  if (useCache && nodeRef) {
-    computedStyleCache[nodeRef] = nodeInfo;
-  }
-
-  return nodeInfo;
-}
-
-export default function calculateNodeHeight(
-  uiTextNode,
-  useCache = false,
-  minRows = null,
-  maxRows = null
-) {
-  if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement('textarea');
-    document.body.appendChild(hiddenTextarea);
-  }
-
-  // Copy all CSS properties that have an impact on the height of the content in
-  // the textbox
-  let {
-    paddingSize, borderSize,
-    boxSizing, sizingStyle,
-  } = calculateNodeStyling(uiTextNode, useCache);
-
-  // Need to have the overflow attribute to hide the scrollbar otherwise
-  // text-lines will not calculated properly as the shadow will technically be
-  // narrower for content
-  hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
-  hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
-
-  let minHeight = -Infinity;
-  let maxHeight = Infinity;
-  let height = hiddenTextarea.scrollHeight;
-
-  if (boxSizing === 'border-box') {
-    // border-box: add border, since height = content + padding + border
-    height = height + borderSize;
-  } else if (boxSizing === 'content-box') {
-    // remove padding, since height = content
-    height = height - paddingSize;
-  }
-
-  if (minRows !== null || maxRows !== null) {
-    // measure height of a textarea with a single row
-    hiddenTextarea.value = '';
-    let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-    if (minRows !== null) {
-      minHeight = singleRowHeight * minRows;
-      if (boxSizing === 'border-box') {
-        minHeight = minHeight + paddingSize + borderSize;
-      }
-      height = Math.max(minHeight, height);
-    }
-    if (maxRows !== null) {
-      maxHeight = singleRowHeight * maxRows;
-      if (boxSizing === 'border-box') {
-        maxHeight = maxHeight + paddingSize + borderSize;
-      }
-      height = Math.min(maxHeight, height);
-    }
-  }
-  return { height, minHeight, maxHeight };
-}
--- a/components/input/demo/add-on.md
+++ b/components/input/demo/add-on.md
@@ -0,0 +1,16 @@
+---
+order: 2
+title: 前置/后置标签
+---
+
+用于配置一些固定组合。
+
+````jsx
+import { Input } from 'antd';
+
+ReactDOM.render(
+  <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
+, mountNode);
+````
+
+
--- a/components/input/demo/addon.md
+++ b/components/input/demo/addon.md
@@ -1,35 +0,0 @@
---
-order: 2
-title: 前置/后置标签
---
-
-用于配置一些固定组合。
-
-````jsx
-import { Input, Select } from 'antd';
-const Option = Select.Option;
-
-const selectBefore = (
-  <Select defaultValue="Http://" style={{ width: 80 }}>
-    <Option value="Http://">Http://</Option>
-    <Option value="Https://">Https://</Option>
-  </Select>
-);
-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(
-  <div>
-    <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
-    <div style={{ marginTop: 8 }}>
-      <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
-    </div>
-  </div>
-, mountNode);
-````
--- a/components/input/demo/autosize-textarea.md
+++ b/components/input/demo/autosize-textarea.md
@@ -1,18 +0,0 @@
---
-order: 6
-title: 适应文本高度的文本域
---
-
-`autosize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `autosize` 可以设定为一个对象，指定最小行数和最大行数。
-
-````jsx
-import { Input } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <Input type="textarea" placeholder="自适应内容高度" autosize />
-    <div style={{ margin: '24px 0' }} />
-    <Input type="textarea" placeholder="有最大高度和最小高度" autosize={{ minRows: 2, maxRows: 6 }} />
-  </div>
-, mountNode);
-````
--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@@ -3,15 +3,27 @@ order: 3
 title: 输入框组合
 ---

-输入框的组合展现。
+各类输入框的组合展现。

 ````jsx
-import { Input, Col } from 'antd';
+import { Input, Select, Col } from 'antd';
 const InputGroup = Input.Group;
+const Option = Select.Option;

 ReactDOM.render(
  <div>
    <InputGroup size="large">
+      <Input 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>
+    <InputGroup size="large" style={{ marginTop: 8 }}>
      <Col span="4">
        <Input defaultValue="0571" />
      </Col>
--- a/components/input/demo/search-input.md
+++ b/components/input/demo/search-input.md
@@ -46,8 +46,7 @@ const SearchInput = React.createClass({
      <div className="ant-search-input-wrapper" style={style}>
        <InputGroup className={searchCls}>
          <Input {...restProps} value={this.state.value} onChange={this.handleInputChange}
-            onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch}
-          />
+            onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch} />
          <div className="ant-input-group-wrap">
            <Button icon="search" className={btnCls} size={size} onClick={this.handleSearch} />
          </div>
@@ -59,7 +58,6 @@ const SearchInput = React.createClass({

 ReactDOM.render(
  <SearchInput placeholder="input search text"
-    onSearch={value => console.log(value)} style={{ width: 200 }}
-  />
+    onSearch={value => console.log(value)} style={{ width: 200 }} />
 , mountNode);
 ````
--- 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