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

CHANGELOG.md

@@ -4,6 +4,20 @@
 
 ---
 
+## 0.11.2 `fixing`
+
+- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。
+- 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771)
+- 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。
+- Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu)
+- Table
+  - 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`，完善选择功能。
+  - 更新 dataSource 时，选中项现在会被清空。
+  - 修复一个全选框和禁用的选择项配合的问题。
+- 修复 `0.11.1`版本 menu 内嵌型菜单（inline）选中后关闭的问题。
+- 修复 `0.11.1`版本对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。
+- 组件和文档的样式小调整。
+
 ## 0.11.1 `2015-12-29`
 
 - 修复一个 Table 无法修改 pageSize 的问题。

CONTRIBUTING.md

@@ -32,7 +32,7 @@ P.S.
 
 ## Providing a demo while reporting a bug
 
-It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [Fiddle](http://jsfiddle.net/9zrstuto/70/) and re-produce the bug you met. Then, create an issue like this [example](https://github.com/ant-design/ant-design/issues/new?title=%E8%AF%B7%E5%A1%AB%E5%86%99%E7%AE%80%E6%B4%81%E6%9C%89%E6%95%88%E7%9A%84%E6%A0%87%E9%A2%98&body=**%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0**%0A%0A%EF%BC%88%E6%8F%8F%E8%BF%B0%E4%B8%80%E4%B8%8B%E9%97%AE%E9%A2%98%EF%BC%89%0A%0A**%E5%8F%91%E7%94%9F%E7%8E%AF%E5%A2%83**%0A%0A-%20antd%20%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E5%9C%A8%E7%BA%BF%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80%EF%BC%9A%0A%0A**%E9%87%8D%E7%8E%B0%E6%AD%A5%E9%AA%A4**%0A%0A1.%20...%0A2.%20...%0A). The most important thing is: double check before claiming that you have found a bug.
+It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [Fiddle](http://jsfiddle.net/0dso5y0x/) and re-produce the bug you met. Then, create an issue like this [example](https://github.com/ant-design/ant-design/issues/new?title=%E8%AF%B7%E5%A1%AB%E5%86%99%E7%AE%80%E6%B4%81%E6%9C%89%E6%95%88%E7%9A%84%E6%A0%87%E9%A2%98&body=**%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0**%0A%0A%EF%BC%88%E6%8F%8F%E8%BF%B0%E4%B8%80%E4%B8%8B%E9%97%AE%E9%A2%98%EF%BC%89%0A%0A**%E5%8F%91%E7%94%9F%E7%8E%AF%E5%A2%83**%0A%0A-%20antd%20%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E5%9C%A8%E7%BA%BF%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80%EF%BC%9A%0A%0A**%E9%87%8D%E7%8E%B0%E6%AD%A5%E9%AA%A4**%0A%0A1.%20...%0A2.%20...%0A). The most important thing is: double check before claiming that you have found a bug.
 
 
 ## Tips about Feature Request

components/dropdown/demo/sub-menu.md

@@ -0,0 +1,29 @@
+# 多级菜单
+
+- order: 5
+
+传入的菜单里有多个层级。
+
+---
+
+````jsx
+import { Menu, Dropdown, Icon } from 'antd';
+const SubMenu = Menu.SubMenu;
+
+const menu = <Menu>
+  <Menu.Item>第一个菜单项</Menu.Item>
+  <Menu.Item>第二个菜单项</Menu.Item>
+  <SubMenu title="子菜单">
+    <Menu.Item>第三个菜单项</Menu.Item>
+    <Menu.Item>第四个菜单项</Menu.Item>
+  </SubMenu>
+</Menu>;
+
+ReactDOM.render(
+  <Dropdown overlay={menu}>
+    <a className="ant-dropdown-link" href="#">
+      多级菜单 <Icon type="down" />
+    </a>
+  </Dropdown>
+, mountNode);
+````

components/dropdown/dropdown.jsx

@@ -9,8 +9,12 @@ export default React.createClass({
     };
   },
   render: function () {
+    const { overlay, ...otherProps } = this.props;
+    const menu = React.cloneElement(overlay, {
+      openTransitionName: 'zoom-big',
+    });
     return (
-      <Dropdown {...this.props} />
+      <Dropdown {...otherProps} overlay={menu} />
     );
   }
 });

components/form/FormItem.jsx

@@ -108,6 +108,7 @@ class FormItem extends React.Component {
     const itemClassName = {
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-compact`]: this._isCompact(props.children),
+      [`${prefixCls}-item-with-help`]: !!props.help,
     };
 
     return (

components/form/demo/mix.md

@@ -120,13 +120,13 @@ const Demo = React.createClass({
         <FormItem
           label="logo图："
           labelCol={{span: 8}}
-          wrapperCol={{span: 16}}>
+          wrapperCol={{span: 16}}
+          help="提示信息要长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长">
           <Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
             <Button type="ghost">
               <Icon type="upload" /> 点击上传
             </Button>
           </Upload>
-          <p>仅支持上传一张。</p>
         </FormItem>
         <Row>
           <Col span="16" offset="8">

components/menu/index.jsx

@@ -40,35 +40,43 @@ const AntMenu = React.createClass({
     this.props.onClose(e);
   },
   render() {
-    let openAnimation = '';
+    let openAnimation = this.props.openAnimation || this.props.openTransitionName;
-    switch (this.props.mode) {
+    if (!openAnimation) {
-    case 'horizontal':
+      switch (this.props.mode) {
-      openAnimation = 'slide-up';
+      case 'horizontal':
-      break;
+        openAnimation = 'slide-up';
-    case 'vertical':
+        break;
-      openAnimation = 'zoom-big';
+      case 'vertical':
-      break;
+        openAnimation = 'zoom-big';
-    case 'inline':
+        break;
-      openAnimation = animation;
+      case 'inline':
-      break;
+        openAnimation = animation;
-    default:
+        break;
+      default:
+      }
     }
 
-    // 这组属性的目的是
+    let props = {};
-    // 弹出型的菜单需要点击后立即关闭
-    // 另外，弹出型的菜单的受控模式没有使用场景
-    let props = {
-      openKeys: this.state.openKeys,
-      onClick: this.handleClick,
-      onOpen: this.handleOpenKeys,
-      onClose: this.handleCloseKeys,
-    };
     const className = this.props.className + ' ' + this.props.prefixCls + '-' + this.props.theme;
-    if (this.props.mode === 'inline') {
+    if (this.props.mode !== 'inline') {
-      return <Menu {...this.props} className={className} openAnimation={openAnimation} />;
+      // 这组属性的目的是
+      // 弹出型的菜单需要点击后立即关闭
+      // 另外，弹出型的菜单的受控模式没有使用场景
+      props = {
+        openKeys: this.state.openKeys,
+        onClick: this.handleClick,
+        onOpen: this.handleOpenKeys,
+        onClose: this.handleCloseKeys,
+        openTransitionName: openAnimation,
+        className,
+      };
     } else {
-      return <Menu {...this.props} {...props} className={className} openTransitionName={openAnimation} />;
+      props = {
+        openAnimation,
+        className,
+      };
     }
+    return <Menu {...this.props} {...props} />;
   }
 });
 

components/select/demo/coordinate.md

@@ -45,10 +45,10 @@ const App = React.createClass({
       return <Option key={city}>{city}</Option>;
     });
     return <div>
-      <Select defaultValue={provinceData[0]} style={{width:150}} onChange={this.handleProvinceChange}>
+      <Select defaultValue={provinceData[0]} style={{width: 90}} onChange={this.handleProvinceChange}>
         {provinceOptions}
       </Select>
-      <Select value={this.state.secondCity} style={{width:150}} onChange={this.onSecondCityChange}>
+      <Select value={this.state.secondCity} style={{width: 90}} onChange={this.onSecondCityChange}>
         {cityOptions}
       </Select>
     </div>;

components/table/demo/row-selection-and-operation.md

@@ -0,0 +1,75 @@
+# 选择和操作
+
+- order: 4
+
+选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。
+
+不支持跨页选择，选中项只限当页，换页后将会清空。
+
+---
+
+````jsx
+import { Table, Button } from 'antd';
+
+const columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+}, {
+  title: '住址',
+  dataIndex: 'address',
+}];
+
+const data = [];
+for (let i = 0; i < 46; i++) {
+  data.push({
+    key: i,
+    name: '李大嘴' + i,
+    age: 32,
+    address: '西湖区湖底公园' + i + '号'
+  });
+}
+
+const App = React.createClass({
+  getInitialState() {
+    return {
+      selectedRowKeys: [],
+      loading: false,
+    };
+  },
+  start() {
+    this.setState({ loading: true });
+    // 模拟 ajax 请求，完成后清空
+    setTimeout(() => {
+      this.setState({
+        selectedRowKeys: [],
+        loading: false,
+      });
+    }, 1000);
+  },
+  onSelectChange(selectedRowKeys) {
+    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+    this.setState({ selectedRowKeys });
+  },
+  render() {
+    const { loading, selectedRowKeys } = this.state;
+    const rowSelection = {
+      selectedRowKeys,
+      onChange: this.onSelectChange,
+    };
+    const hasSelected = selectedRowKeys.length > 0;
+    return <div>
+      <div style={{marginBottom: 16}}>
+         <Button type="primary" onClick={this.start}
+           disabled={!hasSelected} loading={loading}>操作</Button>
+         <span style={{marginLeft: 8}}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
+      </div>
+      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+    </div>;
+  }
+});
+
+ReactDOM.render(<App />, mountNode);
+````

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

@@ -47,12 +47,15 @@ const rowSelection = {
       disabled: record.name === '胡彦祖'    // 配置无法勾选的列
     };
   },
+  onChange(selectedRowKeys) {
+    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+  },
   onSelect: function(record, selected, selectedRows) {
     console.log(record, selected, selectedRows);
   },
   onSelectAll: function(selected, selectedRows) {
     console.log(selected, selectedRows);
-  }
+  },
 };
 
 ReactDOM.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

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

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

components/table/demo/row-selection.md

@@ -41,6 +41,9 @@ const data = [{
 
 // 通过 rowSelection 对象表明需要行选择
 const rowSelection = {
+  onChange(selectedRowKeys) {
+    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+  },
   onSelect: function(record, selected, selectedRows) {
     console.log(record, selected, selectedRows);
   },

components/table/index.jsx

@@ -23,7 +23,7 @@ let AntTable = React.createClass({
   getInitialState() {
     return {
       // 减少状态
-      selectedRowKeys: [],
+      selectedRowKeys: this.props.selectedRowKeys || [],
       filters: {},
       selectionDirty: false,
       sortColumn: '',
@@ -67,19 +67,12 @@ let AntTable = React.createClass({
   },
 
   getDefaultSelection() {
-    let selectedRowKeys = [];
+    if (!this.props.rowSelection || !this.props.rowSelection.getCheckboxProps) {
-    if (this.props.rowSelection && this.props.rowSelection.getCheckboxProps) {
+      return [];
-      let data = this.getCurrentPageData();
-      data.filter((item) => {
-        if (this.props.rowSelection.getCheckboxProps) {
-          return this.props.rowSelection.getCheckboxProps(item).defaultChecked;
-        }
-        return true;
-      }).map((record, rowIndex) => {
-        selectedRowKeys.push(this.getRecordKey(record, rowIndex));
-      });
     }
-    return selectedRowKeys;
+    return this.getCurrentPageData()
+      .filter(item => this.props.rowSelection.getCheckboxProps(item).defaultChecked)
+      .map((record, rowIndex) => this.getRecordKey(record, rowIndex));
   },
 
   componentWillReceiveProps(nextProps) {
@@ -88,22 +81,29 @@ let AntTable = React.createClass({
         pagination: objectAssign({}, this.state.pagination, nextProps.pagination)
       });
     }
-    // 外界只有 dataSource 的变化会触发新请求
+    // dataSource 的变化会清空选中项
     if ('dataSource' in nextProps &&
         nextProps.dataSource !== this.props.dataSource) {
-      let selectedRowKeys = this.state.selectedRowKeys;
-      // 把不在当前页的选中项去掉
-      let currentPageRowKeys =
-        this.getCurrentPageData(nextProps.dataSource).map(
-          (record, i) => this.getRecordKey(record, i)
-        );
-      selectedRowKeys = selectedRowKeys.filter((key) => {
-        return currentPageRowKeys.indexOf(key) >= 0;
-      });
       this.setState({
         selectionDirty: false,
-        selectedRowKeys,
       });
+      this.setSelectedRowKeys([]);
+    }
+    if (nextProps.rowSelection &&
+        'selectedRowKeys' in nextProps.rowSelection) {
+      this.setState({
+        selectedRowKeys: nextProps.rowSelection.selectedRowKeys || [],
+      });
+    }
+  },
+
+  setSelectedRowKeys(selectedRowKeys) {
+    if (this.props.rowSelection &&
+        !('selectedRowKeys' in this.props.rowSelection)) {
+      this.setState({ selectedRowKeys });
+    }
+    if (this.props.rowSelection && this.props.rowSelection.onChange) {
+      this.props.rowSelection.onChange(selectedRowKeys);
     }
   },
 
@@ -159,20 +159,17 @@ let AntTable = React.createClass({
       }
     });
     const newState = {
-      selectedRowKeys: [],
       selectionDirty: false,
       filters
     };
     this.setState(newState);
+    this.setSelectedRowKeys([]);
     this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState)));
   },
 
   handleSelect(record, rowIndex, e) {
-    let checked = e.target.checked;
+    const checked = e.target.checked;
-    let defaultSelection = [];
+    const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
-    if (!this.state.selectionDirty) {
-      defaultSelection = this.getDefaultSelection();
-    }
     let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
     let key = this.getRecordKey(record, rowIndex);
     if (checked) {
@@ -183,9 +180,9 @@ let AntTable = React.createClass({
       });
     }
     this.setState({
-      selectedRowKeys: selectedRowKeys,
+      selectionDirty: true,
-      selectionDirty: true
     });
+    this.setSelectedRowKeys(selectedRowKeys);
     if (this.props.rowSelection.onSelect) {
       let data = this.getCurrentPageData();
       let selectedRows = data.filter((row, i) => {
@@ -196,19 +193,16 @@ let AntTable = React.createClass({
   },
 
   handleRadioSelect: function (record, rowIndex, e) {
-    let checked = e.target.checked;
+    const checked = e.target.checked;
-    let defaultSelection = [];
+    const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
-    if (!this.state.selectionDirty) {
-      defaultSelection = this.getDefaultSelection();
-    }
     let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
     let key = this.getRecordKey(record, rowIndex);
     selectedRowKeys = [key];
     this.setState({
-      selectedRowKeys: selectedRowKeys,
       radioIndex: key,
-      selectionDirty: true
+      selectionDirty: true,
     });
+    this.setSelectedRowKeys(selectedRowKeys);
     if (this.props.rowSelection.onSelect) {
       let data = this.getCurrentPageData();
       let selectedRows = data.filter((row, i) => {
@@ -219,20 +213,31 @@ let AntTable = React.createClass({
   },
 
   handleSelectAllRow(e) {
-    let checked = e.target.checked;
+    const checked = e.target.checked;
-    let data = this.getCurrentPageData();
+    const data = this.getCurrentPageData();
-    let selectedRowKeys = checked ? data.filter((item) => {
+    const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
-      if (this.props.rowSelection.getCheckboxProps) {
+    const selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
-        return !this.props.rowSelection.getCheckboxProps(item).disabled;
+    const changableRowKeys = data.filter(item =>
-      }
+      !this.props.rowSelection.getCheckboxProps ||
-      return true;
+      !this.props.rowSelection.getCheckboxProps(item).disabled
-    }).map((item, i) => {
+    ).map((item, i) => this.getRecordKey(item, i));
-      return this.getRecordKey(item, i);
+    if (checked) {
-    }) : [];
+      changableRowKeys.forEach(key => {
+        if (selectedRowKeys.indexOf(key) < 0) {
+          selectedRowKeys.push(key);
+        }
+      });
+    } else {
+      changableRowKeys.forEach(key => {
+        if (selectedRowKeys.indexOf(key) >= 0) {
+          selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1);
+        }
+      });
+    }
     this.setState({
-      selectedRowKeys: selectedRowKeys,
+      selectionDirty: true,
-      selectionDirty: true
     });
+    this.setSelectedRowKeys(selectedRowKeys);
     if (this.props.rowSelection.onSelectAll) {
       let selectedRows = data.filter((row, i) => {
         return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
@@ -249,12 +254,11 @@ let AntTable = React.createClass({
       pagination.current = pagination.current || 1;
     }
     const newState = {
-      // 防止内存泄漏，只维持当页
-      selectedRowKeys: [],
       selectionDirty: false,
       pagination
     };
     this.setState(newState);
+    this.setSelectedRowKeys([]);
     this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState)));
   },
 
@@ -333,7 +337,14 @@ let AntTable = React.createClass({
           className: 'ant-table-selection-column'
         };
       } else {
-        let checkboxAll = <Checkbox checked={checked} onChange={this.handleSelectAllRow}/>;
+        const checkboxAllDisabled = data.every(item =>
+          this.props.rowSelection.getCheckboxProps &&
+          this.props.rowSelection.getCheckboxProps(item).disabled);
+        const checkboxAll = (
+            <Checkbox checked={checked}
+                      disabled={checkboxAllDisabled}
+                      onChange={this.handleSelectAllRow} />
+        );
         selectionColumn = {
           key: 'selection-column',
           title: checkboxAll,

components/table/index.md

@@ -54,9 +54,9 @@ const columns = [{
 
 ### Table
 
-| 参数          | 说明                     | 类型            |  可选值             | 默认值  |
+| 参数           | 说明                     | 类型             |  可选值              | 默认值   |
 |---------------|--------------------------|-----------------|---------------------|---------|
-| rowSelection  | 列表项是否可选择         | Object          |                     | false   |
+| rowSelection  | 列表项是否可选择         | Object          |  [配置项](#rowSelection)   | null   |
 | pagination    | 分页器                   | Object   | 配置项参考 [pagination](/components/pagination)，设为 false 时不显示分页 |         |
 | size          | 正常或迷你类型           | String          | `default` or `small`| default |
 | dataSource    | 数据数组                 | Array           |                     |         |
@@ -87,6 +87,20 @@ const columns = [{
 | width      | 列宽度 | String or Number |                                        | 无      |
 | className  | 列的 className             | String          |                     | 无      |
 
+### rowSelection
+
+选择功能的配置。
+
+| 参数              | 说明                     | 类型             |  默认值   |
+|------------------|--------------------------|-----------------|---------------------|---------|
+| type | 多选/单选，`checkbox` or `radio` | String | `checkbox`  |
+| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | Array | []  |
+| onChange | 选中项发生变化的时的回调，用户手动点选、换页、更新数据均会触发 | Function(selectedRowKeys) | -   |
+| getCheckboxProps | 选择框的默认属性配置        | Function(record) |  -   |
+| onSelect | 用户手动选择/取消选择某列的回调         | Function(record, selected, selectedRows) |   -   |
+| onSelectAll | 用户手动选择/取消选择所有列的回调    | Function(record, selected, selectedRows) |   -   |
+
+
 ## 注意
 
 按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。

docs/getting-started.md

@@ -11,7 +11,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
 
 最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 `Bug Report`, 注意不要在实际项目中这样使用。
 
-- [antd JSFiddle](http://jsfiddle.net/9zrstuto/70/)
+- [antd JSFiddle](http://jsfiddle.net/0dso5y0x/)
 
 
 ## 标准开发
@@ -63,7 +63,7 @@ const App = React.createClass({
   },
   render() {
     return <div style={{width: 400, margin: '100px auto'}}>
-      <DatePicker onSelect={this.handleChange} />
+      <DatePicker onChange={this.handleChange} />
       <div style={{marginTop: 20}}>当前日期：{this.state.date.toString()}</div>
     </div>;
   }

package.json

@@ -102,10 +102,10 @@
     "lodash": "^3.10.0",
     "nico-jsx": "~0.7.0",
     "pre-commit": "1.x",
-    "react": "~0.14.5",
+    "react": "0.14.x",
-    "react-addons-test-utils": "~0.14.5",
+    "react-addons-test-utils": "0.14.x",
     "react-copy-to-clipboard": "^3.0.4",
-    "react-dom": "~0.14.5",
+    "react-dom": "0.14.x",
     "react-router": "~1.0.3",
     "react-stateless-wrapper": "~1.0.2",
     "reqwest": "~2.0.5",

site/static/style.css

@@ -584,6 +584,7 @@ footer ul li > a {
 
 .markdown pre {
   border-radius: 6px;
+  background: #f9f9f9;
 }
 
 .markdown pre code {
@@ -1710,11 +1711,12 @@ footer ul li > a {
   width: 48%;
   display: inline-block;
   vertical-align: top;
-  padding-right: 15px;
+  padding-right: 8px;
 }
 
 .code-boxes-col-2-1:last-child {
   padding-right: 0;
+  padding-left: 8px;
 }
 
 .code-box {

style/components/dropdown.less

@@ -30,7 +30,8 @@
     }
   }
 
-  &-hidden {
+  &-hidden,
+  &-menu-hidden {
     display: none;
   }
 
@@ -46,15 +47,11 @@
     box-shadow: @box-shadow-base;
     background-clip: padding-box;
     border: 1px solid @border-color-base;
-    overflow: hidden;
 
-    > li {
+    &-item,
-      margin: 0;
+    &-submenu-title {
-      padding: 0;
-    }
-
-    & > &-item {
       padding: 7px 15px;
+      margin: 0;
       clear: both;
       font-size: 12px;
       font-weight: normal;
@@ -86,14 +83,12 @@
         }
       }
 
-      &:last-child {
+      &:first-child {
-        border-bottom-left-radius: 3px;
+        border-radius: @border-radius-base @border-radius-base 0 0;
-        border-bottom-right-radius: 3px;
       }
 
-      &:first-child {
+      &:last-child {
-        border-top-left-radius: 3px;
+        border-radius: 0 0 @border-radius-base @border-radius-base;
-        border-top-right-radius: 3px;
       }
 
       &-divider {
@@ -103,6 +98,36 @@
         line-height: 0;
       }
     }
+
+    &-submenu-title:after {
+      font-family: "anticon" !important;
+      position: absolute;
+      content: "\e600";
+      right: 15px;
+      color: #999;
+      .iconfont-size-under-12px(8px);
+    }
+
+    &-submenu-vertical {
+      position: relative;
+    }
+
+    &-submenu-vertical > & {
+      top: 0;
+      left: 100%;
+      position: absolute;
+      min-width: 100%;
+      margin-left: 4px;
+      transform-origin: 0 0;
+    }
+
+    &-submenu:first-child &-submenu-title {
+      border-radius: @border-radius-base @border-radius-base 0 0;
+    }
+
+    &-submenu:last-child &-submenu-title {
+      border-radius: 0 0 @border-radius-base @border-radius-base;
+    }
   }
 
   &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,

style/components/form.less

@@ -71,6 +71,10 @@ input[type="checkbox"] {
   margin-bottom: @form-item-margin-bottom;
   color: #666;
 
+  &.@{css-prefix}form-item-with-help {
+    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
+  }
+
   > label {
     color: @label-color;
     text-align: right;
@@ -104,10 +108,7 @@ input[type="checkbox"] {
 }
 
 .@{css-prefix}form-explain {
-  position: absolute;
+  float: left;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  bottom: -@line-height-computed;
 }
 
 

style/components/select.less

@@ -377,6 +377,8 @@
       color: #666;
       white-space: nowrap;
       cursor: pointer;
+      white-space: nowrap;
+      text-overflow: ellipsis;
       overflow: hidden;
       transition: background 0.3s ease;