From 0e363da97ef866abceeba45a949bdf33933be1eb Mon Sep 17 00:00:00 2001
From: hemengke1997 <49073282+hemengke1997@users.noreply.github.com>
Date: Thu, 15 Sep 2022 23:01:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20support=20`onResizeStart`?=
=?UTF-8?q?=20&=20`onResizeEnd`=20callback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
#21
---
.eslintrc.json | 5 ++++-
README.md | 8 +++++---
example/src/App.tsx | 8 +++++++-
src/ResizableHeader.tsx | 11 ++++++++---
src/index.ts | 3 ++-
src/useAntdResizableHeader.tsx | 34 ++++++++++++++++++++++++++++++----
src/utils/useLatest.ts | 10 ++++++++++
tsconfig.json | 2 +-
8 files changed, 67 insertions(+), 14 deletions(-)
create mode 100644 src/utils/useLatest.ts
diff --git a/.eslintrc.json b/.eslintrc.json
index 39f6a98..66f3044 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,6 @@
{
- "extends": "@minko-fe"
+ "extends": "@minko-fe",
+ "rules": {
+ "no-empty-pattern": "off"
+ }
}
diff --git a/README.md b/README.md
index d6d871a..94d21c2 100644
--- a/README.md
+++ b/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'
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 386e20a..8908996 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -64,7 +64,7 @@ function App() {
title: 'Action',
key: 'operation',
fixed: 'right',
- render: (text, record) => {
+ render: (_, record) => {
return {record?.age}
},
},
@@ -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 {
diff --git a/src/ResizableHeader.tsx b/src/ResizableHeader.tsx
index a8d4a0e..c795b85 100644
--- a/src/ResizableHeader.tsx
+++ b/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 = (props) => {
minWidth,
maxWidth,
onResize,
+ onResizeStart,
+ onResizeEnd,
onMount,
triggerRender,
className,
@@ -65,20 +69,21 @@ const ResizableHeader: React.FC = (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 (
diff --git a/src/index.ts b/src/index.ts
index 7be2c38..2e33bbe 100644
--- a/src/index.ts
+++ b/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 }
diff --git a/src/useAntdResizableHeader.tsx b/src/useAntdResizableHeader.tsx
index 06bf5b4..1acb4cb 100644
--- a/src/useAntdResizableHeader.tsx
+++ b/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 {
+export interface useTableResizableHeaderProps = Record> {
columns: ColumnType[] | undefined
/** @description 最后一列不能拖动，设置最后一列的最小展示宽度，默认120 */
defaultWidth?: number
@@ -38,6 +39,10 @@ export interface useTableResizableHeaderProps {
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 = Record>(
+function useAntdResizableHeader>(
props: useTableResizableHeaderProps,
) {
const {
@@ -70,6 +75,8 @@ function useAntdResizableHeader
maxConstraints = Infinity,
cache = true,
columnsState,
+ onResizeStart: onResizeStartProp,
+ onResizeEnd: onResizeEndProp,
} = props
// column的宽度缓存，避免render导致columns宽度重置
@@ -78,6 +85,8 @@ function useAntdResizableHeader
const [resizableColumns, setResizableColumns] = useSafeState([])
+ const lastestColumns = useLatest(resizableColumns)
+
const { localColumns: columns, resetLocalColumns } = useLocalColumns({
columnsState,
columns: columnsProp,
@@ -124,6 +133,22 @@ function useAntdResizableHeader
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
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
}
}
-// eslint-disable-next-line no-restricted-syntax
-export default useAntdResizableHeader
+export { useAntdResizableHeader }
diff --git a/src/utils/useLatest.ts b/src/utils/useLatest.ts
new file mode 100644
index 0000000..3662539
--- /dev/null
+++ b/src/utils/useLatest.ts
@@ -0,0 +1,10 @@
+import { useRef } from 'react'
+
+function useLatest(value: T) {
+ const ref = useRef(value)
+ ref.current = value
+
+ return ref
+}
+
+export { useLatest }
diff --git a/tsconfig.json b/tsconfig.json
index 8fa8b66..98d7ce8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,6 @@
"extends": "@minko-fe/tsconfig/tsconfig.base",
"compilerOptions": {
"outDir": "dist",
- "sourceMap": false
+ "sourceMap": false,
}
}