fix(Table): fix record key when there is no key to use

when there is no key to use, instead key with index is wrong when have disabled record, fix this.

close #67

src/components/Table/Table.jsx

@@ -425,10 +425,14 @@ class Table extends Component {
             total
         };
     };
-    handleToggleCurrentPage = (enableDataSourceOfCurrentPage, checked) => {
+    handleToggleCurrentPage = (dataSourceOfCurrentPage, checked) => {
         const { selectedRowKeyMap } = this.state;
+        const { rowSelection = {} } = this.props;
         const extendSelectedRowKeyMap = {};
-        _.each(enableDataSourceOfCurrentPage, (record, index) => {
+        _.each(dataSourceOfCurrentPage, (record, index) => {
+            if (rowSelection.getDisabledOfRow && rowSelection.getDisabledOfRow(record)) {
+                return;
+            }
             const key = this.getRowKey(record, index);
             extendSelectedRowKeyMap[key] = checked;
         });
@@ -485,22 +489,31 @@ class Table extends Component {
 
         if (rowSelection) {
             let enableDataSourceOfCurrentPage = dataSourceOfCurrentPage;
+            let selectedEnableDataSourceOfCurrentPage;
             if (rowSelection.getDisabledOfRow) {
                 enableDataSourceOfCurrentPage = _.filter(
                     dataSourceOfCurrentPage,
                     record => !rowSelection.getDisabledOfRow(record)
                 );
+                selectedEnableDataSourceOfCurrentPage = _.filter(
+                    dataSourceOfCurrentPage,
+                    (record, index) =>
+                        !rowSelection.getDisabledOfRow(record) && selectedRowKeyMap[this.getRowKey(record, index)]
+                );
+            } else {
+                selectedEnableDataSourceOfCurrentPage = _.filter(
+                    dataSourceOfCurrentPage,
+                    (record, index) => selectedRowKeyMap[this.getRowKey(record, index)]
+                );
             }
-            const selectedCountOfCurrentPage = _.filter(
-                enableDataSourceOfCurrentPage,
-                (record, index) => selectedRowKeyMap[this.getRowKey(record, index)]
-            ).length;
+            const selectedEnableDataSourceOfCurrentPageCount = selectedEnableDataSourceOfCurrentPage.length;
             const isAllSelected =
-                selectedCountOfCurrentPage === enableDataSourceOfCurrentPage.length && selectedCountOfCurrentPage > 0;
+                selectedEnableDataSourceOfCurrentPageCount === enableDataSourceOfCurrentPage.length &&
+                selectedEnableDataSourceOfCurrentPageCount > 0;
             newColumns.unshift({
                 title: (
                     <Checkbox
-                        onChange={() => this.handleToggleCurrentPage(enableDataSourceOfCurrentPage, !isAllSelected)}
+                        onChange={() => this.handleToggleCurrentPage(dataSourceOfCurrentPage, !isAllSelected)}
                         checked={isAllSelected}
                     />
                 ),

src/components/Table/Table.md

@@ -2,6 +2,10 @@
 
 *   这是 Table 组件
 
+### 提示
+
+*   为了确保数据的准确性请务必保证每条数据存在有效不重复的 key 或者使用 rowKey 来指定 key 的获取方式，表格中将会依照 key 来进行选择等操作。不传入将会使用数据在每一页中的 index 来作为 key，可能会造成 key 重复而导致错误
+
 ### 演示
 
 *   演示

src/components/Table/__tests__/index.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Table from 'src/components/Table';
+
+jest.unmock('rc-trigger');
+
+describe('Table', () => {
+    test('select', () => {
+        const error = (global.console.error = jest.fn());
+        const onRowSelect = jest.fn();
+        let onRowSelectTimes = 0;
+
+        class Demo extends React.Component {
+            render() {
+                const dataSource = new Array(100).fill(null).map((v, i) => ({
+                    index: `index-${i}`,
+                    i
+                }));
+                const columns = new Array(5).fill(null).map((v, i) => ({
+                    title: `title-${i}`,
+                    key: `title-${i}`,
+                    width: 200,
+                    render: record => <span>content {record.index}</span>
+                }));
+                return (
+                    <div>
+                        <div className="demo-wrap">
+                            <Table
+                                rowSelection={{
+                                    defaultSelectedRowKeys: [1, 2, 4, 5],
+                                    onChange: onRowSelect,
+                                    getDisabledOfRow: record => record.i < 4
+                                }}
+                                dataSource={dataSource}
+                                columns={columns}
+                                {...this.props}
+                            />
+                        </div>
+                    </div>
+                );
+            }
+        }
+
+        const wrapper = mount(<Demo />);
+
+        expect(error).toHaveBeenCalledTimes(1);
+
+        expect(wrapper.find('.uc-fe-table-tbody i.icon__checkbox-ed').length).toBe(4);
+        expect(wrapper.find('.uc-fe-table-tbody i[disabled=true]').length).toBe(4);
+        expect(wrapper.find('.uc-fe-table-tbody i.icon__checkbox-ed[disabled=true]').length).toBe(2);
+
+        wrapper.find('.uc-fe-table-thead i.icon__checkbox').simulate('click');
+        expect(wrapper.find('.uc-fe-table-tbody i.icon__checkbox-ed').length).toBe(8);
+        expect(wrapper.find('.uc-fe-table-tbody i[disabled=true]').length).toBe(4);
+        expect(wrapper.find('.uc-fe-table-tbody i.icon__checkbox-ed[disabled=true]').length).toBe(2);
+        expect(onRowSelect).toHaveBeenCalledTimes(++onRowSelectTimes);
+        expect(onRowSelect).toHaveBeenLastCalledWith(['1', '2', '4', '5', '6', '7', '8', '9']);
+    });
+});