fix(Table): index with expanded table when expandedIndexSimulate is true

alibaba-fusion · Feb 27, 2019 · 7ce3f7e · 7ce3f7e
1 parent 2ba1ba8
commit 7ce3f7e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 3 deletions.
diff --git a/docs/table/demo/expanded-complex.md b/docs/table/demo/expanded-complex.md
@@ -126,6 +126,13 @@ class App extends React.Component {
             openRowKeys: openRowKeys
         });
     }
+    getRowProps(record, index) {
+        console.log('getRowProps', record, index);
+        return {className: `next-myclass-${index}`}
+    }
+    onExpandedRowClick(record, index) {
+        console.log('onExpandedRowClick', record, index);
+    }
     render() {
         const renderTitle = (value, index, record) => {
             return <div>{value}<span onClick={this.toggleExpand.bind(this, record)}>index:{index} +++++</span></div>;
@@ -145,6 +152,8 @@ class App extends React.Component {
                     getExpandedColProps={this.state.getExpandedColProps}
                     hasExpandedRowCtrl={this.state.hasExpandedRowCtrl}
                     onRowOpen={this.onRowOpen.bind(this)}
+                    getRowProps={this.getRowProps.bind(this)}
+                    onExpandedRowClick={this.onExpandedRowClick.bind(this)}
                 >
                     <Table.Column title="Id" dataIndex="id" sortable/>
                     <Table.Column title="Title" dataIndex="title" cell={renderTitle}/>

diff --git a/docs/table/index.md b/docs/table/index.md
@@ -129,7 +129,7 @@ ReactDOM.render(
 | useVirtual            | 是否开启虚拟滚动                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Boolean         | -        |
 | rowHeight             | 设置行高                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Number/Function | -        |
 | onBodyScroll          | 在内容区域滚动的时候触发的函数<br><br>**签名**:<br>Function() => void                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Function        | -        |
-| expandedIndexSimulate | 开启时，getExpandedColProps() 和 expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照01,2,3,4...的顺序返回，否则返回真实index(0,2,4,6... / 1,3,5,7...)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Boolean         | false    |
+| expandedIndexSimulate | 开启时，getExpandedColProps() / getRowProps() / expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照01,2,3,4...的顺序返回，否则返回真实index(0,2,4,6... / 1,3,5,7...)                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Boolean         | false    |
 
 ### Table.Column
 

diff --git a/src/table/base.jsx b/src/table/base.jsx
@@ -259,7 +259,7 @@ export default class Table extends React.Component {
          */
         onBodyScroll: PropTypes.func,
         /**
-         * 开启时，getExpandedColProps() 和 expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照01,2,3,4...的顺序返回，否则返回真实index(0,2,4,6... / 1,3,5,7...)
+         * 开启时，getExpandedColProps() / getRowProps() / expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照01,2,3,4...的顺序返回，否则返回真实index(0,2,4,6... / 1,3,5,7...)
          */
         expandedIndexSimulate: PropTypes.bool,
     };
@@ -492,6 +492,7 @@ export default class Table extends React.Component {
                 onRowClick,
                 onRowMouseEnter,
                 onRowMouseLeave,
+                expandedIndexSimulate,
                 pure,
                 rtl
             } = this.props;
@@ -544,6 +545,7 @@ export default class Table extends React.Component {
                         rowRef={this.getRowRef}
                         cellRef={this.getCellRef}
                         onRowClick={onRowClick}
+                        expandedIndexSimulate={expandedIndexSimulate}
                         onRowMouseEnter={onRowMouseEnter}
                         onRowMouseLeave={onRowMouseLeave}
                         dataSource={dataSource}

diff --git a/src/table/base/body.jsx b/src/table/base/body.jsx
@@ -76,7 +76,16 @@ export default class Body extends React.Component {
         }
         if (dataSource.length) {
             rows = dataSource.map((record, index) => {
-                const rowProps = getRowProps(record, index) || {};
+                let rowProps = {};
+
+                if (expandedIndexSimulate) {
+                    rowProps = record.__expanded ? {} : getRowProps(record, index / 2);
+                } else {
+                    rowProps = getRowProps(record, index);
+                }
+
+                rowProps = rowProps || {};
+
                 const rowClass = rowProps.className;
                 const className = classnames({
                     first: index === 0,

diff --git a/test/table/index-spec.js b/test/table/index-spec.js
@@ -194,6 +194,10 @@ describe('Table', () => {
                 <Table.Column cell={(record, index) => {arr.push(index)}} width={200}></Table.Column>
             ],
             expandedRowRender: (record, index) => record.name + index,
+            getRowProps: (record, index) => {
+                assert(record.id == index + 1);
+                return {className: `next-myclass-${index}`}
+            },
             getExpandedColProps: (record, index) => {
                 assert(record.id == index + 1);
             },