refactor: move hooks

Author: zombieJ

src/StaticTable/index.tsx

@@ -5,7 +5,6 @@ import type { CustomizeScrollBody } from '../interface';
 import Table, { type TableProps } from '../Table';
 import Grid from './BodyGrid';
 import { StaticContext } from './context';
-import useWidthColumns from './useWidthColumns';
 import { makeImmutable } from '../context/TableContext';
 import { warning } from 'rc-util';
 
@@ -53,7 +52,6 @@ function VirtualTable<RecordType>(props: StaticTableProps<RecordType>) {
           body: renderBody,
         }}
         columns={columns}
-        // columns={filledWidthColumns}
         internalHooks={INTERNAL_HOOKS}
         tailor
       />

src/hooks/useColumns/index.tsx

@@ -14,17 +14,7 @@ import type {
   TriggerEventHandler,
 } 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;
-}
+import useWidthColumns from './useWidthColumns';
 
 export function convertChildrenToColumns<RecordType>(
   children: React.ReactNode,
@@ -272,66 +262,21 @@ function useColumns<RecordType>(
 
   // ========================== Flatten =========================
   const flattenColumns = React.useMemo(() => {
-    let tmpColumns = mergedColumns;
-
     if (direction === 'rtl') {
-      tmpColumns = revertForRtl(flatColumns(mergedColumns));
-    } else {
-      tmpColumns = flatColumns(mergedColumns);
+      return revertForRtl(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 tmpColumns;
+    return flatColumns(mergedColumns);
   }, [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];
+  // ========================= FillWidth ========================
+  const filledColumns = useWidthColumns(flattenColumns, scrollWidth);
+
+  return [mergedColumns, filledColumns];
 }
 
 export default useColumns;

src/hooks/useColumns/useWidthColumns.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { ColumnsType } from '../../interface';
+
+function parseColWidth(totalWidth: number, width: string | number = '') {
+  if (typeof width === 'number') {
+    return width;
+  }
+
+  if (width.endsWith('%')) {
+    return (totalWidth * parseFloat(width)) / 100;
+  }
+  return null;
+}
+
+/**
+ * Fill all column with width
+ */
+export default function useWidthColumns(columns: ColumnsType<any>, scrollWidth: number) {
+  const filledColumns = React.useMemo(() => {
+    // Fill width if needed
+    if (scrollWidth && scrollWidth > 0) {
+      let totalWidth = 0;
+      let missWidthCount = 0;
+
+      // collect not given width column
+      columns.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;
+
+      return columns.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 columns;
+  }, [columns, scrollWidth]);
+
+  return filledColumns;
+}