refactor: move hooks

Author: zombieJ

src/StaticTable/index.tsx

@@ -7,6 +7,7 @@ import Grid from './BodyGrid';
 import { StaticContext } from './context';
 import useWidthColumns from './useWidthColumns';
 import { makeImmutable } from '../context/TableContext';
+import { warning } from 'rc-util';
 
 const renderBody: CustomizeScrollBody<any> = (rawData, props) => {
   const { ref, onScroll } = props;
@@ -21,25 +22,40 @@ export interface StaticTableProps<RecordType> extends Omit<TableProps<RecordType
   };
 }
 
+const PRESET_COLUMN_WIDTH = 100;
+
 function VirtualTable<RecordType>(props: StaticTableProps<RecordType>) {
   const { columns, scroll } = props;
 
   const { x: scrollX, y: scrollY } = scroll || {};
+  let mergedScrollX = scrollX;
 
   // Fill all column with width
-  const filledWidthColumns = useWidthColumns(columns, scrollX);
+  // const filledWidthColumns = useWidthColumns(columns, scrollX);
+  if (typeof scrollX !== 'number') {
+    mergedScrollX = ((columns || []).length + 1) * PRESET_COLUMN_WIDTH;
+
+    if (process.env.NODE_ENV !== 'production') {
+      warning(false, '`scroll.x` in virtual table must be number.');
+    }
+  }
 
   // ========================== Render ==========================
   return (
-    <StaticContext.Provider value={{ scrollX, scrollY }}>
+    <StaticContext.Provider value={{ scrollX: mergedScrollX, scrollY }}>
       <Table
         {...props}
+        scroll={{
+          ...scroll,
+          x: mergedScrollX,
+        }}
         components={{
           body: renderBody,
         }}
-        columns={filledWidthColumns}
+        columns={columns}
+        // columns={filledWidthColumns}
         internalHooks={INTERNAL_HOOKS}
-        hideScrollColumn
+        tailor
       />
     </StaticContext.Provider>
   );

src/StaticTable/useWidthColumns.ts

@@ -138,7 +138,8 @@ export interface TableProps<RecordType = unknown>
    * !!! DO NOT USE IN PRODUCTION ENVIRONMENT !!!
    */
   // Force trade scrollbar as 0 size.
-  hideScrollColumn?: boolean;
+  // Force column to be average width if not set
+  tailor?: boolean;
 
   /**
    * @private Internal usage, may remove by refactor.
@@ -193,7 +194,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
     internalHooks,
     transformColumns,
     internalRefs,
-    hideScrollColumn,
+    tailor,
 
     sticky,
   } = props;
@@ -276,6 +277,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
       expandIcon: mergedExpandIcon,
       expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
       direction,
+      scrollWidth: useInternalHooks && tailor && typeof scroll?.x === 'number' ? scroll.x : null,
     },
     useInternalHooks ? transformColumns : null,
   );
@@ -450,7 +452,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
   const [supportSticky, setSupportSticky] = React.useState(true); // Only IE not support, we mark as support first
 
   React.useEffect(() => {
-    if (!hideScrollColumn || !useInternalHooks) {
+    if (!tailor || !useInternalHooks) {
       if (scrollBodyRef.current instanceof Element) {
         setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.current).width);
       } else {

src/Table.tsx

@@ -1,7 +1,7 @@
 import toArray from 'rc-util/lib/Children/toArray';
 import warning from 'rc-util/lib/warning';
 import * as React from 'react';
-import { EXPAND_COLUMN } from '../constant';
+import { EXPAND_COLUMN } from '../../constant';
 import type {
   ColumnGroupType,
   ColumnsType,
@@ -12,8 +12,19 @@ import type {
   Key,
   RenderExpandIcon,
   TriggerEventHandler,
-} from '../interface';
-import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
+} from '../../interface';
+import { INTERNAL_COL_DEFINE } from '../../utils/legacyUtil';
+
+function parseColWidth(totalWidth: number, width: string | number = '') {
+  if (typeof width === 'number') {
+    return width;
+  }
+
+  if (width.endsWith('%')) {
+    return (totalWidth * parseFloat(width)) / 100;
+  }
+  return null;
+}
 
 export function convertChildrenToColumns<RecordType>(
   children: React.ReactNode,
@@ -130,6 +141,7 @@ function useColumns<RecordType>(
     expandRowByClick,
     columnWidth,
     fixed,
+    scrollWidth,
   }: {
     prefixCls?: string;
     columns?: ColumnsType<RecordType>;
@@ -146,6 +158,7 @@ function useColumns<RecordType>(
     expandRowByClick?: boolean;
     columnWidth?: number | string;
     fixed?: FixedType;
+    scrollWidth?: number;
   },
   transformColumns: (columns: ColumnsType<RecordType>) => ColumnsType<RecordType>,
 ): [ColumnsType<RecordType>, readonly ColumnType<RecordType>[]] {
@@ -259,15 +272,65 @@ function useColumns<RecordType>(
 
   // ========================== Flatten =========================
   const flattenColumns = React.useMemo(() => {
+    let tmpColumns = mergedColumns;
+
     if (direction === 'rtl') {
-      return revertForRtl(flatColumns(mergedColumns));
+      tmpColumns = revertForRtl(flatColumns(mergedColumns));
+    } else {
+      tmpColumns = flatColumns(mergedColumns);
+    }
+
+    // Fill width if needed
+    if (scrollWidth && scrollWidth > 0) {
+      let totalWidth = 0;
+      let missWidthCount = 0;
+
+      // collect not given width column
+      tmpColumns.forEach((col: any) => {
+        const colWidth = parseColWidth(scrollWidth, col.width);
+
+        if (colWidth) {
+          totalWidth += colWidth;
+        } else {
+          missWidthCount += 1;
+        }
+      });
+
+      // Fill width
+      let restWidth = scrollWidth - totalWidth;
+      let restCount = missWidthCount;
+      const avgWidth = restWidth / missWidthCount;
+
+      tmpColumns = tmpColumns.map((col: any) => {
+        const clone = {
+          ...col,
+        };
+
+        const colWidth = parseColWidth(scrollWidth, clone.width);
+
+        if (colWidth) {
+          clone.width = colWidth;
+        } else {
+          const colAvgWidth = Math.floor(avgWidth);
+
+          clone.width = restCount === 1 ? restWidth : colAvgWidth;
+
+          restWidth -= colAvgWidth;
+          restCount -= 1;
+        }
+
+        return clone;
+      });
     }
-    return flatColumns(mergedColumns);
-  }, [mergedColumns, direction]);
+
+    return tmpColumns;
+  }, [mergedColumns, direction, scrollWidth]);
+
   // Only check out of production since it's waste for each render
   if (process.env.NODE_ENV !== 'production') {
     warningFixed(direction === 'rtl' ? flattenColumns.slice().reverse() : flattenColumns);
   }
+
   return [mergedColumns, flattenColumns];
 }
 

src/hooks/useColumns.tsx renamed to src/hooks/useColumns/index.tsx

@@ -36,25 +36,27 @@ describe('Table.FixedHeader', () => {
         scroll={{ y: 10 }}
       />,
     );
-    wrapper
-      .find(RcResizeObserver.Collection)
-      .first()
-      .props()
-      .onBatchResize([
-        {
-          data: wrapper.find('ResizeObserver').at(0).props().data,
-          size: { width: 100, offsetWidth: 100 },
-        },
-        {
-          data: wrapper.find('ResizeObserver').at(1).props().data,
-          size: { width: 200, offsetWidth: 200 },
-        },
-        {
-          data: wrapper.find('ResizeObserver').at(2).props().data,
-          size: { width: 0, offsetWidth: 0 },
-        },
-      ]);
-    await safeAct(wrapper);
+
+    async function triggerResize(resizeList) {
+      wrapper.find(RcResizeObserver.Collection).first().props().onBatchResize(resizeList);
+      await safeAct(wrapper);
+      wrapper.update();
+    }
+
+    await triggerResize([
+      {
+        data: wrapper.find('ResizeObserver').at(0).props().data,
+        size: { width: 100, offsetWidth: 100 },
+      },
+      {
+        data: wrapper.find('ResizeObserver').at(1).props().data,
+        size: { width: 200, offsetWidth: 200 },
+      },
+      {
+        data: wrapper.find('ResizeObserver').at(2).props().data,
+        size: { width: 0, offsetWidth: 0 },
+      },
+    ]);
 
     expect(wrapper.find('.rc-table-header table').props().style.visibility).toBeFalsy();
 
@@ -64,7 +66,17 @@ describe('Table.FixedHeader', () => {
 
     // Update columns
     wrapper.setProps({ columns: [col2, col1] });
-    wrapper.update();
+
+    await triggerResize([
+      {
+        data: wrapper.find('ResizeObserver').at(0).props().data,
+        size: { width: 200, offsetWidth: 200 },
+      },
+      {
+        data: wrapper.find('ResizeObserver').at(1).props().data,
+        size: { width: 100, offsetWidth: 100 },
+      },
+    ]);
 
     expect(wrapper.find('colgroup col').at(0).props().style.width).toEqual(200);
     expect(wrapper.find('colgroup col').at(1).props().style.width).toEqual(100);