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

CHANGELOG.md

@@ -6,16 +6,20 @@
 
 ## 0.12.11
 
-`fixing`
+`2016-03-16`
 
 - 全新的设计文档 `语言` 部分。
 - 修复 Popconfirm `onConfirm` 和 `onCancel` 时没有触发 `onVisibleChange` 的问题。
 - TreeSelect 组件补充 `showCheckedStrategy` 属性，支持回填数据的不同展示方式。
 - 补充 Modal `align` 属性的文档。
-- 修复 Menu 菜单 z-index 丢失的问题。
+- 修复 Menu 弹出菜单 `z-index` 丢失的问题。
 - Progress 的默认颜色固定，不再随着主色变化。
 - 优化 Button 点击动画在 Chrome 下的效果。
 - 修复一个 Affix 的 `z-index` 太低的问题。
+- 修复 Table 树形数据的二级节点前无法选择的问题。[#1212](https://github.com/ant-design/ant-design/issues/1212)
+- 修复 Table 修改 `pageSize` 没有触发 `onChange` 的问题。[#1206](https://github.com/ant-design/ant-design/issues/1206)
+- 修复 Table 指定 `rowKey 时导致 `rowSelection.onChange` 的 `selectedRows` 参数为空的问题。
+- 修复一个 Affix 的 `z-index` 太低的问题。
 
 ## 0.12.10
 

components/button/button-group.jsx

@@ -24,5 +24,5 @@ export default class ButtonGroup extends React.Component {
   }
 }
 ButtonGroup.propTypes = {
-  size: React.PropTypes.string,
+  size: React.PropTypes.oneOf(['large', 'small']),
 };

components/button/button.jsx

@@ -73,10 +73,10 @@ export default class Button extends React.Component {
 }
 
 Button.propTypes = {
-  type: React.PropTypes.string,
+  type: React.PropTypes.oneOf(['primary', 'ghost', 'dashed']),
-  shape: React.PropTypes.string,
+  shape: React.PropTypes.oneOf(['circle', 'circle-outline']),
-  size: React.PropTypes.string,
+  size: React.PropTypes.oneOf(['large', 'small']),
-  htmlType: React.PropTypes.string,
+  htmlType: React.PropTypes.oneOf(['submit', 'button', 'reset']),
   onClick: React.PropTypes.func,
   loading: React.PropTypes.bool,
   className: React.PropTypes.string,

components/table/demo/expand-children.md

@@ -4,6 +4,8 @@
 
 表格支持树形数据的展示，可以通过设置 `indentSize` 以控制每一层的缩进宽度。
 
+> 注：暂不支持父子数据递归关联选择。
+
 ---
 
 ````jsx
@@ -77,8 +79,21 @@ const data = [{
   address: '我是b',
 }];
 
+// 通过 rowSelection 对象表明需要行选择
+const rowSelection = {
+  onChange(selectedRowKeys, selectedRows) {
+    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+  },
+  onSelect(record, selected, selectedRows) {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll(selected, selectedRows, changeRows) {
+    console.log(selected, selectedRows, changeRows);
+  }
+};
+
 ReactDOM.render(
-  <Table columns={columns} dataSource={data} indentSize={20} />,
+  <Table columns={columns} rowSelection={rowSelection} dataSource={data} />,
   mountNode
 );
 ````

components/table/index.jsx

@@ -8,6 +8,7 @@ import Icon from '../icon';
 import objectAssign from 'object-assign';
 import Spin from '../spin';
 import classNames from 'classnames';
+import { flatArray } from './util';
 
 function noop() {
 }
@@ -78,7 +79,7 @@ let AntTable = React.createClass({
     if (!this.props.rowSelection || !this.props.rowSelection.getCheckboxProps) {
       return [];
     }
-    return this.getCurrentPageData()
+    return this.getFlatCurrentPageData()
       .filter(item => this.props.rowSelection.getCheckboxProps(item).defaultChecked)
       .map((record, rowIndex) => this.getRecordKey(record, rowIndex));
   },
@@ -110,8 +111,10 @@ let AntTable = React.createClass({
       this.setState({ selectedRowKeys });
     }
     if (this.props.rowSelection && this.props.rowSelection.onChange) {
-      const data = this.getCurrentPageData();
+      const data = this.getFlatCurrentPageData();
-      const selectedRows = data.filter(row => selectedRowKeys.indexOf(row.key) >= 0);
+      const selectedRows = data.filter(
+        (row, i) => selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0
+      );
       this.props.rowSelection.onChange(selectedRowKeys, selectedRows);
     }
   },
@@ -152,9 +155,7 @@ let AntTable = React.createClass({
       sorter,
     };
     this.setState(newState);
-    this.props.onChange.apply(this, this.prepareParamsArguments(
+    this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState }));
-      objectAssign({}, this.state, newState)
-    ));
   },
 
   handleFilter(column, nextFilters) {
@@ -174,9 +175,7 @@ let AntTable = React.createClass({
     };
     this.setState(newState);
     this.setSelectedRowKeys([]);
-    this.props.onChange.apply(this, this.prepareParamsArguments(
+    this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState }));
-      objectAssign({}, this.state, newState)
-    ));
   },
 
   handleSelect(record, rowIndex, e) {
@@ -196,7 +195,7 @@ let AntTable = React.createClass({
     });
     this.setSelectedRowKeys(selectedRowKeys);
     if (this.props.rowSelection.onSelect) {
-      let data = this.getCurrentPageData();
+      let data = this.getFlatCurrentPageData();
       let selectedRows = data.filter((row, i) => {
         return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
       });
@@ -216,7 +215,7 @@ let AntTable = React.createClass({
     });
     this.setSelectedRowKeys(selectedRowKeys);
     if (this.props.rowSelection.onSelect) {
-      let data = this.getCurrentPageData();
+      let data = this.getFlatCurrentPageData();
       let selectedRows = data.filter((row, i) => {
         return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
       });
@@ -226,7 +225,7 @@ let AntTable = React.createClass({
 
   handleSelectAllRow(e) {
     const checked = e.target.checked;
-    const data = this.getCurrentPageData();
+    const data = this.getFlatCurrentPageData();
     const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
     const selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
     const changableRowKeys = data.filter(item =>
@@ -278,9 +277,7 @@ let AntTable = React.createClass({
       pagination
     };
     this.setState(newState);
-    this.props.onChange.apply(this, this.prepareParamsArguments(
+    this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState }));
-      objectAssign({}, this.state, newState)
-    ));
   },
 
   onRadioChange(ev) {
@@ -338,7 +335,7 @@ let AntTable = React.createClass({
   renderRowSelection() {
     let columns = this.props.columns.concat();
     if (this.props.rowSelection) {
-      let data = this.getCurrentPageData().filter((item) => {
+      let data = this.getFlatCurrentPageData().filter((item) => {
         if (this.props.rowSelection.getCheckboxProps) {
           return !this.props.rowSelection.getCheckboxProps(item).disabled;
         }
@@ -459,11 +456,12 @@ let AntTable = React.createClass({
   handleShowSizeChange(current, pageSize) {
     const pagination = this.state.pagination;
     pagination.onShowSizeChange(current, pageSize);
-
+    const nextPagination = { ...pagination, pageSize };
-    let nextPagination = objectAssign(pagination, {
-      pageSize,
-    });
     this.setState({ pagination: nextPagination });
+    this.props.onChange(...this.prepareParamsArguments({
+      ...this.state,
+      pagination: nextPagination,
+    }));
   },
 
   renderPagination() {
@@ -504,8 +502,8 @@ let AntTable = React.createClass({
     return this.props.columns.filter(c => this.getColumnKey(c) === myKey)[0];
   },
 
-  getCurrentPageData(dataSource) {
+  getCurrentPageData() {
-    let data = this.getLocalData(dataSource);
+    let data = this.getLocalData();
     let current;
     let pageSize;
     let state = this.state;
@@ -529,9 +527,13 @@ let AntTable = React.createClass({
     return data;
   },
 
-  getLocalData(dataSource) {
+  getFlatCurrentPageData() {
+    return flatArray(this.getCurrentPageData());
+  },
+
+  getLocalData() {
     let state = this.state;
-    let data = dataSource || this.props.dataSource || [];
+    let data = this.props.dataSource || [];
     // 排序
     if (state.sortOrder && state.sorter) {
       data = data.slice(0);

components/table/util.js

@@ -0,0 +1,15 @@
+export function flatArray(data = [], childrenName = 'children') {
+  const result = [];
+  const loop = (array) => {
+    array.forEach(item => {
+      const newItem = { ...item };
+      delete newItem[childrenName];
+      result.push(newItem);
+      if (item[childrenName] && item[childrenName].length > 0) {
+        loop(item[childrenName]);
+      }
+    });
+  };
+  loop(data);
+  return result;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "0.12.11-beta",
+  "version": "0.12.11",
   "title": "Ant Design",
   "description": "一个 UI 设计语言",
   "homepage": "http://ant.design/",

style/components/table.less

@@ -82,6 +82,7 @@
   th,
   td {
     padding: 16px 8px;
+    word-break: break-all;
   }
 
   th.@{table-prefix-cls}-selection-column,
@@ -193,7 +194,7 @@
       border-bottom: 1px solid @border-color-split;
     }
 
-    tr:last-child {
+    tbody tr:last-child {
       th,
       td {
         border-bottom: 0;
@@ -332,11 +333,6 @@
       }
     }
 
-    // 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;
     }