fix: Reset order column should sync the column width with fixed header (#408)

* fix: Use order to get table columns width instead of arr

* add test case

Author: zombieJ

package.json

@@ -57,7 +57,7 @@
     "prop-types": "^15.5.8",
     "raf": "^3.4.1",
     "rc-resize-observer": "^0.1.2",
-    "rc-util": "^4.14.1",
+    "rc-util": "^4.19.0",
     "react-lifecycles-compat": "^3.0.2",
     "shallowequal": "^1.1.0"
   },

src/Body/BodyRow.tsx

@@ -188,7 +188,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
             <ResizeObserver
               key={key}
               onResize={({ width }) => {
-                onColumnResize(colIndex, width);
+                onColumnResize(key, width);
               }}
             >
               {cellNode}

src/Header/HeaderRow.tsx

@@ -76,7 +76,7 @@ function HeaderRow<RecordType>({
             <ResizeObserver
               key={cellIndex}
               onResize={({ width }) => {
-                onColumnResize(cell.colStart, width);
+                onColumnResize(columnsKey[cell.colStart], width);
               }}
             >
               {cellNode}

src/Table.tsx

@@ -57,7 +57,7 @@ import BodyContext from './context/BodyContext';
 import Body from './Body';
 import useColumns from './hooks/useColumns';
 import { useFrameState, useTimeoutLock } from './hooks/useFrame';
-import { getPathValue, mergeObject, validateValue, newArr } from './utils/valueUtil';
+import { getPathValue, mergeObject, validateValue, getColumnsKey } from './utils/valueUtil';
 import ResizeContext from './context/ResizeContext';
 import useStickyOffsets from './hooks/useStickyOffsets';
 import ColGroup from './ColGroup';
@@ -318,7 +318,11 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
   const scrollBodyRef = React.useRef<HTMLDivElement>();
   const [pingedLeft, setPingedLeft] = React.useState(false);
   const [pingedRight, setPingedRight] = React.useState(false);
-  const [colWidths, updateColWidths] = useFrameState<number[]>(newArr(flattenColumns.length));
+  const [colsWidths, updateColsWidths] = useFrameState(new Map<React.Key, number>());
+
+  // Convert map to number width
+  const colsKeys = getColumnsKey(flattenColumns);
+  const colWidths = colsKeys.map(columnKey => colsWidths.get(columnKey));
   const stickyOffsets = useStickyOffsets(colWidths, flattenColumns.length);
 
   const fixHeader = hasData && scroll && validateValue(scroll.y);
@@ -342,11 +346,11 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     };
   }
 
-  function onColumnResize(colIndex: number, width: number) {
-    updateColWidths((widths: number[]) => {
-      const newWidth = widths.slice(0, flattenColumns.length);
-      newWidth[colIndex] = width;
-      return newWidth;
+  function onColumnResize(columnKey: React.Key, width: number) {
+    updateColsWidths(widths => {
+      const newWidths = new Map(widths);
+      newWidths.set(columnKey, width);
+      return newWidths;
     });
   }
 

src/context/ResizeContext.tsx

@@ -1,9 +1,9 @@
-import { createContext } from 'react';
+import * as React from 'react';
 
 interface ResizeContextProps {
-  onColumnResize: (colIndex: number, width: number) => void;
+  onColumnResize: (columnKey: React.Key, width: number) => void;
 }
 
-const ResizeContext = createContext<ResizeContextProps>(null);
+const ResizeContext = React.createContext<ResizeContextProps>(null);
 
 export default ResizeContext;

src/utils/valueUtil.tsx

@@ -90,14 +90,3 @@ export function mergeObject<ReturnObject extends object>(
 export function validateValue<T>(val: T) {
   return val !== null && val !== undefined;
 }
-
-/**
- * Create a packaged array to fast the v8 process speed
- */
-export function newArr(len: number): number[] {
-  const list: number[] = [];
-  for (let i = 0; i < len; i += 1) {
-    list[i] = null;
-  }
-  return list;
-}

tests/FixedHeader.spec.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import Table from '../src';
+
+describe('Table.FixedHeader', () => {
+  it('switch column', () => {
+    jest.useFakeTimers();
+    const col1 = { dataIndex: 'light', width: 100 };
+    const col2 = { dataIndex: 'bamboo', width: 200 };
+    const wrapper = mount(
+      <Table
+        columns={[col1, col2]}
+        data={[{ light: 'bamboo', bamboo: 'light', key: 1 }]}
+        scroll={{ y: 10 }}
+      />,
+    );
+
+    wrapper
+      .find('ResizeObserver')
+      .at(0)
+      .props()
+      .onResize({ width: 100 });
+    wrapper
+      .find('ResizeObserver')
+      .at(1)
+      .props()
+      .onResize({ width: 200 });
+
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    expect(
+      wrapper
+        .find('colgroup col')
+        .first()
+        .props().style.width,
+    ).toEqual(100);
+    expect(
+      wrapper
+        .find('colgroup col')
+        .last()
+        .props().style.width,
+    ).toEqual(200);
+
+    // Update columns
+    wrapper.setProps({ columns: [col2, col1] });
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('colgroup col')
+        .first()
+        .props().style.width,
+    ).toEqual(200);
+    expect(
+      wrapper
+        .find('colgroup col')
+        .last()
+        .props().style.width,
+    ).toEqual(100);
+
+    jest.useRealTimers();
+  });
+});