Docs: fix markdown and remove console

Fix typo in layout demo code

.eslintrc

@@ -2,13 +2,17 @@
   "extends": ["eslint-config-airbnb"],
   "env": {
     "browser": true,
-    "node": true
+    "node": true,
+    "mocha": true,
+    "jest": true,
+    "es6": true
   },
   "ecmaFeatures": {
-    "jsx": true
+    "jsx": true,
+    "experimentalObjectRestSpread": true
   },
-  "parser": "babel-eslint",
   "plugins": [
+    "markdown-antd",
     "react",
     "babel"
   ],
@@ -25,11 +29,8 @@
     "no-param-reassign": 0,
     "no-this-before-super": 2,
     "no-undef": 2,
-    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
     "babel/object-shorthand": 0,
-    "react/jsx-boolean-value": 0,
     "react/jsx-no-duplicate-props": 2,
-    "react/prop-types": [2, { "ignore": [ "children", "className", "style" ] }],
     "react/sort-comp": 0,
     "react/wrap-multilines": 0,
     "react/no-multi-comp": 0,
@@ -38,6 +39,7 @@
     "space-before-blocks": 0,
     "space-before-function-paren": 0,
     "spaced-comment": 0,
-    "vars-on-top": 0
+    "vars-on-top": 0,
+    "id-length": 0
   }
 }

.lesshintrc

@@ -0,0 +1,12 @@
+{
+  "propertyOrdering": false,
+  "hexLength": "short",
+  "stringQuotes": false,
+  "decimalZero": false,
+  "importantRule": false,
+  "zeroUnit": "no_unit",
+  "qualifyingElement": false,
+  "duplicateProperty": false,
+  "importPath": false,
+  "finalNewline": false
+}

.lesslintrc

@@ -1,6 +0,0 @@
-{
-  "import": false,
-  "require-newline": false,
-  "leading-zero": false,
-  "single-comment": false
-}

.travis.yml

@@ -1,4 +1,4 @@
 language: node_js
 
 node_js:
-  - "iojs"
+  - "4"

CHANGELOG.md

@@ -4,14 +4,266 @@
 
 ---
 
-## 0.9.2 `2015-10-26`
+## 0.11.3 `fixing`
 
-* Tooltip 的 title 为空时不展示浮层。[9b53117](9b5311791e73270c7c16a602ac74dd59719a5f76)
-* 修复 Upload 文件列表链接的 target 属性。[340a170](340a1702b6a7b065ac02d417c891e1886dfe470d)
-* 修复 Datepicker 设置 defaultValue 时星期顺序错误的问题。[9ef1450](9ef14500f3abfcc7081f8dceab8187ec835e3918)
+- 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818)
+- 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826)
+- 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824)
+- 修复 Transfer 搜索功能失效的问题。
+- 修复 DatePicker 的 MonthPicker 样式错乱的问题。
+- 修复二维码图标，新增一个扫描图标。[#772](https://github.com/ant-design/ant-design/issues/772)
+
+## 0.11.2
+
+`2015-01-03`
+
+- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。
+- 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771)
+- 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。
+- Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu)
+- Table
+  - 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`，完善选择功能。
+  - 更新 dataSource 时，选中项现在会被清空。
+  - 修复一个全选框和禁用的选择项配合的问题。
+- 修复 `0.11.1`版本 menu 内嵌型菜单（inline）选中后关闭的问题。
+- 修复 `0.11.1`版本对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。
+- 组件和文档的样式小调整。
+
+## 0.11.1
+
+`2015-12-29`
+
+- 修复一个 Table 无法修改 pageSize 的问题。
+- 修复一个 Table 子表格展开的对齐问题。
+- 修复一个 Chrome 下部分图标左侧切边的问题。
+- 修复搜索输入框在表单下使用的样式问题。[#762](https://github.com/ant-design/ant-design/issues/762)
+
+## 0.11.0
+
+`2015-12-28`
+
+- **移除默认加载的样式文件，样式现在需要独立加载。**
+- 按钮圆角调整为 `6px`。
+- Modal、Popconfirm、Table、TimePicker 支持国际化配置。
+- 新增虚线型按钮。
+- 新增 [通用搜索框](http://ant.design/components/form/#demo-search-input) 样式。
+- 新增图片上传列表样式[演示](http://ant.design/components/upload/#demo-picture-style)。
+- **部分设计资源开放 [下载](http://ant.design/spec/tools)，包括 Axure 组件库和 Iconfont 字体打包文件。**
+- 新增 [吊顶规范](http://ant.design/spec/layout/#demo-ceiling)。
+- 组件演示页面增加锚点。
+- 新增穿梭框 [Transfer](http://ant.design/components/transfer/) 组件。
+- 新增小尺寸的 Switch 开关组件。
+- 增加更多的图标。[#](https://github.com/ant-design/ant-design/commit/087c64649d73206a4d62e52f9b3f6042c1d28608#diff-dc1a1f4794c1c4ee3b083381d4c50c47R180)
+- 全局微调了警告和错误状态色。
+- Select
+  - 选中样式进行了调整。
+  - 在标签/多选模式下，选中或删除选项增加了动画效果。
+- Alert
+  - 默认样式不展示图标。
+  - 带描述的警告框图标改为描线图标。
+  - `type="warn"` 图标修改。
+- Dropdown 新增带菜单触发的按钮 `Dropdown.Button`。[演示](http://ant.design/components/dropdown/#demo-dropdown-button)
+- Menu
+  - 新增 `Menu.ItemGroup` 用于把菜单项分组。
+  - onOpen 和 onClose 函数的参数新增了 `keyPath` 数据，可用于制作手风琴类型的菜单。
+- Badge
+  - 徽章可以独立使用。[演示](http://ant.design/components/badge/#demo-no-wrapper)
+  - 支持设置封顶的 `99+` 的数字。[演示](http://ant.design/components/badge/#demo-overflow)
+- Slider
+  - 增加 `onAfterChange` 事件。[演示](http://ant.design/components/slider/#demo-event)
+  - 现在设置 `tipFormatter={null}` 可以隐藏 `Tooltip`。
+  - 双滑块拖动体验优化，一个滑块在拖动时可以直接跨过另一滑块。
+- Breadcrumb 可以自定义分隔符。[演示](http://ant.design/components/breadcrumb/#demo-separator)
+- Popconfirm 添加 `visible` 属性，使其可以控制是否显示。[演示](http://ant.design/components/popconfirm/#demo-dynamic-trigger)
+- 修复 Icon `ref` 引起的报错。
+- 修复 Calendar 组件无法切换年/月的问题。[#757](https://github.com/ant-design/ant-design/issues/757)
+- Checkbox 新增 `Checkbox.Group`，现可以方便的 [生成一组选择框](http://ant.design/components/checkbox/#demo-group)
+- Tabs
+  - 新增 [卡片式页签](http://ant.design/components/tabs/#demo-card)。
+  - 调整 [新增和关闭页签](http://ant.design/components/tabs/#demo-editable-card) 的样式。
+  - 现在支持页签的四个位置 `tabPosition="top|right|bottom|left"`。
+  - 移除 `animation` 属性，并在 `tabPosition="top|bottom"` 时默认启用切换动画。
+- Timepicker
+  - **重命名为 TimePicker。**
+  - 新增 `value` 属性。
+  - 新增属性 `disabledHours` `disabledMinutes` `disabledSeconds`。[演示](http://ant.design/components/time-picker/#picker-demo-disable-options)
+  - 移除 `hourOptions` `minuteOptions` `secondOptions`，新增 `hideDisabled` 属性用于替代。
+- Datepicker
+  - **重命名为 DatePicker。**
+  - 新增 [日期范围选择控件](http://ant.design/components/date-picker/#picker-demo-range)。
+  - 修改 `showTime` 的交互。[演示](http://ant.design/components/date-picker/#picker-demo-time)
+  - 修正为受控组件。
+- Table
+  - **移除 `dataSource` 的远程模式。**
+  - 新增 [紧凑型表格](http://ant.design/components/table/#demo-size)。
+  - 允许监听分页的 `onShowSizeChange`。[演示](http://ant.design/components/table/#demo-paging)
+  - 优化表格对树形数据的显示。[演示](http://ant.design/components/table/#demo-indent-size)
+  - 优化了筛选菜单的样式，并添加了最大高度。[演示](http://ant.design/components/table/#demo-head)。
+  - 修复 column.key 设置失效的问题。[#642](https://github.com/ant-design/ant-design/issues/642)
+  - 修复设置时 rowKey 时单选会导致全部选中的问题。[#697](https://github.com/ant-design/ant-design/issues/697)
+  - 修复一个列重新渲染导致选项错乱的问题。[#418](https://github.com/ant-design/ant-design/issues/418#issuecomment-163093580)
+  - 修复选择列无法设置宽度的问题。[#649](https://github.com/ant-design/ant-design/issues/649)
+- Form
+  - 修复了 Textarea 无法输入的问题。[#646](https://github.com/ant-design/ant-design/issues/646)
+  - 修复了 Textarea 设置 `cols` 和 `rows` 属性失效的问题。[#694](https://github.com/ant-design/ant-design/issues/694)
+  - 修复无法设置 `className` 的问题。[#711](https://github.com/ant-design/ant-design/issues/711)
+- 修复 Upload 组件在 `beforeUpload` 返回 `false` 后依然更新上传列表问题。[#757](https://github.com/ant-design/ant-design/issues/757)
+- 工具
+  - 替换 `antd build` 为 [atool-build](https://github.com/ant-tool/atool-build)，重构并改善了 webpack 配置的自定义方式。
+  - 替换 `antd server` 为 [dora](https://github.com/dora-js/dora)，一个完全插件化的开发服务器，支持[代理转发和数据 Mock](https://github.com/dora-js/dora-plugin-proxy)、[atool-build](https://github.com/dora-js/dora-plugin-atool-build)、[热替换](https://github.com/dora-js/dora-plugin-hmr)。
+  - 新增 babel 插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)，转换 `import {Button} from 'antd'` 为 `import Button from 'antd/lib/button'`。
+  - 发布了 `antd-init@0.6.x`，支持以上改动。
+
+> [0.11 升级指南](http://ant.design/docs/upgrade-notes#0-10-gt-0-11)
+
+---
+
+## 0.10.5
+
+`2016-01-04`
+
+- 修复 Table 更新 dataSource 后，选中项没有置空的问题。[#793](https://github.com/ant-design/ant-design/issues/793)
+
+## 0.10.4
+
+`2015-11-30`
+
+- 将 media-match 加入默认的 polyfill 文件中。[5626974](https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7)
+- 修复了 [MonthPicker](http://ant.design/components/datepicker/#demo-month-picker) 报错问题，并增加了相关演示。
+- 修复 RadioGroup 中的 Radio/RadioButton 无法单独设置 disabled 的问题。[#603](https://github.com/ant-design/ant-design/issues/603)
+- 修复今天是不可选日期时的一个展示问题。[#606](https://github.com/ant-design/ant-design/issues/606)
+
+
+## 0.10.3
+
+`2015-11-26`
+
+- 和 0.9.x 保持一致默认引入 `antd/lib/index.css`（而非 less 文件），方便第三方引用。引用 less 文件进行变量配置的可自行 `import 'antd/style/index.less'`。[#593](https://github.com/ant-design/ant-design/issues/593)
+- 升级 Pagination，增加 `defaultCurrent` 属性，修正原来的 `current` 为[完全受控属性](https://facebook.github.io/react/docs/forms.html#controlled-components)。
+- Pagination 的改动也修复了 Table 切换数据源后回到[第一页的例子](http://ant.design/components/table/#demo-ajax)。
+- 对演示和样式代码增加了 lint 检查。
+
+
+## 0.10.2
+
+`2015-11-25`
+
+- Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
+- 优化 Badge 动画效果。
+- 修复以下问题：
+  - 文本域的表单校验无法重置。
+  - 设置 Upload 的 `multiple` 为 `true` 时，未显示每个文件的上传进度。
+  - Breadcrumb 配合 Router 的时候如果没有 `breadcrumbName` 会抛错。
+  - InputNumber 同时设置 `size` `className` 时会有冲突。
+
+
+## 0.10.1
+
+`2015-11-20`
+
+- 修改内部组件的引用结构，方便工具优化。[#566](https://github.com/ant-design/ant-design/pull/566)
+  - 移除了演示中没有使用过的 `antd.ButtonGroup`，依然用 `const ButtonGroup = Button.Group` 来使用。
+  - Form 和 Input 目录分离，`import { Form, Input } from 'ant/lib/form'` 的引用方式被废弃。
+
+     现在可以 `import Form from 'ant/lib/form'` 和 `import Input from 'ant/lib/input'`。
+
+     原有的 `import { Form, Input } from 'antd'` 则不受影响。
+
+- 修复 Datepicker 的 `style` 和 `calendarStyle` 属性失效的问题，并将 `calendarStyle` 更名为 `popupStyle`。
+
+
+## 0.10.0
+
+`2015-11-20`
+
+- 全面兼容 `react@0.14.x`。
+- 新增 [时间选择 Timepicker](http://ant.design/components/timepicker/)、[日历 Calendar](http://ant.design/components/calendar/)、[加载中 Spin](http://ant.design/components/spin/) 组件。
+- [Button](http://ant.design/components/button/)、[Iconfont](http://ant.design/components/icon/)、[Layout](http://ant.design/components/layout/)、[Form](http://ant.design/components/form/)、[Input](http://ant.design/components/form/#demo-input) 等样式模块改造为 React 组件。
+- 新增 [Queue-anim](http://ant.design/components/queue-anim/) 组件，更换了原来的 enter-animation。
+- 全新的[字体图标](/components/icon)。
+	- 全面更新视觉风格，补充更多图标。[#313](https://github.com/ant-design/ant-design/issues/313)
+	- 调整字体基线，告别对图标位置的特殊调节。(感谢 [iconfont.cn](http://iconfont.cn) 的鼎力支持)
+- Datepicker、Dropdown、Select、Popover、Popconfirm 等浮层组件添加在空间不足的情况下自动调整位置功能。
+- Popover、Tooltip、Popconfirm 组件支持 12 个方向。[#312](https://github.com/ant-design/ant-design/issues/312)
+- 优先使用苹方字体。
+- 统一 size 属性的可选值为 `small` `default` `large`。
+- 开始初步补充[测试用例](https://github.com/ant-design/ant-design/tree/1a3a19793c0791201666fdcf0dbd12a30fad4be0/tests)。
+- 提供主色系更换的[方案](https://github.com/ant-tool/xtool/tree/master/examples/customize-antd-theme)。[#384](https://github.com/ant-design/ant-design/issues/384)
+- 添加[色彩换算工具](http://ant.design/spec/colors#色彩换算工具)。
+- 添加布局和导航规范，以及[常用布局](http://ant.design/spec/layout/)。
+- 文档支持标题和演示的锚点，方便分享文档和演示代码。
+- 提供多版本的文档，在[主站](http://ant.design)的右下角提供切换按钮。
+- [antd-bin](https://github.com/ant-tool/xtool) 升级到 `0.10`。
+	- 拆分出 [antd-init](https://github.com/ant-design/antd-init) 和 [antd-build](https://github.com/ant-design/antd-build)。
+	- 提供代理功能。
+	- 提供 UI 测试功能。
+
+#### 组件变更
+
+- Table
+	- 支持单选。[演示](http://ant.design/components/table/#demo-row-selection-radio-props)
+	- 选择模式支持默认选中和不可用效果。[演示](/components/table/#demo-row-selection-props)
+	- 列支持了 `colSpan` 和 `rowSpan` 配置。[演示](/components/table/#demo-colspan-rowspan)
+	- 新增 `loading` 属性。
+	- 筛选增加 `filterMultiple` 属性，支持单选的配置。
+- Datepicker
+	- 添加国际化支持。
+	- 添加手动输入和清除功能。
+	- 优化了视觉样式。
+	- 修复不标准的日期格式导致显示错误的问题。
+	- 用 `onChange` 属性代替 `onSelect` 属性。
+- Validation 修复了 对 Datepicker、Input-number、Select 的支持，并添加了相关演示。
+- Carousel 的依赖 react-slick 升级到 0.9.x，相关 API 也相应更新。
+- Tree 组件支持完全受控模式。[#397](https://github.com/ant-design/ant-design/issues/397)
+- Input Number
+	- 组件输入体验优化，现在可以键入任意字符，失焦时格式化为合法值。
+	- 修复不支持小数 step 的问题。[#530](https://github.com/ant-design/ant-design/issues/530)
+- Tabs 新增[垂直页签功能](http://ant.design/components/tabs/#demo-vertical-left)。
+- Upload 组件视觉优化，新增高级浏览器下的上传进度展示。[#311](https://github.com/ant-design/ant-design/issues/311)
+- Menu
+	- 视觉效果大幅优化。
+	- 新增 [dark 主题](http://ant.design/components/menu/#demo-theme) 的样式。
+	- 修复一个链接点击区域的问题。[#535](https://github.com/ant-design/ant-design/issues/535)
+- Dropdown 用 onClick 代替 onSelect 作为推荐的使用方式，因为原有的 onSelect 只在变化时触发。
+- Slider
+	- 新增[双滑块功能](http://ant.design/components/slider/#demo-range)。
+	- 优化 marks 属性的使用逻辑，使其可以和具体数值进行绑定。[slider#26](https://github.com//react-component/slider/issues/26)
+	- 属性命名优化，用 `dots` 代替了 `withDots` 属性，用 `included` 代替了 `isIncluded`。
+- Badge 当 `count` 为 0 时不展示。
+- Progress 新增 `format` 属性，能够自定义展示的进度文案。
+- Modal 新增 `confirmLoading` 属性。
+- 新增 Radio.Button 的失效样式。
+- 提供 IE8 下的圆角按钮[兼容方案](http://ant.design/components/button/#ie8-border-radius-support)。
+- `antd.Notification()` 修正为 `antd.notification()`。
+- 另有巨量样式的修复和优化。
+
+> 备注：
+>
+> - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
+> - [0.10 升级指南](http://ant.design/docs/upgrade-notes#0-0-gt-0-10)
+
+---
+
+## 0.9.3 ~ 0.9.5
+
+`2015-11-04`
+
+* 增加对 React 版本的检测提示机制，0.9.x 序列只能使用 `react@~0.13.3`。
+
+
+## 0.9.2
+
+`2015-10-26`
+
+* Tooltip 的 title 为空时不展示浮层。[9b53117](https://github.com/ant-design/ant-design/commit/9b5311791e73270c7c16a602ac74dd59719a5f76)
+* 修复 Upload 文件列表链接的 target 属性。[340a170](https://github.com/ant-design/ant-design/commit/340a1702b6a7b065ac02d417c891e1886dfe470d)
+* 修复 Datepicker 设置 defaultValue 时星期顺序错误的问题。[9ef1450](https://github.com/ant-design/ant-design/commit/9ef14500f3abfcc7081f8dceab8187ec835e3918)
 * 修复一些小的样式问题。
 
-## 0.9.1 `2015-09-26`
+
+## 0.9.1
+
+`2015-09-26`
 
 * 添加 Pagination pageSize 发生变化的回调。[#317](https://github.com/ant-design/ant-design/issues/317)
 * 升级依赖 rc-upload 到 1.6.x，修复 IE8/9 下的兼容性问题。
@@ -30,7 +282,9 @@
 * 部分组件交互和视觉效果修正。
 
 
-## 0.9.0 `2015-09-14`
+## 0.9.0
+
+`2015-09-14`
 
 * 新增 [timeline](components/timeline/) 和 [badge](components/badge/) 组件。
 * 优化弹出层类组件的动画效果，使其更加流畅。
@@ -69,7 +323,9 @@
   * 支持和 react-router 结合使用。
 
 
-## 0.8.0 `2015-08-25`
+## 0.8.0
+
+`2015-08-25`
 
 这个版本是第一个稳定版，组件经过三期迭代，基本到齐，并有大量改进和变化，不向下兼容。
 
@@ -81,12 +337,16 @@
 * 排查并修复 IE 和 safari 等浏览器的兼容问题。
 * 大量代码重构，演示代码补充，文档更新、以及样式上的优化。
 
-## 0.7.3 `2015-07-30`
+## 0.7.3
+
+`2015-07-30`
 
 * 小幅重构了 Table 分页，修复了分页导致的数据不展示的问题。
 * 更新了部分文档。
 
-## 0.7.2 `2015-07-27`
+## 0.7.2
+
+`2015-07-27`
 
 * 修复本地模式下 pagination 为 false 时数据无法显示的 [问题](https://github.com/ant-design/ant-design/commit/1954586665e59031eae5d2c8b2cdb08f83d64fcb)。
 * 重构了 message 组件。
@@ -94,14 +354,18 @@
 * 部分代码切换至 ES6 模式。
 * 修正了部分组件的样式和演示，优化部分动画。
 
-## 0.7.1 `2015-07-22`
+## 0.7.1
+
+`2015-07-22`
 
 * 修复了 Table 组件的 pagination 为 false 时分页未消失的 [问题](https://github.com/ant-design/ant-design/commit/01a6c0f1e6707b72a54ef30d073d148a87b391a8)。
 * select 组件[选中后默认显示标签内容](https://github.com/ant-design/ant-design/issues/50)（原来是显示 value）。
 * 修正了部分组件的样式和演示。
 * 打包文件为 [umd 模式](https://github.com/ant-design/ant-design/commit/9b7b940cb417429d8fc57d83e252991b043d0f2f)。
 
-## 0.7.0 `2015-07-21`
+## 0.7.0
+
+`2015-07-21`
 
 * 第一个公开版本，发布 `layout`、`iconfont`、`button`、`form`、`checkbox`、`radio`、`switch`、`slider`、`input-number`、`datepicker`、`select`、`tabs`、`steps`、`breadcrumb`、`collapse`、`pagination`、`modal`、`message`、`dropdown`、`popover`、`popconfirm`、`tooltip`、`progress`、`table` 等组件。
 * 发布 [Ant Design 首页](http://ant.design/) 和入门文档。

CONTRIBUTING.md

@@ -0,0 +1,52 @@
+# Contributing to Ant Design
+
+The following is a set of guidelines for contributing to Ant Design. Please spend several minutes in reading these guidelines before you create an issue or pull request.
+
+Anyway, these are just guidelines, not rules, use your best judgment and feel free to propose changes to this document in a pull request.
+
+
+## Do your homework before asking a question
+
+It's a great idea to read Eric Steven Raymond's [How To Ask Questions The Smart Way](http://www.catb.org/esr/faqs/smart-questions.html) twice before asking a question. But if you are busy now, I recommend to read [Don't post homework questions](http://www.catb.org/esr/faqs/smart-questions.html#homework) first.
+
+The following guidelines are about *How to avoid Homework Questions*.
+
+### 1. Read the documentation.
+
+It sad but true that someone just glance(not read) [Ant Design's documentation](http://ant.design/). Please read the documentation closely. What's more, you can modify and run our demo with [JSFiddle](http://jsfiddle.net/9zrstuto/70/). It's helpful to understand our documentation.
+
+Tips: choose the corresponding documentation with versions selector which in the bottom-right corner.
+
+### 2. Make sure that your question is about Ant Design, not React
+
+Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentaion](http://facebook.github.io/react/docs/getting-started.html) or just Google(not Baidu, seriously) your questions with keywork *React* first. If you are sure that your question is about Ant Design, go ahead.
+
+### 3. Read the FAQ and search the issues list of Ant Design
+
+Your questions may be asked and solved by others. So please spend several minutes on searching. Remember [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), both code and questions.
+
+P.S.
+1. [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
+1. [Issues list](https://github.com/ant-design/ant-design/issues)
+
+
+## Providing a demo while reporting a bug
+
+It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [Fiddle](http://jsfiddle.net/0dso5y0x/) and re-produce the bug you met. Then, create an issue like this [example](https://github.com/ant-design/ant-design/issues/new?title=%E8%AF%B7%E5%A1%AB%E5%86%99%E7%AE%80%E6%B4%81%E6%9C%89%E6%95%88%E7%9A%84%E6%A0%87%E9%A2%98&body=**%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0**%0A%0A%EF%BC%88%E6%8F%8F%E8%BF%B0%E4%B8%80%E4%B8%8B%E9%97%AE%E9%A2%98%EF%BC%89%0A%0A**%E5%8F%91%E7%94%9F%E7%8E%AF%E5%A2%83**%0A%0A-%20antd%20%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E5%9C%A8%E7%BA%BF%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80%EF%BC%9A%0A%0A**%E9%87%8D%E7%8E%B0%E6%AD%A5%E9%AA%A4**%0A%0A1.%20...%0A2.%20...%0A). The most important thing is: double check before claiming that you have found a bug.
+
+
+## Tips about Feature Request
+
+If you believe that Ant Design should provide some features, but it does not. You could create an issue to discuss. However, Ant Design is not Swiss Army Knife, there are some features which Ant Design will not support:
+
+1. Request or operate data
+
+
+## Tips about Pull Request
+
+It's welcomed to pull request. And there are some tips about that:
+
+1. It is a good habit to create a feature request issue to disscuss whether the feature is necessary before you implement it.
+1. Run `npm run lint` and fix those errors before committing in order to keep consistent code style.
+1. Rebase before creating a PR to keep commit history clear.
+1. Add some descriptions and refer relative issues for you PR.

README-en_US.md

@@ -1,40 +0,0 @@
-# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-
-An enterprise-class UI design language and React-based implementation.
-
-![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)
-
-## Features
-
-- An enterprise-class graphical design language and framework for financial applications
-- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
-- A Component development model based on React.
-- Backed by the npm ecosystem.
-- webpack-based debug builds supporting ES6
-
-
-## Usage example
-
-```jsx
-import { Datepicker } from 'antd';
-React.render(<Datepicker />, mountNode);
-```
-
-## Links
-
-- [Home page](http://ant.design/)
-- [Documentation](http://ant.design/docs/introduce)
-- [Components](http://ant.design/components/)
-- [Build/Debug tools](https://github.com/ant-design/antd-bin)
-- [Roadmap](https://github.com/ant-design/ant-design/issues/9)
-- [ChangeLog](CHANGELOG.md)
-- [React modules](http://react-component.github.io/)
-- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-code-style.md)
-- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-design.md)
-- [Developer Instruction](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)
-- [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)
-
-
-## Contributing
-
-We welcome all contributions, please submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues).

README-zh_CN.md

@@ -0,0 +1,59 @@
+<p align="center">
+  <a href="http://ant.design">
+    <img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
+  </a>
+</p>
+
+# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
+一套企业级的 UI 设计语言和 React 实现。
+
+## 特性
+
+- 提炼和服务企业级中后台产品的交互语言和视觉风格。
+- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
+- 基于 npm + webpack + babel 的工作流，支持 ES2015。
+
+
+## 安装
+
+```bash
+npm install antd
+```
+
+## 示例
+
+```jsx
+import { DatePicker } from 'antd';
+ReactDOM.render(<DatePicker />, mountNode);
+```
+
+引入样式：
+
+```jsx
+import 'antd/lib/index.css';  // or 'antd/style/index.less'
+```
+
+按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)。
+
+
+## 浏览器支持
+
+现代浏览器和 IE8 及以上。
+
+## 链接
+
+- [首页](http://ant.design/)
+- [React UI 库](http://ant.design/docs/react/introduce)
+- [修改记录](CHANGELOG.md)
+- [开发脚手架](https://github.com/ant-design/antd-init/)
+- [本地调试工具集](https://github.com/dora-js/dora/)
+- [React 组件](http://react-component.github.io/)
+- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
+- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
+- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
+- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
+
+## 如何贡献
+
+我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。

README.md

@@ -1,43 +1,60 @@
-# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-
-一套企业级的 UI 设计语言和 React 实现。
-
 <p align="center">
   <a href="http://ant.design">
-    <img width="360" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
+    <img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
   </a>
 </p>
 
-## 特性
+# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-- 提炼自企业级后台产品的交互语言和视觉风格。
-- [React Component](http://react-component.github.io/badgeboard/) 基础上二次封装的丰富实用的 UI 组件。
-- 基于 React 的组件化开发模式。
-- 背靠 npm 生态圈。
-- 基于 webpack 的调试构建方案，支持 ES6。
+An enterprise-class UI design language and React-based implementation.
 
+## Features
 
-## 示例
+- An enterprise-class graphical design language and framework for financial applications.
+- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
+- A npm + webpack + babel workflow, supporting ES2015.
 
-```jsx
-import { Datepicker } from 'antd';
-React.render(<Datepicker />, mountNode);
+## Install
+
+```bash
+npm install antd
 ```
 
-## 链接
+## Usage example
 
-- [首页](http://ant.design/)
-- [文档](http://ant.design/docs/introduce)
-- [组件](http://ant.design/components/)
-- [构建调试 antd-bin](https://github.com/ant-design/antd-bin)
-- [开发计划](https://github.com/ant-design/ant-design/issues/9)
-- [修改记录](CHANGELOG.md)
-- [React 模块](http://react-component.github.io/)
-- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
-- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
-- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
-- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
+```jsx
+import { DatePicker } from 'antd';
+ReactDOM.render(<DatePicker />, mountNode);
+```
 
-## 如何贡献
+Import style:
 
-我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。
+```jsx
+import 'antd/lib/index.css';  // or 'antd/style/index.less'
+```
+
+Use components on demand by writing as `import DatePicker from 'antd/lib/date-picker'` or use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd).
+
+
+## Browser Support
+
+Normal browsers and Internet Explorer 8+.
+
+
+## Links
+
+- [Home page](http://ant.design/)
+- [React UI library](http://ant.design/docs/react/introduce)
+- [ChangeLog](CHANGELOG.md)
+- [Scaffold tool](https://github.com/ant-design/antd-init/)
+- [Debug tools set](https://github.com/dora-js/dora)
+- [React components](http://react-component.github.io/)
+- [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/%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)
+- [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)
+
+
+## Contributing
+
+We welcome all contributions, please submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues).

components/affix/demo/basic.md

@@ -7,11 +7,11 @@
 ---
 
 ````jsx
-var Affix = antd.Affix;
+import { Affix, Button } from 'antd';
 
-React.render(
+ReactDOM.render(
   <Affix>
-    <button className="ant-btn ant-btn-primary">固定在顶部</button>
+    <Button type="primary">固定在顶部</Button>
   </Affix>
-, document.getElementById('components-affix-demo-basic'));
+, mountNode);
 ````

components/affix/demo/offset.md

@@ -7,11 +7,11 @@
 ---
 
 ````jsx
-var Affix = antd.Affix;
+import { Affix, Button } from 'antd';
 
-React.render(
+ReactDOM.render(
   <Affix offset={75}>
-    <button className="ant-btn ant-btn-primary">固定在距离顶部 75px 的位置</button>
+    <Button type="primary">固定在距离顶部 75px 的位置</Button>
   </Affix>
-, document.getElementById('components-affix-demo-offset'));
+, mountNode);
 ````

components/affix/index.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import rcUtil from 'rc-util';
+import classNames from 'classnames';
 
 function getScroll(w, top) {
   let ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
@@ -52,7 +54,7 @@ let Affix = React.createClass({
   handleScroll() {
     let affix = this.state.affix;
     let scrollTop = getScroll(window, true);
-    let elemOffset = getOffset(this.getDOMNode());
+    let elemOffset = getOffset(ReactDOM.findDOMNode(this));
 
     if (!affix && (elemOffset.top - this.props.offset) < scrollTop) {
       this.setState({
@@ -60,7 +62,7 @@ let Affix = React.createClass({
         affixStyle: {
           top: this.props.offset,
           left: elemOffset.left,
-          width: this.getDOMNode().offsetWidth
+          width: ReactDOM.findDOMNode(this).offsetWidth
         }
       });
     }
@@ -88,7 +90,7 @@ let Affix = React.createClass({
   },
 
   render() {
-    const className = rcUtil.classSet({
+    const className = classNames({
       [this.props.className]: this.props.className,
       'ant-affix': this.state.affix
     });

components/alert/demo/basic.md

@@ -7,8 +7,8 @@
 ---
 
 ````jsx
-var Alert = antd.Alert;
+import { Alert } from 'antd';
 
-React.render(<Alert message="成功提示的文案" type="success" />
-, document.getElementById('components-alert-demo-basic'));
+ReactDOM.render(<Alert message="成功提示的文案" type="success" />
+, mountNode);
 ````

components/alert/demo/closable.md

@@ -1,19 +1,19 @@
 # 可关闭的警告提示
 
-- order: 1
+- order: 2
 
 显示关闭按钮，点击可关闭警告提示。
 
 ---
 
 ````jsx
-var Alert = antd.Alert;
+import { Alert } from 'antd';
 
-var onClose = function(e) {
+const onClose = function(e) {
   console.log(e, '我要被关闭啦！');
 };
 
-React.render(<div>
+ReactDOM.render(<div>
   <Alert message="警告提示的文案"
     type="warn"
     closable
@@ -23,5 +23,5 @@ React.render(<div>
     type="error"
     closable
     onClose={onClose} />
-</div>, document.getElementById('components-alert-demo-closable'));
-````
+</div>, mountNode);
+````

components/alert/demo/close-text.md

@@ -0,0 +1,15 @@
+# 自定义关闭
+
+- order: 5
+
+可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
+
+---
+
+````jsx
+import { Alert } from 'antd';
+
+ReactDOM.render(
+<Alert message="消息提示的文案" type="info" closeText="不再提醒" />
+, mountNode);
+````

components/alert/demo/close-type.md

@@ -1,16 +0,0 @@
-# 自定义关闭
-
-- order: 4
-
-可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
-
----
-
-````jsx
-var Alert = antd.Alert;
-var link = <a href="javascript:;">不再提醒</a>
-
-React.render(
-<Alert message="消息提示的文案" type="info" closeText={link} />
-, document.getElementById('components-alert-demo-close-type'));
-````

components/alert/demo/description.md

@@ -1,15 +1,15 @@
 # 含有辅助性文字介绍
 
-- order: 2
+- order: 3
 
 含有辅助性文字介绍的警告提示。
 
 ---
 
 ````jsx
-var Alert = antd.Alert;
+import { Alert } from 'antd';
 
-React.render(<div>
+ReactDOM.render(<div>
   <Alert message="成功提示的文案"
     description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
     type="success" />
@@ -24,5 +24,5 @@ React.render(<div>
     message="错误提示的文案"
     description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
     type="error" />
-</div>, document.getElementById('components-alert-demo-description'));
+</div>, mountNode);
 ````

components/alert/demo/icon.md

@@ -0,0 +1,36 @@
+# 图标
+
+- order: 4
+
+可口的图标让信息类型更加醒目。
+
+---
+
+````jsx
+import { Alert } from 'antd';
+
+ReactDOM.render(<div>
+  <Alert message="成功提示的文案" type="success" showIcon />
+  <Alert message="消息提示的文案" type="info" showIcon />
+  <Alert message="警告提示的文案" type="warn" showIcon />
+  <Alert message="错误提示的文案" type="error" showIcon />
+  <Alert message="成功提示的文案"
+    description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
+    type="success"
+    showIcon />
+  <Alert message="消息提示的文案"
+    description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
+    type="info"
+    showIcon />
+  <Alert
+    message="警告提示的文案"
+    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
+    type="warn"
+    showIcon />
+  <Alert
+    message="错误提示的文案"
+    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
+    type="error"
+    showIcon />
+</div>, mountNode);
+````

components/alert/demo/style.md

@@ -1,19 +1,19 @@
 # 四种样式
 
-- order: 3
+- order: 1
 
 共有四种样式`success`、`info`、`warn`、`error`。
 
 ---
 
 ````jsx
-var Alert = antd.Alert;
+import { Alert } from 'antd';
 
-React.render(<div>
+ReactDOM.render(<div>
   <Alert message="成功提示的文案" type="success" />
   <Alert message="消息提示的文案" type="info" />
   <Alert message="警告提示的文案" type="warn" />
   <Alert message="错误提示的文案" type="error" />
 </div>,
-document.getElementById('components-alert-demo-style'));
+mountNode);
 ````

components/alert/index.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
+import Icon from '../icon';
+import classNames from 'classnames';
 
 export default React.createClass({
   getDefaultProps() {
     return {
-      prefixCls: 'ant-alert'
+      prefixCls: 'ant-alert',
+      showIcon: false,
+      onClose() {}
     };
   },
   getInitialState() {
@@ -14,7 +19,8 @@ export default React.createClass({
     };
   },
   handleClose(e) {
-    let dom = React.findDOMNode(this);
+    e.preventDefault();
+    let dom = ReactDOM.findDOMNode(this);
     dom.style.height = dom.offsetHeight + 'px';
     // Magic code
     // 重复一次后才能正确设置 height
@@ -23,9 +29,7 @@ export default React.createClass({
     this.setState({
       closing: false
     });
-    if (this.props.onClose) {
-      this.props.onClose.call(this, e);
-    }
+    this.props.onClose.call(this, e);
   },
   animationEnd() {
     this.setState({
@@ -34,62 +38,60 @@ export default React.createClass({
     });
   },
   render() {
-    let iconClass = this.props.description ?
-      'ant-alert-with-description-icon anticon-' : 'ant-alert-icon anticon-';
-    switch (this.props.type) {
+    let {
+      closable, description, type, prefixCls, message, closeText, showIcon
+    } = this.props;
+
+    let iconType = '';
+    switch (type) {
     case 'success':
-      iconClass += 'check-circle';
+      iconType = 'check-circle';
       break;
     case 'info':
-      iconClass += 'info-circle';
+      iconType = 'info-circle';
       break;
     case 'error':
-      iconClass += 'exclamation-circle';
+      iconType = 'exclamation-circle';
       break;
     case 'warn':
-      iconClass += 'question-circle';
+      iconType = 'exclamation-circle';
       break;
     default:
-      iconClass += 'default';
+      iconType = 'default';
     }
-    let html;
-    let closeName = !this.state.closing ? ' ' + this.props.prefixCls + '-close' : '';
-    if (this.props.description) {
-      let close = this.props.closable ?
-        <a onClick={this.handleClose} className={'ant-alert-with-description-close-icon'}>
-          <span className="ant-alert-with-description-close-icon-x"></span>
-        </a> : '';
-      html = <div data-show={this.state.closing} className={'ant-alert-with-description ant-alert-with-description-' + this.props.type + closeName}>
-        <i className={'anticon ' + iconClass}></i>
-        <p className={'ant-alert-with-description-message'}>{this.props.message}</p>
-        <span className={'ant-alert-with-description-description'}>{this.props.description}</span>
-          {close}
-      </div>;
-    } else {
-      if (this.props.closeText) {
-        html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
-          <i className={'anticon ' + iconClass}></i>
-          <span className={'ant-alert-description'}>{this.props.message}</span>
-          <span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
-        </div>;
-      } else {
-        let close = this.props.closable ?
-          <a onClick={this.handleClose} className={'ant-alert-close-icon'}>
-            <span className="ant-alert-close-icon-x"></span>
-          </a> : '';
-        html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
-          <i className={'anticon ' + iconClass}></i>
-          <span className={'ant-alert-description'}>{this.props.message}</span>
-          {close}
-        </div>;
-      }
+
+    // use outline icon in alert with description
+    if (!!description) {
+      iconType += '-o';
     }
-    return this.state.closed ? null : <Animate
-      component=""
-      showProp="data-show"
-      transitionName="slide-up"
-      onEnd={this.animationEnd}>
-      {html}
-    </Animate>;
+
+    let alertCls = classNames({
+      [prefixCls]: true,
+      [prefixCls + '-' + type]: true,
+      [prefixCls + '-close']: !this.state.closing,
+      [prefixCls + '-with-description']: !!description,
+      [prefixCls + '-no-icon']: !showIcon,
+    });
+
+    // closeable when closeText is assigned
+    if (closeText) {
+      closable = true;
+    }
+
+    return this.state.closed ? null : (
+      <Animate component=""
+               showProp="data-show"
+               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>
+          <span className={prefixCls + '-description'}>{description}</span>
+          {closable ? <a onClick={this.handleClose} className={prefixCls + '-close-icon'}>
+            {closeText || <Icon type="cross" />}
+          </a> : null}
+        </div>
+      </Animate>
+    );
   }
 });

components/alert/index.md

@@ -23,3 +23,4 @@
 | message    | 必选参数，警告提示内容                                       | String     | 无    |
 | description | 可选参数，警告提示的辅助性文字介绍                            | String     | 无    |
 | onClose     | 可选参数，关闭时触发的回调函数                                | Function   | 无    |
+| showIcon   | 可选参数，是否显示辅助图标                                 | Boolean   | false    |

components/badge/ScrollNumber.jsx

@@ -0,0 +1,137 @@
+import React, { createElement } from 'react';
+import assign from 'object-assign';
+import { isCssAnimationSupported } from 'css-animation';
+
+function getNumberArray(num) {
+  return num ?
+    num.toString().split('').reverse().map(i => Number(i)) : [];
+}
+
+class AntScrollNumber extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      animateStarted: true,
+      count: props.count
+    };
+  }
+
+  getPositionByNum(num, i) {
+    if (this.state.animateStarted) {
+      return 10 + num;
+    }
+    const currentDigit = getNumberArray(this.state.count)[i];
+    const lastDigit = getNumberArray(this.lastCount)[i];
+    // 同方向则在同一侧切换数字
+    if (this.state.count > this.lastCount) {
+      if (currentDigit >= lastDigit) {
+        return 10 + num;
+      } else {
+        return 20 + num;
+      }
+    } else {
+      if (currentDigit <= lastDigit) {
+        return 10 + num;
+      } else {
+        return num;
+      }
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if ('count' in nextProps && nextProps.count) {
+      if (this.lastCount === this.state.count) {
+        return;
+      }
+      this.lastCount = this.state.count;
+      // 复原数字初始位置
+      this.setState({
+        animateStarted: true,
+      }, () => {
+        // 等待数字位置复原完毕
+        // 开始设置完整的数字
+        setTimeout(() => {
+          this.setState({
+            animateStarted: false,
+            count: nextProps.count,
+          }, () => {
+            this.props.onAnimated();
+          });
+        }, 5);
+      });
+    }
+  }
+
+  renderNumberList() {
+    const childrenToReturn = [];
+    for (let i = 0; i < 30; i++) {
+      childrenToReturn.push(<p key={i}>{i % 10}</p>);
+    }
+    return childrenToReturn;
+  }
+
+  renderCurrentNumber(num, i) {
+    const position = this.getPositionByNum(num, i);
+    const height = this.props.height;
+    const removeTransition = this.state.animateStarted ||
+      (getNumberArray(this.lastCount)[i] === undefined);
+    return createElement('span', {
+      className: `${this.props.prefixCls}-only`,
+      style: {
+        transition: removeTransition && 'none',
+        transform: 'translate3d(0, ' + (-position * height) + 'px, 0)',
+        height: height,
+      },
+      key: i,
+    }, this.renderNumberList());
+  }
+
+  renderNumberElement() {
+    const state = this.state;
+    if (!state.count || isNaN(state.count)) {
+      return state.count;
+    }
+    return getNumberArray(state.count)
+      .map((num, i) => this.renderCurrentNumber(num, i)).reverse();
+  }
+
+  render() {
+    const props = assign({}, this.props, {
+      className: `${this.props.prefixCls} ${this.props.className}`
+    });
+    const isBrowser = (typeof document !== 'undefined' && typeof window !== 'undefined');
+    if (isBrowser && isCssAnimationSupported) {
+      return createElement(
+        this.props.component,
+        props,
+        this.renderNumberElement()
+      );
+    } else {
+      return createElement(
+        this.props.component,
+        props,
+        props.count
+      );
+    }
+  }
+}
+
+AntScrollNumber.defaultProps = {
+  prefixCls: 'ant-scroll-number',
+  count: null,
+  component: 'sup',
+  onAnimated: function() {},
+  height: 18,
+};
+
+AntScrollNumber.propTypes = {
+  count: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.number
+  ]),
+  component: React.PropTypes.string,
+  onAnimated: React.PropTypes.func,
+  height: React.PropTypes.number,
+};
+
+export default AntScrollNumber;

components/badge/demo/99plus.md

@@ -7,14 +7,14 @@
 ---
 
 ````jsx
-var Badge = antd.Badge;
+import { Badge } from 'antd';
 
-React.render(<div>
-  <Badge count="99">
+ReactDOM.render(<div>
+  <Badge count={99}>
     <a href="#" className="head-example"></a>
   </Badge>
-  <Badge count="200">
+  <Badge count={200}>
     <a href="#" className="head-example"></a>
   </Badge>
-</div>, document.getElementById('components-badge-demo-99plus'));
+</div>, mountNode);
 ````

components/badge/demo/basic.md

@@ -7,13 +7,13 @@
 ---
 
 ````jsx
-var Badge = antd.Badge;
+import { Badge } from 'antd';
 
-React.render(
-  <Badge count="5">
+ReactDOM.render(
+  <Badge count={5}>
     <a href="#" className="head-example"></a>
   </Badge>
-, document.getElementById('components-badge-demo-basic'));
+, mountNode);
 ````
 
 ````css

components/badge/demo/change.md

@@ -0,0 +1,73 @@
+# 动态
+
+- order: 4
+
+展示动态变化的效果。
+
+---
+
+````jsx
+import { Badge, Button, Icon } from 'antd';
+const ButtonGroup = Button.Group;
+
+const Test = React.createClass({
+  getInitialState() {
+    return {
+      count: 5,
+      show: true,
+    };
+  },
+  increase() {
+    const count = this.state.count + 1;
+    this.setState({ count });
+  },
+  decline() {
+    let count = this.state.count - 1;
+    if (count < 0) {
+      count = 0;
+    }
+    this.setState({ count });
+  },
+  onClick() {
+    this.setState({
+      show: !this.state.show
+    });
+  },
+  onNumberClick() {
+    const count = this.state.count;
+    this.setState({
+      count: count ? 0 : 5
+    });
+  },
+  render() {
+    return <div>
+      <Badge count={this.state.count}>
+        <a href="#" className="head-example"></a>
+      </Badge>
+      <Badge dot={this.state.show}>
+        <a href="#" className="head-example"></a>
+      </Badge>
+      <div style={{ marginTop: 10 }}>
+        <Button type="ghost" onClick={this.onNumberClick} style={{marginRight: 6}}>
+          切换数字显隐
+        </Button>
+        <Button type="ghost" onClick={this.onClick} style={{marginRight: 6}}>
+          切换红点显隐
+        </Button>
+        <ButtonGroup>
+          <Button type="ghost" onClick={this.decline}>
+            <Icon type="minus" />
+          </Button>
+          <Button type="ghost" onClick={this.increase}>
+            <Icon type="plus" />
+          </Button>
+        </ButtonGroup>
+      </div>
+    </div>;
+  }
+});
+
+ReactDOM.render(
+  <Test />
+, mountNode);
+````

components/badge/demo/dot.md

@@ -7,16 +7,16 @@
 ---
 
 ````jsx
-var Badge = antd.Badge;
+import { Badge, Icon } from 'antd';
 
-React.render(<div>
-  <Badge dot={true}>
-    <i className="anticon anticon-notification"></i>
+ReactDOM.render(<div>
+  <Badge dot>
+    <Icon type="notification" />
   </Badge>
-  <Badge dot={true}>
+  <Badge dot>
     <a href="#">一个链接</a>
   </Badge>
-</div>, document.getElementById('components-badge-demo-dot'));
+</div>, mountNode);
 ````
 
 <style>

components/badge/demo/link.md

@@ -7,13 +7,13 @@
 ---
 
 ````jsx
-var Badge = antd.Badge;
+import { Badge } from 'antd';
 
-React.render(
+ReactDOM.render(
   <a href="#">
-    <Badge count="5">
+    <Badge count={5}>
       <span className="head-example"></span>
     </Badge>
   </a>
-, document.getElementById('components-badge-demo-link'));
+, mountNode);
 ````

components/badge/demo/no-wrapper.md

@@ -0,0 +1,19 @@
+# 独立使用
+
+- order: 0
+
+不包裹任何元素即是独立使用，可自定样式展现。
+
+> 在右上角的 badge 则限定为红色。
+
+---
+
+````jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(<div>
+  <Badge count={25} />
+  <Badge count={4} style={{backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9'}} />
+  <Badge count={109} style={{backgroundColor: '#87d068'}} />
+</div>, mountNode);
+````

components/badge/demo/overflow.md

@@ -0,0 +1,20 @@
+# 封顶数字
+
+- order: 6
+
+超过 `overflowCount` 的会显示为 `${overflowCount}+`。
+
+---
+
+````jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(<div>
+  <Badge count={99} overflowCount={10}>
+    <a href="#" className="head-example"></a>
+  </Badge>
+  <Badge count={1000} overflowCount={999}>
+    <a href="#" className="head-example"></a>
+  </Badge>
+</div>, mountNode);
+````

components/badge/index.jsx

@@ -1,41 +1,56 @@
-import React, { cloneElement } from 'react';
-const prefixCls = 'ant-badge';
+import React from 'react';
+import Animate from 'rc-animate';
+import ScrollNumber from './ScrollNumber';
+import classNames from 'classnames';
 
 class AntBadge extends React.Component {
   constructor(props) {
     super(props);
-
-    this.state = {
-      count: props.count
-    };
   }
 
   render() {
-    if (this.props.dot) {
-      return <span className={prefixCls} {...this.props}>
-        {this.props.children}
-        <sup className={prefixCls + '-dot'}></sup>
-      </span>;
-    }
-    let count = this.state.count;
-    if (!count) {
-      return cloneElement(this.props.children);
-    } else {
-      count = count >= 100 ? '99+' : count;
-      return (
-        <span className={prefixCls} title={this.state.count} {...this.props}>
-          {this.props.children}
-          <sup className={prefixCls + '-count'}>{count}</sup>
-        </span>
-      );
+    let { count, prefixCls, overflowCount, className, style, children } = this.props;
+    const dot = this.props.dot;
+
+    count = count > overflowCount ? `${overflowCount}+` : count;
+
+    // dot mode don't need count
+    if (dot) {
+      count = '';
     }
+
+    // null undefined "" "0" 0
+    const hidden = (!count || count === '0') && !dot;
+    const scrollNumberCls = prefixCls + (dot ? '-dot' : '-count');
+    const badgeCls = classNames({
+      [className]: !!className,
+      [prefixCls]: true,
+      [`${prefixCls}-not-a-wrapper`]: !children,
+    });
+
+    return (
+      <span className={badgeCls} title={count} {...this.props} style={null}>
+        {children}
+        <Animate component=""
+          showProp="data-show"
+          transitionName={prefixCls + '-zoom'}
+          transitionAppear>
+          {
+            hidden ? null :
+              <ScrollNumber data-show={!hidden} className={scrollNumberCls}
+                count={count} style={style} />
+          }
+        </Animate>
+      </span>
+    );
   }
 }
 
 AntBadge.defaultProps = {
-  prefixCls: prefixCls,
+  prefixCls: 'ant-badge',
   count: null,
-  dot: false
+  dot: false,
+  overflowCount: 99,
 };
 
 AntBadge.propTypes = {
@@ -43,7 +58,8 @@ AntBadge.propTypes = {
     React.PropTypes.string,
     React.PropTypes.number
   ]),
-  dot: React.PropTypes.bool
+  dot: React.PropTypes.bool,
+  overflowCount: React.PropTypes.number,
 };
 
 export default AntBadge;

components/badge/index.md

@@ -15,12 +15,18 @@
 ## API
 
 ```jsx
-<Badge count="5">
+<Badge count={5}>
   <a href="#" className="head-example"></a>
 </Badge>
 ```
 
+
+```jsx
+<Badge count={5} />
+```
+
 | 参数           | 说明                             | 类型       |  可选值 | 默认值 |
 |----------------|----------------------------------|------------|---------|--------|
-| count          | 展示的数字，大于 99 时显示为 99+ | Number     |         |        |
+| count          | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | Number     |         |        |
+| overflowCount  | 展示封顶的数字值                 | Number     |         | 99     |
 | dot            | 不展示数字，只有一个小红点       | boolean    |         | false  |

components/breadcrumb/demo/basic.md

@@ -7,14 +7,14 @@
 ---
 
 ````jsx
-var Breadcrumb = require('antd/lib/breadcrumb');
+import { Breadcrumb } from 'antd';
 
-React.render(
+ReactDOM.render(
   <Breadcrumb>
     <Breadcrumb.Item>首页</Breadcrumb.Item>
     <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
     <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
     <Breadcrumb.Item>某应用</Breadcrumb.Item>
   </Breadcrumb>
-, document.getElementById('components-breadcrumb-demo-basic'));
+, mountNode);
 ````

components/breadcrumb/demo/router.md

@@ -7,13 +7,11 @@
 ---
 
 ````jsx
-var ReactRouter = require('react-router');
-var Router = ReactRouter.Router;
-var Route = ReactRouter.Route;
-var Link = ReactRouter.Link;
-var Breadcrumb = require('antd').Breadcrumb;
+const ReactRouter = require('react-router');
+let { Router, Route, Link } = ReactRouter;
+import { Breadcrumb } from 'antd';
 
-var Apps = React.createClass({
+const Apps = React.createClass({
   render() {
     return <ul className="app-list">
       <li><Link to="/apps/1">应用1</Link></li>
@@ -22,7 +20,7 @@ var Apps = React.createClass({
   }
 });
 
-var Home = React.createClass({
+const Home = React.createClass({
   render() {
     return (<div>
       <div className="demo-nav">
@@ -41,15 +39,15 @@ var Home = React.createClass({
   }
 });
 
-React.render((
+ReactDOM.render((
   <Router>
-    <Route name="home" breadcrumbName="首页" path="/" component={Home} ignoreScrollBehavior>
+    <Route name="home" breadcrumbName="首页" path="/" component={Home}>
       <Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
         <Route name="app" breadcrumbName="应用:id" path=":id" />
       </Route>
     </Route>
   </Router>
-), document.getElementById('components-breadcrumb-demo-router'));
+), mountNode);
 ````
 
 <style>

components/breadcrumb/demo/separator.md

@@ -0,0 +1,20 @@
+# 分隔符
+
+- order: 3
+
+使用 `separator=">"` 可以自定义分隔符。
+
+---
+
+````jsx
+import { Breadcrumb } from 'antd';
+
+ReactDOM.render(
+  <Breadcrumb separator=">">
+    <Breadcrumb.Item>首页</Breadcrumb.Item>
+    <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
+    <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
+    <Breadcrumb.Item>某应用</Breadcrumb.Item>
+  </Breadcrumb>
+, mountNode);
+````

components/breadcrumb/demo/withIcon.md

@@ -7,21 +7,21 @@
 ---
 
 ````jsx
-var Breadcrumb = require('antd/lib/breadcrumb');
+import { Breadcrumb, Icon } from 'antd';
 
-React.render(
+ReactDOM.render(
   <Breadcrumb>
     <Breadcrumb.Item href="">
-      <i className="anticon anticon-home"></i>
+      <Icon type="home" />
     </Breadcrumb.Item>
     <Breadcrumb.Item href="">
-      <i className="anticon anticon-user"></i>
+      <Icon type="user" />
       应用列表
     </Breadcrumb.Item>
     <Breadcrumb.Item>
       应用
     </Breadcrumb.Item>
   </Breadcrumb>
-, document.getElementById('components-breadcrumb-demo-withicon'));
+, mountNode);
 ````
 

components/breadcrumb/index.jsx

@@ -1,49 +1,79 @@
-import React from 'react';
+import React, { cloneElement } from 'react';
 
-let prefixCls = 'ant-breadcrumb';
-
-let BreadcrumbItem = React.createClass({
+const BreadcrumbItem = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-breadcrumb',
+      separator: '/',
+    };
+  },
   propTypes: {
-    href: React.PropTypes.string
+    prefixCls: React.PropTypes.string,
+    separator: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element,
+    ]),
+    href: React.PropTypes.string,
   },
   render() {
-    let link = <a className={prefixCls + '-link'} {...this.props}>{this.props.children}</a>;
-    let slash = <span className={prefixCls + '-slash'}>/</span>;
+    const { prefixCls, separator, children } = this.props;
+    let link = <a className={prefixCls + '-link'} {...this.props}>{children}</a>;
     if (typeof this.props.href === 'undefined') {
-      link = <span className={prefixCls + '-link'} {...this.props}>{this.props.children}</span>;
+      link = <span className={prefixCls + '-link'} {...this.props}>{children}</span>;
     }
-    return <span>{link}{slash}</span>;
+    return <span>
+      {link}
+      <span className={prefixCls + '-separator'}>{separator}</span>
+    </span>;
   }
 });
 
-let Breadcrumb = React.createClass({
+const Breadcrumb = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-breadcrumb',
+      separator: '/',
+    };
+  },
   propTypes: {
+    prefixCls: React.PropTypes.string,
+    separator: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element,
+    ]),
     router: React.PropTypes.object,
     routes: React.PropTypes.array,
     params: React.PropTypes.object
   },
   render() {
     let crumbs;
-    let ReactRouter = this.props.router;
-    let routes = this.props.routes;
-    let params = this.props.params;
+    const { separator, prefixCls, router, routes, params, children } = this.props;
+    const ReactRouter = router;
     if (routes && routes.length > 0 && ReactRouter) {
       let Link = ReactRouter.Link;
       crumbs = routes.map(function(route, i) {
-        let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
+        if (!route.breadcrumbName) {
+          return null;
+        }
+        const name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
           return params[key] || replacement;
         });
         let link;
-        let path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
+        const path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
         if (i === routes.length - 1) {
           link = <span>{name}</span>;
         } else {
           link = <Link to={path} params={params}>{name}</Link>;
         }
-        return <BreadcrumbItem key={name}>{link}</BreadcrumbItem>;
+        return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
       });
     } else {
-      crumbs = this.props.children;
+      crumbs = React.Children.map(children, (element, index) => {
+        return cloneElement(element, {
+          separator,
+          key: index,
+        });
+      });
     }
     return (
       <div className={prefixCls}>

components/breadcrumb/index.md

@@ -27,11 +27,12 @@
 
 ### Breadcrumb
 
-| 参数      | 说明                                     | 类型       |  可选值 | 默认值 |
-|-----------|------------------------------------------|------------|---------|--------|
-| router    | 可传入 react-router 的实例               | Object     |         | -      |
-| routes    | router 的路由栈信息                      | Array      |         | -      |
-| params    | 路由的参数                               | Object     |         | -      |
+| 参数      | 说明                              | 类型              |  可选值 | 默认值 |
+|-----------|-----------------------------------|-------------------|---------|--------|
+| router    | 可传入 react-router 的实例        | Object            |         | -      |
+| routes    | router 的路由栈信息               | Array             |         | -      |
+| params    | 路由的参数                        | Object            |         | -      |
+| separator | 分隔符自定义                      | String or Element |         | '/'    |
 
 ### Breadcrumb.Item
 

components/button/button-group.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const prefix = 'ant-btn-group-';
+
+export default class ButtonGroup extends React.Component {
+  render() {
+    const {size, className, ...others} = this.props;
+
+    // large => lg
+    // small => sm
+    const sizeCls = ({
+      'large': 'lg',
+      'small': 'sm'
+    })[size] || '';
+
+    const classes = classNames({
+      'ant-btn-group': true,
+      [prefix + sizeCls]: sizeCls,
+      [className]: className
+    });
+
+    return <div {...others} className={classes} />;
+  }
+}
+ButtonGroup.propTypes = {
+  size: React.PropTypes.string,
+};

components/button/button.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import classNames from 'classnames';
+import { findDOMNode } from 'react-dom';
+
+const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
+const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
+function isString(str) {
+  return typeof str === 'string';
+}
+
+const prefix = 'ant-btn-';
+
+// Insert one space between two chinese characters automatically.
+function insertSpace(child) {
+  if (isString(child) && isTwoCNChar(child)) {
+    return child.split('').join(' ');
+  }
+
+  if (isString(child.type) && isTwoCNChar(child.props.children)) {
+    return React.cloneElement(child, {},
+                              child.props.children.split('').join(' '));
+  }
+
+  return child;
+}
+
+export default class Button extends React.Component {
+  componentDidMount() {
+    if (window && window.PIE) {
+      window.PIE.attach(findDOMNode(this));
+    }
+  }
+  render() {
+    const props = this.props;
+    const {type, shape, size, onClick, className, htmlType, children, ...others} = props;
+
+    // large => lg
+    // small => sm
+    const sizeCls = ({
+      'large': 'lg',
+      'small': 'sm'
+    })[size] || '';
+
+    const classes = classNames({
+      'ant-btn': true,
+      [prefix + type]: type,
+      [prefix + shape]: shape,
+      [prefix + sizeCls]: sizeCls,
+      [prefix + 'loading']: ('loading' in props && props.loading !== false),
+      [className]: className
+    });
+
+    const kids = React.Children.map(children, insertSpace);
+
+    return <button {...others} type={htmlType || 'button'} className={classes} onClick={onClick}>
+      {kids}
+    </button>;
+  }
+}
+
+Button.propTypes = {
+  type: React.PropTypes.string,
+  shape: React.PropTypes.string,
+  size: React.PropTypes.string,
+  htmlType: React.PropTypes.string,
+  onClick: React.PropTypes.func,
+  loading: React.PropTypes.bool,
+  className: React.PropTypes.string,
+};
+
+Button.defaultProps = {
+  onClick() {},
+};

components/button/demo/basic.md

@@ -1,29 +1,30 @@
-# 标准按钮
+# 按钮类型
 
-- order: 1 
+- order: 0
 
-为 `<button>` `<a>` 或 `<input>` 元素添加 `.ant-btn` 类即可使用 ant-design 提供的样式。
+按钮有三种类型：主按钮、次按钮、幽灵按钮。
 
-另外，通过使用下面的类可创建带有预定义样式的按钮，我们通过样式来显示重要程度的不同。
+通过设置 `type` 为 `primary` `ghost` 可分别创建主按钮、幽灵按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
 
-`.ant-btn-primary` `.ant-btn-ghost`
-
-其中 `.ant-btn` 类定义了按钮的默认样式，语义上代表次按钮。
-
-**注**: 当按钮文字为两个字时，中间需要**间隔一个字符**。
+主按钮和次按钮可独立使用，需要强引导用主按钮。幽灵按钮用于和主按钮组合。
 
 ---
 
-````html
-<button class="ant-btn">Button</button>
-<a href="javascript:;" class="ant-btn" role="button">Link</a>
-<input class="ant-btn" type="button" value="Input" />
-<input class="ant-btn" type="submit" value="Submit" />
+````jsx
+import { Button } from 'antd';
 
-<br>
-
-<!-- Styled Button -->
-<button class="ant-btn ant-btn-primary">主按钮</button>
-<button class="ant-btn">次按钮</button>
-<button class="ant-btn ant-btn-ghost">幽灵按钮</button>
+ReactDOM.render(<div>
+  <Button type="primary">主按钮</Button>
+  <Button>次按钮</Button>
+  <Button type="ghost">幽灵按钮</Button>
+  <Button type="dashed">虚线按钮</Button>
+</div>,
+mountNode);
 ````
+
+<style>
+#components-button-demo-basic .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+</style>

components/button/demo/button-group.md

@@ -1,91 +1,104 @@
 # 按钮组合
 
-- order: 6
+- order: 5
 
-将一系列的 `.ant-btn` 放入 `.ant-btn-group` 的容器中。
+可以将多个 `Button` 放入 `Button.Group` 的容器中。
 
-按钮组合尺寸
-
-只要给 `.ant-btn-group` 加上 `.ant-btn-group-*` 类，即可设置不同的尺寸，目前支持大中小三种尺寸。
+通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
 
 ---
 
-````html
+````jsx
+import { Button, Icon } from 'antd';
+const ButtonGroup = Button.Group;
+
+ReactDOM.render(<div>
 <h4>基本组合</h4>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-primary">确 定</button>
-  <button class="ant-btn ant-btn-primary">取 消</button>
-</div>
-<div class="ant-btn-group">
-  <button class="ant-btn">左</button>
-  <button class="ant-btn">中</button>
-  <button class="ant-btn">右</button>
-</div>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-primary">左</button>
-  <button class="ant-btn ant-btn-ghost">中</button>
-  <button class="ant-btn ant-btn-ghost">中</button>
-  <button class="ant-btn">右</button>
-</div>
-<h4>带图标按钮组合 </h4>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-primary">
-  <span class="anticon anticon-left"></span>
-  <span>后 退</span>
-  </button>
-  <button class="ant-btn ant-btn-primary">
-  <span>前 进</span>
-  <span class="anticon anticon-right"></span>
-  </button>
-</div>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-primary">
-  <span class="anticon anticon-cloud"></span>
-  </button>
-  <button class="ant-btn ant-btn-primary">
-  <span class="anticon anticon-cloud-download"></span>
-  </button>
-</div>
+<ButtonGroup>
+  <Button type="primary">确定</Button>
+  <Button type="primary">取消</Button>
+</ButtonGroup>
+<ButtonGroup>
+  <Button>左</Button>
+  <Button>中</Button>
+  <Button>右</Button>
+</ButtonGroup>
+<ButtonGroup>
+  <Button type="primary">左</Button>
+  <Button type="ghost">中</Button>
+  <Button type="ghost">中</Button>
+  <Button>右</Button>
+</ButtonGroup>
+
+<h4>带图标按钮组合</h4>
+<ButtonGroup>
+  <Button type="primary">
+    <Icon type="left" />
+    <span>后退</span>
+  </Button>
+  <Button type="primary">
+    前进
+    <Icon type="right" />
+  </Button>
+</ButtonGroup>
+<ButtonGroup>
+  <Button type="primary">
+    <Icon type="cloud" />
+  </Button>
+  <Button type="primary">
+    <Icon type="cloud-download" />
+  </Button>
+</ButtonGroup>
+
 <h4>多个组合</h4>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-ghost">1</button>
-  <button class="ant-btn ant-btn-ghost">2</button>
-  <button class="ant-btn ant-btn-ghost">3</button>
-  <button class="ant-btn ant-btn-ghost">4</button>
-  <button class="ant-btn ant-btn-ghost">
-  <span>前 进</span>
-  <span class="anticon anticon-right"></span>
-  </button>
-</div>
+<ButtonGroup>
+  <Button type="ghost">1</Button>
+  <Button type="ghost">2</Button>
+  <Button type="ghost">3</Button>
+  <Button type="ghost">4</Button>
+  <Button type="ghost">
+    <span>前进</span>
+    <Icon type="right" />
+  </Button>
+</ButtonGroup>
+
 <h4>尺寸</h4>
-<div class="ant-btn-group ant-btn-group-lg">
-  <button class="ant-btn ant-btn-ghost">大</button>
-  <button class="ant-btn ant-btn-ghost">大</button>
-  <button class="ant-btn ant-btn-ghost">大</button>
-</div>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-ghost">默 认</button>
-  <button class="ant-btn ant-btn-ghost">默 认</button>
-  <button class="ant-btn ant-btn-ghost">默 认</button>
-</div>
-<div class="ant-btn-group ant-btn-group-sm">
-  <button class="ant-btn ant-btn-ghost">小</button>
-  <button class="ant-btn ant-btn-ghost">小</button>
-  <button class="ant-btn ant-btn-ghost">小</button>
+<ButtonGroup size="large">
+  <Button type="ghost">大</Button>
+  <Button type="ghost">大</Button>
+  <Button type="ghost">大</Button>
+</ButtonGroup>
+<ButtonGroup>
+  <Button type="ghost">默认</Button>
+  <Button type="ghost">默认</Button>
+  <Button type="ghost">默认</Button>
+</ButtonGroup>
+<ButtonGroup size="small">
+  <Button type="ghost">小</Button>
+  <Button type="ghost">小</Button>
+  <Button type="ghost">小</Button>
+</ButtonGroup>
 </div>
+, mountNode);
 ````
 
 <style>
-.nico-insert-code h4 {
-  margin: 8px 0;
-  font-size: 12px;
-  line-height: 12px;
+#components-button-demo-button-group h4 {
+  margin: 16px 0;
+  font-size: 14px;
+  line-height: 1;
   font-weight: normal;
 }
-.nico-insert-code h4:first-child {
+#components-button-demo-button-group h4:first-child {
   margin-top: 0;
 }
-.nico-insert-code .ant-btn {
+#components-button-demo-button-group .ant-btn {
   margin-bottom: 8px;
 }
+#components-button-demo-button-group .ant-btn-group {
+  margin-right: 8px;
+}
+#components-button-demo-button-group .ant-btn {
+  margin-bottom: 12px;
+}
 </style>

components/button/demo/disabled.md

@@ -0,0 +1,33 @@
+# 不可用
+
+- order: 3
+
+添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
+
+---
+
+````jsx
+import { Button } from 'antd';
+
+ReactDOM.render(<div>
+  <Button type="primary">主按钮</Button>
+  <Button type="primary" disabled>主按钮(失效)</Button>
+  <br />
+  <Button>次按钮</Button>
+  <Button disabled>次按钮(失效)</Button>
+  <br />
+  <Button type="ghost">幽灵按钮</Button>
+  <Button type="ghost" disabled>幽灵按钮(失效)</Button>
+  <br />
+  <Button type="dashed">虚线按钮</Button>
+  <Button type="dashed" disabled>虚线按钮(失效)</Button>
+</div>
+, mountNode);
+````
+
+<style>
+#components-button-demo-disabled .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+</style>

components/button/demo/icon.md

@@ -1,45 +1,57 @@
 # 图标按钮
 
-- order: 4
+- order: 6
 
-图标一般放在文字前面，也可以单独存在。
+`Button` 内可以嵌套图标，图标可以放在文字前、后，也可以单独存在。
 
 ---
 
-````html
-<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg">
-  <i class="anticon anticon-search"></i>
-</button>
-<button class="ant-btn ant-btn-primary ant-btn-lg">
-  <i class="anticon anticon-search"></i>
+````jsx
+import { Button, Icon } from 'antd';
+
+ReactDOM.render(<div>
+  <Button type="primary" shape="circle" size="large">
+    <Icon type="search" />
+  </Button>
+  <Button type="primary" size="large">
+    <Icon type="search" />
   大按钮
-</button>
+  </Button>
 
-<button class="ant-btn ant-btn-primary ant-btn-circle">
-  <i class="anticon anticon-search"></i>
-</button>
-<button class="ant-btn ant-btn-primary">
-  <i class="anticon anticon-search"></i>
+  <Button type="primary" shape="circle">
+    <Icon type="search" />
+  </Button>
+  <Button type="primary">
+    <Icon type="search" />
   中按钮
-</button>
+  </Button>
 
-<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-sm">
-  <i class="anticon anticon-search"></i>
-</button>
-<button class="ant-btn ant-btn-primary ant-btn-sm">
-  <i class="anticon anticon-search"></i>
+  <Button type="primary" shape="circle" size="small">
+    <Icon type="search" />
+  </Button>
+  <Button type="primary" size="small">
+    <Icon type="search" />
   小按钮
-</button>
+  </Button>
 
-<p></p>
+  <br />
 
-<button class="ant-btn ant-btn-ghost ant-btn-circle-outline ant-btn-lg">
-  <i class="anticon anticon-search"></i>
-</button>
-<button class="ant-btn ant-btn-ghost ant-btn-circle-outline">
-  <i class="anticon anticon-search"></i>
-</button>
-<button class="ant-btn ant-btn-circle-outline ant-btn-sm">
-  <i class="anticon anticon-search"></i>
-</button>
+  <Button type="ghost" shape="circle-outline" size="large">
+    <Icon type="search" />
+  </Button>
+  <Button type="ghost" shape="circle-outline">
+    <Icon type="search" />
+  </Button>
+  <Button type="ghost" shape="circle-outline" size="small">
+    <Icon type="search" />
+  </Button>
+</div>,
+mountNode);
 ````
+
+<style>
+#components-button-demo-icon .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+</style>

components/button/demo/loading.md

@@ -1,44 +1,50 @@
 # 加载中
 
-- order: 7
+- order: 4
 
-加载按钮。最后一个按钮演示点击后进入加载状态。
+添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
 
 ---
 
 ````jsx
-var App = React.createClass({
+import { Button, Icon } from 'antd';
+
+const App = React.createClass({
   getInitialState() {
     return {
-      loading: false
+      loading: false,
+      iconLoading: false,
     };
   },
   enterLoading() {
-    this.setState({
-      loading: true
-    });
+    this.setState({ loading: true });
+  },
+  enterIconLoading() {
+    this.setState({ iconLoading: true });
   },
   render() {
-    var loadingClass = this.state.loading ? 'ant-btn-loading' : '';
     return <div>
-      <button className="ant-btn ant-btn-primary ant-btn-lg ant-btn-loading">
+      <Button type="primary" size="large" loading>
         加载中
-      </button>
-      <button className="ant-btn ant-btn-primary ant-btn-loading">
+      </Button>
+      <Button type="primary" loading>
         加载中
-      </button>
-      <button className="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading">
+      </Button>
+      <Button type="primary" size="small" loading>
         加载中
-      </button>
+      </Button>
       <br />
-      <button className={'ant-btn ant-btn-primary ' + loadingClass} onClick={this.enterLoading}>
+      <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
         点击变加载
-      </button>
+      </Button>
+      <Button type="primary" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
+        <Icon type="poweroff" />点击变加载
+      </Button>
     </div>;
   }
 });
 
-React.render(<App />, document.getElementById('components-button-demo-loading'));
+ReactDOM.render(<App />, mountNode);
 ````
 
 <style>

components/button/demo/menu.md

@@ -1,19 +0,0 @@
-# 菜单按钮
-
-- order: 5
-
-**注**: 下拉按钮的 icon 大小统一成 **10px**。
-
-> 更多交互，详见 [Dropdown 下拉菜单](http://ant.design/components/dropdown/)。
-
----
-
-````html
-<button class="ant-btn ant-btn-primary ant-btn-menu">
-  <span>菜单按钮</span>
-  <span class="anticon anticon-down"></span>
-</button>
-<button class="ant-btn ant-btn-ghost ant-btn-circle ant-btn-menu">
-  <span class="anticon anticon-down"></span>
-</button>
-````

components/button/demo/shape.md

@@ -0,0 +1,41 @@
+# 按钮形状
+
+- order: 1
+
+通过设置 `shape` 为 `circle` `circle-outline`，可以把按钮形状设为圆形，并且 `circle-outline` 在 hover 时会有动画效果。
+
+---
+
+````jsx
+import { Button, Icon } from 'antd';
+
+ReactDOM.render(<div>
+  <Button type="primary" shape="circle" size="large">
+    <Icon type="search" />
+  </Button>
+  <Button type="primary" shape="circle">
+    <Icon type="search" />
+  </Button>
+  <Button type="primary" shape="circle" size="small">
+    <Icon type="search" />
+  </Button>
+  <br />
+  <Button type="ghost" shape="circle-outline" size="large">
+    <Icon type="search" />
+  </Button>
+  <Button type="ghost" shape="circle-outline">
+    <Icon type="search" />
+  </Button>
+  <Button type="ghost" shape="circle-outline" size="small">
+    <Icon type="search" />
+  </Button>
+</div>
+, mountNode);
+````
+
+<style>
+#components-button-demo-shape .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+</style>

components/button/demo/size.md

@@ -2,14 +2,25 @@
 
 - order: 2
 
-提供 大 中 小 三种尺寸。
+按钮有大、中、小三种尺寸。
 
-使用 `.ant-btn-lg` `.ant-btn-sm` 即可获得大 小尺寸，默认尺寸为中。
+通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
 
 ---
 
-````html
-<button class="ant-btn ant-btn-primary ant-btn-lg">大号按钮</button>
-<button class="ant-btn ant-btn-primary">中号按钮(默认)</button>
-<button class="ant-btn ant-btn-primary ant-btn-sm">小号按钮</button>
+````jsx
+import { Button } from 'antd';
+
+ReactDOM.render(<div>
+  <Button type="primary" size="large">大号按钮</Button>
+  <Button type="primary">中号按钮(默认)</Button>
+  <Button type="primary" size="small">小号按钮</Button>
+</div>
+, mountNode);
 ````
+
+<style>
+#components-button-demo-size .ant-btn {
+  margin-right: 8px;
+}
+</style>

components/button/demo/status.md

@@ -1,20 +0,0 @@
-# 按钮状态
-
-- order: 3
-
-通过背景色透明度的变化来体现不同的操作状态，移入或点击元素可以查看状态。
-
-失效状态：为 `<button>` 元素添加 `disabled` 属性，即可体现。
-
----
-
-````html
-<button class="ant-btn ant-btn-primary">主按钮</button>
-<button class="ant-btn ant-btn-primary disabled">主按钮(失效)</button>
-<p></p>
-<button class="ant-btn">次按钮</button>
-<button class="ant-btn disabled">次按钮(失效)</button>
-<p></p>
-<button class="ant-btn ant-btn-ghost">幽灵按钮</button>
-<button class="ant-btn ant-btn-ghost disabled">幽灵按钮(失效)</button>
-````

components/button/index.jsx

@@ -0,0 +1,5 @@
+import Button from './button';
+import ButtonGroup from './button-group';
+
+Button.Group = ButtonGroup;
+export default Button;

components/button/index.md

@@ -13,29 +13,33 @@
 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
 
 
-## 如何使用
+## API
 
-- 按钮的基础样式为 `ant-btn`。
+- 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
 
-- 通过类组装的形式来产生不同的按钮样式，推荐遵循如下顺序：
+- 按钮的属性说明如下：
+
+属性 | 说明 | 类型 | 默认值
+-----|-----|-----|------
+type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | Enum | undefined
+htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准 | Enum | `button`
+shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | Enum | undefined
+size | 设置按钮大小，可选值为 `small` `large` 或者不设 | Enum | undefined
+loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，或直接设置值，如：`loading="true"` | Bool | false
+onClick | `click` 事件的 handler | Function | `function() {}`
+
+- `<Button>Hello world!</Button>` 最终会被渲染为 `<button>Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`
+
+
+### IE8 border radius support
+
+Ant Design 视觉上采用渐进降级的方案，在 IE8 下圆角按钮将降级为直角。
+如果强烈需要圆角按钮，我们提供了 [css3pie](http://css3pie.com/) 的兼容方案。
+
+使用时只需在 html 头部加入以下代码即可。
+
+```html
+<!--[if IE 8]>
+<script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
+<![endif]-->
 ```
-  .ant-btn
-  	&darr;
-  .ant-btn-primary | .ant-btn-ghost
-  	&darr;
-  .ant-btn-circle | .ant-btn-circle-outline
-  	&darr;
-  .ant-btn-lg | .ant-btn-sm
- ```
-
-- 按钮的样式参数说明如下：
-
-| 类名  | 说明 |
-| ------------- | ------------- |
-| `.ant-btn`  | 按钮基础样式。 |
-| `.ant-btn-primary` `.ant-btn-ghost`  | 使用这些列出的类可以快速创建一个带有预定义样式的按钮。  |
-| `.ant-btn-circle` `.ant-btn-circle-outline`  | 用于创建圆形按钮，`.ant-btn-circle-outline` 为描边按钮。 |
-| `.ant-btn-lg` `.ant-btn-sm`  | 定义按钮大小尺寸，目前提供三种尺寸：大中小，默认为中。 |
-| `.ant-btn-group` | 按钮组合，通过按钮组容器把一组按钮放在同一行里。 |
-
-> 当按钮只有两个汉字时，需要在两字中加空格。

components/calendar/Constants.js

@@ -0,0 +1 @@
+export const PREFIX_CLS = 'ant-fullcalendar';

components/calendar/Header.jsx

@@ -0,0 +1,113 @@
+import React, {PropTypes, Component} from 'react';
+import {PREFIX_CLS} from './Constants';
+import Select from '../select';
+import {Group, Button} from '../radio';
+
+function noop() {}
+
+class Header extends Component {
+  getYearSelectElement(year) {
+    const {yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen} = this.props;
+    const start = year - yearSelectOffset;
+    const end = start + yearSelectTotal;
+    const suffix = locale.year === '年' ? '年' : '';
+
+    const options = [];
+    for (let index = start; index < end; index++) {
+      options.push(<Option key={`${index}`}>{index + suffix}</Option> );
+    }
+    return (
+      <Select
+        style={{ width: 75 }}
+        size={ fullscreen ? null : 'small' }
+        dropdownMatchSelectWidth={false}
+        dropdownMenuStyle={{ minWidth: 103 }}
+        className={`${prefixCls}-year-select`}
+        onChange={this.onYearChange.bind(this)}
+        value={String(year)}>
+        { options }
+      </Select>
+    );
+  }
+  getMonthSelectElement(month) {
+    const props = this.props;
+    const months = props.locale.format.months;
+    const {prefixCls, fullscreen} = props;
+    const options = [];
+
+    for (let index = 0; index < 12; index++) {
+      options.push(<Option key={`${index}`}>{months[index]}</Option>);
+    }
+
+    return (
+      <Select
+        style={{ minWidth: 70 }}
+        dropdownMenuStyle={{ minWidth: 125 }}
+        size={ fullscreen ? null : 'small' }
+        dropdownMatchSelectWidth={false}
+        className={`${prefixCls}-month-select`}
+        value={String(month)}
+        onChange={this.onMonthChange.bind(this)}>
+        { options }
+      </Select>
+    );
+  }
+  onYearChange(year) {
+    const newValue = this.props.value.clone();
+    newValue.setYear(parseInt(year, 10));
+    this.props.onValueChange(newValue);
+  }
+
+  onMonthChange(month) {
+    const newValue = this.props.value.clone();
+    newValue.setMonth(parseInt(month, 10));
+    this.props.onValueChange(newValue);
+  }
+  onTypeChange(e) {
+    this.props.onTypeChange(e.target.value);
+  }
+  render() {
+    const {type, value, prefixCls, locale} = this.props;
+
+    const yearSelect = this.getYearSelectElement(value.getYear());
+
+    const monthSelect = type === 'date' ? this.getMonthSelectElement(value.getMonth()) : null;
+
+    const typeSwitch = (
+      <Group onChange={this.onTypeChange.bind(this)} value={type}>
+        <Button value="date">{locale.month}</Button>
+        <Button value="month">{locale.year}</Button>
+      </Group>
+    );
+
+    return (
+      <div className={`${prefixCls}-header`}>
+        { yearSelect }
+        { monthSelect }
+        { typeSwitch }
+      </div>
+    );
+  }
+}
+
+Header.propTypes = {
+  value: PropTypes.object,
+  locale: PropTypes.object,
+  yearSelectOffset: PropTypes.number,
+  yearSelectTotal: PropTypes.number,
+  onValueChange: PropTypes.func,
+  onTypeChange: PropTypes.func,
+  prefixCls: PropTypes.string,
+  selectPrefixCls: PropTypes.string,
+  type: PropTypes.string,
+};
+
+Header.defaultProps = {
+  prefixCls: `${PREFIX_CLS}-header`,
+  yearSelectOffset: 10,
+  yearSelectTotal: 20,
+  onValueChange: noop,
+  onTypeChange: noop,
+};
+
+export default Header;

components/calendar/demo/basic.md

@@ -0,0 +1,19 @@
+# 基本
+
+- order: 0
+
+一个通用的日历面板，支持年/月切换。
+
+---
+
+````jsx
+import { Calendar } from 'antd';
+
+function onPanelChange(value, mode) {
+  console.log(value, mode);
+}
+
+ReactDOM.render(
+  <Calendar onPanelChange={onPanelChange} />
+, mountNode);
+````

components/calendar/demo/card.md

@@ -0,0 +1,21 @@
+# 卡片模式
+
+- order: 10
+
+用于嵌套在空间有限的容器中。
+
+---
+
+````jsx
+import { Calendar } from 'antd';
+
+function onPanelChange(value, mode) {
+  console.log(value, mode);
+}
+
+ReactDOM.render(
+  <div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
+    <Calendar fullscreen={false} onPanelChange={onPanelChange} />
+  </div>
+, mountNode);
+````

components/calendar/demo/custom-render.md

@@ -0,0 +1,24 @@
+# 自定义渲染
+
+- order: 1
+
+用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
+
+---
+
+````jsx
+import { Calendar } from 'antd';
+
+function dateCellRender(value) {
+  return <div>自定义日数据 {value.getDayOfMonth()}</div>;
+}
+
+function monthCellRender(value) {
+  return <div>自定义月数据 {value.getMonth()}</div>;
+}
+
+ReactDOM.render(
+  <Calendar defaultValue={new Date('2010-10-10')}
+  dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
+, mountNode);
+````

components/calendar/demo/locale.md

@@ -0,0 +1,20 @@
+# 国际化
+
+- order: 4
+
+通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
+
+---
+
+````jsx
+import { Calendar } from 'antd';
+import enUS from 'antd/lib/calendar/locale/en_US';
+
+function onPanelChange(value, mode) {
+  console.log(value, mode);
+}
+
+ReactDOM.render(
+  <Calendar onPanelChange={onPanelChange} locale={enUS}/>
+, mountNode);
+````

components/calendar/demo/notice-calendar.md

@@ -0,0 +1,115 @@
+# 通知事项日历演示
+
+- order: 2
+
+一个复杂的应用实例。
+
+---
+
+````jsx
+import { Calendar } from 'antd';
+
+function getListData(value) {
+  let listData;
+  switch (value.getDayOfMonth()) {
+  case 8:
+    listData = [
+      { type: 'warn', content: '这里是警告事项.' },
+      { type: 'normal', content: '这里是普通事项.' }
+    ]; break;
+  case 10:
+    listData = [
+      { type: 'warn', content: '这里是警告事项.' },
+      { type: 'normal', content: '这里是普通事项.' },
+      { type: 'error', content: '这里是错误事项.' }
+    ]; break;
+  case 15:
+    listData = [
+      { type: 'warn', content: '这里是警告事项.' },
+      { type: 'normal', content: '这里是普通事项好长啊。。....' },
+      { type: 'error', content: '这里是错误事项.' },
+      { type: 'error', content: '这里是错误事项.' },
+      { type: 'error', content: '这里是错误事项.' },
+      { type: 'error', content: '这里是错误事项.' }
+    ]; break;
+  default:
+  }
+  return listData || [];
+}
+
+function dateCellRender(value) {
+  let listData = getListData(value);
+  return <ul className="events">
+    {listData.map((item, index) =>
+      <li key={index}>
+        <span className={`event-${item.type}`}>●</span>
+        {item.content}
+      </li>
+    )}
+  </ul>;
+}
+
+
+function getMonthData(value) {
+  if (value.getMonth() === 8) {
+    return 1394;
+  }
+}
+
+function monthCellRender(value) {
+  let num = getMonthData(value);
+  return num ? <div className="notes-month">
+    <section>{num}</section>
+    <span>待办事项数</span>
+  </div> : null;
+}
+
+ReactDOM.render(
+  <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
+, mountNode);
+````
+
+
+````css
+.events {
+  line-height: 24px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.events li {
+  color: #999;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.events li span {
+  vertical-align: middle;
+}
+
+.events li span:first-child {
+  font-size: 9px;
+  margin-right: 4px;
+}
+
+.event-warn {
+  color: #fac450;
+}
+
+.event-normal {
+  color: #2db7f5;
+}
+
+.event-error {
+  color: #f60;
+}
+
+.notes-month {
+  text-align: center;
+}
+.notes-month section {
+  font-size: 28px;
+}
+````

components/calendar/index.jsx

@@ -0,0 +1,129 @@
+import React, {PropTypes, Component} from 'react';
+import GregorianCalendar from 'gregorian-calendar';
+import zhCN from './locale/zh_CN';
+import FullCalendar from 'rc-calendar/lib/FullCalendar';
+import {PREFIX_CLS} from './Constants';
+import Header from './Header';
+
+function noop () { return null; }
+
+function zerofixed (v) {
+  if (v < 10) return '0' + v;
+  return v + '';
+}
+
+class Calendar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: this.parseDateFromValue(props.value || new Date()),
+      mode: props.mode,
+    };
+  }
+  parseDateFromValue(value) {
+    const date = new GregorianCalendar(this.props.locale);
+    date.setTime(+value);
+    return date;
+  }
+  componentWillReceiveProps(nextProps) {
+    if ('value' in nextProps) {
+      this.setState({
+        value: this.parseDateFromValue(nextProps.value)
+      });
+    }
+  }
+  monthCellRender(value, locale) {
+    const prefixCls = this.props.prefixCls;
+    const month = value.getMonth();
+    return <div className={`${prefixCls}-month`}>
+      <div className={`${prefixCls}-value`}>
+        {locale.format.shortMonths[month]}
+      </div>
+      <div className={`${prefixCls}-content`}>
+        {this.props.monthCellRender(value)}
+      </div>
+    </div>;
+  }
+  dateCellRender(value) {
+    const prefixCls = this.props.prefixCls;
+    return <div className={`${prefixCls}-date`}>
+      <div className={`${prefixCls}-value`}>
+        {zerofixed(value.getDayOfMonth())}
+      </div>
+      <div className={`${prefixCls}-content`}>
+        {this.props.dateCellRender(value)}
+      </div>
+    </div>;
+  }
+  setValue(value) {
+    if (!('value' in this.props) && this.state.value !== value) {
+      this.setState({ value });
+    }
+    this.props.onPanelChange(value, this.state.mode);
+  }
+  setType(type) {
+    const mode = (type === 'date') ? 'month' : 'year';
+    if (this.state.mode !== mode) {
+      this.setState({ mode });
+      this.props.onPanelChange(this.state.value, mode);
+    }
+  }
+  render() {
+    const props = this.props;
+    const {value, mode} = this.state;
+    const {locale, prefixCls, style, className, fullscreen} = props;
+    const type = (mode === 'year') ? 'month' : 'date';
+
+    let cls = className || '';
+    if (fullscreen) {
+      cls += (' ' + prefixCls + '-fullscreen');
+    }
+
+    return (
+      <div className={cls} style={style}>
+        <Header
+          fullscreen={fullscreen}
+          type={type}
+          value={value}
+          locale={locale.lang}
+          prefixCls={prefixCls}
+          onTypeChange={this.setType.bind(this)}
+          onValueChange={this.setValue.bind(this)}/>
+        <FullCalendar
+          {...props}
+          Select={noop}
+          locale={locale.lang}
+          type={type}
+          prefixCls={prefixCls}
+          showHeader={false}
+          value={value}
+          monthCellRender={this.monthCellRender.bind(this)}
+          dateCellRender={this.dateCellRender.bind(this)} />
+      </div>
+    );
+  }
+}
+
+Calendar.propTypes = {
+  monthCellRender: PropTypes.func,
+  dateCellRender: PropTypes.func,
+  fullscreen: PropTypes.bool,
+  locale: PropTypes.object,
+  prefixCls: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  onPanelChange: PropTypes.func,
+  value: PropTypes.instanceOf(Date),
+};
+
+Calendar.defaultProps = {
+  monthCellRender: noop,
+  dateCellRender: noop,
+  locale: zhCN,
+  fullscreen: true,
+  prefixCls: PREFIX_CLS,
+  onPanelChange: noop,
+  mode: 'month',
+};
+
+export default Calendar;

components/calendar/index.md

@@ -0,0 +1,36 @@
+# Calendar
+
+- category: Components
+- type: 展示
+- chinese: 日历
+- cols: 1
+
+---
+
+按照日历形式展示数据的容器。
+
+## 何时使用
+
+当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
+
+
+## API
+
+```html
+<Calendar
+  dateCellRender={dateCellRender}
+  monthCellRender={monthCellRender}
+  onPanelChange={onPanelChange}
+/>
+```
+
+| 参数         | 说明           | 类型     | 默认值       |
+|--------------|----------------|----------|--------------|
+| value        | 展示日期       | Date     | 当前日期     |
+| defaultValue | 默认展示日期   | Date     | 当前日期     |
+| mode         | 初始模式，`month/year` | string | month  |
+| fullscreen   | 是否全屏显示   | bool     | true         |
+| dateCellRender     | 自定义渲染日期单元格| function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/))| 无           |
+| monthCellRender    | 自定义渲染月单元格  | function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/))   | 无  |
+| locale       | 国际化配置     | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
+| onPanelChange| 日期面板变化回调 | function(date, mode) | 无 |

components/calendar/locale/en_US.js

@@ -0,0 +1 @@
+module.exports = require('../../date-picker/locale/en_US');

components/calendar/locale/zh_CN.js

@@ -0,0 +1 @@
+module.exports = require('../../date-picker/locale/zh_CN');

components/carousel/demo/autoplay.md

@@ -7,15 +7,15 @@
 ---
 
 ````jsx
-var Carousel = antd.Carousel;
+import { Carousel } from 'antd';
 
-React.render(
+ReactDOM.render(
   <Carousel autoplay="true">
     <div><h3>1</h3></div>
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
   </Carousel>
-, document.getElementById('components-carousel-demo-autoplay'));
+, mountNode);
 ````
 

components/carousel/demo/basic.md

@@ -7,14 +7,18 @@
 ---
 
 ````jsx
-var Carousel = antd.Carousel;
+import { Carousel } from 'antd';
 
-React.render(
-  <Carousel>
+function onChange(a, b, c) {
+  console.log(a, b, c);
+}
+
+ReactDOM.render(
+  <Carousel afterChange={onChange}>
     <div><h3>1</h3></div>
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
   </Carousel>
-, document.getElementById('components-carousel-demo-basic'));
+, mountNode);
 ````

components/carousel/demo/fade.md

@@ -7,15 +7,15 @@
 ---
 
 ````jsx
-var Carousel = antd.Carousel;
+import { Carousel } from 'antd';
 
-React.render(
+ReactDOM.render(
   <Carousel effect="fade">
     <div><h3>1</h3></div>
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
   </Carousel>
-, document.getElementById('components-carousel-demo-fade'));
+, mountNode);
 ````
 

components/carousel/demo/vertical.md

@@ -7,14 +7,14 @@
 ---
 
 ````jsx
-var Carousel = antd.Carousel;
+import { Carousel } from 'antd';
 
-React.render(
+ReactDOM.render(
   <Carousel vertical="true">
     <div><h3>1</h3></div>
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
   </Carousel>
-, document.getElementById('components-carousel-demo-vertical'));
+, mountNode);
 ````

components/carousel/index.jsx

@@ -1,3 +1,18 @@
+// matchMedia polyfill for
+// https://github.com/WickyNilliams/enquire.js/issues/82
+if (typeof window !== 'undefined') {
+  const matchMediaPolyfill = function matchMediaPolyfill() {
+    return {
+      matches: false,
+      addListener: function () {
+      },
+      removeListener: function () {
+      }
+    };
+  };
+  window.matchMedia = window.matchMedia || matchMediaPolyfill;
+}
+
 import Carousel from 'react-slick';
 import React from 'react';
 import assign from 'object-assign';

components/carousel/index.md

@@ -19,12 +19,14 @@
 | 参数             | 说明                                         | 类型     | 默认值                          |
 |------------------|----------------------------------------------|----------|---------------------------------|
 | effect           | 动画效果函数，可取 scrollx, fade | String | scrollx |
-| arrow | 是否显示前后翻页箭头 | Boolean   | false |
 | dots | 是否显示面板指示点 | Boolean   | true |
 | vertical | 垂直显示 | Boolean   | false |
 | autoplay | 是否自动切换 | Boolean   | false |
 | easing | 动画效果 | String   | linear |
-| onChange         | 切换面板的回调                               | Function | 无
+| beforeChange      | 切换面板的回调                              | function(from, to) | 无
+| afterChange       | 切换面板的回调                              | function(current)  | 无
+
+更多参数可参考：https://github.com/akiran/react-slick
 
 <style>
 .ant-carousel .slick-slide {

components/checkbox/Group.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Checkbox from './index';
+
+export default React.createClass({
+  getDefaultProps() {
+    return {
+      options: [],
+      onChange() {},
+    };
+  },
+  propTypes: {
+    defaultValue: React.PropTypes.array,
+    value: React.PropTypes.array,
+    options: React.PropTypes.array.isRequired,
+    onChange: React.PropTypes.func,
+  },
+  getInitialState() {
+    const { value, defaultValue } = this.props;
+    return {
+      value: value || defaultValue || [],
+    };
+  },
+  componentWillReceiveProps(nextProps) {
+    if ('value' in nextProps) {
+      this.setState({
+        value: nextProps.value,
+      });
+    }
+  },
+  toggleOption(option) {
+    const optionIndex = this.state.value.indexOf(option);
+    const value = this.state.value;
+    if (optionIndex === - 1) {
+      value.push(option);
+    } else {
+      value.splice(optionIndex, 1);
+    }
+    if (!('value' in this.props)) {
+      this.setState({ value });
+    }
+    this.props.onChange(value);
+  },
+  render() {
+    const options = this.props.options;
+    return <div className="ant-checkbox-group">
+      {
+        options.map(option =>
+          <label className="ant-checkbox-group-item" key={option}>
+            <Checkbox disabled={this.props.disabled}
+            checked={this.state.value.indexOf(option) !== -1}
+            onChange={this.toggleOption.bind(this, option)} />
+            {option}
+          </label>
+        )
+      }
+    </div>;
+  },
+});

components/checkbox/demo/basic.md

@@ -7,14 +7,14 @@
 ---
 
 ````jsx
-var Checkbox = antd.Checkbox;
-var container = document.getElementById('components-checkbox-demo-basic');
+import { Checkbox } from 'antd';
+
 function onChange(e) {
   console.log('checked = ' + e.target.checked);
 }
 
-React.render(<label>
+ReactDOM.render(<label>
   <Checkbox defaultChecked={false} onChange={onChange} />
   Checkbox
-</label>, container);
+</label>, mountNode);
 ````

components/checkbox/demo/controller.md

@@ -7,18 +7,17 @@
 ---
 
 ````jsx
-var Checkbox = antd.Checkbox;
-var container = document.getElementById('components-checkbox-demo-controller');
+import { Checkbox, Button } from 'antd';
 
-var App = React.createClass({
+const App = React.createClass({
   getInitialState() {
     return {
       checked: true,
       disabled: false
-    }
+    };
   },
   render() {
-    var label = (this.state.checked ? '选中' : '取消') + '-' +
+    const label = (this.state.checked ? '选中' : '取消') + '-' +
       (this.state.disabled ? '不可用' : '可用');
     return <div>
       <p style={{marginBottom: '20px'}}>
@@ -30,31 +29,31 @@ var App = React.createClass({
         </label>
       </p>
       <p>
-        <button className="ant-btn ant-btn-primary ant-btn-sm"
+        <Button type="primary" size="small"
           onClick={this.toggleChecked}>
-          {!this.state.checked ? "选中":"取消"}
-        </button>
-        <button style={{'marginLeft': '10px'}}
-          className="ant-btn ant-btn-primary ant-btn-sm"
+          {!this.state.checked ? '选中' : '取消'}
+        </Button>
+        <Button style={{marginLeft: '10px'}}
+          type="primary" size="small"
           onClick={this.toggleDisable}>
-          {!this.state.disabled ? "不可用":"可用"}
-        </button>
+          {!this.state.disabled ? '不可用' : '可用'}
+        </Button>
       </p>
     </div>;
   },
-  toggleChecked(e) {
+  toggleChecked() {
     this.setState({checked: !this.state.checked});
   },
-  toggleDisable(e) {
+  toggleDisable() {
     this.setState({disabled: !this.state.disabled});
   },
   onChange(e) {
     console.log('checked = ', e.target.checked);
     this.setState({
-      checked: e.target.checked
+      checked: e.target.checked,
     });
   }
 });
 
-React.render(<App />, container);
+ReactDOM.render(<App />, mountNode);
 ````

components/checkbox/demo/disable.md

@@ -7,12 +7,11 @@ checkbox 不可用。
 ---
 
 ````jsx
-var Checkbox = antd.Checkbox;
-var container = document.getElementById('components-checkbox-demo-disable');
+import { Checkbox } from 'antd';
 
-React.render(<div>
-  <Checkbox defaultChecked={false} disabled={true}/>
+ReactDOM.render(<div>
+  <Checkbox defaultChecked={false} disabled />
   <br />
-  <Checkbox defaultChecked={true} disabled={true}/>
-</div>, container);
+  <Checkbox defaultChecked disabled />
+</div>, mountNode);
 ````

components/checkbox/demo/group.md

@@ -0,0 +1,20 @@
+# Checkbox 组
+
+- order: 3
+
+方便的生成一个 Checkbox 组。
+
+---
+
+````jsx
+import { Checkbox } from 'antd';
+const CheckboxGroup = Checkbox.Group;
+
+function onChange(checkedValues) {
+  console.log('checked = ', checkedValues);
+}
+
+ReactDOM.render(
+  <CheckboxGroup options={['Apple', 'Pear', 'Orange']} defaultValue={['Apple']} onChange={onChange} />
+, mountNode);
+````

components/checkbox/index.jsx

@@ -1,13 +1,18 @@
-import Checkbox from 'rc-checkbox';
+import RcCheckbox from 'rc-checkbox';
 import React from 'react';
+import Group from './Group';
 
-export default React.createClass({
+const Checkbox = React.createClass({
   getDefaultProps() {
     return {
       prefixCls: 'ant-checkbox'
     };
   },
   render() {
-    return <Checkbox {...this.props} />;
+    return <RcCheckbox {...this.props} />;
   }
 });
+
+Checkbox.Group = Group;
+
+export default Checkbox;

components/checkbox/index.md

@@ -10,8 +10,8 @@
 
 ## 何时使用
 
-- 需要表示开关状态/两种状态之间的切换时；
-- 和 `switch`的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
+- 在一组可选项中进行多项选择时；
+- 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
 
 ## API
 
@@ -19,6 +19,15 @@
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|
-|  checked | 指定当前是否选中 | boolean  |   | false    |
-|  defaultChecked | 初始是否选中 | boolean |  | false |
-|  onChange | 变化时回调函数 | Function(e:Event) |  |  | |
+| checked | 指定当前是否选中 | boolean  |   | false    |
+| defaultChecked | 初始是否选中 | boolean |  | false |
+| onChange | 变化时回调函数 | Function(e:Event) |  |  | |
+
+### Checkbox Group
+
+| 参数      | 说明                                     | 类型       |  可选值 | 默认值 |
+|-----------|------------------------------------------|------------|---------|--------|
+| defaultValue | 默认选中的选项 | array |   | [] |
+| value | 指定选中的选项| array |   | [] |
+| options  | 指定可选项 | array |   | [] |
+| onChange | 变化时回调函数 | Function(checkedValue) |  |  | |

components/col/index.js

@@ -0,0 +1,2 @@
+import { Col } from '../layout';
+export default Col;

components/collapse/demo/accordion.md

@@ -7,17 +7,17 @@
 ---
 
 ````jsx
-var Collapse = antd.Collapse;
-var Panel = Collapse.Panel;
+import { Collapse } from 'antd';
+const Panel = Collapse.Panel;
 
-var text = `
+const text = `
   A dog is a type of domesticated animal.
   Known for its loyalty and faithfulness,
   it can be found as a welcome guest in many households across the world.
 `;
 
-React.render(
-  <Collapse accordion={true}>
+ReactDOM.render(
+  <Collapse accordion>
     <Panel header={`This is panel header 1`} key="1">
       <p>{text}</p>
     </Panel>
@@ -28,5 +28,5 @@ React.render(
       <p>{text}</p>
     </Panel>
   </Collapse>
-, document.getElementById('components-collapse-demo-accordion'));
+, mountNode);
 ````

components/collapse/demo/basic.md

@@ -7,30 +7,30 @@
 ---
 
 ````jsx
-var Collapse = antd.Collapse;
-var Panel = Collapse.Panel;
+import { Collapse } from 'antd';
+const Panel = Collapse.Panel;
 
 function callback(key) {
   console.log(key);
 }
 
-var text = `
+const text = `
   A dog is a type of domesticated animal.
   Known for its loyalty and faithfulness,
   it can be found as a welcome guest in many households across the world.
 `;
 
-React.render(
-  <Collapse defaultActiveKey={["1"]} onChange={callback}>
-    <Panel header={`This is panel header 1`} key="1">
+ReactDOM.render(
+  <Collapse defaultActiveKey={['1']} onChange={callback}>
+    <Panel header="This is panel header 1" key="1">
       <p>{text}</p>
     </Panel>
-    <Panel header={`This is panel header 2`} key="2">
+    <Panel header="This is panel header 2" key="2">
       <p>{text}</p>
     </Panel>
-    <Panel header={`This is panel header 3`} key="3">
+    <Panel header="This is panel header 3" key="3">
       <p>{text}</p>
     </Panel>
   </Collapse>
-, document.getElementById('components-collapse-demo-basic'));
+, mountNode);
 ````

components/collapse/demo/mix.md

@@ -7,21 +7,21 @@
 ---
 
 ````jsx
-var Collapse = antd.Collapse;
-var Panel = Collapse.Panel;
+import { Collapse } from 'antd';
+const Panel = Collapse.Panel;
 
 function callback(key) {
   console.log(key);
 }
 
-var text = `
+const text = `
   A dog is a type of domesticated animal.
   Known for its loyalty and faithfulness,
   it can be found as a welcome guest in many households across the world.
 `;
 
-React.render(
-  <Collapse onChange={callback} accordion={true}>
+ReactDOM.render(
+  <Collapse onChange={callback} accordion>
     <Panel header={`This is panel header 1`} key="1">
       <Collapse defaultActiveKey="1">
         <Panel header={`This is panel nest panel`} key="1">
@@ -36,5 +36,5 @@ React.render(
       <p>{text}</p>
     </Panel>
   </Collapse>
-, document.getElementById('components-collapse-demo-mix'));
+, mountNode);
 ````

components/date-picker/PickerMixin.jsx

@@ -0,0 +1,47 @@
+import objectAssign from 'object-assign';
+import defaultLocale from './locale/zh_CN';
+import DateTimeFormat from 'gregorian-calendar-format';
+import GregorianCalendar from 'gregorian-calendar';
+
+export default {
+  getLocale() {
+    // 统一合并为完整的 Locale
+    let locale = objectAssign({}, defaultLocale, this.props.locale);
+    locale.lang = objectAssign({}, defaultLocale.lang, this.props.locale.lang);
+    return locale;
+  },
+
+  getFormatter() {
+    const formats = this.formats = this.formats || {};
+    const format = this.props.format;
+    if (formats[format]) {
+      return formats[format];
+    }
+    formats[format] = new DateTimeFormat(format, this.getLocale().lang.format);
+    return formats[format];
+  },
+
+  parseDateFromValue(value) {
+    if (value) {
+      if (typeof value === 'string') {
+        return this.getFormatter().parse(value, {locale: this.getLocale()});
+      } else if (value instanceof Date) {
+        let date = new GregorianCalendar(this.getLocale());
+        date.setTime(+value);
+        return date;
+      }
+    } else if (value === null) {
+      return value;
+    }
+    return undefined;
+  },
+
+  // remove input readonly warning
+  handleInputChange() {
+  },
+  toggleOpen(e) {
+    this.setState({
+      open: e.open
+    });
+  },
+};

components/date-picker/RangePicker.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import GregorianCalendar from 'gregorian-calendar';
+import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
+import DatePicker from 'rc-calendar/lib/Picker';
+import TimePicker from 'rc-time-picker';
+import classNames from 'classnames';
+import PickerMixin from './PickerMixin';
+
+export default React.createClass({
+  getDefaultProps() {
+    return {
+      defaultValue: [],
+      format: 'yyyy-MM-dd',
+      startPlaceholder: '开始日期',
+      endPlaceholder: '结束日期',
+      transitionName: 'slide-up',
+      popupStyle: {},
+      onChange() {
+      },  // onChange 可用于 Validator
+      locale: {},
+      align: {
+        offset: [0, -9],
+      },
+      open: false
+    };
+  },
+  getInitialState() {
+    const {value, defaultValue} = this.props;
+    const start = (value && value[0]) || defaultValue[0];
+    const end = (value && value[1]) || defaultValue[1];
+    return {
+      value: [
+        this.parseDateFromValue(start),
+        this.parseDateFromValue(end)
+      ]
+    };
+  },
+  mixins: [ PickerMixin ],
+  componentWillReceiveProps(nextProps) {
+    if ('value' in nextProps) {
+      const start = this.parseDateFromValue(nextProps.value[0]);
+      const end = this.parseDateFromValue(nextProps.value[1]);
+      this.setState({
+        value: [start, end]
+      });
+    }
+  },
+  handleChange(value) {
+    if (!('value' in this.props)) {
+      this.setState({ value });
+    }
+    const startTime = value[0] ? new Date(value[0].getTime()) : null;
+    const endTime = value[1] ? new Date(value[1].getTime()) : null;
+    this.props.onChange([startTime, endTime]);
+  },
+  render() {
+    const locale = this.getLocale();
+    // 以下两行代码
+    // 给没有初始值的日期选择框提供本地化信息
+    // 否则会以周日开始排
+    let defaultCalendarValue = new GregorianCalendar(locale);
+    defaultCalendarValue.setTime(Date.now());
+
+    const {disabledDate, showTime, size, startPlaceholder, endPlaceholder,
+           transitionName, disabled, popupStyle, align, style} = this.props;
+    const state = this.state;
+
+    const timePicker = showTime
+      ? <TimePicker prefixCls="ant-time-picker"
+          placeholder={locale.lang.timePlaceholder}
+          transitionName="slide-up" />
+      : null;
+
+    const calendarClassName = classNames({
+      ['ant-calendar-time']: this.props.showTime,
+    });
+
+    const calendar = <RangeCalendar prefixCls="ant-calendar"
+                        className={calendarClassName}
+                        timePicker={timePicker}
+                        disabledDate={disabledDate}
+                        dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
+                        locale={locale.lang}
+                        defaultValue={defaultCalendarValue}
+                        showClear />;
+
+    const pickerClass = classNames({
+      'ant-calendar-picker': true,
+      'ant-calendar-picker-open': state.open
+    });
+
+    const pickerInputClass = classNames({
+      'ant-calendar-range-picker': true,
+      'ant-input': true,
+      'ant-input-lg': size === 'large',
+      'ant-input-sm': size === 'small',
+    });
+
+    return (<span className={pickerClass} style={style}>
+      <DatePicker
+        transitionName={transitionName}
+        disabled={disabled}
+        calendar={calendar}
+        value={state.value}
+        prefixCls="ant-calendar-picker-container"
+        style={popupStyle}
+        align={align}
+        onOpen={this.toggleOpen}
+        onClose={this.toggleOpen}
+        onChange={this.handleChange}>
+        {
+          ({value}) => {
+            const start = value[0];
+            const end = value[1];
+            return (
+              <span className={pickerInputClass} disabled={disabled}>
+                <input disabled={disabled}
+                  onChange={this.handleInputChange}
+                  value={start && this.getFormatter().format(start)}
+                  placeholder={startPlaceholder}
+                  className="ant-calendar-range-picker-input" />
+                <span className="ant-calendar-range-picker-separator"> ~ </span>
+                <input disabled={disabled}
+                  onChange={this.handleInputChange}
+                  value={end && this.getFormatter().format(end)}
+                  placeholder={endPlaceholder}
+                  className="ant-calendar-range-picker-input" />
+                <span className="ant-calendar-picker-icon" />
+              </span>
+            );
+          }
+        }
+      </DatePicker>
+    </span>);
+  }
+});

components/date-picker/demo/basic.md

@@ -0,0 +1,17 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+function onChange(value) {
+  console.log(value);
+}
+
+ReactDOM.render(<DatePicker onChange={onChange} />, mountNode);
+````

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

@@ -0,0 +1,22 @@
+# 指定不可选择日期
+
+- order: 6
+
+设置 `disabledDate` 方法，来确定不可选时段。
+
+如上例：不可选择今天之后的日期。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+const disabledDate = function(current) {
+  // can not select days after today
+  return current && current.getTime() > Date.now();
+};
+
+ReactDOM.render(
+  <DatePicker disabledDate={disabledDate} />
+, mountNode);
+````

components/date-picker/demo/disabled.md

@@ -0,0 +1,15 @@
+# 禁用
+
+- order: 5
+
+选择框的不可用状态。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+ReactDOM.render(
+  <DatePicker defaultValue="2015-06-06" disabled />
+, mountNode);
+````

components/date-picker/demo/formatter.md

@@ -0,0 +1,15 @@
+# 日期格式
+
+- order: 1
+
+使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+ReactDOM.render(
+  <DatePicker defaultValue="2015/01/01" format="yyyy/MM/dd" />
+, mountNode);
+````

components/date-picker/demo/locale.md

@@ -0,0 +1,31 @@
+# 国际化
+
+- order: 10
+
+通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+import enUS from 'antd/lib/date-picker/locale/en_US';
+import assign from 'object-assign';
+
+const App = React.createClass({
+  getInitialState() {
+    return {
+      locale: assign({}, enUS, {
+        timezoneOffset: 0 * 60,
+        firstDayOfWeek: 0,
+        minimalDaysInFirstWeek: 1,
+      })
+    };
+  },
+  render() {
+    return <DatePicker locale={this.state.locale} />;
+  }
+});
+
+ReactDOM.render(<App />, mountNode);
+````
+

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

@@ -0,0 +1,15 @@
+# 月选择器
+
+- order: 9
+
+使用 `MonthPicker` 实现月选择器.
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+const MonthPicker = DatePicker.MonthPicker;
+ReactDOM.render(
+  <MonthPicker defaultValue="2015-12" />
+, mountNode);
+````

components/date-picker/demo/range.md

@@ -0,0 +1,21 @@
+# 日期范围二
+
+- order: 8
+
+使用 `RangePicker` 实现日期范围选择有更好的交互体验。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+const RangePicker = DatePicker.RangePicker;
+
+function onChange(value) {
+  console.log('From: ', value[0], ', to: ', value[1]);
+}
+ReactDOM.render(<div>
+  <RangePicker style={{width: 184}} onChange={onChange} />
+  <br />
+  <RangePicker showTime format="yyyy-MM-dd HH:mm:ss" onChange={onChange} />
+</div>, mountNode);
+````

components/date-picker/demo/size.md

@@ -0,0 +1,19 @@
+# 三种大小
+
+- order: 1
+
+三种大小的输入框，大的用在表单中，中的为默认。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <DatePicker size="large" />
+    <DatePicker />
+    <DatePicker size="small" />
+  </div>
+, mountNode);
+````

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

@@ -0,0 +1,54 @@
+# 日期范围一
+
+- order: 7
+
+可以设置 `disabledDate` 方法，来约束开始和结束日期。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+const DateRange = React.createClass({
+  getInitialState() {
+    return {
+      startValue: null,
+      endValue: null
+    };
+  },
+  disabledStartDate(startValue) {
+    if (!startValue || !this.state.endValue) {
+      return false;
+    }
+    return startValue.getTime() >= this.state.endValue.getTime();
+  },
+  disabledEndDate(endValue) {
+    if (!endValue || !this.state.startValue) {
+      return false;
+    }
+    return endValue.getTime() <= this.state.startValue.getTime();
+  },
+  onChange(field, value) {
+    console.log(field, 'change', value);
+    this.setState({
+      [field]: value,
+    });
+  },
+  render() {
+    return <div>
+      <DatePicker disabledDate={this.disabledStartDate}
+        value={this.state.startValue}
+        placeholder="开始日期"
+        onChange={this.onChange.bind(this, 'startValue')} />
+      <DatePicker disabledDate={this.disabledEndDate}
+        value={this.state.endValue}
+        placeholder="结束日期"
+        onChange={this.onChange.bind(this, 'endValue')} />
+    </div>;
+  }
+});
+
+ReactDOM.render(
+  <DateRange />
+, mountNode);
+````

components/date-picker/demo/time.md

@@ -0,0 +1,19 @@
+# 日期时间选择
+
+- order: 4
+
+增加选择时间功能。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+function onChange(value) {
+  console.log('选择了时间：', value);
+}
+
+ReactDOM.render(
+<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" onChange={onChange} style={{width: 160}} />
+, mountNode);
+````

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

@@ -0,0 +1,53 @@
+# 日期时间选择二
+
+- order: 4
+- hidden: true
+
+和 [时间选择框](/components/timepicer) 配合使用。
+
+---
+
+````jsx
+import { DatePicker, TimePicker } from 'antd';
+
+const DateTimePicker = React.createClass({
+  handleChange(from, value) {
+    this.result = this.result || new Date();
+    if (!value) {
+      if (from === 'date') {
+        this.selectedDate = false;
+      } else {
+        this.selectedTime = false;
+      }
+      return;
+    }
+    if (from === 'date') {
+      this.result.setFullYear(value.getFullYear());
+      this.result.setMonth(value.getMonth());
+      this.result.setDate(value.getDate());
+      this.selectedDate = true;
+    } else {
+      this.result.setHours(value.getHours());
+      this.result.setMinutes(value.getMinutes());
+      this.result.setSeconds(value.getSeconds());
+      this.selectedTime = true;
+    }
+    if (this.selectedDate && this.selectedTime) {
+      this.props.onSelect(this.result);
+    }
+  },
+  render() {
+    return <div>
+      <DatePicker onChange={this.handleChange.bind(null, 'date')} />
+      <TimePicker onChange={this.handleChange.bind(null, 'time')} />
+    </div>;
+  }
+});
+
+function onSelect(value) {
+  console.log('选择了时间：', value);
+}
+
+ReactDOM.render(<DateTimePicker onSelect={onSelect} />
+, mountNode);
+````

components/date-picker/index.jsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import Calendar from 'rc-calendar';
+import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
+import DatePicker from 'rc-calendar/lib/Picker';
+import GregorianCalendar from 'gregorian-calendar';
+import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
+import AntRangePicker from './RangePicker';
+import PickerMixin from './PickerMixin';
+import TimePicker from 'rc-time-picker';
+import classNames from 'classnames';
+
+function createPicker(TheCalendar, defaultFormat) {
+  return React.createClass({
+    getDefaultProps() {
+      return {
+        format: defaultFormat || 'yyyy-MM-dd',
+        transitionName: 'slide-up',
+        popupStyle: {},
+        onChange() {
+        },  // onChange 可用于 Validator
+        locale: {},
+        align: {
+          offset: [0, -9],
+        },
+        open: false
+      };
+    },
+    getInitialState() {
+      return {
+        value: this.parseDateFromValue(this.props.value || this.props.defaultValue)
+      };
+    },
+    mixins: [ PickerMixin ],
+    componentWillReceiveProps(nextProps) {
+      if ('value' in nextProps) {
+        this.setState({
+          value: this.parseDateFromValue(nextProps.value)
+        });
+      }
+    },
+    handleChange(value) {
+      if (!('value' in this.props)) {
+        this.setState({ value });
+      }
+      const timeValue = value ? new Date(value.getTime()) : null;
+      this.props.onChange(timeValue);
+    },
+    render() {
+      const locale = this.getLocale();
+      // 以下两行代码
+      // 给没有初始值的日期选择框提供本地化信息
+      // 否则会以周日开始排
+      let defaultCalendarValue = new GregorianCalendar(locale);
+      defaultCalendarValue.setTime(Date.now());
+
+      const placeholder = ('placeholder' in this.props)
+        ? this.props.placeholder : locale.lang.placeholder;
+
+      const timePicker = this.props.showTime
+        ? <TimePicker prefixCls="ant-time-picker"
+            placeholder={locale.lang.timePlaceholder}
+            transitionName="slide-up" />
+        : null;
+
+      const calendarClassName = classNames({
+        ['ant-calendar-time']: this.props.showTime,
+        ['ant-calendar-month']: MonthCalendar === TheCalendar,
+      });
+
+      const calendar = (
+        <TheCalendar
+          disabledDate={this.props.disabledDate}
+          locale={locale.lang}
+          timePicker={timePicker}
+          defaultValue={defaultCalendarValue}
+          dateInputPlaceholder={placeholder}
+          prefixCls="ant-calendar"
+          className={calendarClassName}
+          showOk={this.props.showTime}
+          showClear />
+      );
+
+      let sizeClass = '';
+      if (this.props.size === 'large') {
+        sizeClass = ' ant-input-lg';
+      } else if (this.props.size === 'small') {
+        sizeClass = ' ant-input-sm';
+      }
+
+      let pickerClass = 'ant-calendar-picker';
+      if (this.state.open) {
+        pickerClass += ' ant-calendar-picker-open';
+      }
+
+      return <span className={pickerClass}>
+        <DatePicker
+          transitionName={this.props.transitionName}
+          disabled={this.props.disabled}
+          calendar={calendar}
+          value={this.state.value}
+          prefixCls="ant-calendar-picker-container"
+          style={this.props.popupStyle}
+          align={this.props.align}
+          onOpen={this.toggleOpen}
+          onClose={this.toggleOpen}
+          onChange={this.handleChange}>
+          {
+            ({value}) => {
+              return (
+                <span>
+                  <input disabled={this.props.disabled}
+                         onChange={this.handleInputChange}
+                         value={value && this.getFormatter().format(value)}
+                         placeholder={placeholder}
+                         style={this.props.style}
+                         className={'ant-calendar-picker-input ant-input' + sizeClass}/>
+                  <span className="ant-calendar-picker-icon"/>
+                </span>
+              );
+            }
+          }
+        </DatePicker>
+      </span>;
+    }
+  });
+}
+
+const AntDatePicker = createPicker(Calendar);
+const AntMonthPicker = createPicker(MonthCalendar, 'yyyy-MM');
+
+const AntCalendar = React.createClass({
+  getDefaultProps() {
+    return {
+      locale: CalendarLocale,
+      prefixCls: 'ant-calendar',
+    };
+  },
+  render() {
+    return <Calendar {...this.props} />;
+  }
+});
+
+AntDatePicker.Calendar = AntCalendar;
+AntDatePicker.RangePicker = AntRangePicker;
+AntDatePicker.MonthPicker = AntMonthPicker;
+
+export default AntDatePicker;

components/date-picker/index.md

@@ -0,0 +1,56 @@
+# DatePicker
+
+- category: Components
+- chinese: 日期选择框
+- type: 表单
+
+---
+
+输入或选择日期的控件。
+
+## 何时使用
+
+当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
+
+## API
+
+### DatePicker
+
+```html
+<DatePicker defaultValue="2015-01-01" />
+```
+
+> 注意：`0.11+` 后 `Datepicker` 改名为 `DatePicker`。
+
+
+| 参数         | 说明           | 类型     | 默认值       |
+|--------------|----------------|----------|--------------|
+| value        | 日期           | string   | 无           |
+| defaultValue | 默认日期       | string   | 无           |
+| format       | 展示的日期格式 | string   | "yyyy-MM-dd" |
+| disabledDate | 不可选择的日期 | function | 无           |
+| onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(Date value) | 无           |
+| disabled     | 禁用           | bool     | false        |
+| style        | 自定义输入框样式     | object     | {}   |
+| popupStyle   | 格外的弹出日历样式   | object     | {}   |
+| size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |
+| locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
+| showTime     | 增加时间选择功能 | bool | false  |
+| onOk         | 点击确定按钮的回调 | function | 无 |
+
+### RangePicker
+
+| 参数         | 说明           | 类型     | 默认值       |
+|--------------|----------------|----------|--------------|
+| value        | 日期          | [string, string]   | 无           |
+| defaultValue | 默认日期       | [string, string]   | 无           |
+| format       | 展示的日期格式  | string    | "yyyy-MM-dd HH:mm:ss" |
+| onChange     | 时间发生变化的回调，发生在用户选择时间时 | function([Date start, Date end]) | 无           |
+
+`disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` 属性与 DatePicker 的一致。
+
+<style>
+.code-box-demo .ant-calendar-picker {
+  margin: 0 8px 12px 0;
+}
+</style>

components/date-picker/locale/en_US.js

@@ -0,0 +1,15 @@
+import objectAssign from 'object-assign';
+import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/en_US';
+import CalendarLocale from 'rc-calendar/lib/locale/en_US';
+
+// 统一合并为完整的 Locale
+let locale = objectAssign({}, GregorianCalendarLocale);
+locale.lang = objectAssign({
+  placeholder: 'Select date',
+  timePlaceholder: 'Select time',
+}, CalendarLocale);
+
+// All settings at:
+// https://github.com/ant-design/ant-design/issues/424
+
+export default locale;

components/date-picker/locale/zh_CN.js

@@ -0,0 +1,18 @@
+import objectAssign from 'object-assign';
+import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/zh_CN';
+import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
+
+// 统一合并为完整的 Locale
+let locale = objectAssign({}, GregorianCalendarLocale);
+locale.lang = objectAssign({
+  placeholder: '请选择日期',
+  timePlaceholder: '请选择时间',
+}, CalendarLocale);
+
+// should add whitespace between char in Button
+locale.lang.ok = '确 定';
+
+// All settings at:
+// https://github.com/ant-design/ant-design/issues/424
+
+export default locale;

components/datepicker/demo/basic.md

@@ -1,16 +0,0 @@
-# 基本
-
-- order: 0
-
-最简单的用法。
-
----
-
-````jsx
-// or require('antd/lib/datepicker');
-var Datepicker = antd.Datepicker;
-
-React.render(
-  <Datepicker defaultValue="2012-12-12" />
-, document.getElementById('components-datepicker-demo-basic'));
-````

components/datepicker/demo/disabled.md

@@ -1,15 +0,0 @@
-# 禁用
-
-- order: 5
-
-选择框的不可用状态。
-
----
-
-````jsx
-var Datepicker = antd.Datepicker;
-
-React.render(
-  <Datepicker value="2015-06-06" disabled={true} />
-, document.getElementById('components-datepicker-demo-disabled'));
-````

components/datepicker/demo/formatter.md

@@ -1,15 +0,0 @@
-# 日期格式
-
-- order: 1
-
-使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。
-
----
-
-````jsx
-var Datepicker = antd.Datepicker;
-
-React.render(
-  <Datepicker value="2015/01/01" format="yyyy/MM/dd" />
-, document.getElementById('components-datepicker-demo-formatter'));
-````

components/datepicker/demo/range.md

@@ -1,21 +0,0 @@
-# 范围
-
-- order: 3
-
-设置 `disabledDate` 方法，来确定不可选时段。
-
-如上例：不可选择今天之后的日期。
-
----
-
-````jsx
-var Datepicker = antd.Datepicker;
-var disabledDate = function(current, value) {
-  // can not select days after today
-  return current.getTime() > Date.now();
-};
-
-React.render(
-  <Datepicker disabledDate={disabledDate} />
-, document.getElementById('components-datepicker-demo-range'));
-````

components/datepicker/demo/select.md

@@ -1,24 +0,0 @@
-# 选择日期
-
-- order: 2
-
-通过设置选择日期的回调事件 `onSelect`，完成交互行为。
-
----
-
-````jsx
-var Datepicker = antd.Datepicker;
-
-var Picker = React.createClass({
-  handleChange: function(value) {
-    console.log(new Date(value.getTime()));
-  },
-  render: function() {
-    return <Datepicker onSelect={this.handleChange} />
-  }
-});
-
-React.render(
-  <Picker />
-, document.getElementById('components-datepicker-demo-select'));
-````