Add expanded as the fourth parameter to expandRowRender

Close ant-design/ant-design#10379
react-component · May 9, 2018 · 6930d2a · 6930d2a
1 parent e3b0d41
commit 6930d2a
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -170,6 +170,12 @@ React.render(<Table columns={columns} data={data} />, mountNode);
       <td></td>
       <td>get expanded row's className</td>
     </tr>
+    <tr>
+      <td>expandedRowRender</td>
+      <td>Function(recode, index, indent, expanded):ReactNode</td>
+      <td></td>
+      <td>Content render to expanded row</td>
+    </tr>
     <tr>
       <td>data</td>
       <td>Object[]</td>

diff --git a/examples/expandedRowRender.js b/examples/expandedRowRender.js
@@ -93,7 +93,9 @@ class Demo extends React.Component {
           columns={this.columns}
           expandIconAsCell={expandIconAsCell}
           expandRowByClick={expandRowByClick}
-          expandedRowRender={record => <p>extra: {record.a}</p>}
+          expandedRowRender={(record, index, indent, expanded) =>
+            expanded ? <p>extra: {record.a}</p> : null
+          }
           expandedRowKeys={expandedRowKeys}
           onExpandedRowsChange={this.onExpandedRowsChange}
           onExpand={this.onExpand}

diff --git a/src/ExpandableTable.js b/src/ExpandableTable.js
@@ -128,6 +128,14 @@ class ExpandableTable extends React.Component {
 
   renderExpandedRow(record, index, render, className, ancestorKeys, indent, fixed) {
     const { prefixCls, expandIconAsCell, indentSize } = this.props;
+    const parentKey = ancestorKeys[ancestorKeys.length - 1];
+    const rowKey = `${parentKey}-extra-row`;
+    const components = {
+      body: {
+        row: 'tr',
+        cell: 'td',
+      },
+    };
     let colCount;
     if (fixed === 'left') {
       colCount = this.columnManager.leftLeafColumns().length;
@@ -139,12 +147,16 @@ class ExpandableTable extends React.Component {
     const columns = [
       {
         key: 'extra-row',
-        render: () => ({
-          props: {
-            colSpan: colCount,
-          },
-          children: fixed !== 'right' ? render(record, index, indent) : '&nbsp;',
-        }),
+        render: () => {
+          const { expandedRowKeys } = this.store.getState();
+          const expanded = !!~expandedRowKeys.indexOf(parentKey);
+          return {
+            props: {
+              colSpan: colCount,
+            },
+            children: fixed !== 'right' ? render(record, index, indent, expanded) : '&nbsp;',
+          };
+        },
       },
     ];
     if (expandIconAsCell && fixed !== 'right') {
@@ -153,14 +165,6 @@ class ExpandableTable extends React.Component {
         render: () => null,
       });
     }
-    const parentKey = ancestorKeys[ancestorKeys.length - 1];
-    const rowKey = `${parentKey}-extra-row`;
-    const components = {
-      body: {
-        row: 'tr',
-        cell: 'td',
-      },
-    };
 
     return (
       <TableRow

diff --git a/tests/Table.expandRow.spec.js b/tests/Table.expandRow.spec.js
@@ -20,6 +20,19 @@ describe('Table.expand', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('pass proper paramters to expandedRowRender', () => {
+    const rowRender = jest.fn(() => <div>expanded row</div>);
+    const wrapper = mount(
+      createTable({
+        expandedRowRender: rowRender,
+      }),
+    );
+    wrapper.setProps({ expandedRowKeys: [0] });
+    expect(rowRender).toHaveBeenLastCalledWith(sampleData[0], 0, 1, true);
+    wrapper.setProps({ expandedRowKeys: [] });
+    expect(rowRender).toHaveBeenLastCalledWith(sampleData[0], 0, 1, false);
+  });
+
   it('renders tree row correctly', () => {
     const data = [
       {