Merge branch 'master' of github.com:ant-design/ant-design

.eslintrc

@@ -12,6 +12,7 @@
     "experimentalObjectRestSpread": true
   },
   "plugins": [
+    "markdown",
     "react",
     "babel"
   ],
@@ -30,9 +31,7 @@
     "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,

CHANGELOG.md

@@ -4,6 +4,30 @@
 
 ---
 
+## 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`。
@@ -31,7 +55,7 @@
 #### 组件变更
 
 - Table
-	- 支持单选。[演示](/components/table/#demo-row-selection-radio-props)
+	- 支持单选。[演示](http://ant.design/components/table/#demo-row-selection-radio-props)
 	- 选择模式支持默认选中和不可用效果。[演示](/components/table/#demo-row-selection-props)
 	- 列支持了 `colSpan` 和 `rowSpan` 配置。[演示](/components/table/#demo-colspan-rowspan)
 	- 新增 `loading` 属性。
@@ -70,7 +94,7 @@
 > 备注：
 >
 > - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
-> - [0.10 升级指南](/docs/upgrade-to-0.10)
+> - [0.10 升级指南](http://ant.design/docs/upgrade-to-0.10)
 
 
 ## 0.9.3 ~ 0.9.5 `2015-11-04`

components/affix/index.jsx

@@ -1,6 +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'];
@@ -89,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/close-type.md

@@ -8,7 +8,7 @@
 
 ````jsx
 import { Alert } from 'antd';
-const link = <a href="javascript:;">不再提醒</a>;
+const link = <a href="#">不再提醒</a>;
 
 ReactDOM.render(
 <Alert message="消息提示的文案" type="info" closeText={link} />

components/alert/index.jsx

@@ -16,6 +16,7 @@ export default React.createClass({
     };
   },
   handleClose(e) {
+    e.preventDefault();
     let dom = ReactDOM.findDOMNode(this);
     dom.style.height = dom.offsetHeight + 'px';
     // Magic code

components/badge/ScrollNumber.jsx

@@ -0,0 +1,135 @@
+import React, { createElement } from 'react';
+import assign from 'object-assign';
+
+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}`
+    });
+    if (typeof document !== 'undefined' && typeof window !== 'undefined') {
+      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: 20
+};
+
+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/change.md

@@ -45,9 +45,15 @@ const Test = React.createClass({
         <a href="#" className="head-example"></a>
       </Badge>
       <Badge dot={this.state.show}>
-        <a href="#">一个链接</a>
+        <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" />
@@ -56,8 +62,6 @@ const Test = React.createClass({
             <Icon type="plus" />
           </Button>
         </ButtonGroup>
-        <Button type="ghost" onClick={this.onClick} style={{marginLeft:10}}>点切换</Button>
-        <Button type="ghost" onClick={this.onNumberClick} style={{marginLeft:10}}>数字切换</Button>
       </div>
     </div>;
   }

components/badge/demo/dot.md

@@ -10,10 +10,10 @@
 import { Badge, Icon } from 'antd';
 
 ReactDOM.render(<div>
-  <Badge dot={true}>
+  <Badge dot>
     <Icon type="notification" />
   </Badge>
-  <Badge dot={true}>
+  <Badge dot>
     <a href="#">一个链接</a>
   </Badge>
 </div>, document.getElementById('components-badge-demo-dot'));

components/badge/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Animate from 'rc-animate';
+import ScrollNumber from './ScrollNumber';
 
 class AntBadge extends React.Component {
   constructor(props) {
@@ -27,12 +28,10 @@ class AntBadge extends React.Component {
         <Animate component=""
           showProp="data-show"
           transitionName={prefixCls + '-zoom'}
-          transitionAppear={true}>
+          transitionAppear>
           {
             hidden ? null :
-            <sup data-show={!hidden} className={className}>
+            <ScrollNumber data-show={!hidden} className={className} count={count} />
-              {count}
-            </sup>
           }
         </Animate>
       </span>
@@ -43,7 +42,7 @@ class AntBadge extends React.Component {
 AntBadge.defaultProps = {
   prefixCls: 'ant-badge',
   count: null,
-  dot: false
+  dot: false,
 };
 
 AntBadge.propTypes = {
@@ -51,7 +50,7 @@ AntBadge.propTypes = {
     React.PropTypes.string,
     React.PropTypes.number
   ]),
-  dot: React.PropTypes.bool
+  dot: React.PropTypes.bool,
 };
 
 export default AntBadge;

components/breadcrumb/index.jsx

@@ -30,6 +30,9 @@ let Breadcrumb = React.createClass({
     if (routes && routes.length > 0 && ReactRouter) {
       let Link = ReactRouter.Link;
       crumbs = routes.map(function(route, i) {
+        if (!route.breadcrumbName) {
+          return null;
+        }
         let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
           return params[key] || replacement;
         });

components/button/button-group.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import rcUtil from 'rc-util';
+import classNames from 'classnames';
 
 const prefix = 'ant-btn-group-';
 
@@ -14,7 +14,7 @@ export default class ButtonGroup extends React.Component {
       'small': 'sm'
     })[size] || '';
 
-    const classes = rcUtil.classSet({
+    const classes = classNames({
       'ant-btn-group': true,
       [prefix + sizeCls]: sizeCls,
       [className]: className

components/button/button.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import rcUtil from 'rc-util';
+import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
@@ -41,7 +41,7 @@ export default class Button extends React.Component {
       'small': 'sm'
     })[size] || '';
 
-    const classes = rcUtil.classSet({
+    const classes = classNames({
       'ant-btn': true,
       [prefix + type]: type,
       [prefix + shape]: shape,

components/button/demo/basic.md

@@ -18,7 +18,7 @@ ReactDOM.render(<div>
   <Button>次按钮</Button>
   <Button type="ghost">幽灵按钮</Button>
 </div>,
-document.getElementById('components-button-demo-basic'))
+document.getElementById('components-button-demo-basic'));
 ````
 
 <style>

components/button/demo/loading.md

@@ -22,13 +22,13 @@ const App = React.createClass({
   },
   render() {
     return <div>
-      <Button type="primary" size="large" loading={true}>
+      <Button type="primary" size="large" loading>
         加载中
       </Button>
-      <Button type="primary" loading={true}>
+      <Button type="primary" loading>
         加载中
       </Button>
-      <Button type="primary" size="small" loading={true}>
+      <Button type="primary" size="small" loading>
         加载中
       </Button>
       <br />

components/calendar/demo/notice-calendar.md

@@ -10,7 +10,7 @@
 import { Calendar } from 'antd';
 
 function getListData(value) {
-  var listData;
+  let listData;
   switch (value.getDayOfMonth()) {
   case 8:
     listData = [
@@ -32,6 +32,7 @@ function getListData(value) {
       { type: 'error', content: '这里是错误事项.' },
       { type: 'error', content: '这里是错误事项.' }
     ]; break;
+  default:
   }
   return listData || [];
 }

components/checkbox/demo/controller.md

@@ -18,7 +18,7 @@ const App = React.createClass({
     };
   },
   render() {
-    var label = (this.state.checked ? '选中' : '取消') + '-' +
+    const label = (this.state.checked ? '选中' : '取消') + '-' +
       (this.state.disabled ? '不可用' : '可用');
     return <div>
       <p style={{marginBottom: '20px'}}>
@@ -32,12 +32,12 @@ const App = React.createClass({
       <p>
         <Button type="primary" size="small"
           onClick={this.toggleChecked}>
-          {!this.state.checked ? "选中":"取消"}
+          {!this.state.checked ? '选中' : '取消'}
         </Button>
-        <Button style={{'marginLeft': '10px'}}
+        <Button style={{marginLeft: '10px'}}
           type="primary" size="small"
           onClick={this.toggleDisable}>
-          {!this.state.disabled ? "不可用":"可用"}
+          {!this.state.disabled ? '不可用' : '可用'}
         </Button>
       </p>
     </div>;

components/checkbox/demo/disable.md

@@ -1,4 +1,4 @@
-# 不可用
+ 不可用
 
 - order: 1
 
@@ -11,8 +11,8 @@ import { Checkbox } from 'antd';
 const container = document.getElementById('components-checkbox-demo-disable');
 
 ReactDOM.render(<div>
-  <Checkbox defaultChecked={false} disabled={true}/>
+  <Checkbox defaultChecked={false} disabled />
   <br />
-  <Checkbox defaultChecked={true} disabled={true}/>
+  <Checkbox defaultChecked disabled />
 </div>, container);
 ````

components/col/index.js

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

components/collapse/demo/accordion.md

@@ -17,7 +17,7 @@ const text = `
 `;
 
 ReactDOM.render(
-  <Collapse accordion={true}>
+  <Collapse accordion>
     <Panel header={`This is panel header 1`} key="1">
       <p>{text}</p>
     </Panel>

components/collapse/demo/basic.md

@@ -21,14 +21,14 @@ const text = `
 `;
 
 ReactDOM.render(
-  <Collapse defaultActiveKey={["1"]} onChange={callback}>
+  <Collapse defaultActiveKey={['1']} onChange={callback}>
-    <Panel header={`This is panel header 1`} key="1">
+    <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>

components/collapse/demo/mix.md

@@ -21,7 +21,7 @@ const text = `
 `;
 
 ReactDOM.render(
-  <Collapse onChange={callback} accordion={true}>
+  <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">

components/datepicker/demo/disabled.md

@@ -10,6 +10,6 @@
 import { Datepicker } from 'antd';
 
 ReactDOM.render(
-  <Datepicker defaultValue="2015-06-06" disabled={true} />
+  <Datepicker defaultValue="2015-06-06" disabled />
 , document.getElementById('components-datepicker-demo-disabled'));
 ````

components/datepicker/demo/locale.md

@@ -9,7 +9,7 @@
 ````jsx
 import { Datepicker } from 'antd';
 import enUS from 'antd/lib/datepicker/locale/en_US';
-import assign from 'object-assign'
+import assign from 'object-assign';
 
 const App = React.createClass({
   getInitialState() {
@@ -22,7 +22,7 @@ const App = React.createClass({
     };
   },
   render() {
-    return <Datepicker showTime={true} locale={this.state.locale} />;
+    return <Datepicker locale={this.state.locale} />;
   }
 });
 

components/datepicker/demo/select.md

@@ -14,7 +14,7 @@ const Picker = React.createClass({
     console.log(new Date(value.getTime()));
   },
   render: function() {
-    return <Datepicker onChange={this.handleChange} />
+    return <Datepicker onChange={this.handleChange} />;
   }
 });
 

components/datepicker/demo/time.md

@@ -1,15 +1,43 @@
-# 时间选择
+# 日期时间选择
 
 - order: 4
 
-准确到秒的时间选择面板。
+和 [时间选择框](/components/timepicer) 配合使用。
 
 ---
 
 ````jsx
-import { Datepicker } from 'antd';
+import { Datepicker, Timepicker } from 'antd';
 
-ReactDOM.render(
+let result = new Date();
-  <Datepicker showTime={true} format="yyyy-MM-dd HH:mm:ss" defaultValue="2015-11-11 11:11:11"/>
+let selectdDate, selectdTime;
-, document.getElementById('components-datepicker-demo-time'));
+function handleChange(from, value) {
+  if (!value) {
+    if (from === 'date') {
+      selectdDate = false;
+    } else {
+      selectdTime = false;
+    }
+    return;
+  }
+  if (from === 'date') {
+    result.setFullYear(value.getFullYear());
+    result.setMonth(value.getMonth());
+    result.setDate(value.getDate());
+    selectdDate = true;
+  } else {
+    result.setHours(value.getHours());
+    result.setMinutes(value.getMinutes());
+    result.setSeconds(value.getSeconds());
+    selectdTime = true;
+  }
+  if (selectdDate && selectdTime) {
+    console.log('选择结果是：' + result);
+  }
+}
+
+ReactDOM.render(<div>
+  <Datepicker onChange={handleChange.bind(null, 'date')} />
+  <Timepicker onChange={handleChange.bind(null, 'time')} />
+</div>, document.getElementById('components-datepicker-demo-time'));
 ````

components/datepicker/index.jsx

@@ -20,7 +20,7 @@ function createPicker(TheCalendar) {
         },  // onChange 可用于 Validator
         locale: {},
         align: {
-          offset: [0, -10],
+          offset: [0, -9],
         },
         open: false
       };
@@ -87,24 +87,25 @@ function createPicker(TheCalendar) {
       this.props.onChange(timeValue);
     },
     render() {
+      const locale = this.getLocale();
       // 以下两行代码
       // 给没有初始值的日期选择框提供本地化信息
       // 否则会以周日开始排
-      let defaultCalendarValue = new GregorianCalendar(this.getLocale());
+      let defaultCalendarValue = new GregorianCalendar(locale);
       defaultCalendarValue.setTime(Date.now());
 
       const placeholder = ('placeholder' in this.props)
-        ? this.placeholder : this.getLocale().lang.placeholder;
+        ? this.props.placeholder : locale.lang.placeholder;
       const calendar = (
         <TheCalendar
           disabledDate={this.props.disabledDate}
-          locale={this.getLocale().lang}
+          locale={locale.lang}
           defaultValue={defaultCalendarValue}
           dateInputPlaceholder={placeholder}
           showTime={this.props.showTime}
           prefixCls="ant-calendar"
           showOk={this.props.showTime}
-          showClear={true}/>
+          showClear />
       );
 
       let sizeClass = '';
@@ -139,6 +140,7 @@ function createPicker(TheCalendar) {
                          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>

components/datepicker/index.md

@@ -25,9 +25,9 @@
 | format       | 展示的日期格式 | string   | "yyyy-MM-dd" |
 | disabledDate | 不可选择的日期 | function | 无           |
 | onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(Date value) | 无           |
-| showTime     | 显示时间选择条 | boolean  | false        |
 | disabled     | 禁用           | bool     | false        |
-| calendarStyle | 格外的弹出日历样式，例如 zIndex           | object     | {}        |
+| style        | 自定义输入框样式     | object     | {}   |
+| popupStyle   | 格外的弹出日历样式   | object     | {}   |
 | size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |
 | locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
 

components/dropdown/demo/trigger.md

@@ -21,7 +21,7 @@ const menu = <Menu>
 </Menu>;
 
 ReactDOM.render(<div>
-  <Dropdown overlay={menu} trigger={["click"]}>
+  <Dropdown overlay={menu} trigger={['click']}>
     <Button type="primary">
       点击触发 <Icon type="down" />
     </Button>

components/form/Form.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import rcUtil from 'rc-util';
+import classNames from 'classnames';
-
-const cx = rcUtil.classSet;
 
 class Form extends React.Component {
   render() {
@@ -10,7 +8,7 @@ class Form extends React.Component {
       [`${prefixCls}-horizontal`]: this.props.horizontal,
       [`${prefixCls}-inline`]: this.props.inline,
     };
-    const classes = cx(formClassName);
+    const classes = classNames(formClassName);
 
     return (
       <form {...this.props} className={classes}>

components/form/FormItem.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import rcUtil from 'rc-util';
+import classNames from 'classnames';
-
-const cx = rcUtil.classSet;
 
 function prefixClsFn(prefixCls, ...args) {
   return args.map((s)=> {
@@ -32,7 +30,7 @@ class FormItem extends React.Component {
   renderValidateWrapper(c1, c2) {
     let classes = '';
     if (this.props.validateStatus) {
-      classes = cx(
+      classes = classNames(
         {
           'has-feedback': this.props.hasFeedback,
           'has-success': this.props.validateStatus === 'success',
@@ -113,7 +111,7 @@ class FormItem extends React.Component {
     };
 
     return (
-      <div className={cx(itemClassName)}>
+      <div className={classNames(itemClassName)}>
         {children}
       </div>
     );

components/form/demo/disabled.md

@@ -28,7 +28,7 @@ ReactDOM.render(
         label="用户名："
         labelCol={{span:5}}
         wrapperCol={{span:12}}
-        required={true} >
+        required>
         <p className="ant-form-text">大眼萌 minion</p>
       </FormItem>
       <FormItem
@@ -36,7 +36,7 @@ ReactDOM.render(
         label="密码："
         labelCol={{span:5}}
         wrapperCol={{span:12}}
-        required={true} >
+        required>
         <Input type="password" defaultValue="123456" id="password" />
       </FormItem>
       <Row>

components/form/demo/form-controls.md

@@ -60,7 +60,7 @@ ReactDOM.render(
           <Checkbox />选项二
         </label>
         <label className="ant-checkbox-vertical">
-          <Checkbox disabled={true} />选项三（不可选）
+          <Checkbox disabled />选项三（不可选）
         </label>
     </FormItem>
 

components/form/demo/horizontal-form.md

@@ -30,7 +30,7 @@ const Demo = React.createClass({
 
   handleSubmit(e) {
     e.preventDefault();
-    message.success("收到表单值~~~ ：" + JSON.stringify(this.state.formData, function(k, v) {
+    message.success('收到表单值~~~ ：' + JSON.stringify(this.state.formData, function(k, v) {
       if (typeof v === 'undefined') {
         return '';
       }
@@ -46,7 +46,7 @@ const Demo = React.createClass({
           label="用户名："
           labelCol={{span: 6}}
           wrapperCol={{span: 6}}
-          required={true} >
+          required>
           <p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
         </FormItem>
         <FormItem
@@ -54,15 +54,15 @@ const Demo = React.createClass({
           label="密码："
           labelCol={{span: 6}}
           wrapperCol={{span: 14}}
-          required={true} >
+          required>
           <Input type="password" id="password" name="password" placeholder="请输入密码" value={formData.password} onChange={this.setValue.bind(this, 'password')} />
         </FormItem>
         <FormItem
           label="您的性别："
           labelCol={{span: 6}}
           wrapperCol={{span: 14}}
-          required={true} >
+          required>
-            <RadioGroup value="male" name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} >
+            <RadioGroup name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} >
               <Radio value="male">男的</Radio>
               <Radio value="female">女的</Radio>
             </RadioGroup>
@@ -72,7 +72,7 @@ const Demo = React.createClass({
           label="备注："
           labelCol={{span: 6}}
           wrapperCol={{span: 14}}
-          required={true}
+          required
           help="随便写点什么">
           <Input type="textarea" placeholder="随便写" id="remark" name="remark" value={formData.remark} onChange={this.setValue.bind(this, 'remark')} />
         </FormItem>

components/form/demo/inline-form.md

@@ -25,7 +25,7 @@ const Demo = React.createClass({
 
   handleSubmit(e) {
     e.preventDefault();
-    message.success("收到表单值~~~ ：" + JSON.stringify(this.state.formData, function(k, v) {
+    message.success('收到表单值~~~ ：' + JSON.stringify(this.state.formData, function(k, v) {
       if (typeof v === 'undefined') {
         return '';
       }

components/form/demo/mix.md

@@ -7,18 +7,18 @@
 ---
 
 ````jsx
-import {Form, Input, Select, InputNumber, Datepicker, Switch, Menu, Dropdown, Slider, Icon, Button, message, Row, Col} from 'antd';
+import { Form, Select, InputNumber, Datepicker, Switch, Slider, Button, message, Row, Col } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
 
-var Demo = React.createClass({
+const Demo = React.createClass({
   mixins: [Form.ValueMixin],
 
   getInitialState() {
     return {
       formData: {
         inputNumber: undefined,
-        static: "唧唧复唧唧木兰当户织呀",
+        static: '唧唧复唧唧木兰当户织呀',
         switch: undefined,
         slider: undefined,
         select: undefined,
@@ -30,7 +30,7 @@ var Demo = React.createClass({
 
   handleSubmit(e) {
     e.preventDefault();
-    message.success("收到表单值~~~ ：" + JSON.stringify(this.state.formData, function(k, v) {
+    message.success('收到表单值~~~ ：' + JSON.stringify(this.state.formData, function(k, v) {
       if (typeof v === 'undefined') {
         return '';
       }
@@ -39,14 +39,14 @@ var Demo = React.createClass({
   },
 
   render() {
-    var formData = this.state.formData;
+    const formData = this.state.formData;
     return (
       <Form horizontal onSubmit={this.handleSubmit} >
         <FormItem
           label="InputNumber 数字输入框："
           labelCol={{span: 8}}
           wrapperCol={{span: 10}}
-          required={true} >
+          required>
           <InputNumber size="large" min={1} max={10} style={{width:100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
           <span className="ant-form-text"> 台机器</span>
         </FormItem>
@@ -55,10 +55,10 @@ var Demo = React.createClass({
           label="我是标题："
           labelCol={{span: 8}}
           wrapperCol={{span: 10}}
-          required={true} >
+          required>
           <p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
           <p className="ant-form-text">
-            <a href="javascript:;">链接文字</a>
+            <a href="#">链接文字</a>
           </p>
         </FormItem>
 
@@ -66,7 +66,7 @@ var Demo = React.createClass({
           label="Switch 开关："
           labelCol={{span: 8}}
           wrapperCol={{span: 10}}
-          required={true} >
+          required>
           <Switch name="switch" onChange={this.setValue.bind(this, 'switch')} value={formData.switch} />
         </FormItem>
 
@@ -74,15 +74,15 @@ var Demo = React.createClass({
           label="Slider 滑动输入条："
           labelCol={{span: 8}}
           wrapperCol={{span: 10}}
-          required={true}>
+          required>
-          <Slider marks={["A","B","C","D","E","F","G"]} name="slider" onChange={this.setValue.bind(this, 'slider')} />
+          <Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} name="slider" onChange={this.setValue.bind(this, 'slider')} />
         </FormItem>
 
         <FormItem
           label="Select 选择器："
           labelCol={{span: 8}}
           wrapperCol={{span: 16}}
-          required={true}>
+          required>
           <Select size="large" defaultValue="lucy" style={{width:200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
             <Option value="jack">jack</Option>
             <Option value="lucy">lucy</Option>
@@ -94,7 +94,7 @@ var Demo = React.createClass({
         <FormItem
           label="Datepicker 日期选择框："
           labelCol={{span: 8}}
-          required={true}>
+          required>
           <Col span="6">
             <Datepicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
           </Col>

components/form/demo/validate.md

@@ -13,7 +13,7 @@ validateStatus: ['success', 'warning', 'error', 'validating']。
 ---
 
 ````jsx
-import {Form, Input, Datepicker, Row, Col} from "antd";
+import { Form, Input, Datepicker, Col } from 'antd';
 const FormItem = Form.Item;
 
 ReactDOM.render(
@@ -39,7 +39,7 @@ ReactDOM.render(
       label="校验中："
       labelCol={{span: 5}}
       wrapperCol={{span: 12}}
-      hasFeedback={true}
+      hasFeedback
       validateStatus="validating"
       help="信息审核中...">
       <Input defaultValue="我是被校验的内容" id="validating" />
@@ -49,7 +49,7 @@ ReactDOM.render(
       label="成功校验："
       labelCol={{span: 5}}
       wrapperCol={{span: 12}}
-      hasFeedback={true}
+      hasFeedback
       validateStatus="success">
       <Input defaultValue="我是正文" id="success" />
     </FormItem>
@@ -58,7 +58,7 @@ ReactDOM.render(
       label="警告校验："
       labelCol={{span: 5}}
       wrapperCol={{span: 12}}
-      hasFeedback={true}
+      hasFeedback
       validateStatus="warning">
       <Input defaultValue="前方高能预警" id="warning" />
     </FormItem>
@@ -67,7 +67,7 @@ ReactDOM.render(
       label="失败校验："
       labelCol={{span: 5}}
       wrapperCol={{span: 12}}
-      hasFeedback={true}
+      hasFeedback
       validateStatus="error"
       help="请输入数字和字母组合">
       <Input defaultValue="无效选择" id="error" />

components/form/index.jsx

@@ -1,11 +1,15 @@
 import Form from './Form';
 import FormItem from './FormItem';
 import ValueMixin from './ValueMixin';
-import Input from './Input';
+import Input from '../input';
 
 Form.Item = FormItem;
 Form.ValueMixin = ValueMixin;
-export default {
+
-  Form,
+// 对于 import { Form, Input } from 'antd/lib/form/';
-  Input
+// 的方式做向下兼容
-};
+// https://github.com/ant-design/ant-design/pull/566
+Form.Form = Form;
+Form.Input = Input;
+
+export default Form;

components/form/index.md

@@ -25,7 +25,7 @@
 ```html
 <Form.Item {...props}>
   {children}
-</Form.Item>`；
+</Form.Item>
 ```
 
 ## Input 输入框

components/input-number/demo/disabled.md

@@ -9,7 +9,7 @@
 ````jsx
 import { InputNumber, Button } from 'antd';
 
-var Test = React.createClass({
+const Test = React.createClass({
   getInitialState() {
     return {
       disabled: true

components/input-number/index.jsx

@@ -1,5 +1,6 @@
-import InputNumber from 'rc-input-number';
 import React from 'react';
+import classNames from 'classnames';
+import InputNumber from 'rc-input-number';
 
 export default React.createClass({
   getDefaultProps() {
@@ -9,12 +10,13 @@ export default React.createClass({
     };
   },
   render() {
-    let sizeClass = '';
+    const {className, size, ...other} = this.props;
-    if (this.props.size === 'large') {
+    const inputNumberClass = classNames({
-      sizeClass = 'ant-input-number-lg';
+      'ant-input-number-lg': size === 'large',
-    } else if (this.props.size === 'small') {
+      'ant-input-number-sm': size === 'small',
-      sizeClass = 'ant-input-number-sm';
+      [className]: !!className,
-    }
+    });
-    return <InputNumber className={sizeClass} {...this.props} />;
+
+    return <InputNumber className={inputNumberClass} {...other} />;
   }
 });

components/input/index.jsx

@@ -79,7 +79,7 @@ class Input extends React.Component {
     }
     switch (props.type) {
     case 'textarea':
-      return <textarea {...props} placeholder={placeholder} className={inputClassName} ref="input" />;
+      return <textarea {...props} value={props.value || props.defaultValue} placeholder={placeholder} className={inputClassName} ref="input" />;
     default:
       inputClassName = props.className ? props.className : inputClassName;
       return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;

components/layout/col.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import rcUtil from 'rc-util';
+import classNames from 'classnames';
 
 const Col = React.createClass({
   propTypes: {
@@ -13,7 +13,7 @@ const Col = React.createClass({
   },
   render() {
     const {span, order, offset, push, pull, className, ...others} = this.props;
-    const classes = rcUtil.classSet({
+    const classes = classNames({
       ['col-' + span]: span,
       ['col-order-' + order]: order,
       ['col-offset-' + offset]: offset,

components/layout/demo/flex-align.md

@@ -10,13 +10,13 @@ Flex 子元素垂直对齐。
 ````jsx
 import { Row, Col } from 'antd';
 
-var DemoBox = React.createClass({
+const DemoBox = React.createClass({
   render() {
     const { value } = this.props;
     const className = `hight-${value}`;
     return (
       <p className={className}>{this.props.children}</p>
-    )
+    );
   }
 });
 

components/layout/demo/flex.md

@@ -54,5 +54,5 @@ ReactDOM.render(
     </Row>
   </div>,
   document.getElementById('components-layout-demo-flex')
-)
+);
 ````

components/layout/row.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import rcUtil from 'rc-util';
+import classNames from 'classnames';
 
 const Row = React.createClass({
   propTypes: {
@@ -11,7 +11,7 @@ const Row = React.createClass({
   },
   render() {
     const { type, justify, align, className, ...others } = this.props;
-    const classes = rcUtil.classSet({
+    const classes = classNames({
       'row': true,
       ['row-' + type]: type,
       ['row-' + type + '-' + justify]: justify,

components/menu/demo/horizontal.md

@@ -7,14 +7,14 @@
 ---
 
 ````jsx
-import { Menu, Icon, Switch } from 'antd';
+import { Menu, Icon } from 'antd';
 const SubMenu = Menu.SubMenu;
 
 const App = React.createClass({
   getInitialState() {
     return {
       current: 'mail'
-    }
+    };
   },
   handleClick(e) {
     console.log('click ', e);

components/menu/demo/sider-current.md

@@ -10,12 +10,12 @@
 import { Menu, Icon } from 'antd';
 const SubMenu = Menu.SubMenu;
 
-var Sider = React.createClass({
+const Sider = React.createClass({
   getInitialState() {
     return {
       current: '1',
       openKeys: []
-    }
+    };
   },
   handleClick(e) {
     console.log('click ', e);

components/menu/demo/sider.md

@@ -10,11 +10,11 @@
 import { Menu, Icon } from 'antd';
 const SubMenu = Menu.SubMenu;
 
-var Sider = React.createClass({
+const Sider = React.createClass({
   getInitialState() {
     return {
       current: '1'
-    }
+    };
   },
   handleClick(e) {
     console.log('click ', e);

components/menu/demo/theme.md

@@ -10,11 +10,11 @@
 import { Menu, Icon, Switch } from 'antd';
 const SubMenu = Menu.SubMenu;
 
-var Sider = React.createClass({
+const Sider = React.createClass({
   getInitialState() {
     return {
       theme: 'light'
-    }
+    };
   },
   changeTheme(value) {
     this.setState({

components/modal/confirm.jsx

@@ -91,7 +91,7 @@ export default function (props) {
   ReactDOM.render(<Dialog
     prefixCls="ant-modal"
     className="ant-confirm"
-    visible={true}
+    visible
     closable={false}
     title=""
     transitionName="zoom"

components/modal/demo/async.md

@@ -9,8 +9,6 @@
 ````jsx
 import { Modal, Button } from 'antd';
 
-const ModalText = '对话框的内容';
-
 const Test = React.createClass({
   getInitialState() {
     return {

components/modal/demo/confirm-promise.md

@@ -8,14 +8,13 @@
 
 ````jsx
 import { Modal, Button } from 'antd';
-const confirm = antd.Modal.confirm;
+const confirm = Modal.confirm;
 
 function showConfirm(){
   confirm({
     title: '您是否确认要删除这项内容',
-    content: '一些解释',
+    content: '点确认 1 秒后关闭',
     onOk: function() {
-      alert('1 秒后关闭');
       return new Promise(function(resolve) {
         setTimeout(resolve, 1000);
       });

components/modal/demo/confirm.md

@@ -8,14 +8,14 @@
 
 ````jsx
 import { Modal, Button } from 'antd';
-const confirm = antd.Modal.confirm;
+const confirm = Modal.confirm;
 
 function showConfirm(){
   confirm({
     title: '您是否确认要删除这项内容',
     content: '一些解释',
     onOk: function() {
-      alert('确定');
+      console.log('确定');
     },
     onCancel: function() {}
   });

components/notification/demo/basic.md

@@ -11,8 +11,8 @@ import { Button, notification } from 'antd';
 
 const openNotification = function() {
   notification.open({
-    message: "这是标题",
+    message: '这是标题',
-    description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案"
+    description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案'
   });
 };
 

components/notification/demo/duration.md

@@ -11,8 +11,8 @@ import { Button, notification } from 'antd';
 
 const openNotification = function() {
   const args = {
-    message: "这是标题",
+    message: '这是标题',
-    description: "我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，",
+    description: '我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭',
     duration: 0
   };
   notification.open(args);

components/notification/demo/onclose.md

@@ -10,13 +10,13 @@
 import { Button, notification } from 'antd';
 
 const close = function() {
-  console.log("我被默认的关闭按钮关闭了！");
+  console.log('我被默认的关闭按钮关闭了！');
 };
 
 const openNotification = function() {
   const args = {
-    message: "这是标题",
+    message: '这是标题',
-    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
     onClose: close
   };
   notification.open(args);

components/notification/demo/with-btn.md

@@ -11,7 +11,7 @@ import { Button, notification } from 'antd';
 
 const close = function() {
   console.log('我被默认的关闭按钮关闭了！');
-}
+};
 
 const openNotification = function() {
   const key = 'open' + Date.now();
@@ -23,8 +23,8 @@ const openNotification = function() {
     自定义关闭按钮并触发回调函数
   </Button>;
   notification.open({
-    message: "这是标题",
+    message: '这是标题',
-    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
     btn: btn,
     key: key,
     onClose: close

components/notification/demo/with-icon.md

@@ -12,8 +12,8 @@ import { Button, notification } from 'antd';
 const openNotificationWithIcon = function(type) {
   return function(){
     notification[type]({
-      message: "这是标题",
+      message: '这是标题',
-      description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案"
+      description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案'
     });
   };
 };

components/pagination/demo/changer.md

@@ -18,6 +18,6 @@ function onShowSizeChange(current, pageSize) {
 }
 
 ReactDOM.render(
-  <Pagination showSizeChanger={true} onShowSizeChange={onShowSizeChange} onChange={onChange} total={500} />,
+  <Pagination showSizeChanger onShowSizeChange={onShowSizeChange} onChange={onChange} total={500} />,
  document.getElementById('components-pagination-demo-changer'));
 ````

components/pagination/demo/jump.md

@@ -14,6 +14,6 @@ function onChange(page) {
 }
 
 ReactDOM.render(
-  <Pagination showQuickJumper={true} onChange={onChange} total={500} />,
+  <Pagination showQuickJumper onChange={onChange} total={500} />,
  document.getElementById('components-pagination-demo-jump'));
 ````

components/popconfirm/demo/basic.md

@@ -19,7 +19,7 @@ function cancel() {
 
 ReactDOM.render(
   <Popconfirm title="确定要删除这个任务吗？" onConfirm={confirm} onCancel={cancel}>
-    <a href="javascript:;">删除</a>
+    <a href="#">删除</a>
   </Popconfirm>
 , document.getElementById('components-popconfirm-demo-basic'));
 ````

components/queue-anim/demo/custom.md

@@ -13,12 +13,12 @@ const Test = React.createClass({
   getInitialState() {
     return {
       show: true,
-    }
+    };
   },
   onClick() {
     this.setState({
       show: !this.state.show,
-    })
+    });
   },
   render() {
     return (
@@ -52,7 +52,7 @@ const Test = React.createClass({
           ] : null}
         </QueueAnim>
       </div>
-    )
+    );
   }
 });
 

components/queue-anim/demo/form.md

@@ -7,8 +7,7 @@
 ---
 
 ````jsx
-import { QueueAnim, Button, Select, Checkbox, Radio } from 'antd';
+import { QueueAnim, Button, Checkbox, Radio } from 'antd';
-const Option = Select.Option;
 const RadioGroup = Radio.Group;
 
 const Test = React.createClass({
@@ -28,21 +27,21 @@ const Test = React.createClass({
         <p className="buttons">
           <Button type="primary" onClick={this.onClick}>切换</Button>
         </p>
-        <QueueAnim component="form" className="ant-form-horizontal" type="bottom" leaveReverse={true}>
+        <QueueAnim component="form" className="ant-form-horizontal" type="bottom" leaveReverse>
           {this.state.show ? [
-            <div className="ant-form-item ant-form-item-compact" key='name'>
+            <div className="ant-form-item ant-form-item-compact" key="name">
               <label htmlFor="userName" className="col-6" required>用户名：</label>
               <div className="col-6">
                 <p className="ant-form-text">大眼萌 minion</p>
               </div>
             </div>,
-            <div className="ant-form-item" key='password'>
+            <div className="ant-form-item" key="password">
               <label htmlFor="password" className="col-6" required>密码：</label>
               <div className="col-14">
                 <input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
               </div>
             </div>,
-            <div className="ant-form-item ant-form-item-compact" key='sex'>
+            <div className="ant-form-item ant-form-item-compact" key="sex">
               <label className="col-6" required>您的性别：</label>
               <div className="col-14">
                 <RadioGroup value="male">
@@ -51,14 +50,14 @@ const Test = React.createClass({
                 </RadioGroup>
               </div>
             </div>,
-            <div className="ant-form-item" key='remark'>
+            <div className="ant-form-item" key="remark">
               <label htmlFor="remark" className="col-6" required>备注：</label>
               <div className="col-14">
                 <textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
                 <p className="ant-form-explain">随便写点什么</p>
               </div>
             </div>,
-            <div className="ant-form-item ant-form-item-compact" key='checkbox'>
+            <div className="ant-form-item ant-form-item-compact" key="checkbox">
               <div className="col-14 col-offset-6">
                 <label>
                   <Checkbox />
@@ -66,7 +65,7 @@ const Test = React.createClass({
                 </label>
               </div>
             </div>,
-            <div className="row" key='btn'>
+            <div className="row" key="btn">
               <div className="col-16 col-offset-6">
                 <Button type="primary">确定</Button>
               </div>

components/radio/demo/disable.md

@@ -9,10 +9,6 @@ Radio 不可用。
 ````jsx
 import { Radio, Button } from 'antd';
 
-function toggleDisabled() {
-  disabled = !disabled;
-}
-
 const App = React.createClass({
   getInitialState() {
     return {
@@ -28,7 +24,7 @@ const App = React.createClass({
     return <div>
       <Radio defaultChecked={false} disabled={this.state.disabled}>不可用</Radio>
       <br />
-      <Radio defaultChecked={true} disabled={this.state.disabled}>不可用</Radio>
+      <Radio defaultChecked disabled={this.state.disabled}>不可用</Radio>
       <div style={{marginTop: 20}}>
         <Button type="primary" onClick={this.toggleDisabled}>
           Toggle disabled

components/row/index.js

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

components/select/demo/search.md

@@ -15,7 +15,7 @@ function handleChange(value) {
 }
 
 ReactDOM.render(
-  <Select defaultValue="lucy" showSearch={true} style={{width:200}}
+  <Select defaultValue="lucy" showSearch style={{width:200}}
   searchPlaceholder="输入"
   onChange={handleChange}>
     <Option value="jack">jack</Option>

components/slider/demo/icon-slider.md

@@ -24,13 +24,11 @@ const IconSlider = React.createClass({
   },
 
   handleChange(v) {
-    this.setState(
+    this.setState({
-      {
       preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
       nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
       sliderValue: v
-      }
+    });
-    );
   },
 
   render() {

components/slider/demo/input-number.md

@@ -9,7 +9,7 @@
 ````jsx
 import { Slider, InputNumber } from 'antd';
 
-const Test = React.createClass({
+const IntegerStep = React.createClass({
   getInitialState() {
     return {
       inputValue: 1
@@ -35,5 +35,34 @@ const Test = React.createClass({
   }
 });
 
-ReactDOM.render(<Test />, document.getElementById('components-slider-demo-input-number'));
+const DecimalStep = React.createClass({
+  getInitialState() {
+    return {
+      inputValue: 0
+    };
+  },
+  onChange(value) {
+    this.setState({
+      inputValue: value
+    });
+  },
+  render() {
+    return (
+      <div className="row">
+        <div className="col-12">
+          <Slider min={0} max={1} onChange={this.onChange} value={this.state.inputValue} step={0.01} />
+        </div>
+        <div className="col-4">
+          <InputNumber min={0} max={1} style={{marginLeft: '16px'}} step={0.01}
+            value={this.state.inputValue} onChange={this.onChange} />
+        </div>
+      </div>
+    );
+  }
+});
+
+ReactDOM.render(<div>
+  <IntegerStep />
+  <DecimalStep />
+</div>, document.getElementById('components-slider-demo-input-number'));
 ````

components/slider/demo/tip-formatter.md

@@ -0,0 +1,18 @@
+# 格式化 `Tooltip` 内容
+
+- order: 5
+
+使用 `tipFormatter` 可以格式化 `Tooltip` 的内容。
+
+---
+
+````jsx
+import { Slider } from 'antd';
+
+function formatter(value) {
+  return '$' + value;
+}
+
+ReactDOM.render(<Slider tipFormatter={formatter} />
+, document.getElementById('components-slider-demo-tip-formatter'));
+````

components/slider/index.md

@@ -25,3 +25,4 @@
 | included   | Boolean			| true			| `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列
 | disabled   | Boolean 			| false         | 值为 `true` 时，滑块为禁用状态
 | onChange   | Function         | NOOP          | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。
+| tipFormatter | Function       |               | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值。

components/spin/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { classSet } from 'rc-util';
+import classNames from 'classnames';
 import { isCssAnimationSupported } from 'css-animation';
 
 const AntSpin = React.createClass({
@@ -23,7 +23,7 @@ const AntSpin = React.createClass({
   render() {
     const { className, size, prefixCls } = this.props;
 
-    let spinClassName = classSet({
+    let spinClassName = classNames({
       [prefixCls]: true,
       [`${prefixCls}-${size}`]: size,
       [className]: !!className,

components/steps/demo/icon.md

@@ -12,8 +12,8 @@ const Step = Steps.Step;
 const container = document.getElementById('components-steps-demo-icon');
 
 ReactDOM.render(<Steps>
-  <Step status='finish' title='步骤1' icon='cloud' />
+  <Step status="finish" title="步骤1" icon="cloud" />
-  <Step status='process' title='步骤2' icon='apple' />
+  <Step status="process" title="步骤2" icon="apple" />
-  <Step status='wait' title='步骤3' icon='github' />
+  <Step status="wait" title="步骤3" icon="github" />
 </Steps>, container);
 ````

components/steps/demo/step-next.md

@@ -27,7 +27,7 @@ const App = React.createClass({
   getInitialState() {
     return {
       currentStep: Math.floor(Math.random() * steps.length)
-    }
+    };
   },
   next() {
     let s = this.state.currentStep + 1;

components/steps/demo/vertical-small.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-import { Steps, Button } from 'antd';
+import { Steps } from 'antd';
 const Step = Steps.Step;
 const container = document.getElementById('components-steps-demo-vertical-small');
 

components/steps/demo/vertical.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-import { Steps, Button } from 'antd';
+import { Steps } from 'antd';
 const Step = Steps.Step;
 const container = document.getElementById('components-steps-demo-vertical');
 

components/switch/demo/disabled.md

@@ -14,7 +14,7 @@ const Test = React.createClass({
   getInitialState() {
     return {
       disabled: true
-    }
+    };
   },
   toggle(){
     this.setState({

components/table/demo/ajax.md

@@ -31,7 +31,7 @@ const columns = [{
 }];
 
 const dataSource = new Table.DataSource({
-  url: "/components/table/demo/data.json",
+  url: '/components/table/demo/data.json',
   resolve: function(result) {
     return result.data;
   },
@@ -41,7 +41,7 @@ const dataSource = new Table.DataSource({
     return {
       total: result.totalCount,
       pageSize: result.pageSize
-    }
+    };
   },
   // 和后台接口接收的参数进行适配
   // 参数里提供了分页、筛选、排序的信息

components/table/demo/basic.md

@@ -13,7 +13,7 @@ const columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="javascript:;">{text}</a>;
+    return <a href="#">{text}</a>;
   }
 }, {
   title: '年龄',
@@ -26,11 +26,11 @@ const columns = [{
   dataIndex: '',
   render: function(text, record) {
     return <span>
-      <a href="javascript:;">操作一</a>
+      <a href="#">操作一</a>
       <span className="ant-divider"></span>
-      <a href="javascript:;">操作二</a>
+      <a href="#">操作二</a>
       <span className="ant-divider"></span>
-      <a href="javascript:;" className="ant-dropdown-link">
+      <a href="#" className="ant-dropdown-link">
         更多 <Icon type="down" />
       </a>
     </span>;

components/table/demo/bordered.md

@@ -2,7 +2,7 @@
 
 - order: 10
 
-添加表格边框线，`bordered={true}`。
+添加表格边框线，`bordered`。
 
 ---
 
@@ -13,7 +13,7 @@ const columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="javascript:;">{text}</a>;
+    return <a href="#">{text}</a>;
   }
 }, {
   title: '资产',
@@ -41,7 +41,7 @@ const data = [{
   address: '西湖区湖底公园1号'
 }];
 
-ReactDOM.render(<Table columns={columns} dataSource={data} bordered={true} />
+ReactDOM.render(<Table columns={columns} dataSource={data} bordered />
 , document.getElementById('components-table-demo-bordered'));
 ````
 

components/table/demo/colspan-rowspan.md

@@ -17,7 +17,7 @@ const renderContent = function(value, row, index) {
   let obj = {
     children: value,
     props: {}
-  }
+  };
   if (index === 4) {
     obj.props.colSpan = 0;
   }
@@ -29,14 +29,14 @@ const columns = [{
   dataIndex: 'name',
   render: function(text, row, index) {
     if (index < 4) {
-      return <a href="javascript:;">{text}</a>;
+      return <a href="#">{text}</a>;
     } else {
       return {
-        children: <a href="javascript:;">{text}</a>,
+        children: <a href="#">{text}</a>,
         props: {
           colSpan: 5
         }
-      }
+      };
     }
   }
 }, {
@@ -51,7 +51,7 @@ const columns = [{
     let obj = {
       children: value,
       props:{}
-    }
+    };
     // 第三列的第三行行合并
     if (index === 2) {
       obj.props.rowSpan = 2;
@@ -115,6 +115,6 @@ const data = [{
   address: '西湖区湖底公园1号'
 }];
 
-ReactDOM.render(<Table columns={columns} dataSource={data} bordered={true} />
+ReactDOM.render(<Table columns={columns} dataSource={data} bordered />
 , document.getElementById('components-table-demo-colspan-rowspan'));
 ````

components/table/demo/expand.md

@@ -10,7 +10,7 @@
 import { Table } from 'antd';
 
 function renderAction() {
-  return <a href="javascript:;">删除</a>;
+  return <a href="#">删除</a>;
 }
 
 function expandedRowRender(record) {

components/table/demo/loading.md

@@ -53,7 +53,7 @@ const App = React.createClass({
       <Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
     </div>;
   }
-})
+});
 
 ReactDOM.render(<App />, document.getElementById('components-table-demo-loading'));
 ````

components/table/demo/local-data.md

@@ -13,7 +13,7 @@ const columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="javascript:;">{text}</a>;
+    return <a href="#">{text}</a>;
   }
 }, {
   title: '年龄',
@@ -79,9 +79,8 @@ const App = React.createClass({
       <Button onClick={this.handleClick2}>加载本地数据2</Button>
     </div>;
   }
-})
+});
 
 ReactDOM.render(<App />
 , document.getElementById('components-table-demo-local-data'));
 ````
-

components/table/demo/paging.md

@@ -13,7 +13,7 @@ const columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="javascript:;">{text}</a>;
+    return <a href="#">{text}</a>;
   }
 }, {
   title: '年龄',

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

@@ -13,7 +13,7 @@ const columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="javascript:;">{text}</a>;
+    return <a href="#">{text}</a>;
   }
 }, {
   title: '年龄',

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

@@ -13,7 +13,7 @@ const columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="javascript:;">{text}</a>;
+    return <a href="#">{text}</a>;
   }
 }, {
   title: '年龄',

components/table/demo/row-selection.md

@@ -13,7 +13,7 @@ const columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="javascript:;">{text}</a>;
+    return <a href="#">{text}</a>;
   }
 }, {
   title: '年龄',

components/table/index.md

@@ -40,6 +40,8 @@ var dataSource = [{
 
 **远程数据模式**是更常见的业务场景，是一次只从服务端读取一页的数据放在前端，执行筛选、排序、切换页码等操作时均向后台发送请求，后台返回当页的数据和相关分页信息。
 
+> 远程数据模式后续可能删除，目前不推荐使用。
+
 通过指定表格的数据源 `dataSource` 为一个 DataSource 的实例如下。
 
 ```jsx

components/tabs/demo/add.md

@@ -37,7 +37,7 @@ const Test = React.createClass({
       activeKey: index.toString()
     };
   },
-  remove(index, e) {
+  remove(targetIndex, e) {
     e.stopPropagation();
     let tabs = this.state.tabs;
     let activeKey = this.state.activeKey;
@@ -49,15 +49,15 @@ const Test = React.createClass({
     }
 
     const newTabs = tabs.filter(tab => {
-      if (tab.index !== index) {
+      if (tab.index !== targetIndex) {
         return true;
       } else {
-        foundIndex = index;
+        foundIndex = targetIndex;
         return false;
       }
     });
 
-    if (activeKey === index) {
+    if (activeKey === targetIndex) {
       activeKey = tabs[foundIndex - 1].index;
     }
 
@@ -101,7 +101,7 @@ const Test = React.createClass({
       </Tabs>
     );
   }
-})
+});
 
 ReactDOM.render(<Test />, document.getElementById('components-tabs-demo-add'));
 ````

components/tabs/demo/disabled.md

@@ -15,7 +15,7 @@ function callback(key) {}
 ReactDOM.render(
   <Tabs defaultActiveKey="1" onChange={callback}>
     <TabPane tab="选项卡一" key="1">选项卡一</TabPane>
-    <TabPane tab="选项卡二" disabled={true} key="2">选项卡二</TabPane>
+    <TabPane tab="选项卡二" disabled key="2">选项卡二</TabPane>
     <TabPane tab="选项卡三" key="3">选项卡三</TabPane>
   </Tabs>
 , document.getElementById('components-tabs-demo-disabled'));

components/tabs/demo/icon.md

@@ -10,7 +10,7 @@
 import { Tabs, Icon } from 'antd';
 const TabPane = Tabs.TabPane;
 
-var tabContent = [
+const tabContent = [
   <span><Icon type="apple" />选项卡一</span>,
   <span><Icon type="android" />选项卡二</span>,
   <span><Icon type="lock" />选项卡三</span>,

components/timeline/demo/pending.md

@@ -11,7 +11,7 @@ import { Timeline } from 'antd';
 const container = document.getElementById('components-timeline-demo-pending');
 
 ReactDOM.render(
-<Timeline pending={true}>
+<Timeline pending>
   <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
   <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
   <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>

components/timepicker/index.jsx

@@ -12,7 +12,7 @@ const AntTimepicker = React.createClass({
       onChange() {},
       locale: {},
       align: {
-        offset: [0, -1],
+        offset: [0, -2],
       },
       open: false,
       disabled: false,

components/timepicker/index.md

@@ -17,7 +17,7 @@ API
 ---
 
 ```html
-<Timepicker value="13:30:56" />
+<Timepicker defaultValue="13:30:56" />
 ```
 
 | 参数            | 说明 | 类型 | 默认值 |
@@ -30,8 +30,5 @@ API
 | hourOptions     | 特定可选择的小时 | array | 0 到 24 组成的数组 |
 | minuteOptions   | 特定可选择的分钟 | array | 0 到 60 组成的数组 |
 | secondOptions   | 特定可选择的秒 | array | 0 到 60 组成的数组 |
-| inputClassName  | 输入框的样式 | string |  |
-| placement       | 显示位置 | string | bottomLeft |
-| transitionName  | 显示动画 | string | slide-up |
 
-<style> .code-box-demo .ant-timepicker-picker { margin: 0 12px 12px 0; }</style>
+<style>.code-box-demo .ant-timepicker { margin: 0 8px 12px 0; }</style>

components/tree/demo/checkbox.md

@@ -15,7 +15,7 @@ function handleCheck(info) {
 }
 
 ReactDOM.render(<div>
- <Tree defaultExpandAll={true} checkable={true} onCheck={handleCheck}>
+ <Tree defaultExpandAll checkable onCheck={handleCheck}>
     <TreeNode title="parent 1">
       <TreeNode title="leaf" />
       <TreeNode title="parent 1-1">

components/tree/demo/dynamic.md

@@ -10,22 +10,23 @@
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
 
-const asyncTree = [
+const asyncTree = [{
-  {name: "pNode 01", key: "0-0"},
+  name: 'pNode 01',
-];
+  key: '0-0'
+}];
 
 const generateTreeNodes = () => {
-  const arr  = [
+  return [{
-       {name: "伯约", key: "0-0-0"},
+    name: '伯约',
-  ];
+    key: '0-0-0'
-  return arr;
+  }];
-}
+};
 
 const TreeDemo = React.createClass({
   timeout(duration = 0) {
     return new Promise((resolve, reject) => {
       setTimeout(resolve.bind(this), duration);
-    })
+    });
   },
   getInitialState() {
     return {
@@ -62,9 +63,9 @@ const TreeDemo = React.createClass({
         if (item.children) {
           return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
         } else {
-          return <TreeNode title={item.name} key={item.key}></TreeNode>;
+          return <TreeNode title={item.name} key={item.key} />;
         }
-      })
+      });
     };
     const parseTreeNode = data => loop(data);
     let treeNodes = parseTreeNode(this.state.treeData);
@@ -72,9 +73,9 @@ const TreeDemo = React.createClass({
       <Tree onSelect={this.handleSelect} onDataLoaded={this.handleDataLoaded} showLine={false}>
         {treeNodes}
       </Tree>
-    )
+    );
   }
-})
+});
 
 ReactDOM.render(<TreeDemo />, document.getElementById('components-tree-demo-dynamic'));
 ````

components/tree/demo/special.md

@@ -19,31 +19,31 @@ class TreeDemo extends React.Component {
     this.state = {
       checkedKeys: [],
       selectedKeys: []
-    }
+    };
   }
   handleClick() {
     this.setState({
       checkedKeys: ['p11'],
       selectedKeys: ['p21', 'p11']
-    })
+    });
   }
   handleCheck(info) {
     console.log('check: ', info);
     this.setState({
       checkedKeys: ['p21'],
       selectedKeys: ['p1', 'p21']
-    })
+    });
   }
   handleSelect(info) {
     console.log('selected: ', info);
     this.setState({
       checkedKeys: ['p21'],
       selectedKeys: ['p21']
-    })
+    });
   }
   render() {
     return (<div>
-        <Tree defaultExpandAll={true} checkable={true}
+      <Tree defaultExpandAll checkable
             onCheck={this.handleCheck} checkedKeys={this.state.checkedKeys}
             onSelect={this.handleSelect} selectedKeys={this.state.selectedKeys} multiple>
         <TreeNode title="parent 1" key="p1">

components/upload/demo/fileList.md

@@ -15,17 +15,15 @@
 ````jsx
 import { Upload, Button, Icon } from 'antd';
 
-const fileList = [{
+const MyUpload = React.createClass({
+  getInitialState() {
+    return {
+      fileList: [{
         uid: -1,
         name: 'xxx.png',
         status: 'done',
         url: 'http://www.baidu.com/xxx.png'
-}];
+      }]
-
-const MyUpload = React.createClass({
-  getInitialState() {
-    return {
-      fileList: fileList
     };
   },
   handleChange(info) {
@@ -52,9 +50,7 @@ const MyUpload = React.createClass({
       return true;
     });
 
-    this.setState({
+    this.setState({ fileList });
-      fileList: fileList
-    });
   },
   render() {
     const props = {

components/upload/index.jsx

@@ -62,7 +62,7 @@ const AntUpload = React.createClass({
         f.status = 'uploading';
         return f;
       });
-      nextFileList = nextFileList.concat(file);
+      nextFileList = nextFileList.concat(targetItem);
     } else {
       targetItem = fileToObject(file);
       targetItem.status = 'uploading';

components/validation/demo/basic.md

@@ -147,7 +147,7 @@ const Demo = React.createClass({
             wrapperCol={{span: 12}}
             validateStatus={this.renderValidateStyle('name')}
             hasFeedback
-            help={status.name.isValidating ? "正在校验中.." : status.name.errors ? status.name.errors.join(',') : null}
+            help={status.name.isValidating ? '正在校验中..' : (status.name.errors && status.name.errors.join(','))}
             required>
               <Validator rules={[{required: true, min: 5, message: '用户名至少为 5 个字符'}, {validator: this.userExists}]}>
                 <Input name="name" id="name" value={formData.name} placeholder="实时校验，输入 JasonWood 看看" onChange={this.setField.bind(this, 'name')} />