Merge branch 'develop-0.10.0' of https://github.com/ant-design/ant-design into develop-0.10.0

components/affix/demo/basic.md

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

components/affix/demo/offset.md

@@ -8,10 +8,11 @@
 
 ````jsx
 var Affix = antd.Affix;
+var Button = antd.Button;
 
 React.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'));
 ````

components/affix/index.jsx

 import React from 'react';
-import joinClasses from 'react/lib/joinClasses';
 import rcUtil from 'rc-util';
 
 function getScroll(w, top) {
@@ -89,12 +88,14 @@ let Affix = React.createClass({
   },
 
   render() {
-    let affix = this.state.affix ? 'ant-affix' : '';
-    let className = this.props.className;
+    const className = rcUtil.classSet({
+      [this.props.className]: this.props.className,
+      'ant-affix': this.state.affix
+    });
 
     return (
       <div {...this.props}>
-        <div className={joinClasses(className, affix)} style={this.state.affixStyle}>
+        <div className={className} style={this.state.affixStyle}>
           {this.props.children}
         </div>
       </div>

components/button/button-group.jsx

 import React from 'react';
+import rcUtil from 'rc-util';
 
 const prefix = 'ant-btn-group-';
 
 export default class ButtonGroup extends React.Component {
   render() {
     const {size, className, ...others} = this.props;
+    const classes = rcUtil.classSet({
+      'ant-btn-group': true,
+      [prefix + size]: size,
+      [className]: className
+    });
 
-    let classSet = ['ant-btn-group'];
-    if (size) {
-      classSet.push(prefix + size);
-    }
-    if (className) {
-      classSet.push(className);
-    }
-
-    return <div {...others} className={classSet.join(' ')} />;
+    return <div {...others} className={classes} />;
   }
 }
 ButtonGroup.propTypes = {

components/button/button.jsx

 import React from 'react';
+import rcUtil from 'rc-util';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@@ -7,11 +8,6 @@ function isString(str) {
 }
 
 const prefix = 'ant-btn-';
-function updateClassWithProp(classSet, prop) {
-  if (prop) {
-    classSet.push(prefix + prop);
-  }
-}
 
 // Insert one space between two chinese characters automatically.
 function insertSpace(child) {
@@ -30,22 +26,20 @@ function insertSpace(child) {
 export default class Button extends React.Component {
   render() {
     const props = this.props;
-    const {type, shape, size, onClick, className, children, ...others} = props;
-
-    let classSet = ['ant-btn'];
-    updateClassWithProp(classSet, type);
-    updateClassWithProp(classSet, shape);
-    updateClassWithProp(classSet, size);
-    if ('loading' in props && props.loading !== false) {
-      classSet.push(prefix + 'loading');
-    }
-    if (className) {
-      classSet.push(className);
-    }
+    const {type, shape, size, onClick, className, htmlType, children, ...others} = props;
+
+    const classes = rcUtil.classSet({
+      'ant-btn': true,
+      [prefix + type]: type,
+      [prefix + shape]: shape,
+      [prefix + size]: size,
+      [prefix + 'loading']: ('loading' in props && props.loading !== false),
+      [className]: className
+    });
 
     const kids = React.Children.map(children, insertSpace);
 
-    return <button {...others} type="button" className={classSet.join(' ')} onClick={onClick}>
+    return <button {...others} type={htmlType || 'button'} className={classes} onClick={onClick}>
       {kids}
     </button>;
   }

components/button/demo/menu.md

-# 菜单按钮
-
-- order: 5
-
-**注**: 下拉按钮的 icon 大小统一成 **10px**。
-
-> 更多交互，详见 [Dropdown 下拉菜单](http://ant.design/components/dropdown/)。
-
----
-
-````jsx
-var Icon = antd.Icon;
-
-React.render(
-<div className="nico-insert-code">
-  <button className="ant-btn ant-btn-primary ant-btn-menu">
-    <span>菜单按钮</span>
-    <Icon type="down" />
-  </button>
-  <button className="ant-btn ant-btn-ghost ant-btn-circle ant-btn-menu">
-    <Icon type="down" />
-  </button>
-</div>
-, document.getElementById('components-button-demo-menu'));
-````

components/button/index.md

@@ -22,9 +22,10 @@
 属性 | 说明 | 类型 | 默认值
 -----|-----|-----|------
 type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | Enum | undefined
+htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准 | Enum | `button`
 shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | Enum | undefined
 size | 设置按钮大小，可选值为 `sm` `lg` 或者不设 | Enum | undefined
 loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，或直接设置值，如：`loading="true"` | Bool | false
 onClick | `click` 事件的 handler | Function | `function() {}`
 
-- `<Button>Hello world!</Button>` 最终会被渲染为 `<button type="button">Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`
+- `<Button>Hello world!</Button>` 最终会被渲染为 `<button>Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`

components/carousel/index.md

@@ -19,7 +19,6 @@
 | 参数             | 说明                                         | 类型     | 默认值                          |
 |------------------|----------------------------------------------|----------|---------------------------------|
 | effect           | 动画效果函数，可取 scrollx, fade | String | scrollx |
-| arrow | 是否显示前后翻页箭头 | Boolean   | false |
 | dots | 是否显示面板指示点 | Boolean   | true |
 | vertical | 垂直显示 | Boolean   | false |
 | autoplay | 是否自动切换 | Boolean   | false |

components/checkbox/demo/controller.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Checkbox = antd.Checkbox;
+var Button = antd.Button;
 var container = document.getElementById('components-checkbox-demo-controller');
 
 var App = React.createClass({
@@ -30,15 +31,15 @@ var App = React.createClass({
         </label>
       </p>
       <p>
-        <button className="ant-btn ant-btn-primary ant-btn-sm"
+        <Button type="primary" size="sm"
           onClick={this.toggleChecked}>
           {!this.state.checked ? "选中":"取消"}
-        </button>
-        <button style={{'marginLeft': '10px'}}
-          className="ant-btn ant-btn-primary ant-btn-sm"
+        </Button>
+        <Button style={{'marginLeft': '10px'}}
+          type="primary" size="sm"
           onClick={this.toggleDisable}>
           {!this.state.disabled ? "不可用":"可用"}
-        </button>
+        </Button>
       </p>
     </div>;
   },

components/common/openAnimation.js

-import velocity from 'velocity-animate';
+let velocity;
+if (typeof document !== 'undefined' && typeof window !== 'undefined') {
+  velocity = require('velocity-animate');
+}
 
 function animate(node, show, transitionName, done) {
   let ok;
@@ -37,4 +40,4 @@ const animation = {
   },
 };
 
-export default animation;
+module.exports = animation;

components/dropdown/demo/basic.md

@@ -9,6 +9,7 @@
 ````jsx
 var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var menu = <Menu>
@@ -25,9 +26,9 @@ var menu = <Menu>
 
 React.render(
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-menu">
+    <Button>
       某按钮 <Icon type="down" />
-    </button>
+    </Button>
   </Dropdown>
 , document.getElementById('components-dropdown-demo-basic'));
 ````

components/dropdown/demo/event.md

@@ -9,6 +9,7 @@
 ````jsx
 var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
+var Button = antd.Button;
 var Icon = antd.Icon;
 var onSelect = function ({key}){
   alert('选中了菜单' + key);
@@ -22,9 +23,9 @@ var menu = <Menu onSelect={onSelect}>
 
 React.render(
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-menu">
+    <Button>
       鼠标移入，点击菜单 <Icon type="down" />
-    </button>
+    </Button>
   </Dropdown>
 , document.getElementById('components-dropdown-demo-event'));
 ````

components/dropdown/demo/item.md

@@ -9,6 +9,7 @@
 ````jsx
 var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var menu = <Menu>
@@ -24,9 +25,9 @@ var menu = <Menu>
 
 React.render(
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-menu">
+    <Button>
       鼠标移入 <Icon type="down" />
-    </button>
+    </Button>
   </Dropdown>
 , document.getElementById('components-dropdown-demo-item'));
 ````

components/dropdown/demo/trigger.md

@@ -9,6 +9,7 @@
 ````jsx
 var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var menu = <Menu>
@@ -24,14 +25,14 @@ var menu = <Menu>
 
 React.render(<div>
   <Dropdown overlay={menu} trigger="click">
-    <button className="ant-btn ant-btn-primary ant-btn-menu">
+    <Button type="primary">
       点击触发 <Icon type="down" />
-    </button>
+    </Button>
   </Dropdown>
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-menu">
+    <Button>
       鼠标移入 <Icon type="down" />
-    </button>
+    </Button>
   </Dropdown>
 </div>, document.getElementById('components-dropdown-demo-trigger'));
 ````

components/enter-animation/demo/basic.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var EnterAnimation = antd.EnterAnimation;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -24,7 +25,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation>
           {this.state.show ?

components/enter-animation/demo/enter-data.md

@@ -9,6 +9,7 @@
 
 ````jsx
 var EnterAnimation = antd.EnterAnimation;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -33,7 +34,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
         {this.state.show ? <div key='enter-data'>

components/enter-animation/demo/enter-leave.md

@@ -9,6 +9,7 @@
 
 ````jsx
 var EnterAnimation = antd.EnterAnimation;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -40,7 +41,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
           {this.state.show ? 

components/enter-animation/demo/form.md

@@ -13,6 +13,7 @@ var Option = Select.Option;
 var Checkbox = antd.Checkbox;
 var Radio = antd.Radio;
 var RadioGroup = antd.Radio.Group;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -43,7 +44,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20, textAlign: 'center'}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation enter={this.state.enter} leave={this.state.leave} component='form' className="ant-form-horizontal">
           {this.state.show ? <div key='from'>
@@ -85,7 +86,7 @@ var Test = React.createClass({
             </div>
             <div className="row">
               <div className="col-16 col-offset-6">
-                <input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
+                <Button type="primary">确定</Button>
               </div>
             </div>
           </div> : null}

components/enter-animation/demo/page.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var EnterAnimation = antd.EnterAnimation;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -34,7 +35,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
           {this.state.show ? <div key='a'>

components/enter-animation/demo/style.md

@@ -9,6 +9,7 @@
 
 ````jsx
 var EnterAnimation = antd.EnterAnimation;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -35,7 +36,7 @@ var Test = React.createClass({
     return (
       <div>
         <div style={{marginBottom: 20}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+          <Button type="primary" onClick={this.onClick}>切换</Button>
         </div>
         <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
         {this.state.show ? <div key='enter-data'>

components/form/demo/horizontal-form.md

@@ -16,6 +16,7 @@
 var Checkbox = antd.Checkbox;
 var Radio = antd.Radio;
 var RadioGroup = antd.Radio.Group;
+var Button = antd.Button;
 
 React.render(
 <form className="ant-form-horizontal">
@@ -56,7 +57,7 @@ React.render(
   </div>
   <div className="row">
     <div className="col-16 col-offset-6">
-      <input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
+      <Button type="primary">确定</Button>
     </div>
   </div>
 </form>

components/form/demo/inline-form.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Checkbox = antd.Checkbox;
+var Button = antd.Button;
 
 React.render(
 <form className="ant-form-inline">
@@ -24,7 +25,7 @@ React.render(
       <Checkbox /> 记住我
     </label>
   </div>
-  <input type="submit" className="ant-btn ant-btn-primary" value="登 录" />
+  <Button type="primary">登录</Button>
 </form>
 , document.getElementById('components-form-demo-inline-form'));
 ````

components/input-number/demo/disabled.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var InputNumber = antd.InputNumber;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {
@@ -24,7 +25,7 @@ var Test = React.createClass({
     return <div>
       <InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
       <div style={{marginTop: 20}}>
-        <button onClick={this.toggle} className="ant-btn ant-btn-primary">Toggle disabled</button>
+        <Button onClick={this.toggle} type="primary">Toggle disabled</Button>
       </div>
     </div>;
   }

components/layout/demo/offset.md

@@ -4,7 +4,7 @@
 
 列偏移。
 
-使用 `.col-offset-*` 类可以将列向右侧偏。例如，`.col-offset-4` 类将 `.col-md-4` 元素向右侧偏移了4个列（column）的宽度。
+使用 `.col-offset-*` 类可以将列向右侧偏。例如，`.col-offset-4` 类将 `.col-4` 元素向右侧偏移了4个列（column）的宽度。
 
 ---
 

components/message/demo/duration.md

@@ -7,13 +7,14 @@
 ---
 
 ````jsx
+var Button = antd.Button;
 
 var message = antd.message;
 var success = function() {
   message.success('这是一条成功的提示,并将于10秒后消失', 10);
 };
 
-React.render(<button className="ant-btn ant-btn-primary" onClick={success}>自定义时长提示</button>
+React.render(<Button type="primary" onClick={success}>自定义时长提示</Button>
 , document.getElementById('components-message-demo-duration'));
 ````
 

components/message/demo/error.md

@@ -7,12 +7,13 @@
 ---
 
 ````jsx
+var Button = antd.Button;
 
 var message = antd.message;
 var error = function() {
   message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示');
 };
 
-React.render(<button className="ant-btn ant-btn-primary" onClick={error}>显示失败提示</button>
+React.render(<Button type="primary" onClick={error}>显示失败提示</Button>
 , document.getElementById('components-message-demo-error'));
 ````

components/message/demo/info.md

@@ -7,12 +7,13 @@
 ---
 
 ````jsx
+var Button = antd.Button;
 
 var message = antd.message;
 var info = function() {
   message.info('这是一条普通的提醒');
 };
 
-React.render(<button className="ant-btn ant-btn-primary" onClick={info}>显示普通提醒</button>
+React.render(<Button type="primary" onClick={info}>显示普通提醒</Button>
 , document.getElementById('components-message-demo-info'));
 ````

components/message/demo/loading.md

@@ -7,14 +7,15 @@
 ---
 
 ````jsx
-var message = antd.message;
+var Button = antd.Button;
 
+var message = antd.message;
 var success = function() {
   var hide = message.loading('正在执行中...', 0);
   // 异步手动移除
   setTimeout(hide, 2500);
 };
 
-React.render(<button className="ant-btn" onClick={success}>显示加载中...</button>
+React.render(<Button onClick={success}>显示加载中...</Button>
 , document.getElementById('components-message-demo-loading'));
 ````

components/message/demo/success.md

@@ -7,13 +7,14 @@
 ---
 
 ````jsx
-var message = antd.message;
+var Button = antd.Button;
 
+var message = antd.message;
 var success = function() {
   message.success('这是一条成功的提示');
 };
 
-React.render(<button className="ant-btn ant-btn-primary" onClick={success}>显示成功提示</button>
+React.render(<Button type="primary" onClick={success}>显示成功提示</Button>
 , document.getElementById('components-message-demo-success'));
 ````
 

components/modal/confirm.jsx

 import React from 'react';
 import Dialog from './index';
 import Icon from '../iconfont';
+import {Button} from '../button';
 
 export default function (props) {
   let div = document.createElement('div');
@@ -71,18 +72,18 @@ export default function (props) {
     <div className="ant-confirm-content">{props.content}</div>
   </div>;
   let footer = <div className="ant-confirm-btns">
-    <button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}>取 消</button>
-    <button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>确 定</button>
+    <Button size="lg" onClick={onCancel}>取 消</Button>
+    <Button type="primary" size="lg" onClick={onOk}>确 定</Button>
   </div>;
 
   if (props.okCancel) {
     footer = <div className="ant-confirm-btns">
-      <button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}>取 消</button>
-      <button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>确 定</button>
+      <Button size="lg" onClick={onCancel}>取 消</Button>
+      <Button type="primary" size="lg" onClick={onOk}>确 定</Button>
     </div>;
   } else {
     footer = <div className="ant-confirm-btns">
-      <button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>知道了</button>
+      <Button type="primary" size="lg" onClick={onOk}>知道了</Button>
     </div>;
   }
 

components/modal/demo/basic.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Modal = antd.Modal;
+var Button = antd.Button;
 
 var App = React.createClass({
   getInitialState() {
@@ -32,7 +33,7 @@ var App = React.createClass({
   },
   render() {
     return <div>
-      <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
+      <Button type="primary" onClick={this.showModal}>显示对话框</Button>
       <Modal title="第一个 Modal" visible={this.state.visible}
         confirmLoading={this.state.confirmLoading} onOk={this.handleOk} onCancel={this.handleCancel}>
         <p>对话框的内容</p>

components/modal/demo/confirm-promise.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var confirm = antd.Modal.confirm;
+var Button = antd.Button;
 
 function showConfirm(){
   confirm({
@@ -24,7 +25,7 @@ function showConfirm(){
 }
 
 React.render(
-<button className="ant-btn" onClick={showConfirm}>
+<Button onClick={showConfirm}>
   确认对话框
-</button>, document.getElementById('components-modal-demo-confirm-promise'));
+</Button>, document.getElementById('components-modal-demo-confirm-promise'));
 ````

components/modal/demo/confirm.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var confirm = antd.Modal.confirm;
+var Button = antd.Button;
 
 function showConfirm(){
   confirm({
@@ -21,7 +22,7 @@ function showConfirm(){
 }
 
 React.render(
-<button className="ant-btn" onClick={showConfirm}>
+<Button onClick={showConfirm}>
   确认对话框
-</button>, document.getElementById('components-modal-demo-confirm'));
+</Button>, document.getElementById('components-modal-demo-confirm'));
 ````

components/modal/demo/custom.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var Modal = antd.Modal;
+var Button = antd.Button;
+
 var ModalText = '对话框的内容';
 
 var Test = React.createClass({
@@ -40,7 +42,7 @@ var Test = React.createClass({
   },
   render() {
     return <div>
-      <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
+      <Button type="primary" onClick={this.showModal}>显示对话框</Button>
       <Modal title="对话框标题"
         visible={this.state.visible}
         onOk={this.handleOk}

components/modal/demo/footer.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Modal = antd.Modal;
+var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState: function() {
@@ -32,17 +33,17 @@ var Test = React.createClass({
   },
   render() {
     return <div>
-      <button className="ant-btn ant-btn-primary" onClick={this.showModal}>
+      <Button type="primary" onClick={this.showModal}>
         显示对话框
-      </button>
+      </Button>
       <Modal ref="modal"
        visible={this.state.visible}
        title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
         footer={[
-          <button key="back" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>返 回</button>,
-          <button key="submit" className={'ant-btn ant-btn-primary ant-btn-lg ' + (this.state.loading?'ant-btn-loading':'')} onClick={this.handleOk}>
+          <Button key="back" size="lg" onClick={this.handleCancel}>返 回</Button>,
+          <Button key="submit" type="primary" size="lg" loading={this.state.loading} onClick={this.handleOk}>
             提 交
-          </button>
+          </Button>
         ]}>
         <p>对话框的内容</p>
         <p>对话框的内容</p>

components/modal/demo/info.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Modal = antd.Modal;
+var Button = antd.Button;
 
 function info() {
   Modal.info({
@@ -37,9 +38,9 @@ function error() {
 }
 
 React.render(<div>
-  <button className="ant-btn" onClick={info}>信息提示</button>
-  <button className="ant-btn" onClick={success}>成功提示</button>
-  <button className="ant-btn" onClick={error}>失败提示</button>
+  <Button onClick={info}>信息提示</Button>
+  <Button onClick={success}>成功提示</Button>
+  <Button onClick={error}>失败提示</Button>
 </div>, document.getElementById('components-modal-demo-info'));
 ````
 

components/modal/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Dialog from 'rc-dialog';
 import { Dom } from 'rc-util';
 import confirm from './confirm';
+import { Button } from '../button';
 
 function noop() {
 }
@@ -73,16 +74,16 @@ let AntModal = React.createClass({
   },
 
   render() {
-    let loadingClass = this.state.confirmLoading ? ' ant-btn-loading' : '';
     let props = this.props;
     let defaultFooter = [
-      <button key="cancel" type="button" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>取 消</button>,
-      <button key="confirm"
-        type="button"
-        className={'ant-btn ant-btn-primary ant-btn-lg' + loadingClass}
+      <Button key="cancel" size="lg" onClick={this.handleCancel}>取 消</Button>,
+      <Button key="confirm"
+        type="primary"
+        size="lg"
+        loading={this.state.confirmLoading}
         onClick={this.handleOk}>
         确 定
-      </button>
+      </Button>
     ];
     let footer = props.footer || defaultFooter;
     let visible = this.state.visible;

components/notification/demo/basic.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var notification = antd.Notification;
+var Button = antd.Button;
 
 var openNotification = function() {
   notification.open({
@@ -18,7 +19,7 @@ var openNotification = function() {
 
 React.render(
   <div>
-    <button className='ant-btn ant-btn-primary' onClick={openNotification}>打开通知提醒框</button>
+    <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
   </div>,
 document.getElementById('components-notification-demo-basic'));
 ````

components/notification/demo/duration.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var notification = antd.Notification;
+var Button = antd.Button;
 
 var openNotification = function() {
   var args = {
@@ -19,6 +20,6 @@ var openNotification = function() {
 };
 
 React.render(
-  <button className='ant-btn ant-btn-primary' onClick={openNotification}>打开通知提醒框</button>
+  <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
 , document.getElementById('components-notification-demo-duration'));
 ````

components/notification/demo/onclose.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var notification = antd.Notification;
+var Button = antd.Button;
 
 var close = function() {
   console.log("我被默认的关闭按钮关闭了！");
@@ -24,7 +25,7 @@ var openNotification = function() {
 
 React.render(
   <div>
-    <button className='ant-btn ant-btn-primary' onClick={openNotification}>打开通知提醒框</button>
+    <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
   </div>,
 document.getElementById('components-notification-demo-onclose'));
 ````

components/notification/demo/with-btn.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var notification = antd.Notification;
+var Button = antd.Button;
 
 var close = function(){
   console.log('我被默认的关闭按钮关闭了！');
@@ -19,9 +20,9 @@ var openNotification = function() {
     // 隐藏提醒框
     notification.close(key);
   };
-  var btn = <button className="ant-btn ant-btn-primary ant-btn-sm" onClick={btnClick}>
+  var btn = <Button type="primary" size="sm" onClick={btnClick}>
     自定义关闭按钮并触发回调函数
-  </button>;
+  </Button>;
   notification.open({
     message: "这是标题",
     description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
@@ -33,7 +34,7 @@ var openNotification = function() {
 
 React.render(
   <div>
-    <button className="ant-btn ant-btn-primary" onClick={openNotification}>打开通知提醒框</button>
+    <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
   </div>,
 document.getElementById('components-notification-demo-with-btn'));
 ````

components/notification/demo/with-icon.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var notification = antd.Notification;
+var Button = antd.Button;
 
 var openNotificationWithIcon = function(type) {
   return function(){
@@ -19,10 +20,10 @@ var openNotificationWithIcon = function(type) {
 };
 
 React.render(<div>
-  <button className="ant-btn" onClick={openNotificationWithIcon('success')}>成功</button>
-  <button className="ant-btn" onClick={openNotificationWithIcon('info')}>消息</button>
-  <button className="ant-btn" onClick={openNotificationWithIcon('warn')}>警告</button>
-  <button className="ant-btn" onClick={openNotificationWithIcon('error')}>错误</button>
+  <Button onClick={openNotificationWithIcon('success')}>成功</Button>
+  <Button onClick={openNotificationWithIcon('info')}>消息</Button>
+  <Button onClick={openNotificationWithIcon('warn')}>警告</Button>
+  <Button onClick={openNotificationWithIcon('error')}>错误</Button>
   </div>
 , document.getElementById('components-notification-demo-with-icon'));
 ````

components/popconfirm/index.jsx

 import React from 'react';
 import Tooltip from 'rc-tooltip';
 import Icon from '../iconfont';
+import { Button } from '../button';
 const prefixCls = 'ant-popover';
 
 export default React.createClass({
@@ -47,8 +48,8 @@ export default React.createClass({
         </p>
 
         <div className={prefixCls + '-buttons'}>
-          <button onClick={this.cancel} className="ant-btn ant-btn-sm">取 消</button>
-          <button onClick={this.confirm} className="ant-btn ant-btn-primary ant-btn-sm">确 定</button>
+          <Button onClick={this.cancel} size="sm">取 消</Button>
+          <Button onClick={this.confirm} type="primary" size="sm">确 定</Button>
         </div>
       </div>
     </div>;

components/popover/demo/basic.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var Popover = antd.Popover;
+var Button = antd.Button;
+
 var content = <div>
   <p>内容</p>
   <p>内容</p>
@@ -15,7 +17,7 @@ var content = <div>
 
 React.render(
   <Popover overlay={content} title="标题">
-    <button className="ant-btn ant-btn-primary">弹出卡片</button>
+    <Button type="primary">弹出卡片</Button>
   </Popover>
 , document.getElementById('components-popover-demo-basic'));
 ````

components/popover/demo/placement.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var Popover = antd.Popover;
+var Button = antd.Button;
+
 var text = <span>标题</span>;
 var content = <div>
   <p>内容</p>
@@ -16,16 +18,16 @@ var content = <div>
 
 React.render(<div>
   <Popover placement="left" title={text} overlay={content}>
-    <button className="ant-btn">左</button>
+    <Button>左</Button>
   </Popover>
   <Popover placement="top" title={text} overlay={content}>
-    <button className="ant-btn">上</button>
+    <Button>上</Button>
   </Popover>
   <Popover placement="bottom" title={text} overlay={content}>
-    <button className="ant-btn">下</button>
+    <Button>下</Button>
   </Popover>
   <Popover placement="right" title={text} overlay={content}>
-    <button className="ant-btn">右</button>
+    <Button>右</Button>
   </Popover>
 </div>, document.getElementById('components-popover-demo-placement'));
 ````

components/popover/demo/triggerType.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var Popover = antd.Popover;
+var Button = antd.Button;
+
 var content = <div>
   <p>内容</p>
   <p>内容</p>
@@ -15,13 +17,13 @@ var content = <div>
 
 React.render(<div>
   <Popover overlay={content} title="标题" trigger="hover">
-    <button className="ant-btn">移入</button>
+    <Button>移入</Button>
   </Popover>
   <Popover overlay={content} title="标题" trigger="focus">
-    <a href="javascript:;" className="ant-btn">聚焦</a>
+    <Button>聚焦</Button>
   </Popover>
   <Popover overlay={content} title="标题" trigger="click">
-    <button className="ant-btn">点击</button>
+    <Button>点击</Button>
   </Popover>
 </div>, document.getElementById('components-popover-demo-triggertype'));
 ````

components/progress/demo/circle-dynamic.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var ProgressCircle = antd.Progress.Circle;
+var Button = antd.Button;
+var ButtonGroup = antd.ButtonGroup;
 var Icon = antd.Icon;
 
 var MyProgress = React.createClass({
@@ -33,14 +35,14 @@ var MyProgress = React.createClass({
   render() {
     return <div>
       <ProgressCircle percent={this.state.percent} />
-      <div className="ant-btn-group">
-        <button className="ant-btn ant-btn-ghost" onClick={this.decline}>
+      <ButtonGroup>
+        <Button type="ghost" onClick={this.decline}>
           <Icon type="minus" />
-        </button>
-        <button className="ant-btn ant-btn-ghost" onClick={this.increase}>
+        </Button>
+        <Button type="ghost" onClick={this.increase}>
           <Icon type="plus" />
-        </button>
-      </div>
+        </Button>
+      </ButtonGroup>
     </div>;
   }
 });

components/progress/demo/dynamic.md

@@ -8,6 +8,8 @@
 
 ````jsx
 var Progress = antd.Progress.Line;
+var Button = antd.Button;
+var ButtonGroup = antd.ButtonGroup;
 var Icon = antd.Icon;
 
 var MyProgress = React.createClass({
@@ -33,14 +35,14 @@ var MyProgress = React.createClass({
   render() {
     return <div>
       <Progress percent={this.state.percent} />
-      <div className="ant-btn-group">
-        <button className="ant-btn ant-btn-ghost" onClick={this.decline}>
+      <ButtonGroup>
+        <Button type="ghost" onClick={this.decline}>
           <Icon type="minus" />
-        </button>
-        <button className="ant-btn ant-btn-ghost" onClick={this.increase}>
+        </Button>
+        <Button type="ghost" onClick={this.increase}>
           <Icon type="plus" />
-        </button>
-      </div>
+        </Button>
+      </ButtonGroup>
     </div>;
   }
 });

components/radio/demo/disable.md

@@ -8,6 +8,7 @@ Radio 不可用。
 
 ````jsx
 var Radio = antd.Radio;
+var Button = antd.Button;
 
 function toggleDisabled() {
   disabled = !disabled;
@@ -30,9 +31,9 @@ var App = React.createClass({
       <br />
       <Radio defaultChecked={true} disabled={this.state.disabled}>不可用</Radio>
       <div style={{marginTop: 20}}>
-        <button className="ant-btn ant-btn-primary" onClick={this.toggleDisabled}>
+        <Button type="primary" onClick={this.toggleDisabled}>
           Toggle disabled
-        </button>
+        </Button>
       </div>
     </div>;
   }

components/steps/demo/step-next.md

@@ -15,6 +15,7 @@
 ````jsx
 var Steps = antd.Steps;
 var Step = Steps.Step;
+var Button = antd.Button;
 var container = document.getElementById('components-steps-demo-step-next');
 var array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
 var steps = array.map(function(item, i) {
@@ -47,7 +48,7 @@ var App = React.createClass({
           {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
         </Steps>
         <div>
-          <button className='ant-btn' onClick={this.next}>下一步</button>
+          <Button onClick={this.next}>下一步</Button>
         </div>
       </div>
     );

components/switch/demo/disabled.md

@@ -8,6 +8,7 @@ Switch 失效状态。
 
 ````jsx
 var Switch = antd.Switch;
+var Button = antd.Button;
 var container = document.getElementById('components-switch-demo-disabled');
 
 var Test = React.createClass({
@@ -26,7 +27,7 @@ var Test = React.createClass({
       <Switch disabled={this.state.disabled} />
       <br />
       <br />
-      <button className="ant-btn ant-btn-primary" onClick={this.toggle}>Toggle disabled</button>
+      <Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
     </div>;
   }
 });

components/table/demo/ajax-props.md

+# 配置动态加载数据
+
+- order: 7
+
+远程读取的表格是**更为常见的模式**，下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配，并具有筛选、排序等功能以及页面 loading 效果。
+
+**注意，此示例是静态数据模拟，数据并不准确，请打开网络面板查看请求。**
+
+---
+
+````jsx
+var Table = antd.Table;
+
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  filters: [{
+    text: '姓李的',
+    value: '李'
+  }, {
+    text: '姓胡的',
+    value: '胡'
+  }]
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+  sorter: true
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+
+var dataSource = new Table.DataSource({
+  url: "/components/table/demo/data.json",
+  resolve: function(result) {
+    return result.data;
+  },
+  data: {},
+  // 和后台接口返回的分页数据进行适配
+  getPagination: function(result) {
+    return {
+      total: result.totalCount,
+      pageSize: result.pageSize
+    }
+  },
+  // 和后台接口接收的参数进行适配
+  // 参数里提供了分页、筛选、排序的信息
+  getParams: function(pagination, filters, sorter) {
+    console.log('getParams 的参数是：', pagination, filters, sorter);
+    var params = {
+      pageSize: pagination.pageSize,
+      currentPage: pagination.current,
+      sortField: sorter.field,
+      sortOrder: sorter.order
+    };
+    for (var key in filters) {
+      params[key] = filters[key];
+    }
+    console.log('请求参数：', params);
+    return params;
+  }
+});
+
+
+var rowSelection = {
+  getCheckboxProps: function (value) {
+    return {
+      defaultValue: value.name === '胡彦祖ajax2', // 配置默认勾选的列
+      disabled: value.name === '李大嘴ajax3'    // 配置无法勾选的列
+    }
+  },
+  onSelect: function(record, selected, selectedRows) {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: function(selected, selectedRows) {
+    console.log(selected, selectedRows);
+  }
+};
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      dataSource: dataSource
+    };
+  },
+  refresh() {
+    this.setState({
+      dataSource: dataSource.clone()
+    });
+  },
+  changeAndRefresh() {
+    // 可以修改原来的 dataSource 再发请求
+    this.setState({
+      dataSource: dataSource.clone({
+        data: {
+          city: 'hz'
+        }
+      })
+    });
+  },
+  render() {
+    return <div>
+      <Table rowSelection={rowSelection} columns={columns} dataSource={this.state.dataSource} />
+      <button className="ant-btn ant-btn-primary" onClick={this.refresh}>
+        重新加载数据
+      </button>
+      &nbsp;
+      <button className="ant-btn" onClick={this.changeAndRefresh}>
+        加载 city=hz 的数据
+      </button>
+    </div>;
+  }
+});
+
+
+React.render(<Test />, document.getElementById('components-table-demo-ajax-props'));
+````

components/table/demo/ajax.md

 # 动态加载数据
 
-- order: 4
+- order: 7
 
 远程读取的表格是**更为常见的模式**，下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配，并具有筛选、排序等功能以及页面 loading 效果。
 
@@ -10,6 +10,7 @@
 
 ````jsx
 var Table = antd.Table;
+var Button = antd.Button;
 
 var columns = [{
   title: '姓名',
@@ -85,13 +86,13 @@ var Test = React.createClass({
   render() {
     return <div>
       <Table columns={columns} dataSource={this.state.dataSource} />
-      <button className="ant-btn ant-btn-primary" onClick={this.refresh}>
+      <Button type="primary" onClick={this.refresh}>
         重新加载数据
-      </button>
+      </Button>
       &nbsp;
-      <button className="ant-btn" onClick={this.changeAndRefresh}>
+      <Button onClick={this.changeAndRefresh}>
         加载 city=hz 的数据
-      </button>
+      </Button>
     </div>;
   }
 });

components/table/demo/bordered.md

 # 边框
 
-- order: 7
+- order: 10
 
 添加表格边框线，`bordered={true}`。
 

components/table/demo/expand.md

 # 可展开
 
-- order: 9
+- order: 12
 
 当表格内容较多不能一次性完全展示时。
 

components/table/demo/head.md

 # 筛选和排序
 
-- order: 3
+- order: 6
 
 对某一列数据进行筛选，使用列的 `filter` 属性来指定筛选的列表。
 

components/table/demo/local-data.md

 # 外界控制数据
 
-- order: 8
+- order: 11
 
 由父元素控制自身数据展示。
 
@@ -8,6 +8,8 @@
 
 ````jsx
 var Table = antd.Table;
+var Button = antd.Button;
+
 var columns = [{
   title: '姓名',
   dataIndex: 'name',
@@ -73,9 +75,9 @@ var App = React.createClass({
   render() {
     return <div>
       <Table columns={columns} dataSource={this.state.data} />
-      <button className="ant-btn" onClick={this.handleClick1}>加载本地数据1</button>
+      <Button onClick={this.handleClick1}>加载本地数据1</Button>
       &nbsp;
-      <button className="ant-btn" onClick={this.handleClick2}>加载本地数据2</button>
+      <Button onClick={this.handleClick2}>加载本地数据2</Button>
     </div>;
   }
 })

components/table/demo/nopagination.md

 # 不显示分页
 
-- order: 5
+- order: 8
 
 传入 pagination 为 false 即可。
 

components/table/demo/paging.md

 # 分页
 
-- order: 2
+- order: 5
 
 数据项较多时显示分页。
 

components/table/demo/row-selection-props.md

+# 配置
+
+- order: 2
+
+配置选择框的默认属性。
+
+---
+
+````jsx
+var Table = antd.Table;
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  render: function(text) {
+    return <a href="javascript:;">{text}</a>;
+  }
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+var data = [{
+  key: '1',
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '2',
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '3',
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}];
+
+// 通过 rowSelection 对象表明需要行选择
+var rowSelection = {
+  getCheckboxProps: function(record) {
+    return {
+      defaultValue: record.name === '李大嘴', // 配置默认勾选的列
+      disabled: record.name === '胡彦祖'    // 配置无法勾选的列
+    };
+  },
+  onSelect: function(record, selected, selectedRows) {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: function(selected, selectedRows) {
+    console.log(selected, selectedRows);
+  }
+};
+
+React.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+, document.getElementById('components-table-demo-row-selection-props'));
+````

components/table/demo/row-selection-radio-props.md

+# 单选配置
+
+- order: 4
+
+配置单选框的默认属性。
+
+---
+
+````jsx
+var Table = antd.Table;
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  render: function(text) {
+    return <a href="javascript:;">{text}</a>;
+  }
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+var data = [{
+  key: '1',
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '2',
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '3',
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}];
+
+// 通过 rowSelection 对象表明需要行选择
+var rowSelection = {
+  type: 'radio',
+  getCheckboxProps: function(record) {
+    return {
+      defaultValue: record.name === '李大嘴', // 配置默认勾选的列
+      disabled: record.name === '胡彦祖'    // 配置无法勾选的列
+    };
+  },
+  onSelect: function(record, selected, selectedRows) {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: function(selected, selectedRows) {
+    console.log(selected, selectedRows);
+  }
+};
+
+React.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+, document.getElementById('components-table-demo-row-selection-radio-props'));
+````

components/table/demo/row-selection-radio.md

+# 单选
+
+- order: 3
+
+第一列是联动的单选框。
+
+---
+
+````jsx
+var Table = antd.Table;
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  render: function(text) {
+    return <a href="javascript:;">{text}</a>;
+  }
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+var data = [{
+  key: '1',
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '2',
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '3',
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}];
+
+// 通过 rowSelection 对象表明需要行选择
+var rowSelection = {
+  type: 'radio',
+  onSelect: function(record, selected, selectedRows) {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: function(selected, selectedRows) {
+    console.log(selected, selectedRows);
+  }
+};
+
+React.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+, document.getElementById('components-table-demo-row-selection-radio'));
+````

components/table/demo/small.md

 # 小型列表
 
-- order: 6
+- order: 9
 
 `size="small"`, 用在对话框等空间较小的地方。
 

components/table/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import reqwest from 'reqwest-without-xhr2';
 import Table from 'rc-table';
 import Checkbox from '../checkbox';
+import Radio from '../radio';
 import FilterDropdown from './filterDropdown';
 import Pagination from '../pagination';
 import Icon from '../iconfont';
@@ -45,10 +46,12 @@ let AntTable = React.createClass({
       data: [],
       dataSource: this.props.dataSource,
       filters: {},
+      dirty: false,
       loading: false,
       sortColumn: '',
       sortOrder: '',
       sorter: null,
+      radioIndex: null,
       pagination: this.hasPagination() ? objectAssign({
         pageSize: 10,
         current: 1
@@ -70,6 +73,22 @@ let AntTable = React.createClass({
     dataSource: React.PropTypes.oneOfType([React.PropTypes.array, React.PropTypes.instanceOf(DataSource)])
   },
 
+  getDefaultSelection() {
+    let selectedRowKeys = [];
+    if (this.props.rowSelection && this.props.rowSelection.getCheckboxProps) {
+      let data = this.getCurrentPageData();
+      data.filter((item) => {
+        if (this.props.rowSelection.getCheckboxProps) {
+          return this.props.rowSelection.getCheckboxProps(item).defaultValue;
+        }
+        return true;
+      }).map((record, rowIndex) => {
+        selectedRowKeys.push(this.getRecordKey(record, rowIndex));
+      });
+    }
+    return selectedRowKeys;
+  },
+
   componentWillReceiveProps(nextProps) {
     if (('pagination' in nextProps) && nextProps.pagination !== false) {
       this.setState({
@@ -153,7 +172,11 @@ let AntTable = React.createClass({
 
   handleSelect(record, rowIndex, e) {
     let checked = e.target.checked;
-    let selectedRowKeys = this.state.selectedRowKeys.concat();
+    let defaultSelection = [];
+    if (!this.state.dirty) {
+      defaultSelection = this.getDefaultSelection();
+    }
+    let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
     let key = this.getRecordKey(record, rowIndex);
     if (checked) {
       selectedRowKeys.push(this.getRecordKey(record, rowIndex));
@@ -163,7 +186,31 @@ let AntTable = React.createClass({
       });
     }
     this.setState({
-      selectedRowKeys: selectedRowKeys
+      selectedRowKeys: selectedRowKeys,
+      dirty: true
+    });
+    if (this.props.rowSelection.onSelect) {
+      let data = this.getCurrentPageData();
+      let selectedRows = data.filter((row, i) => {
+        return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
+      });
+      this.props.rowSelection.onSelect(record, checked, selectedRows);
+    }
+  },
+
+  handleRadioSelect: function (record, rowIndex, e) {
+    let checked = e.target.checked;
+    let defaultSelection = [];
+    if (!this.state.dirty) {
+      defaultSelection = this.getDefaultSelection();
+    }
+    let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
+    let key = this.getRecordKey(record, rowIndex);
+    selectedRowKeys = [key];
+    this.setState({
+      selectedRowKeys: selectedRowKeys,
+      radioIndex: record.key,
+      dirty: true
     });
     if (this.props.rowSelection.onSelect) {
       let data = this.getCurrentPageData();
@@ -177,11 +224,17 @@ let AntTable = React.createClass({
   handleSelectAllRow(e) {
     let checked = e.target.checked;
     let data = this.getCurrentPageData();
-    let selectedRowKeys = checked ? data.map((item, i) => {
+    let selectedRowKeys = checked ? data.filter((item) => {
+      if (this.props.rowSelection.getCheckboxProps) {
+        return !this.props.rowSelection.getCheckboxProps(item).disabled;
+      }
+      return true;
+    }).map((item, i) => {
       return this.getRecordKey(item, i);
     }) : [];
     this.setState({
-      selectedRowKeys: selectedRowKeys
+      selectedRowKeys: selectedRowKeys,
+      dirty: true
     });
     if (this.props.rowSelection.onSelectAll) {
       let selectedRows = data.filter((row, i) => {
@@ -205,10 +258,30 @@ let AntTable = React.createClass({
     });
   },
 
+  onRadioChange: function (ev) {
+    this.setState({
+      radioIndex: ev.target.value
+    });
+  },
+
+  renderSelectionRadio(value, record, index) {
+    let rowIndex = this.getRecordKey(record, index); // 从 1 开始
+    let props = {};
+    if (this.props.rowSelection.getCheckboxProps) {
+      props = this.props.rowSelection.getCheckboxProps.call(this, record);
+    }
+    const checked = this.state.dirty ? this.state.radioIndex === record.key : this.getDefaultSelection().indexOf(rowIndex) >= 0;
+    return <Radio disabled={props.disabled} onChange={this.handleRadioSelect.bind(this, record, rowIndex)} value={record.key} checked={checked} />;
+  },
+
   renderSelectionCheckBox(value, record, index) {
     let rowIndex = this.getRecordKey(record, index); // 从 1 开始
-    let checked = this.state.selectedRowKeys.indexOf(rowIndex) >= 0;
-    return <Checkbox checked={checked} onChange={this.handleSelect.bind(this, record, rowIndex)}/>;
+    let checked = this.state.dirty ? this.state.selectedRowKeys.indexOf(rowIndex) >= 0 : this.getDefaultSelection().indexOf(rowIndex) >= 0;
+    let props = {};
+    if (this.props.rowSelection.getCheckboxProps) {
+      props = this.props.rowSelection.getCheckboxProps.call(this, record);
+    }
+    return <Checkbox checked={checked} disabled={props.disabled} onChange={this.handleSelect.bind(this, record, rowIndex)}/>;
   },
 
   getRecordKey(record, index) {
@@ -223,19 +296,34 @@ let AntTable = React.createClass({
       if (!data.length) {
         checked = false;
       } else {
-        checked = data.every((item, i) => {
+        checked = data.filter((item) => {
+          if (this.props.rowSelection.getCheckboxProps) {
+            return !this.props.rowSelection.getCheckboxProps(item).disabled;
+          }
+          return true;
+        }).every((item, i) => {
           let key = this.getRecordKey(item, i);
           return this.state.selectedRowKeys.indexOf(key) >= 0;
         });
       }
-      let checkboxAll = <Checkbox checked={checked} onChange={this.handleSelectAllRow}/>;
-      let selectionColumn = {
-        key: 'selection-column',
-        title: checkboxAll,
-        width: 60,
-        render: this.renderSelectionCheckBox,
-        className: 'ant-table-selection-column'
-      };
+      let selectionColumn;
+      if (this.props.rowSelection.type === 'radio') {
+        selectionColumn = {
+          key: 'selection-column',
+          width: 60,
+          render: this.renderSelectionRadio,
+          className: 'ant-table-selection-column'
+        };
+      } else {
+        let checkboxAll = <Checkbox checked={checked} onChange={this.handleSelectAllRow}/>;
+        selectionColumn = {
+          key: 'selection-column',
+          title: checkboxAll,
+          width: 60,
+          render: this.renderSelectionCheckBox,
+          className: 'ant-table-selection-column'
+        };
+      }
       if (columns[0] &&
         columns[0].key === 'selection-column') {
         columns[0] = selectionColumn;
@@ -384,6 +472,7 @@ let AntTable = React.createClass({
               dataSource.getPagination.call(this, result)
             );
             this.setState({
+              dirty: false,
               loading: false,
               data: dataSource.resolve.call(this, result),
               pagination: pagination

components/upload/demo/basic.md

@@ -9,6 +9,7 @@
 ````jsx
 var Upload = antd.Upload;
 var message = antd.message;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var props = {
@@ -28,9 +29,9 @@ var props = {
 
 React.render(
   <Upload {...props}>
-    <button type="button" className="ant-btn ant-btn-ghost">
+    <Button type="ghost">
       <Icon type="upload" /> 点击上传
-    </button>
+    </Button>
   </Upload>
 , document.getElementById('components-upload-demo-basic'));
 ````

components/upload/demo/defaultFileList.md

@@ -8,6 +8,7 @@
 
 ````jsx
 var Upload = antd.Upload;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var props = {
@@ -33,9 +34,9 @@ var props = {
 
 React.render(
   <Upload {...props}>
-    <button type="button" className="ant-btn ant-btn-ghost">
+    <Button type="ghost">
       <Icon type="upload" /> 点击上传
-    </button>
+    </Button>
   </Upload>
 , document.getElementById('components-upload-demo-defaultfilelist'));
 ````

components/upload/demo/fileList.md

@@ -14,6 +14,7 @@
 
 ````jsx
 var Upload = antd.Upload;
+var Button = antd.Button;
 var Icon = antd.Icon;
 var fileList = [{
   uid: -1,
@@ -63,9 +64,9 @@ var MyUpload = React.createClass({
       multiple: true
     };
     return <Upload {...props} fileList={this.state.fileList}>
-      <button type="button" className="ant-btn ant-btn-ghost">
+      <Button type="ghost">
         <Icon type="upload" /> 点击上传
-      </button>
+      </Button>
     </Upload>;
   }
 });

components/upload/demo/multiple.md

@@ -9,6 +9,7 @@
 ````jsx
 var Upload = antd.Upload;
 var message = antd.message;
+var Button = antd.Button;
 var Icon = antd.Icon;
 
 var props = {
@@ -28,9 +29,9 @@ var props = {
 
 React.render(
   <Upload {...props}>
-    <button type="button" className="ant-btn ant-btn-ghost">
+    <Button type="ghost">
       <Icon type="upload" /> 点击上传
-    </button>
+    </Button>
   </Upload>
 , document.getElementById('components-upload-demo-multiple'));
 ````

components/validation/demo/basic.md

@@ -17,6 +17,7 @@ var Select = antd.Select;
 var Option = Select.Option;
 var Radio = antd.Radio;
 var RadioGroup = antd.Radio.Group;
+var Button = antd.Button;
 
 function cx(classNames) {
   if (typeof classNames === 'object') {
@@ -146,7 +147,7 @@ var Form = React.createClass({
     var status = this.state.status;
 
     return (
-      <form onSubmit={this.handleSubmit} className="ant-form-horizontal">
+      <form className="ant-form-horizontal">
         <Validation ref="validation" onValidate={this.handleValidate}>
           <div className="ant-form-item">
             <label className="col-7" htmlFor="name" required>用户名：</label>
@@ -249,9 +250,9 @@ var Form = React.createClass({
 
           <div className="ant-form-item">
             <div className="col-offset-7 col-12">
-              <button type="submit" className="ant-btn ant-btn-primary">确 定</button>
+              <Button type="primary" onClick={this.handleSubmit}>确 定</Button>
             &nbsp;&nbsp;&nbsp;
-              <a href="#" className="ant-btn" onClick={this.handleReset}>重 置</a>
+              <Button onClick={this.handleReset}>重 置</Button>
             </div>
           </div>
         </Validation>

components/validation/demo/customize.md

@@ -11,6 +11,7 @@
 ````jsx
 var Validation = antd.Validation;
 var Validator = Validation.Validator;
+var Button = antd.Button;
 
 function cx(classNames) {
   if (typeof classNames === 'object') {
@@ -150,7 +151,7 @@ var Form = React.createClass({
     var status = this.state.status;
 
     return (
-      <form onSubmit={this.handleSubmit} className="ant-form-horizontal">
+      <form className="ant-form-horizontal">
         <Validation ref="validation" onValidate={this.handleValidate}>
 
           <div className="ant-form-item">
@@ -189,9 +190,9 @@ var Form = React.createClass({
 
           <div className="ant-form-item">
             <div className="col-offset-6 col-12">
-              <button type="submit" className="ant-btn ant-btn-primary">确 定</button>
+              <Button type="primary" onClick={this.handleSubmit}>确 定</Button>
               &nbsp;&nbsp;&nbsp;
-              <a href="#" className="ant-btn" onClick={this.handleReset}>重 置</a>
+              <Button onClick={this.handleReset}>重 置</Button>
             </div>
           </div>
         </Validation>

docs/getting-started.md

@@ -25,7 +25,7 @@ Ant Design React 致力于提供给程序员愉悦的开发体验。
     <!-- 引入样式 -->
     <link rel="stylesheet" href="http://ant.design/dist/antd.css">
     <!-- 引入 react 和 antd.js -->
-    <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,react/0.13.3/react.min.js,react/0.13.3/JSXTransformer.js"></script>
+    <script src="https://a.alipayobjects.com/??react/0.13.3/react.min.js,react/0.13.3/JSXTransformer.js"></script>
     <script src="http://ant.design/dist/antd.js"></script>
   </head>
   <body>
@@ -113,7 +113,7 @@ $ touch index.html
     <meta charset="utf-8">
     <!-- 引入样式 -->
     <link rel="stylesheet" href="/index.css">
-    <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,react/0.13.3/react.min.js"></script>
+    <script src="https://a.alipayobjects.com/??react/0.13.3/react.min.js"></script>
   </head>
   <body>
   </body>
@@ -155,8 +155,8 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
     <link rel="stylesheet" href="http://ant.design/dist/antd.css">
     <!-- Polyfills -->
     <script src="https://a.alipayobjects.com/??es5-shim/4.1.10/es5-shim.min.js,es5-shim/4.1.10/es5-sham.min.js,html5shiv/3.7.2/src/html5shiv.js"></script>
-    <!-- 引入 jquery 和 react -->
-    <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,react/0.13.3/react.min.js"></script>
+    <!-- 引入 react -->
+    <script src="https://a.alipayobjects.com/??react/0.13.3/react.min.js"></script>
   </head>
   <body>
   </body>

package.json

 {
   "name": "antd",
-  "version": "0.9.1",
-  "stableVersion": "0.9.0",
+  "version": "0.10.0-beta1",
+  "stableVersion": "0.9.1",
   "title": "Ant Design",
   "description": "一个 UI 设计语言",
   "homepage": "http://ant.design/",
@@ -44,7 +44,7 @@
     "rc-dialog": "~5.0.2",
     "rc-dropdown": "~1.3.3",
     "rc-form-validation": "~2.4.7",
-    "rc-input-number": "~2.0.1",
+    "rc-input-number": "~2.1.2",
     "rc-menu": "~4.6.0",
     "rc-notification": "~1.1.0",
     "rc-pagination": "~1.1.0",
@@ -60,7 +60,7 @@
     "rc-tree": "~0.16.2",
     "rc-upload": "~1.6.4",
     "rc-util": "~2.0.3",
-    "react-slick": "~0.7.0",
+    "react-slick": "~0.8.0",
     "reqwest-without-xhr2": "~2.0.2",
     "util-deprecate": "~1.0.1",
     "velocity-animate": "~1.2.2"
@@ -87,6 +87,7 @@
     "lodash": "^3.10.0",
     "nico-jsx": "~0.5.8",
     "precommit-hook": "^1.0.7",
+    "react": "~0.13.0",
     "react-router": "1.0.0-rc1",
     "webpack": "^1.10.1",
     "webpack-dev-middleware": "^1.2.0"

spec/colors.md

@@ -191,3 +191,69 @@ let ExtendPalettes = React.createClass({
 });
 React.render(<ExtendPalettes />, document.getElementById('extend-palettes'));
 `````
+
+## 色彩换算工具
+
+<script src="https://t.alipayobjects.com/images/T1DrxhXe0mXXXXXXXX.js"></script>
+
+> 正数为变淡 `tint` ，负数为加深 `shade`。
+
+<div id="color-tint-shade-tool"></div>
+
+Ant Design 专用色彩换算工具，用于解析类似 `#2db7f5 tint 80%` 的色彩标注。
+
+less 或 scss 语言可以直接使用 `tint(#2db7f5, 80%)` 和  `shade(#2db7f5, 80%)` 的语法。
+
+
+
+`````jsx
+let Button = antd.Button;
+let InputNumber = antd.InputNumber;
+let Slider = antd.Slider;
+let TintShadeTool = React.createClass({
+  getInitialState() {
+    return {
+      result: '',
+      color: '#2db7f5',
+      value: 80
+    };
+  },
+  handleChangeColor(e) {
+    this.setState({
+      color: e.target.value
+    }, this.calculate);
+  },
+  handleChangeValue(value) {
+    this.setState({
+      value: value
+    }, this.calculate);
+  },
+  componentDidMount() {
+    this.calculate();
+  },
+  calculate() {
+    let tintOrShade = this.state.value >= 0 ? 'tint' : 'shade';
+    let c = new Values(this.state.color);
+    this.setState({
+      result: '#' + c[tintOrShade](Math.abs(this.state.value)).hex
+    });
+  },
+  render() {
+    return <div style={{margin: '40px 0'}}>
+      <div>
+        <input className="ant-input" style={{width: 120, color: this.state.color, marginRight: 8}} value={this.state.color} onChange={this.handleChangeColor} />
+        <InputNumber style={{width: 70}} value={this.state.value} onChange={this.handleChangeValue} min={-100} max={100} />
+        <span style={{margin: '0 62px 0 8px'}}>%</span>
+        <div style={{width: 60, borderRadius: 6, height:28, backgroundColor: this.state.result, display: 'inline-block', verticalAlign: 'middle', marginRight: 8}}></div>
+        <span>{this.state.result}</span>
+      </div>
+      <div style={{width: 400, marginTop: 20, position: 'relative'}}>
+        <Slider value={this.state.value} onChange={this.handleChangeValue} min={-100} max={100} />
+        <div style={{backgroundColor:'#81D4F9', width: 2, height: 4, position: 'absolute', top: -28, fontSize: 12, textAlign: 'center', top: -1, left: 202}}></div>
+      </div>
+    </div>;
+  }
+});
+
+React.render(<TintShadeTool />, document.getElementById('color-tint-shade-tool'));
+`````

spec/font.md

@@ -173,8 +173,6 @@ font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","STHeitiSC-Light","Mi
 .font-title {
   font-size: 14px;
   width: 100px;
-  text-align: right;
-  margin-right: 30px;
 }
 .font-text {
   width: 300px;

style/components/button.less

@@ -72,12 +72,6 @@
     }
   }
 
-  &-menu {
-    > .@{iconfont-css-prefix} {
-      .iconfont-size-under-12px(10px);
-    }
-  }
-
   &-group {
     .btn-group(@btn-prefix-cls);
   }

style/components/dropdown.less

-@dropdown-prefix-cls: ant-dropdown;
+@import "../mixins/index";
+@dropdown-prefix-cls: ~"@{css-prefix}dropdown";
 
 .@{dropdown-prefix-cls} {
   position: absolute;
@@ -13,6 +14,11 @@
 
   &-wrap {
     position: relative;
+
+    .@{btn-prefix-cls} > .@{iconfont-css-prefix}-down {
+      .iconfont-size-under-12px(10px);
+    }
+
     .anticon-down:before {
       transition: transform 0.2s ease;
     }

style/components/inputNumber.less

@@ -24,6 +24,8 @@
     color: #999;
     position: relative;
     transition: all 0.1s linear;
+    display: block;
+    width: 100%;
     &:hover {
       background: #fefefe;
     }
@@ -151,6 +153,7 @@
     height: 28px;
     position: relative;
     opacity: 0;
+    transition: opacity 0.24s linear 0.1s;
   }
 
   &:hover &-handler-wrap {

style/components/popover.less

@@ -125,7 +125,7 @@
   &-message {
     padding: 8px 0 16px;
     font-size: 12px;
-    color: text-color;
+    color: @text-color;
     .anticon {
       margin-right: 8px;
       color: @error-color;

style/components/steps.less

@@ -15,11 +15,6 @@
 @finish-description-color: @finish-title-color;
 @finish-tail-color: @process-icon-color;
 
-.transition(@transition) {
-  transition: @transition;
-  -webkit-transition: @transition;
-  -moz-transition: @transition;
-}
 
 .@{steps-prefix-cls} {
   font-size: 0;
@@ -125,8 +120,7 @@
     border-radius: 26px;
     font-size: 14px;
     margin-right: 8px;
-    .transition(background-color 0.3s ease);
-    .transition(border-color 0.3s ease);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
 
     > .@{steps-prefix-cls}-icon {
       line-height: 1;
@@ -175,7 +169,7 @@
       height: 1px;
       border-radius: 1px;
       width: 100%;
-      .transition(background 0.3s ease);
+      transition: background 0.3s ease;
     }
   }