feature: add expandIcon (#236)

Allows overriding the default expand icon for row expanding

examples/expandIcon.js

@@ -0,0 +1,63 @@
+/* eslint-disable no-console,react/prop-types,react/no-danger */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Table from 'rc-table';
+import 'rc-table/assets/index.less';
+
+const data = [
+  { key: 0, a: '123' },
+  { key: 1, a: 'cdd', b: 'edd' },
+  { key: 2, a: '1333', c: 'eee', d: 2 },
+];
+
+const columns = [
+  { title: 'title 1', dataIndex: 'a', key: 'a', width: 100 },
+  { title: 'title 2', dataIndex: 'b', key: 'b', width: 100 },
+  { title: 'title 3', dataIndex: 'c', key: 'c', width: 200 },
+];
+
+function CustomExpandIcon(props) {
+  let text;
+  if (props.expanded) {
+    text = '⇧ collapse';
+  } else {
+    text = '⇩ expand';
+  }
+  return (
+    <a
+      className="expand-row-icon"
+      onClick={e => props.onExpand(props.record, e)}
+      dangerouslySetInnerHTML={{ __html: text }}
+      style={{ color: 'blue', cursor: 'pointer' }}
+    />
+  );
+}
+
+class Demo extends React.Component {
+  onExpand = (expanded, record) => {
+    console.log('onExpand', expanded, record);
+  };
+
+  render() {
+    return (
+      <div>
+        <Table
+          columns={columns}
+          expandedRowRender={record => <p>extra: {record.a}</p>}
+          onExpand={this.onExpand}
+          expandIcon={CustomExpandIcon}
+          expandIconAsCell
+          data={data}
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <div>
+    <h2>expandIcon</h2>
+    <Demo />
+  </div>,
+  document.getElementById('__react-content'),
+);

src/ExpandableRow.js

@@ -17,6 +17,7 @@ class ExpandableRow extends React.Component {
     expandIconColumnIndex: PropTypes.number,
     childrenColumnName: PropTypes.string,
     expandedRowRender: PropTypes.func,
+    expandIcon: PropTypes.func,
     onExpandedChange: PropTypes.func.isRequired,
     onRowClick: PropTypes.func,
     children: PropTypes.func.isRequired,
@@ -58,7 +59,18 @@ class ExpandableRow extends React.Component {
   };
 
   renderExpandIcon = () => {
-    const { prefixCls, expanded, record, needIndentSpaced } = this.props;
+    const { prefixCls, expanded, record, needIndentSpaced, expandIcon } = this.props;
+
+    if (expandIcon) {
+      return expandIcon({
+        prefixCls,
+        expanded,
+        record,
+        needIndentSpaced,
+        expandable: this.expandable,
+        onExpand: this.handleExpandChange,
+      });
+    }
 
     return (
       <ExpandIcon

src/ExpandableTable.js

@@ -14,6 +14,7 @@ class ExpandableTable extends React.Component {
     defaultExpandedRowKeys: PropTypes.array,
     expandIconColumnIndex: PropTypes.number,
     expandedRowRender: PropTypes.func,
+    expandIcon: PropTypes.func,
     childrenColumnName: PropTypes.string,
     indentSize: PropTypes.number,
     onExpand: PropTypes.func,

tests/Table.expandRow.spec.js

@@ -81,6 +81,27 @@ describe('Table.expand', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  /* eslint-disable react/prop-types */
+  it('renders a custom icon', () => {
+    function CustomExpandIcon(props) {
+      return (
+        <a className="expand-row-icon" onClick={e => props.onExpand(props.record, e)}>
+          <i className="some-class" />
+        </a>
+      );
+    }
+    const wrapper = render(
+      createTable({
+        expandedRowRender,
+        expandIcon: ({ onExpand, record }) => (
+          <CustomExpandIcon onExpand={onExpand} record={record} />
+        ),
+      }),
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+  /* eslint-enable react/prop-types */
+
   it('renders nested data correctly', () => {
     const localData = [
       {

tests/__snapshots__/Table.expandRow.spec.js.snap

@@ -527,6 +527,101 @@ exports[`Table.expand expand rows by defaultExpandedRowKeys 1`] = `
 </div>
 `;
 
+exports[`Table.expand renders a custom icon 1`] = `
+<div
+  class="rc-table rc-table-scroll-position-left"
+>
+  <div
+    class="rc-table-content"
+  >
+    <div
+      class="rc-table-body"
+    >
+      <table
+        class=""
+      >
+        <colgroup>
+          <col />
+          <col />
+        </colgroup>
+        <thead
+          class="rc-table-thead"
+        >
+          <tr>
+            <th
+              class=""
+            >
+              Name
+            </th>
+            <th
+              class=""
+            >
+              Age
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="rc-table-tbody"
+        >
+          <tr
+            class="rc-table-row  rc-table-row-level-0"
+            data-row-key="0"
+          >
+            <td
+              class=""
+            >
+              <span
+                class="rc-table-row-indent indent-level-0"
+                style="padding-left:0px"
+              />
+              <a
+                class="expand-row-icon"
+              >
+                <i
+                  class="some-class"
+                />
+              </a>
+              Lucy
+            </td>
+            <td
+              class=""
+            >
+              27
+            </td>
+          </tr>
+          <tr
+            class="rc-table-row  rc-table-row-level-0"
+            data-row-key="1"
+          >
+            <td
+              class=""
+            >
+              <span
+                class="rc-table-row-indent indent-level-0"
+                style="padding-left:0px"
+              />
+              <a
+                class="expand-row-icon"
+              >
+                <i
+                  class="some-class"
+                />
+              </a>
+              Jack
+            </td>
+            <td
+              class=""
+            >
+              28
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Table.expand renders expand icon as cell 1`] = `
 <div
   class="rc-table rc-table-scroll-position-left"