fix(tree): fix unrecalculated row height after tree node is expanded (#…

…277)

src/Table.tsx

@@ -298,12 +298,6 @@ const Table = React.forwardRef((props: TableProps, ref) => {
   // Use `forceUpdate` to force the component to re-render after manipulating the DOM.
   const [, forceUpdate] = useReducer(x => x + 1, 0);
 
-  const { tableRowsMaxHeight, bindTableRowsRef } = useTableRows({
-    data: dataProp,
-    wordWrap,
-    prefix
-  });
-
   const [expandedRowKeys, setExpandedRowKeys] = useControlled(
     expandedRowKeysProp,
     defaultExpandAllRows
@@ -315,6 +309,13 @@ const Table = React.forwardRef((props: TableProps, ref) => {
     return isTree ? filterTreeData(dataProp, expandedRowKeys, rowKey) : dataProp;
   });
 
+  const { tableRowsMaxHeight, bindTableRowsRef } = useTableRows({
+    data: dataProp,
+    expandedRowKeys,
+    wordWrap,
+    prefix
+  });
+
   const headerHeight = showHeader ? headerHeightProp : 0;
   const rtl = rtlProp || isRTL();
 

src/utils/useTableRows.ts

@@ -3,12 +3,13 @@ import getHeight from 'dom-lib/getHeight';
 import useUpdateLayoutEffect from './useUpdateLayoutEffect';
 import useMount from './useMount';
 import isEmpty from 'lodash/isEmpty';
-import { RowDataType } from '../@types/common';
+import { RowDataType, RowKeyType } from '../@types/common';
 
 interface TableRowsProps {
   prefix: (str: string) => string;
   wordWrap: boolean;
   data: RowDataType[];
+  expandedRowKeys: RowKeyType[];
 }
 
 /**
@@ -17,7 +18,7 @@ interface TableRowsProps {
  * @returns
  */
 const useTableRows = (props: TableRowsProps) => {
-  const { prefix, wordWrap, data } = props;
+  const { prefix, wordWrap, data, expandedRowKeys } = props;
   const [tableRowsMaxHeight, setTableRowsMaxHeight] = useState([]);
   const tableRows = useRef<{ [key: string]: [HTMLElement, any] }>({});
 
@@ -68,7 +69,7 @@ const useTableRows = (props: TableRowsProps) => {
      * TODO: To be improved
      */
     setTimeout(calculateRowMaxHeight, 1);
-  }, [data]);
+  }, [data, expandedRowKeys]);
 
   return {
     bindTableRowsRef,

test/TableSpec.js

@@ -194,6 +194,45 @@ describe('Table', () => {
     }, 1);
   });
 
+  it('Should be wordWrap when node is expanded', done => {
+    const data = [
+      {
+        id: 1,
+        country: 'Test',
+        children: [{ id: 2, country: 'South Georgia and the South Sandwich Islands' }]
+      }
+    ];
+    const ref = React.createRef();
+
+    act(() => {
+      render(
+        <Table ref={ref} wordWrap isTree data={data} rowKey="id">
+          <Column width={20}>
+            <HeaderCell>Country</HeaderCell>
+            <Cell dataKey="country" />
+          </Column>
+        </Table>
+      );
+    });
+
+    const table = ref.current.root;
+    const button = table.querySelector('.rs-table-cell-expand-wrapper');
+
+    assert.isUndefined(table.querySelectorAll('.rs-table-cell')[2]);
+
+    act(() => {
+      Simulate.click(button);
+    });
+
+    const cell = table.querySelectorAll('.rs-table-cell')[2];
+
+    setTimeout(() => {
+      assert.isTrue(getHeight(cell) > 46);
+      assert.equal(cell.innerText, 'South Georgia and the South Sandwich Islands');
+      done();
+    }, 1);
+  });
+
   it('Should be automatic height', () => {
     const instance = getDOMNode(
       <Table