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

.eslintrc.json

@@ -7,9 +7,12 @@
     "jest": true,
     "es6": true
   },
-  "ecmaFeatures": {
+  "parserOptions": {
-    "jsx": true,
+    "ecmaVersion": 6,
-    "experimentalObjectRestSpread": true
+    "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
   }
 }

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`

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;

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>
     );

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);
 ````

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}

components/checkbox/Group.jsx

@@ -16,10 +16,14 @@ export default React.createClass({
     onChange: React.PropTypes.func,
   },
   getInitialState() {
-    const { value, defaultValue } = this.props;
+    const props = this.props;
-    return {
+    let value;
-      value: value || defaultValue,
+    if ('value' in props) {
-    };
+      value = props.value;
+    } else if ('defaultValue' in props) {
+      value = props.defaultValue;
+    }
+    return { value };
   },
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {

components/checkbox/demo/group.md

@@ -2,7 +2,7 @@
 
 - order: 3
 
-方便的生成一个 Checkbox 组。
+方便的从数组生成 Checkbox 组。若需要 label 和 value 分离请直接使用 Checkbox。
 
 ---
 

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>

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>

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"/>
+                  className="ant-calendar-range-picker-input" />
-                <span className="ant-calendar-picker-icon"/>
+                <span className="ant-calendar-picker-icon" />
               </span>
             );
           }

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}`}/>
+                      className={`ant-calendar-picker-input ant-input${sizeClass}`} />
-                    <span className="ant-calendar-picker-icon"/>
+                    <span className="ant-calendar-picker-icon" />
                   </span>
                 );
               }

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>
 );

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>
 );

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) {

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,
+      },
     });
   },
 };

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);
-````

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

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

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 }} >

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  |

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" />;
     }
   }
 

components/modal/demo/async.md

@@ -55,5 +55,5 @@ const Test = React.createClass({
   }
 });
 
-ReactDOM.render(<Test/>, mountNode);
+ReactDOM.render(<Test />, mountNode);
 ````

components/modal/demo/footer.md

@@ -56,5 +56,5 @@ const Test = React.createClass({
   }
 });
 
-ReactDOM.render(<Test/>, mountNode);
+ReactDOM.render(<Test />, mountNode);
 ````

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">

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>
     );

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 key="a" value={1}>A</Radio>
-          <Radio value="b">B</Radio>
+          <Radio key="b" value={2}>B</Radio>
-          <Radio value="c">C</Radio>
+          <Radio key="c" value={3}>C</Radio>
-          <Radio value="d">D</Radio>
+          <Radio key="d" value={null}>D</Radio>
         </RadioGroup>
-        <div style={{ marginTop: 20 }}>你选中的: {this.state.value}</div>
       </div>
     );
   }

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({
+    if (!('value' in this.props)) {
-      value: ev.target.value
+      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,

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
 );
 ````

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 keyPath.indexOf(item.value) >= 0;
-            return true;
-          }
         });
         const subMenuCls = containSelected ? 'ant-dropdown-submenu-contain-selected' : '';
         return (

components/table/index.jsx

@@ -134,8 +134,8 @@ let AntTable = React.createClass({
       }
     }
     if (typeof column.sorter === 'function') {
-      sorter = function () {
+      sorter = function (...args) {
-        let result = column.sorter.apply(this, arguments);
+        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 &&
+        return i >= (current - 1) * pageSize && i < current * pageSize;
-          i < current * pageSize) {
-          return item;
-        }
       });
     }
     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>

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,

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);
 ````

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>
     );
   }

components/transfer/list.jsx

@@ -81,21 +81,19 @@ class TransferList extends Component {
       [`${prefixCls}-with-footer`]: !!footerDom,
     });
 
-    const showItems = dataSource.map((item) => {
+    const showItems = dataSource.filter((item) => {
-      // apply filter
       const itemText = this.props.render(item);
       const filterResult = this.matchFilter(itemText, filter);
+      return !!filterResult;
+    }).map((item) => {
       const renderedText = this.props.render(item);
-
+      return (
-      if (filterResult) {
+        <li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
-        return (
+          <Checkbox checked={checkedKeys.some(key => key === item.key)} />
-          <li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
+          {renderedText}
-            <Checkbox checked={checkedKeys.some(key => key === item.key)} />
+        </li>
-            {renderedText}
+      );
-          </li>
+    });
-        );
-      }
-    }).filter(item => !!item);
 
     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>

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" />

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="请选择"

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} />;

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}

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

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>

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 }} />;
   }
 });
 

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;

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": "^2.2.0",
-    "eslint-config-airbnb": "latest",
+    "eslint-config-airbnb": "^6.0.1",
     "eslint-plugin-babel": "^3.0.0",
     "eslint-plugin-markdown": "*",
-    "eslint-plugin-react": "^3.3.1",
+    "eslint-plugin-react": "^4.0.0",
-    "eslint-tinker": "~0.2.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",

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;
   }

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;
 }

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);
+	}
 }

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,

style/components/message.less

@@ -6,6 +6,7 @@
   z-index: 1050;
   width: 100%;
   top: 16px;
+  left: 0;
 
   &-notice {
     width: auto;

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%;
+    height: 20px;
-    margin-top: -0.75em;
+    line-height: 20px;
-    margin-left: -2.5em;
+    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 {
+  &-sm &-dot {
-    font-size: @spin-dot-size-sm;
+    .square(@spin-dot-size-sm);
+    + & {
+      margin-left: @spin-dot-size-sm;
+    }
   }
 
   // large
-  &-lg {
+  &-lg &-dot {
-    font-size: @spin-dot-size-lg;
+    .square(@spin-dot-size-lg);
+    + & {
+      margin-left: @spin-dot-size-lg;
+    }
   }
 }
 

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 {
     &,

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 {

style/mixins/button.less

@@ -250,8 +250,8 @@
 
   .@{btnClassName}:not(:first-child):not(:last-child) {
     border-radius: 0;
-    padding-left: 7px;
+    padding-left: 8px;
-    padding-right: 7px;
+    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;
   }
 }

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);
-}
+}

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);
   }

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;