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

2024-12-14 08:09:13 +08:00 · 2016-02-23 00:09:44 +08:00 · 2016-02-23 00:09:44 +08:00 · 3cf6696dad
commit 3cf6696dad
parent c8e1d300bf c3014c26a1
56 changed files with 260 additions and 212 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -7,9 +7,12 @@
    "jest": true,
    "es6": true
  },
-  "ecmaFeatures": {
-    "jsx": true,
-    "experimentalObjectRestSpread": true
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
  },
  "plugins": [
    "markdown",
@ -28,6 +31,8 @@
    "react/jsx-closing-bracket-location": 0,
    "react/jsx-no-bind": 0,
    "no-param-reassign": 0,
-    "max-len": 0
+    "no-return-assign": 0,
+    "max-len": 0,
+    "consistent-return": 0
  }
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,18 @@

 ---

+## 0.12.4
+
+`2016-02-22`
+
+- Radio 的 value 支持更多类型。[#1043](https://github.com/ant-design/ant-design/pull/1043)
+- 修复 Spin 组件的大小、居中等样式问题。
+- FormItem 补充 extra 属性的文档。[#931](https://github.com/ant-design/ant-design/issues/931)
+- 修复的 Table 下树形数据和选择框配合时的样式问题。
+- 修复一个水平表单的错误提示的样式错位问题。[#1040](https://github.com/ant-design/ant-design/issues/1040)
+- 改进 Input disabled 的样式。
+- 添加了一个轻微的 Button 点击动效。
+
 ## 0.12.3

 `2016-02-19`
--- a/components/badge/index.jsx
+++ b/components/badge/index.jsx
@ -4,10 +4,6 @@ import ScrollNumber from './ScrollNumber';
 import classNames from 'classnames';

 class AntBadge extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
  render() {
    let { count, prefixCls, overflowCount, className, style, children } = this.props;
    const dot = this.props.dot;
--- a/components/button/button.jsx
+++ b/components/button/button.jsx
@ -30,9 +30,17 @@ export default class Button extends React.Component {
      window.PIE.attach(findDOMNode(this));
    }
  }
+  handleClick(...args) {
+    const buttonNode = findDOMNode(this);
+    buttonNode.className = buttonNode.className.replace(`${prefix}clicked`, '');
+    setTimeout(() => {
+      buttonNode.className += ` ${prefix}clicked`;
+    }, 10);
+    this.props.onClick(...args);
+  }
  render() {
    const props = this.props;
-    const { type, shape, size, onClick, className, htmlType, children, ...others } = props;
+    const { type, shape, size, className, htmlType, children, ...others } = props;

    // large => lg
    // small => sm
@ -53,7 +61,7 @@ export default class Button extends React.Component {
    const kids = React.Children.map(children, insertSpace);

    return (
-      <button {...others} type={htmlType || 'button'} className={classes} onClick={onClick}>
+      <button {...others} type={htmlType || 'button'} className={classes} onClick={this.handleClick.bind(this)}>
        {kids}
      </button>
    );
--- a/components/calendar/demo/locale.md
+++ b/components/calendar/demo/locale.md
@ -15,6 +15,6 @@ function onPanelChange(value, mode) {
 }

 ReactDOM.render(
-  <Calendar onPanelChange={onPanelChange} locale={enUS}/>
+  <Calendar onPanelChange={onPanelChange} locale={enUS} />
 , mountNode);
 ````
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@ -92,7 +92,7 @@ class Calendar extends Component {
          locale={locale.lang}
          prefixCls={prefixCls}
          onTypeChange={this.setType.bind(this)}
-          onValueChange={this.setValue.bind(this)}/>
+          onValueChange={this.setValue.bind(this)} />
        <FullCalendar
          {...props}
          Select={noop}
--- a/components/checkbox/Group.jsx
+++ b/components/checkbox/Group.jsx
@ -16,10 +16,14 @@ export default React.createClass({
    onChange: React.PropTypes.func,
  },
  getInitialState() {
-    const { value, defaultValue } = this.props;
-    return {
-      value: value || defaultValue,
-    };
+    const props = this.props;
+    let value;
+    if ('value' in props) {
+      value = props.value;
+    } else if ('defaultValue' in props) {
+      value = props.defaultValue;
+    }
+    return { value };
  },
  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps) {
--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@ -2,7 +2,7 @@

 - order: 3

-方便的生成一个 Checkbox 组。
+方便的从数组生成 Checkbox 组。若需要 label 和 value 分离请直接使用 Checkbox。

 ---

--- a/components/collapse/demo/accordion.md
+++ b/components/collapse/demo/accordion.md
@ -18,13 +18,13 @@ const text = `

 ReactDOM.render(
  <Collapse accordion>
-    <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>
--- a/components/collapse/demo/mix.md
+++ b/components/collapse/demo/mix.md
@ -22,17 +22,17 @@ const text = `

 ReactDOM.render(
  <Collapse onChange={callback} accordion>
-    <Panel header={`This is panel header 1`} key="1">
+    <Panel header={'This is panel header 1'} key="1">
      <Collapse defaultActiveKey="1">
-        <Panel header={`This is panel nest panel`} key="1">
+        <Panel header={'This is panel nest panel'} key="1">
          <p>{text}</p>
        </Panel>
      </Collapse>
    </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>
--- a/components/date-picker/RangePicker.jsx
+++ b/components/date-picker/RangePicker.jsx
@ -74,7 +74,7 @@ export default React.createClass({
      timePicker = (<TimePicker
        prefixCls="ant-time-picker"
        placeholder={locale.lang.timePlaceholder}
-        transitionName="slide-up"/>);
+        transitionName="slide-up" />);
    }

    const calendarClassName = classNames({
@ -151,15 +151,15 @@ export default React.createClass({
                  onChange={this.handleInputChange}
                  value={start && this.getFormatter().format(start)}
                  placeholder={startPlaceholder}
-                  className="ant-calendar-range-picker-input"/>
+                  className="ant-calendar-range-picker-input" />
                <span className="ant-calendar-range-picker-separator"> ~ </span>
                <input
                  disabled={disabled}
                  onChange={this.handleInputChange}
                  value={end && this.getFormatter().format(end)}
                  placeholder={endPlaceholder}
-                  className="ant-calendar-range-picker-input"/>
-                <span className="ant-calendar-picker-icon"/>
+                  className="ant-calendar-range-picker-input" />
+                <span className="ant-calendar-picker-icon" />
              </span>
            );
          }
--- a/components/date-picker/index.jsx
+++ b/components/date-picker/index.jsx
@ -61,7 +61,7 @@ function createPicker(TheCalendar, defaultFormat) {
      const timePicker = this.props.showTime ? (<TimePicker
        prefixCls="ant-time-picker"
        placeholder={locale.lang.timePlaceholder}
-        transitionName="slide-up"/>)
+        transitionName="slide-up" />)
        : null;

      const disabledTime = this.props.showTime ? this.props.disabledTime : null;
@ -139,8 +139,8 @@ function createPicker(TheCalendar, defaultFormat) {
                      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"/>
+                      className={`ant-calendar-picker-input ant-input${sizeClass}`} />
+                    <span className="ant-calendar-picker-icon" />
                  </span>
                );
              }
--- a/components/dropdown/demo/item.md
+++ b/components/dropdown/demo/item.md
@ -17,7 +17,7 @@ const menu = (
    <Menu.Item key="1">
      <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
    </Menu.Item>
-    <Menu.Divider/>
+    <Menu.Divider />
    <Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
  </Menu>
 );
--- a/components/dropdown/demo/trigger.md
+++ b/components/dropdown/demo/trigger.md
@ -17,7 +17,7 @@ const menu = (
    <Menu.Item key="1">
      <a href="http://www.taobao.com/">第二个菜单项</a>
    </Menu.Item>
-    <Menu.Divider/>
+    <Menu.Divider />
    <Menu.Item key="3">第三个菜单项</Menu.Item>
  </Menu>
 );
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@ -58,6 +58,8 @@ class FormItem extends React.Component {
    } else if (getFieldValue(field) !== undefined) {
      return 'success';
    }
+
+    return '';
  }

  renderValidateWrapper(c1, c2, c3) {
--- a/components/form/ValueMixin.jsx
+++ b/components/form/ValueMixin.jsx
@ -1,14 +1,3 @@
-function merge() {
-  const ret = {};
-  const args = [].slice.call(arguments, 0);
-  args.forEach((a) => {
-    Object.keys(a).forEach((k) => {
-      ret[k] = a[k];
-    });
-  });
-  return ret;
-}
-
 const ValueMixin = {
  setValue(field, e) {
    let v = e;
@ -24,7 +13,10 @@ const ValueMixin = {
    const newFormData = {};
    newFormData[field] = v;
    this.setState({
-      formData: merge(this.state.formData, newFormData),
+      formData: {
+        ...this.state.formData,
+        ...newFormData,
+      },
    });
  },
 };
--- a/components/form/demo/disabled.md
+++ b/components/form/demo/disabled.md
@ -1,50 +0,0 @@
-# 禁用状态
-
- order: 7
-
-1) 单独为输入控件设置 `disabled` 属性；
-
-2) 为 `<fieldset>` 设置 `disabled` 属性，可以禁用 `<fieldset>` 中包含的所有控件。
-
---
-
-````jsx
-import { Row, Col, Button, Input, Form } from 'antd';
-const FormItem = Form.Item;
-
-ReactDOM.render(
-  <Form horizontal>
-    <FormItem
-      label="单独禁用输入框："
-      labelCol={{ span: 5 }}
-      wrapperCol={{ span: 12 }}>
-      <Input defaultValue="我是禁用的" disabled />
-    </FormItem>
-
-    <fieldset disabled>
-      <legend>禁用的 fieldset</legend>
-      <FormItem
-        id="userName"
-        label="用户名："
-        labelCol={{ span: 5 }}
-        wrapperCol={{ span: 12 }}
-        required>
-        <p className="ant-form-text">大眼萌 minion</p>
-      </FormItem>
-      <FormItem
-        id="password"
-        label="密码："
-        labelCol={{ span: 5 }}
-        wrapperCol={{ span: 12 }}
-        required>
-        <Input type="password" defaultValue="123456" id="password" />
-      </FormItem>
-      <Row>
-        <Col span="12" offset="5">
-          <Button htmlType="submit" type="primary">确定</Button>
-        </Col>
-      </Row>
-    </fieldset>
-  </Form>
-, mountNode);
-````
--- a/components/form/demo/input-group.md
+++ b/components/form/demo/input-group.md
@ -18,14 +18,14 @@ ReactDOM.render(
      label="标签输入框："
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 16 }}>
-      <Input addonBefore="Http://" defaultValue="mysite.com" id="site1"/>
+      <Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
    </FormItem>

    <FormItem
      label="标签输入框："
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 16 }}>
-      <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2"/>
+      <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
    </FormItem>

    <FormItem
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@ -63,7 +63,7 @@ let Demo = React.createClass({
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 10 }}
          required>
-          <Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')}/>
+          <Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')} />
        </FormItem>

        <FormItem
@ -85,7 +85,7 @@ let Demo = React.createClass({
          labelCol={{ span: 8 }}
          required>
          <Col span="6">
-            <DatePicker {...getFieldProps('startDate')}/>
+            <DatePicker {...getFieldProps('startDate')} />
          </Col>
          <Col span="1">
            <p className="ant-form-split">-</p>
@ -100,7 +100,7 @@ let Demo = React.createClass({
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          required>
-          <TimePicker {...getFieldProps('time')}/>
+          <TimePicker {...getFieldProps('time')} />
        </FormItem>

        <FormItem
--- a/components/form/demo/validate-basic.md
+++ b/components/form/demo/validate-basic.md
@ -114,7 +114,7 @@ class BasicDemo extends React.Component {
                ],
                trigger: ['onBlur', 'onChange'],
              }]
-            })}/>
+            })} />
        </FormItem>

        <FormItem
@ -129,7 +129,7 @@ class BasicDemo extends React.Component {
                { validator: this.checkPass.bind(this) },
              ],
            })}
-            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}/>
+            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
        </FormItem>

        <FormItem
@ -147,7 +147,7 @@ class BasicDemo extends React.Component {
              }, {
                validator: this.checkPass2.bind(this),
              }],
-            })}/>
+            })} />
        </FormItem>

        <FormItem
@ -159,7 +159,7 @@ class BasicDemo extends React.Component {
              rules: [
                { required: true, message: '真的不打算写点什么吗？' },
              ],
-            })}/>
+            })} />
        </FormItem>

        <FormItem wrapperCol={{ span: 12, offset: 7 }} >
--- a/components/form/index.md
+++ b/components/form/index.md
@ -101,6 +101,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 |  labelCol | label 标签布局，通 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` | object |  |  |
 |  wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | object |  |  |
 |  help | 提示信息，如不设置，则会根据校验规则自动生成 | string |  |   |
+|  extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string |  |   |
 |  required | 是否必填，如不设置，则会根据校验规则自动生成 | bool |  | false  |
 |  validateStatus | 校验状态，如不设置，则会根据校验规则自动生成 | string | 'success' 'warning' 'error' 'validating'  |   |
 |  hasFeedback | 配合 validateStatus 属性使用，是否展示校验状态图标 | bool |  | false  |
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@ -99,7 +99,7 @@ class Input extends React.Component {
        );
      default:
        inputClassName = props.className ? props.className : inputClassName;
-        return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;
+        return <input {...props} placeholder={placeholder} className={inputClassName} ref="input" />;
    }
  }

--- a/components/modal/demo/async.md
+++ b/components/modal/demo/async.md
@ -55,5 +55,5 @@ const Test = React.createClass({
  }
 });

-ReactDOM.render(<Test/>, mountNode);
+ReactDOM.render(<Test />, mountNode);
 ````
--- a/components/modal/demo/footer.md
+++ b/components/modal/demo/footer.md
@ -56,5 +56,5 @@ const Test = React.createClass({
  }
 });

-ReactDOM.render(<Test/>, mountNode);
+ReactDOM.render(<Test />, mountNode);
 ````
--- a/components/queue-anim/demo/form.md
+++ b/components/queue-anim/demo/form.md
@ -38,7 +38,7 @@ const Test = React.createClass({
            <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="请输入密码"/>
+                <input className="ant-input" type="password" id="password" placeholder="请输入密码" />
              </div>
            </div>,
            <div className="ant-form-item ant-form-item-compact" key="sex">
--- a/components/queue-anim/demo/router.md
+++ b/components/queue-anim/demo/router.md
@ -29,7 +29,7 @@ const App = React.createClass({
          </Menu.Item>
        </Menu>
        <QueueAnim type={['right', 'left']} className="demo-router-wrap">
-          {React.cloneElement(this.props.children || <Home/>, { key })}
+          {React.cloneElement(this.props.children || <Home />, { key })}
        </QueueAnim>
      </div>
    );
--- a/components/radio/demo/radiogroup.md
+++ b/components/radio/demo/radiogroup.md
@ -13,11 +13,11 @@ const RadioGroup = Radio.Group;
 const App = React.createClass({
  getInitialState() {
    return {
-      value: 'a'
+      value: 1
    };
  },
  onChange(e) {
-    console.log(`radio checked:${e.target.value}`);
+    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value
    });
@ -26,12 +26,11 @@ const App = React.createClass({
    return (
      <div>
        <RadioGroup onChange={this.onChange} value={this.state.value}>
-          <Radio value="a">A</Radio>
-          <Radio value="b">B</Radio>
-          <Radio value="c">C</Radio>
-          <Radio value="d">D</Radio>
+          <Radio key="a" value={1}>A</Radio>
+          <Radio key="b" value={2}>B</Radio>
+          <Radio key="c" value={3}>C</Radio>
+          <Radio key="d" value={null}>D</Radio>
        </RadioGroup>
-        <div style={{ marginTop: 20 }}>你选中的: {this.state.value}</div>
      </div>
    );
  }
--- a/components/radio/group.jsx
+++ b/components/radio/group.jsx
@ -1,13 +1,15 @@
 import React from 'react';

 function getCheckedValue(children) {
-  let checkedValue = null;
+  let value = null;
+  let matched = false;
  React.Children.forEach(children, (radio) => {
    if (radio.props && radio.props.checked) {
-      checkedValue = radio.props.value;
+      value = radio.props.value;
+      matched = true;
    }
  });
-  return checkedValue;
+  return matched ? { value } : undefined;
 }

 export default React.createClass({
@ -16,34 +18,56 @@ export default React.createClass({
      prefixCls: 'ant-radio-group',
      disabled: false,
      onChange() {
-      }
+      },
    };
  },
  getInitialState() {
    let props = this.props;
+    let value;
+    if ('value' in props) {
+      value = props.value;
+    } else if ('defaultValue' in props) {
+      value = props.defaultValue;
+    } else {
+      const checkedValue = getCheckedValue(props.children);
+      value = checkedValue && checkedValue.value;
+    }
    return {
-      value: props.value || props.defaultValue || getCheckedValue(props.children)
+      value,
    };
  },
  componentWillReceiveProps(nextProps) {
-    if ('value' in nextProps || getCheckedValue(nextProps.children)) {
+    if ('value' in nextProps) {
      this.setState({
-        value: nextProps.value || getCheckedValue(nextProps.children)
+        value: nextProps.value,
      });
+    } else {
+      const checkedValue = getCheckedValue(nextProps.children);
+      if (checkedValue) {
+        this.setState({
+          value: checkedValue.value,
+        });
+      }
    }
  },
  onRadioChange(ev) {
-    this.setState({
-      value: ev.target.value
-    });
+    if (!('value' in this.props)) {
+      this.setState({
+        value: ev.target.value,
+      });
+    }
    this.props.onChange(ev);
  },
  render() {
    const props = this.props;
    const children = React.Children.map(props.children, (radio) => {
      if (radio.props) {
+        const keyProps = {};
+        if (!('key' in radio) && typeof radio.props.value === 'string') {
+          keyProps.key = radio.props.value;
+        }
        return React.cloneElement(radio, {
-          key: radio.props.value,
+          ...keyProps,
          ...radio.props,
          onChange: this.onRadioChange,
          checked: this.state.value === radio.props.value,
--- a/components/table/demo/expand-children.md
+++ b/components/table/demo/expand-children.md
@ -78,7 +78,7 @@ const data = [{
 }];

 ReactDOM.render(
-  <Table columns={columns} dataSource={data} indentSize={30} />,
+  <Table columns={columns} dataSource={data} indentSize={20} />,
  mountNode
 );
 ````
--- a/components/table/filterDropdown.jsx
+++ b/components/table/filterDropdown.jsx
@ -59,9 +59,7 @@ let FilterMenu = React.createClass({
        const keyPathOfSelectedItem = this.state.keyPathOfSelectedItem;
        const containSelected = Object.keys(keyPathOfSelectedItem).some(key => {
          const keyPath = keyPathOfSelectedItem[key];
-          if (keyPath.indexOf(item.value) >= 0) {
-            return true;
-          }
+          return keyPath.indexOf(item.value) >= 0;
        });
        const subMenuCls = containSelected ? 'ant-dropdown-submenu-contain-selected' : '';
        return (
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@ -134,8 +134,8 @@ let AntTable = React.createClass({
      }
    }
    if (typeof column.sorter === 'function') {
-      sorter = function () {
-        let result = column.sorter.apply(this, arguments);
+      sorter = function (...args) {
+        let result = column.sorter.apply(this, args);
        if (sortOrder === 'ascend') {
          return result;
        } else if (sortOrder === 'descend') {
@ -296,7 +296,7 @@ let AntTable = React.createClass({
    return (
      <Radio disabled={props.disabled}
        onChange={this.handleRadioSelect.bind(this, record, rowIndex)}
-        value={rowIndex} checked={checked}/>
+        value={rowIndex} checked={checked} />
    );
  },

@ -315,7 +315,7 @@ let AntTable = React.createClass({
    }
    return (
      <Checkbox checked={checked} disabled={props.disabled}
-        onChange={this.handleSelect.bind(this, record, rowIndex)}/>
+        onChange={this.handleSelect.bind(this, record, rowIndex)} />
    );
  },

@ -408,7 +408,7 @@ let AntTable = React.createClass({
        filterDropdown = (
          <FilterDropdown locale={locale} column={column}
            selectedKeys={colFilters}
-            confirmFilter={this.handleFilter}/>
+            confirmFilter={this.handleFilter} />
        );
      }
      if (column.sorter) {
@ -427,12 +427,12 @@ let AntTable = React.createClass({
            <span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
              title="↑"
              onClick={this.toggleSortOrder.bind(this, 'ascend', column)}>
-              <Icon type="caret-up"/>
+              <Icon type="caret-up" />
            </span>
            <span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
              title="↓"
              onClick={this.toggleSortOrder.bind(this, 'descend', column)}>
-              <Icon type="caret-down"/>
+              <Icon type="caret-down" />
            </span>
          </div>
        );
@ -517,10 +517,7 @@ let AntTable = React.createClass({
    // 否则进行读取分页数据
    if (data.length > pageSize || pageSize === Number.MAX_VALUE) {
      data = data.filter((item, i) => {
-        if (i >= (current - 1) * pageSize &&
-          i < current * pageSize) {
-          return item;
-        }
+        return i >= (current - 1) * pageSize && i < current * pageSize;
      });
    }
    return data;
@ -575,7 +572,7 @@ let AntTable = React.createClass({
    if (!data || data.length === 0) {
      emptyText = (
        <div className="ant-table-placeholder">
-          <Icon type="frown"/>{locale.emptyText}
+          <Icon type="frown" />{locale.emptyText}
        </div>
      );
      emptyClass = ' ant-table-empty';
@ -587,6 +584,7 @@ let AntTable = React.createClass({
          data={data}
          columns={columns}
          className={classString}
+          expandIconColumnIndex={columns[0].key === 'selection-column' ? 1 : 0}
          expandIconAsCell={expandIconAsCell} />
          {emptyText}
      </div>
--- a/components/tabs/index.jsx
+++ b/components/tabs/index.jsx
@ -29,7 +29,7 @@ class AntTabs extends React.Component {
    let { prefixCls, size, tabPosition, animation, type,
          children, tabBarExtraContent } = this.props;
    let className = classNames({
-      [this.props.className]: !!this. props.className,
+      [this.props.className]: !!this.props.className,
      [`${prefixCls}-mini`]: size === 'small' || size === 'mini',
      [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
      [`${prefixCls}-card`]: type.indexOf('card') >= 0,
--- a/components/transfer/demo/advanced.md
+++ b/components/transfer/demo/advanced.md
@ -8,7 +8,6 @@

 ````jsx
 import { Transfer, Button } from 'antd';
-const container = mountNode;

 const App = React.createClass({
  getInitialState() {
@ -66,5 +65,5 @@ const App = React.createClass({
  }
 });

-ReactDOM.render(<App />, container);
+ReactDOM.render(<App />, mountNode);
 ````
--- a/components/transfer/index.jsx
+++ b/components/transfer/index.jsx
@ -33,6 +33,7 @@ class Transfer extends Component {
            leftDataSource.splice(index, 1);
            return true;
          }
+          return false;
        })[0]);
      });
    }
@ -181,14 +182,14 @@ class Transfer extends Component {
          searchPlaceholder={searchPlaceholder}
          body={body}
          footer={footer}
-          prefixCls={`${prefixCls}-list`}/>
+          prefixCls={`${prefixCls}-list`} />
        <Operation rightActive={rightActive}
          rightArrowText={operations[0]}
          moveToRight={this.moveTo.bind(this, 'right')}
          leftActive={leftActive}
          leftArrowText={operations[1]}
          moveToLeft={this.moveTo.bind(this, 'left')}
-          className={`${prefixCls}-operation`}/>
+          className={`${prefixCls}-operation`} />
        <List titleText={titles[1]}
          dataSource={rightDataSource}
          filter={rightFilter}
@ -205,7 +206,7 @@ class Transfer extends Component {
          searchPlaceholder={searchPlaceholder}
          body={body}
          footer={footer}
-          prefixCls={`${prefixCls}-list`}/>
+          prefixCls={`${prefixCls}-list`} />
      </div>
    );
  }
--- a/components/transfer/list.jsx
+++ b/components/transfer/list.jsx
@ -81,21 +81,19 @@ class TransferList extends Component {
      [`${prefixCls}-with-footer`]: !!footerDom,
    });

-    const showItems = dataSource.map((item) => {
-      // apply filter
+    const showItems = dataSource.filter((item) => {
      const itemText = this.props.render(item);
      const filterResult = this.matchFilter(itemText, filter);
+      return !!filterResult;
+    }).map((item) => {
      const renderedText = this.props.render(item);
-
-      if (filterResult) {
-        return (
-          <li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
-            <Checkbox checked={checkedKeys.some(key => key === item.key)} />
-            {renderedText}
-          </li>
-        );
-      }
-    }).filter(item => !!item);
+      return (
+        <li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
+          <Checkbox checked={checkedKeys.some(key => key === item.key)} />
+          {renderedText}
+        </li>
+      );
+    });

    return (
      <div className={listCls} {...this.props}>
@ -104,7 +102,7 @@ class TransferList extends Component {
            prefixCls: 'ant-transfer',
            checked: checkStatus === 'all',
            checkPart: checkStatus === 'part',
-            checkable: <span className={`ant-transfer-checkbox-inner`}></span>
+            checkable: <span className={'ant-transfer-checkbox-inner'}></span>
          })}<span className={`${prefixCls}-header-selected`}><span>{(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + dataSource.length} 条</span>
          <span className={`${prefixCls}-header-title`}>{titleText}</span></span>
        </div>
--- a/components/transfer/search.jsx
+++ b/components/transfer/search.jsx
@ -4,10 +4,6 @@ function noop() {
 }

 class Search extends Component {
-  constructor(props) {
-    super(props);
-  }
-
  handleChange(e) {
    this.props.onChange(e);
  }
@ -22,7 +18,7 @@ class Search extends Component {
    return (
      <div>
        <input placeholder={placeholder} className={ `${prefixCls} ant-input` } value={ value } ref="input"
-          onChange={this.handleChange.bind(this)}/>
+          onChange={this.handleChange.bind(this)} />
        { value && value.length > 0 ?
          <a href="#" className={ `${prefixCls}-action` } onClick={this.handleClear.bind(this)}>
            <Icon type="cross-circle" />
--- a/components/tree-select/demo/basic.md
+++ b/components/tree-select/demo/basic.md
@ -22,7 +22,7 @@ const Demo = React.createClass({
  },
  render() {
    return (
-      <TreeSelect style={{ width: 360 }}
+      <TreeSelect style={{ width: 300 }}
        value={this.state.value}
        dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="请选择"
--- a/components/tree-select/demo/checkable.md
+++ b/components/tree-select/demo/checkable.md
@ -54,9 +54,10 @@ const Demo = React.createClass({
      onChange: this.onChange,
      multiple: true,
      treeCheckable: true,
+      searchPlaceholder: '请选择',
      treeDefaultExpandAll: true,
      style: {
-        width: 360,
+        width: 300,
      },
    };
    return <TreeSelect {...tProps} />;
--- a/components/tree-select/demo/treeData.md
+++ b/components/tree-select/demo/treeData.md
@ -40,7 +40,7 @@ const Demo = React.createClass({
  },
  render() {
    return (
-      <TreeSelect style={{ width: 360 }}
+      <TreeSelect style={{ width: 300 }}
        value={this.state.value}
        dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
        treeData={treeData}
--- a/components/tree/demo/basic-controlled.md
+++ b/components/tree/demo/basic-controlled.md
@ -117,7 +117,7 @@ const Demo = React.createClass({
          </TreeNode>
        );
      }
-      return <TreeNode key={item.key} title={item.key}/>;
+      return <TreeNode key={item.key} title={item.key} />;
    });
    return (
      <Tree checkable multiple={this.props.multiple} defaultExpandAll
--- a/components/upload/demo/picture-card.md
+++ b/components/upload/demo/picture-card.md
@ -28,7 +28,7 @@ ReactDOM.render(
    <div className="ant-upload-text">上传照片</div>
  </Upload>
  <a href="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" target="_blank" className="upload-example">
-    <img src="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png"/>
+    <img src="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" />
    <span>示例</span>
  </a>
 </div>
--- a/components/upload/index.jsx
+++ b/components/upload/index.jsx
@ -235,7 +235,7 @@ const AntUpload = React.createClass({
      uploadList = (
        <UploadList listType={this.props.listType}
          items={this.state.fileList}
-          onRemove={this.handleManualRemove}/>
+          onRemove={this.handleManualRemove} />
      );
    }
    if (type === 'drag') {
@ -292,7 +292,7 @@ const AntUpload = React.createClass({

 AntUpload.Dragger = React.createClass({
  render() {
-    return <AntUpload {...this.props} type="drag" style={{ height: this.props.height }}/>;
+    return <AntUpload {...this.props} type="drag" style={{ height: this.props.height }} />;
  }
 });

--- a/docs/react/getting-started.md
+++ b/docs/react/getting-started.md
@ -102,7 +102,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。

 <style>
 .code-line-highlight {
-  box-shadow: 0px 190px 0px rgba(255, 207, 0, 0.16);
+  box-shadow: 0px 195px 0px rgba(255, 207, 0, 0.16);
  height: 42px;
  margin-top: -42px;
  position: relative;
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "0.12.3",
+  "version": "0.12.4",
  "title": "Ant Design",
  "description": "一个 UI 设计语言",
  "homepage": "http://ant.design/",
@ -41,7 +41,7 @@
    "rc-animate": "~2.0.2",
    "rc-calendar": "~5.4.0",
    "rc-cascader": "~0.9.0",
-    "rc-checkbox": "~1.2.0",
+    "rc-checkbox": "~1.3.0",
    "rc-collapse": "~1.4.4",
    "rc-dialog": "~5.3.1",
    "rc-dropdown": "~1.4.3",
@ -58,7 +58,7 @@
    "rc-slider": "~3.3.0",
    "rc-steps": "~1.4.1",
    "rc-switch": "~1.3.2",
-    "rc-table": "~3.9.0",
+    "rc-table": "~3.10.1",
    "rc-tabs": "~5.7.0",
    "rc-time-picker": "~1.1.0",
    "rc-tooltip": "~3.3.1",
@ -86,12 +86,12 @@
    "css-loader": "^0.23.0",
    "cz-conventional-changelog": "^1.1.5",
    "es3ify-loader": "^0.1.0",
-    "eslint": "^1.1.0",
-    "eslint-config-airbnb": "latest",
+    "eslint": "^2.2.0",
+    "eslint-config-airbnb": "^6.0.1",
    "eslint-plugin-babel": "^3.0.0",
    "eslint-plugin-markdown": "*",
-    "eslint-plugin-react": "^3.3.1",
-    "eslint-tinker": "~0.2.0",
+    "eslint-plugin-react": "^4.0.0",
+    "eslint-tinker": "^0.3.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "gh-pages": "^0.9.0",
    "history": "^1.17.0",
@ -130,7 +130,7 @@
    "just-deploy": "npm run site && node scripts/deploy.js",
    "lint": "npm run srclint && npm run mdlint && npm run lesshint",
    "srclint": "eslint components test index.js --ext '.js,.jsx'",
-    "mdlint": "eslint components/*/demo/*.md --ext '.md' --global 'React,ReactDOM,mountNode' --rule 'no-console: 0,eol-last: 0'",
+    "mdlint": "eslint components/*/demo/*.md --ext '.md' --global 'React,ReactDOM,mountNode' --rule 'no-console: 0, eol-last: 0, prefer-rest-params: 0'",
    "lesshint": "lesshint style/ -e 'style/+(core|mixins)/+(base|iconfont|normalize|layouts|compatibility|grid).less'",
    "eslint-fix": "eslint --fix components test index.js --ext '.js,.jsx' && eslint-tinker ./components/*/demo/*.md",
    "test": "npm run lint && webpack && npm run jest",
--- a/site/static/style.less
+++ b/site/static/style.less
@ -361,7 +361,6 @@ footer ul li > h2 {
 }

 footer ul li > div {
-  text-align: left;
  margin: auto;
  margin: 10px 0;
 }
@ -1541,6 +1540,10 @@ a.entry-link:hover .anticon-smile {
    padding-right: 30px;
  }

+  .prev-next-nav {
+    padding-left: 0;
+  }
+
  footer {
    text-align: center;
  }
--- a/site/static/tomorrow.less
+++ b/site/static/tomorrow.less
@ -51,6 +51,6 @@ pre code {
  border: 1px solid #e9e9e9;
  padding: 10px 15px;
  border-radius: 6px;
-  font-size: 0.9rem;
+  font-size: 14px;
  white-space: pre;
 }
--- a/style/components/button.less
+++ b/style/components/button.less
@ -97,4 +97,26 @@
  > span + .@{iconfont-css-prefix} {
    margin-left: 0.5em;
  }
+
+  &-clicked:before {
+  	content: '';
+  	position: absolute;
+  	top: -6px;
+  	left: -6px;
+  	bottom: -6px;
+  	right: -6px;
+  	border-radius: inherit;
+  	z-index: -1;
+    background: inherit;
+  	opacity: 1;
+  	transform: scale3d(0.5, 0.5, 1);
+    animation: buttonEffect 0.48s ease forwards;
+  }
+}
+
+@keyframes buttonEffect {
+	to {
+		opacity: 0;
+		transform: scale3d(1, 1, 1);
+	}
 }
--- a/style/components/form.less
+++ b/style/components/form.less
@ -268,6 +268,11 @@ form {
  .has-feedback {
    display: inline-block;
  }
+
+  // Fix https://github.com/ant-design/ant-design/issues/1040
+  .@{css-prefix}form-explain {
+    position: absolute;
+  }
 }

 .@{css-prefix}form-horizontal,
--- a/style/components/message.less
+++ b/style/components/message.less
@ -6,6 +6,7 @@
  z-index: 1050;
  width: 100%;
  top: 16px;
+  left: 0;

  &-notice {
    width: auto;
--- a/style/components/spin.less
+++ b/style/components/spin.less
@ -10,12 +10,13 @@
 .@{spin-prefix-cls} {
  color: @primary-color;
  display: inline-block;
-  font-size: @spin-dot-size;
+  vertical-align: middle;
  text-align: center;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  transition: opacity 0.3s @ease-in-out-circ;
+  font-size: @font-size-base;

  &-spining {
    opacity: 1;
@ -30,10 +31,12 @@
  &-nested-loading & {
    position: absolute;
    top: 50%;
-    left: 50%;
-    margin-top: -0.75em;
-    margin-left: -2.5em;
+    height: 20px;
+    line-height: 20px;
+    margin-top: -10px;
    z-index: 4;
+    text-align: center;
+    width: 100%;
  }

  &-container {
@ -42,6 +45,7 @@

  &-nested-loading > &-container {
    opacity: 0.7;
+    -webkit-filter: blur(1px);
    filter: blur(1px);
    filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)"; /* IE6~IE9 */
    pointer-events: none;
@ -52,30 +56,38 @@

  &-dot {
    .animation(antSpinPulse 1.2s infinite @ease-in-out-circ);
-    .square(1em);
+    .square(@spin-dot-size);
    border-radius: 50%;
    display: inline-block;
    background-color: @primary-color;
  }
  &-dot-second {
    .animation-delay(200ms);
-    margin-left: 1em;
  }
  &-dot-third {
    .animation-delay(400ms);
-    margin-left: 1em;
+  }
+
+  &-dot + &-dot {
+    margin-left: @spin-dot-size;
  }

  // Sizes
  // ------------------------------
  // small
-  &-sm {
-    font-size: @spin-dot-size-sm;
+  &-sm &-dot {
+    .square(@spin-dot-size-sm);
+    + & {
+      margin-left: @spin-dot-size-sm;
+    }
  }

  // large
-  &-lg {
-    font-size: @spin-dot-size-lg;
+  &-lg &-dot {
+    .square(@spin-dot-size-lg);
+    + & {
+      margin-left: @spin-dot-size-lg;
+    }
  }
 }

--- a/style/components/table.less
+++ b/style/components/table.less
@ -318,6 +318,15 @@
        content: '.';
      }
    }
+
+    // Hide selection component in children data
+    &[class*="@{table-prefix-cls}-row-level-"] .@{table-prefix-cls}-selection-column > span {
+      display: none;
+    }
+
+    &[class*="@{table-prefix-cls}-row-level-0"] .@{table-prefix-cls}-selection-column > span {
+      display: inline-block;
+    }
  }
  tr&-expanded-row {
    &,
--- a/style/components/treeSelect.less
+++ b/style/components/treeSelect.less
@ -231,12 +231,21 @@

    .@{tree-select-prefix-cls}-selection--multiple {
      min-height: 32px;
+
+      .@{tree-select-prefix-cls}-search__field__placeholder {
+        left: 10px;
+        margin-top: 4px;
+        font-size: 14px;
+        line-height: 24px;
+        height: 24px;
+      }
+
      .@{tree-select-prefix-cls}-selection__rendered {
        li {
-          height: 24px;
+          height: 22px;
          .@{tree-select-prefix-cls}-selection__choice__content {
            font-size: 14px;
-            line-height: 24px;
+            line-height: 22px;
          }
        }
      }
@ -259,7 +268,8 @@
        li {
          height: 14px;
          .@{tree-select-prefix-cls}-selection__choice__content {
-            line-height: 14px;
+            line-height: 10px;
+            font-size: 8px;
            position: relative;
            top: -3px;
          }
@ -315,8 +325,10 @@
    cursor: text;

    .@{tree-select-prefix-cls}-search__field__placeholder {
-      top: 6px;
      left: 10px;
+      margin-top: 4px;
+      height: 20px;
+      line-height: 20px;
    }

    .@{tree-select-prefix-cls}-search--inline {
--- a/style/mixins/button.less
+++ b/style/mixins/button.less
@ -250,8 +250,8 @@

  .@{btnClassName}:not(:first-child):not(:last-child) {
    border-radius: 0;
-    padding-left: 7px;
-    padding-right: 7px;
+    padding-left: 8px;
+    padding-right: 8px;
  }

  > .@{btnClassName}:first-child {
@ -259,14 +259,14 @@
    &:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
-      padding-right: 7px;
+      padding-right: 8px;
    }
  }

  > .@{btnClassName}:last-child:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
-    padding-left: 7px;
+    padding-left: 8px;
  }

 & > & {
@ -281,13 +281,13 @@
    > .@{btnClassName}:last-child {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
-      padding-right: 7px;
+      padding-right: 8px;
    }
  }

 & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
-    padding-left: 7px;
+    padding-left: 8px;
  }
 }
--- a/style/mixins/grid.less
+++ b/style/mixins/grid.less
@ -10,7 +10,6 @@

 .make-row(@gutter: @grid-gutter-width) {
  position: relative;
-  width: 100%;
  margin-left: (@gutter / -2);
  margin-right: (@gutter / -2);
  height: auto;
@ -69,4 +68,4 @@

 .make-grid() {
  .loop-grid-columns(@grid-columns);
-}
+}
--- a/style/mixins/input.less
+++ b/style/mixins/input.less
@ -27,6 +27,7 @@
  background-color: @input-disabled-bg;
  opacity: 1;
  cursor: @cursor-disabled;
+  color: #ccc;
  &:hover {
    .hover(@input-border-color);
  }
--- a/style/themes/default/custom.less
+++ b/style/themes/default/custom.less
@ -67,13 +67,13 @@
@btn-ghost-border       : @border-color-base;

@btn-disable-color      : #ccc;
-@btn-disable-bg         : #f3f5f7;
+@btn-disable-bg         : #f4f4f4;
@btn-disable-border     : @border-color-base;

-@btn-padding-base       : 4px 11px;
+@btn-padding-base       : 4px 15px;

@btn-font-size-lg       : 14px;
-@btn-padding-lg         : 4px 11px 5px 11px;
+@btn-padding-lg         : 4px 15px 5px 15px;

@btn-padding-sm         : 1px 7px;

@ -136,6 +136,6 @@

@input-hover-border-color    : @primary-color;
@input-focus-border-color    : @primary-color;
-@input-disabled-bg           : #f3f5f7;
+@input-disabled-bg           : #f4f4f4;

@form-item-margin-bottom     : 24px;