refactor: Move all measure into table body (#409)

* move measure out of first row

* remove Header measure logic

* update snapshot

Author: zombieJ

src/Body/BodyRow.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import ResizeObserver from 'rc-resize-observer';
 import Cell from '../Cell';
 import TableContext from '../context/TableContext';
 import BodyContext from '../context/BodyContext';
@@ -13,7 +12,6 @@ import {
   Key,
   GetRowKey,
 } from '../interface';
-import ResizeContext from '../context/ResizeContext';
 import { getCellFixedInfo } from '../utils/fixUtil';
 import ExpandedRow from './ExpandedRow';
 
@@ -22,8 +20,6 @@ export interface BodyRowProps<RecordType> {
   index: number;
   className?: string;
   style?: React.CSSProperties;
-  /** Set if need collect column width info */
-  measureColumnWidth: boolean;
   stickyOffsets: StickyOffsets;
   recordKey: Key;
   expandedKeys: Set<Key>;
@@ -51,7 +47,6 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
     indent = 0,
     rowComponent: RowComponent,
     cellComponent,
-    measureColumnWidth,
     childrenColumnName,
   } = props;
   const { prefixCls } = React.useContext(TableContext);
@@ -70,7 +65,6 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
     expandedRowRender,
     expandIconColumnIndex,
   } = React.useContext(BodyContext);
-  const { onColumnResize } = React.useContext(ResizeContext);
   const [expandRended, setExpandRended] = React.useState(false);
 
   const expanded = props.expandedKeys.has(props.recordKey);
@@ -165,7 +159,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
           additionalCellProps = column.onCell(record, index);
         }
 
-        const cellNode = (
+        return (
           <Cell
             className={columnClassName}
             ellipsis={column.ellipsis}
@@ -182,21 +176,6 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
             additionalProps={additionalCellProps}
           />
         );
-
-        if (measureColumnWidth) {
-          return (
-            <ResizeObserver
-              key={key}
-              onResize={({ width }) => {
-                onColumnResize(key, width);
-              }}
-            >
-              {cellNode}
-            </ResizeObserver>
-          );
-        }
-
-        return cellNode;
       })}
     </RowComponent>
   );
@@ -243,7 +222,6 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
             recordKey={subKey}
             index={subIndex}
             indent={indent + 1}
-            measureColumnWidth={false}
           />
         );
       },

src/Body/index.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
+import ResizeObserver from 'rc-resize-observer';
 import BodyRow from './BodyRow';
 import TableContext from '../context/TableContext';
 import { GetRowKey, StickyOffsets, Key, GetComponentProps } from '../interface';
 import ExpandedRow from './ExpandedRow';
 import BodyContext from '../context/BodyContext';
+import { getColumnsKey } from '../utils/valueUtil';
+import ResizeContext from '../context/ResizeContext';
 
 export interface BodyProps<RecordType> {
   data: RecordType[];
@@ -28,6 +31,7 @@ function Body<RecordType>({
   emptyNode,
   childrenColumnName,
 }: BodyProps<RecordType>) {
+  const { onColumnResize } = React.useContext(ResizeContext);
   const { prefixCls, getComponent } = React.useContext(TableContext);
   const { fixHeader, fixColumn, flattenColumns, componentWidth } = React.useContext(BodyContext);
 
@@ -48,7 +52,6 @@ function Body<RecordType>({
             record={record}
             recordKey={key}
             index={index}
-            measureColumnWidth={measureColumnWidth && index === 0}
             rowComponent={trComponent}
             cellComponent={tdComponent}
             stickyOffsets={stickyOffsets}
@@ -78,7 +81,29 @@ function Body<RecordType>({
       );
     }
 
-    return <WrapperComponent className={`${prefixCls}-tbody`}>{rows}</WrapperComponent>;
+    const columnsKey = getColumnsKey(flattenColumns);
+
+    return (
+      <WrapperComponent className={`${prefixCls}-tbody`}>
+        {/* Measure body column width with additional hidden col */}
+        {measureColumnWidth && (
+          <tr aria-hidden="true" className={`${prefixCls}-measure-row`}>
+            {columnsKey.map(columnKey => (
+              <ResizeObserver
+                key={columnKey}
+                onResize={({ width }) => {
+                  onColumnResize(columnKey, width);
+                }}
+              >
+                <td style={{ padding: 0, border: 0, height: 0 }} />
+              </ResizeObserver>
+            ))}
+          </tr>
+        )}
+
+        {rows}
+      </WrapperComponent>
+    );
   }, [
     data,
     prefixCls,

src/Header/Header.tsx

@@ -5,13 +5,9 @@ import TableContext from '../context/TableContext';
 
 function parseHeaderRows<RecordType>(
   rootColumns: ColumnsType<RecordType>,
-  measureColumnWidth: boolean,
 ): CellType<RecordType>[][] {
   const rows: CellType<RecordType>[][] = [];
 
-  // Record which cell should wrapped with resize observer used for fixed
-  const measureCells: boolean[] = [];
-
   function fillRowCells(
     columns: ColumnsType<RecordType>,
     colIndex: number,
@@ -54,12 +50,6 @@ function parseHeaderRows<RecordType>(
 
       currentColIndex += colSpan;
 
-      // Measure only happen on single node
-      if (measureColumnWidth && colSpan === 1 && !measureCells[cell.colStart]) {
-        cell.measure = true;
-        measureCells[cell.colStart] = true;
-      }
-
       return colSpan;
     });
 
@@ -87,22 +77,17 @@ export interface HeaderProps<RecordType> {
   columns: ColumnsType<RecordType>;
   flattenColumns: ColumnType<RecordType>[];
   stickyOffsets: StickyOffsets;
-  measureColumnWidth?: boolean;
   onHeaderRow: GetComponentProps<ColumnType<RecordType>[]>;
 }
 
 function Header<RecordType>({
   stickyOffsets,
   columns,
   flattenColumns,
-  measureColumnWidth,
   onHeaderRow,
 }: HeaderProps<RecordType>): React.ReactElement {
   const { getComponent } = React.useContext(TableContext);
-  const rows: CellType<RecordType>[][] = React.useMemo(
-    () => parseHeaderRows(columns, measureColumnWidth),
-    [columns],
-  );
+  const rows: CellType<RecordType>[][] = React.useMemo(() => parseHeaderRows(columns), [columns]);
 
   const WrapperComponent = getComponent(['header', 'wrapper'], 'thead');
   const trComponent = getComponent(['header', 'row'], 'tr');

src/Header/HeaderRow.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import ResizeObserver from 'rc-resize-observer';
 import Cell from '../Cell';
 import {
   CellType,
@@ -10,7 +9,6 @@ import {
 } from '../interface';
 import TableContext from '../context/TableContext';
 import { getCellFixedInfo } from '../utils/fixUtil';
-import ResizeContext from '../context/ResizeContext';
 import { getColumnsKey } from '../utils/valueUtil';
 
 export interface RowProps<RecordType> {
@@ -33,7 +31,6 @@ function HeaderRow<RecordType>({
   index,
 }: RowProps<RecordType>) {
   const { prefixCls } = React.useContext(TableContext);
-  const { onColumnResize } = React.useContext(ResizeContext);
 
   let rowProps: React.HTMLAttributes<HTMLElement>;
   if (onHeaderRow) {
@@ -45,7 +42,7 @@ function HeaderRow<RecordType>({
   return (
     <RowComponent {...rowProps}>
       {cells.map((cell: CellType<RecordType>, cellIndex) => {
-        const { column, measure } = cell;
+        const { column } = cell;
         const fixedInfo = getCellFixedInfo(
           cell.colStart,
           cell.colEnd,
@@ -58,7 +55,7 @@ function HeaderRow<RecordType>({
           additionalProps = cell.column.onHeaderCell(column);
         }
 
-        let cellNode = (
+        return (
           <Cell
             {...cell}
             ellipsis={column.ellipsis}
@@ -70,21 +67,6 @@ function HeaderRow<RecordType>({
             additionalProps={additionalProps}
           />
         );
-
-        if (measure) {
-          cellNode = (
-            <ResizeObserver
-              key={cellIndex}
-              onResize={({ width }) => {
-                onColumnResize(columnsKey[cell.colStart], width);
-              }}
-            >
-              {cellNode}
-            </ResizeObserver>
-          );
-        }
-
-        return cellNode;
       })}
     </RowComponent>
   );

src/Table.tsx

@@ -560,13 +560,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
       >
         <TableComponent style={{ ...scrollTableStyle, tableLayout: mergedTableLayout }}>
           {bodyColGroup}
-          {showHeader !== false && (
-            <Header
-              {...headerProps}
-              {...columnContext}
-              measureColumnWidth={!hasData && fixColumn}
-            />
-          )}
+          {showHeader !== false && <Header {...headerProps} {...columnContext} />}
           {bodyTable}
           {footerTable}
         </TableComponent>

src/interface.ts

@@ -46,7 +46,6 @@ export interface CellType<RecordType> {
   hasSubColumns?: boolean;
   colStart?: number;
   colEnd?: number;
-  measure?: boolean;
 }
 
 export interface RenderedCell<RecordType> {

tests/__snapshots__/ExpandRow.spec.js.snap

@@ -154,6 +154,23 @@ exports[`Table.Expand renders fixed column correctly work 1`] = `
         <tbody
           class="rc-table-tbody"
         >
+          <tr
+            aria-hidden="true"
+            class="rc-table-measure-row"
+          >
+            <td
+              style="padding: 0px; border: 0px; height: 0px;"
+            />
+            <td
+              style="padding: 0px; border: 0px; height: 0px;"
+            />
+            <td
+              style="padding: 0px; border: 0px; height: 0px;"
+            />
+            <td
+              style="padding: 0px; border: 0px; height: 0px;"
+            />
+          </tr>
           <tr
             class="rc-table-row rc-table-row-level-0"
             data-row-key="0"