feat: ✨ support onResizeStart & onResizeEnd callback

#21

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@minko-fe"
+  "extends": "@minko-fe",
+  "rules": {
+    "no-empty-pattern": "off"
+  }
 }

README.md

@@ -28,6 +28,8 @@ pnpm add @minko-fe/use-antd-resizable-header
 | maxConstraints | number           | Infinity  | 拖动最大宽度 默认无穷                            |
 | cache          | boolean          | true      | 是否缓存宽度，避免渲染重置拖拽宽度               |
 | columnsState   | ColumnsStateType | undefined | 列状态的配置，可以用来操作列拖拽宽度             |
+| onResizeStart  | Function         | undefined | 开始拖拽时触发
+| onResizeEnd    | Function         | undefined | 结束拖拽时触发
 
 ### Return
 
@@ -51,7 +53,7 @@ pnpm add @minko-fe/use-antd-resizable-header
 ```tsx
 import { Button, Table } from 'antd'
 import ProTable from '@ant-design/pro-table'
-import useARH from '@minko-fe/use-antd-resizable-header'
+import { useAntdResizableHeader } from '@minko-fe/use-antd-resizable-header'
 import '@minko-fe/use-antd-resizable-header/dist/style.css'
 
 function App() {
@@ -91,7 +93,7 @@ function App() {
 ```tsx
 import React, { useReducer } from 'react'
 import { Space, Table, Tag } from 'antd'
-import useARH from '@minko-fe/use-antd-resizable-header'
+import { useAntdResizableHeader } from '@minko-fe/use-antd-resizable-header'
 import 'antd/dist/antd.css'
 import '@minko-fe/use-antd-resizable-header/dist/style.css'
 
@@ -245,7 +247,7 @@ export const genEllipsis = (text: string, copyable?: boolean, stopPropagation?:
 ```tsx
 // index.tsx
 import ProTable from '@ant-design/pro-table' // or import { Table } from 'antd'
-import useARH from '@minko-fe/use-antd-resizable-header'
+import { useAntdResizableHeader } from '@minko-fe/use-antd-resizable-header'
 import { genEllipsis } from './utils.tsx'
 
 import '@minko-fe/use-antd-resizable-header/dist/style.css'

example/src/App.tsx

@@ -64,7 +64,7 @@ function App() {
         title: 'Action',
         key: 'operation',
         fixed: 'right',
-        render: (text, record) => {
+        render: (_, record) => {
           return <span>{record?.age}</span>
         },
       },
@@ -74,6 +74,12 @@ function App() {
 
   const { components, resizableColumns, tableWidth } = useARH({
     columns,
+    onResizeStart: (x) => {
+      console.log(x, 'start')
+    },
+    onResizeEnd: (y) => {
+      console.log(y, 'end')
+    },
   })
 
   // const {

src/ResizableHeader.tsx

@@ -10,6 +10,8 @@ import './index.css'
 type ComponentProp = {
   onResize: (width: number) => void
   onMount: (width: number) => void
+  onResizeStart?: (width: number) => void
+  onResizeEnd?: (width: number) => void
   triggerRender: number
   width: number
   minWidth: number
@@ -22,6 +24,8 @@ const ResizableHeader: React.FC<ComponentProp> = (props) => {
     minWidth,
     maxWidth,
     onResize,
+    onResizeStart,
+    onResizeEnd,
     onMount,
     triggerRender,
     className,
@@ -65,20 +69,21 @@ const ResizableHeader: React.FC<ComponentProp> = (props) => {
     document.documentElement.style.cursor = active ? 'col-resize' : ''
   }
 
-  const onStart = (_: any, data: ResizeCallbackData) => {
+  const onStart = ({}, data: ResizeCallbackData) => {
     setResizeWidth(data.size.width)
     setBodyStyle(true)
+    onResizeStart?.(data.size.width)
   }
 
-  const onSelfResize = (_: any, data: ResizeCallbackData) => {
+  const onSelfResize = ({}, data: ResizeCallbackData) => {
     setResizeWidth(data.size.width)
   }
 
   const onStop = () => {
     if (resizeWidth <= 0) return
-
     onResize(resizeWidth)
     setBodyStyle(false)
+    onResizeEnd?.(resizeWidth)
   }
 
   return (

src/index.ts

@@ -1,4 +1,5 @@
-import useAntdResizableHeader from './useAntdResizableHeader'
+import { useAntdResizableHeader } from './useAntdResizableHeader'
 export { ResizableUniqIdPrefix, useGetDataIndexColumns } from './utils/useGetDataIndexColumns'
 
 export default useAntdResizableHeader
+export { useAntdResizableHeader }

src/useAntdResizableHeader.tsx

@@ -9,6 +9,7 @@ import { useSafeState } from './utils/useSafeState'
 import { useLocalColumns } from './utils/useLocalColumns'
 import { GETKEY } from './utils/useGetDataIndexColumns'
 import { useMemoizedFn } from './utils/useMemoizedFn'
+import { useLatest } from './utils/useLatest'
 
 export interface ColumnsState {
   width: number
@@ -26,7 +27,7 @@ export interface ColumnsStateType {
   persistenceKey?: string
 }
 
-export interface useTableResizableHeaderProps<ColumnType> {
+export interface useTableResizableHeaderProps<ColumnType extends ColumnOriginType<ColumnType> = Record<string, any>> {
   columns: ColumnType[] | undefined
   /** @description 最后一列不能拖动，设置最后一列的最小展示宽度，默认120 */
   defaultWidth?: number
@@ -38,6 +39,10 @@ export interface useTableResizableHeaderProps<ColumnType> {
   cache?: boolean
   /** @description 列状态的配置，可以用来操作列拖拽宽度 */
   columnsState?: ColumnsStateType
+  /** @description 开始拖拽时触发 */
+  onResizeStart?: (col: ColumnType & { resizableColumns: ColumnType[] }) => void
+  /** @description 结束拖拽时触发 */
+  onResizeEnd?: (col: ColumnType & { resizableColumns: ColumnType[] }) => void
 }
 
 type Width = number | string
@@ -60,7 +65,7 @@ interface CacheType {
 
 const WIDTH = 120
 
-function useAntdResizableHeader<ColumnType extends ColumnOriginType<ColumnType> = Record<string, any>>(
+function useAntdResizableHeader<ColumnType extends ColumnOriginType<ColumnType>>(
   props: useTableResizableHeaderProps<ColumnType>,
 ) {
   const {
@@ -70,6 +75,8 @@ function useAntdResizableHeader<ColumnType extends ColumnOriginType<ColumnType>
     maxConstraints = Infinity,
     cache = true,
     columnsState,
+    onResizeStart: onResizeStartProp,
+    onResizeEnd: onResizeEndProp,
   } = props
 
   // column的宽度缓存，避免render导致columns宽度重置
@@ -78,6 +85,8 @@ function useAntdResizableHeader<ColumnType extends ColumnOriginType<ColumnType>
 
   const [resizableColumns, setResizableColumns] = useSafeState<ColumnType[]>([])
 
+  const lastestColumns = useLatest(resizableColumns)
+
   const { localColumns: columns, resetLocalColumns } = useLocalColumns({
     columnsState,
     columns: columnsProp,
@@ -124,6 +133,22 @@ function useAntdResizableHeader<ColumnType extends ColumnOriginType<ColumnType>
 
   const onResize = React.useMemo(() => onMount, [onMount])
 
+  const onResizeStart = (col: ColumnType) => (width: number) => {
+    onResizeStartProp?.({
+      ...col,
+      width,
+      resizableColumns: lastestColumns.current,
+    })
+  }
+
+  const onResizeEnd = (col: ColumnType) => (width: number) => {
+    onResizeEndProp?.({
+      ...col,
+      width,
+      resizableColumns: lastestColumns.current,
+    })
+  }
+
   const getColumns = useMemoizedFn((list: ColumnType[]) => {
     const trulyColumns = list?.filter((item) => !isEmpty(item))
     const c = trulyColumns.map((col) => {
@@ -137,6 +162,8 @@ function useAntdResizableHeader<ColumnType extends ColumnOriginType<ColumnType>
             resizable: column.resizable,
             onMount: onMount(column?.[GETKEY]),
             onResize: onResize(column?.[GETKEY]),
+            onResizeStart: onResizeStart(column),
+            onResizeEnd: onResizeEnd(column),
             minWidth: minConstraints,
             maxWidth: maxConstraints,
             triggerRender,
@@ -210,5 +237,4 @@ function useAntdResizableHeader<ColumnType extends ColumnOriginType<ColumnType>
   }
 }
 
-// eslint-disable-next-line no-restricted-syntax
-export default useAntdResizableHeader
+export { useAntdResizableHeader }

src/utils/useLatest.ts

@@ -0,0 +1,10 @@
+import { useRef } from 'react'
+
+function useLatest<T>(value: T) {
+  const ref = useRef(value)
+  ref.current = value
+
+  return ref
+}
+
+export { useLatest }

tsconfig.json

@@ -2,6 +2,6 @@
   "extends": "@minko-fe/tsconfig/tsconfig.base",
   "compilerOptions": {
     "outDir": "dist",
-    "sourceMap": false
+    "sourceMap": false,
   }
 }