feat: cannot drag the last column

README.md

@@ -8,17 +8,18 @@
 yarn add use-antd-resizable-header
 ```
 
-## Example
-
 ## 注意事项
 
-- **columns为常量时，提到组件外，或使用 `React.useMemo`, `React.Ref` 包裹常量**
+- **columns 为常量时，提到组件外，或使用 `React.useMemo`, `React.Ref` 包裹常量**
+- **最后一列不能拖动，[请保持最后一列的自适应](https://ant-design.gitee.io/components/table-cn/#components-table-demo-fixed-columns)，若最后一列传入宽度，会把传入的宽度作为最小宽度（默认 120）**
+
+## Example
 
 ```tsx
 import useATRH from 'use-antd-resizable-header';
 import 'use-antd-resizable-header/dist/style.css';
 
-const columns = []
+const columns = [];
 
 function App() {
   const { components, resizableColumns, tableWidth } = useATRH(columns);

src/ResizableHeader.tsx

@@ -1,16 +1,16 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React from 'react';
 import { Resizable, ResizeCallbackData } from 'react-resizable';
-import useThrottleFn from './utils/useThrottleFn';
-import useUpdateEffect from './utils/useUpdateEffect';
+import useFunction from './utils/useFunction';
 import classnames from 'classnames';
 
-import './index.css';
+import './index.less';
 
 type ComponentProp = {
   onResize: (width: number) => void;
   onMount: (width: number) => void;
+  isLast: boolean;
   triggerMount: number;
-  throttleWait?: number;
   width: number;
   handlerClassName?: string;
   lineColor?: string;
@@ -19,9 +19,9 @@ type ComponentProp = {
 const AntdResizableHeader: React.FC<ComponentProp> = (props) => {
   const {
     width,
-    throttleWait,
     onResize,
     onMount,
+    isLast,
     triggerMount,
     handlerClassName,
     lineColor,
@@ -30,50 +30,49 @@ const AntdResizableHeader: React.FC<ComponentProp> = (props) => {
     ...rest
   } = props;
 
-  const thRef = React.createRef<HTMLTableHeaderCellElement>();
+  const thRef = React.useRef<HTMLTableHeaderCellElement>(null);
 
-  const [resizeWidth, setResizeWidth] = React.useState<number>(width);
-
-  const { run: throttleSetResizeWidth } = useThrottleFn(setResizeWidth, {
-    leading: false,
-    trailing: false,
-    wait: throttleWait,
-  });
+  const [resizeWidth, setResizeWidth] = React.useState<number>(0);
 
   React.useEffect(() => {
-    const domWidth = thRef.current?.getBoundingClientRect().width || width;
-    const w = domWidth > width ? domWidth : width;
-    setResizeWidth(w);
-    onMount?.(w);
+    if (width && !isLast) {
+      const domWidth = thRef.current?.getBoundingClientRect().width || width;
+      const w = domWidth > width ? domWidth : width;
+      setResizeWidth(w);
+      onMount?.(w);
+    }
   }, [triggerMount]);
 
-  useUpdateEffect(() => {
-    throttleSetResizeWidth(width);
+  React.useEffect(() => {
+    if (width) {
+      setResizeWidth(width);
+    }
   }, [width]);
 
-  if (!width || Number.isNaN(Number(width))) {
+  if (!width || Number.isNaN(Number(width)) || isLast) {
     return <th {...rest} style={style} className={className}></th>;
   }
 
-  const setBodyStyle = (active: boolean) => {
+  const setBodyStyle = useFunction((active: boolean) => {
     document.body.style.userSelect = active ? 'none' : '';
     document.body.style.cursor = active ? 'col-resize' : '';
-  };
+  });
 
-  const onStart = (_: any, data: ResizeCallbackData) => {
+  const onStart = useFunction((_: any, data: ResizeCallbackData) => {
     setResizeWidth(data.size.width);
     setBodyStyle(true);
-  };
+  });
 
-  const onSelfResize = (_: any, data: ResizeCallbackData) => {
+  const onSelfResize = useFunction((_: any, data: ResizeCallbackData) => {
     setResizeWidth(data.size.width);
-  };
+  });
 
-  const onStop = () => {
+  const onStop = useFunction(() => {
     if (resizeWidth <= 0) return;
+
     onResize(resizeWidth);
     setBodyStyle(false);
-  };
+  });
 
   return (
     <th className={classnames(className, 'resizable-container')} style={style} ref={thRef}>

src/index.tsx

@@ -4,16 +4,16 @@ import useFunction from './utils/useFunction';
 
 function useTableResizableHeader<ColumnType extends Record<string, any>>(
   columns: ColumnType[] | undefined,
+  /** @description 最后一列不能拖动，设置最后一列的最小展示宽度 */
   defaultWidth: number = 120,
-  throttleWait?: number,
 ) {
   const [resizableColumns, setResizableColumns] = React.useState<ColumnType[]>([]);
 
   const [tableWidth, setTableWidth] = React.useState<number>();
 
   const [triggerMount, forceRender] = React.useReducer((s) => s + 1, 0);
 
-  const onResize = useFunction((index: number) => (width: number) => {
+  const onMount = useFunction((index: number) => (width: number) => {
     if (width) {
       setResizableColumns((t) => {
         const nextColumns = [...t];
@@ -26,19 +26,31 @@ function useTableResizableHeader<ColumnType extends Record<string, any>>(
     }
   });
 
+  const onResize = onMount;
+
+  React.useEffect(() => {
+    forceRender();
+  }, [columns]);
+
   React.useEffect(() => {
-    const t = columns?.map((col, index) => ({
-      ...col,
-      onHeaderCell: (column: ColumnType) => ({
-        throttleWait,
-        width: column.width,
-        onMount: onResize(index),
-        onResize: onResize(index),
-        triggerMount,
-      }),
-    })) as ColumnType[];
+    const t = columns?.map((col, index) => {
+      const isLast = index === columns.length - 1;
+      return {
+        ...col,
+        onHeaderCell: (column: ColumnType) => {
+          return {
+            width: column.width,
+            onMount: onMount(index),
+            onResize: onResize(index),
+            triggerMount,
+            isLast,
+          };
+        },
+        width: isLast ? undefined : col.width,
+      };
+    }) as ColumnType[];
     setResizableColumns(t);
-  }, [columns, triggerMount]);
+  }, [triggerMount]);
 
   React.useEffect(() => {
     window.addEventListener('resize', forceRender);
@@ -49,7 +61,12 @@ function useTableResizableHeader<ColumnType extends Record<string, any>>(
 
   React.useEffect(() => {
     const width = resizableColumns.reduce((total, current) => {
-      return total + (Number(current.width) || defaultWidth);
+      return (
+        total +
+        (Number(current.width) ||
+          resizableColumns[resizableColumns.length - 1].width ||
+          defaultWidth)
+      );
     }, 0);
     setTableWidth(width);
   }, [resizableColumns]);