feat(table): Add onResizeStop api (#2984) (#2987)

* feat(table): Add onResize api (#2984) * feat(table): Add onResizeStop api * chore(table): 将变更记录文件移入pending目录，暂不发布 * chore(table): 去掉多余代码
XiaoMi · Sep 8, 2024 · 07f9c77 · 07f9c77
1 parent 878941f
commit 07f9c77
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 4 deletions.
diff --git a/.changeset/cyan-ads-sparkle.md b/.changeset/cyan-ads-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(table): Add onResizeStop api
diff --git a/.changeset/sharp-days-repeat.md b/.changeset/sharp-days-repeat.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": minor
+---
+
+feat: Add onResizeStop api
diff --git a/packages/ui/table/src/BaseTable.tsx b/packages/ui/table/src/BaseTable.tsx
@@ -17,7 +17,8 @@ import { useEmbedExpand, UseEmbedExpandProps } from './hooks/use-embed-expand'
 import { TheadContent } from './TheadContent'
 import { ColGroupContent } from './ColGroupContent'
 import { TbodyContent } from './TbodyContent'
-import { SELECTION_DATA_KEY } from './Table';
+import { SELECTION_DATA_KEY } from './Table'
+import { ResizeCallbackData } from 'react-resizable'
 
 const _role = 'table'
 const _prefix = getPrefixCls('table')
@@ -52,6 +53,7 @@ export const BaseTable = forwardRef<HTMLDivElement | null, BaseTableProps>(
       emptyContent,
       virtual,
       needDoubleTable,
+      onResizeStop,
       ...rest
     },
     ref
@@ -151,7 +153,7 @@ export const BaseTable = forwardRef<HTMLDivElement | null, BaseTableProps>(
       let hasSumColumn = false
 
       columns.forEach((column, index) => {
-        if (index === 0  || (index === 1 && columns[0].dataKey === SELECTION_DATA_KEY)) {
+        if (index === 0 || (index === 1 && columns[0].dataKey === SELECTION_DATA_KEY)) {
           // @ts-ignore
           sumRow.raw[column.dataKey] = i18n.get('table.total')
         }
@@ -312,6 +314,7 @@ export const BaseTable = forwardRef<HTMLDivElement | null, BaseTableProps>(
               sumRow,
               hasSumColumn,
               virtual,
+              onResizeStop,
             }}
           >
             {renderTable()}
@@ -368,8 +371,18 @@ export interface BaseTableProps
   fixedColumnTrigger?: 'auto' | 'always'
   /**
    * 是否需要使用双表格
+   * @private
    */
   needDoubleTable?: boolean
+  /**
+   * resizable 模式下，列宽变化后触发的回调
+   */
+  onResizeStop?: (
+    evt: React.SyntheticEvent,
+    size: ResizeCallbackData['size'],
+    index: number,
+    columnsWidth: number[]
+  ) => void
 }
 
 if (__DEV__) {

diff --git a/packages/ui/table/src/TheadContent.tsx b/packages/ui/table/src/TheadContent.tsx
@@ -23,6 +23,7 @@ export const TheadContent = forwardRef<HTMLDivElement | null, TheadContentProps>
       getStickyColProps,
       showColMenu,
       setHeaderTableElement,
+      onResizeStop,
     } = useTableContext()
 
     const activeColumnKeysAction = useCheckState()
@@ -97,6 +98,9 @@ export const TheadContent = forwardRef<HTMLDivElement | null, TheadContentProps>
                     onResize={(evt, options) => {
                       onColumnResizable(evt, options, colIndex)
                     }}
+                    onResizeStop={(evt, options) => {
+                      onResizeStop?.(evt, options?.size, colIndex, colWidths)
+                    }}
                   >
                     {cell}
                   </Resizable>

diff --git a/packages/ui/table/src/context.ts b/packages/ui/table/src/context.ts
@@ -1,8 +1,9 @@
-import { createContext, useContext } from 'react'
+import { createContext, SyntheticEvent, useContext } from 'react'
 import { UseEmbedExpandReturn } from './hooks/use-embed-expand'
 
 import { UseTableReturn } from './use-table'
 import { TableOnRowReturn } from './types'
+import { ResizeCallbackData } from 'react-resizable'
 
 const TableContext = createContext<
   | (Omit<UseTableReturn, 'rootProps'> &
@@ -14,6 +15,12 @@ const TableContext = createContext<
         onRow?: (rowData: Record<string, any> | null, index: number) => TableOnRowReturn
         striped: boolean
         virtual?: boolean
+        onResizeStop?: (
+          evt: SyntheticEvent,
+          size: ResizeCallbackData['size'],
+          index: number,
+          columnsWidth: number[]
+        ) => void
       })
   | null
 >(null)

diff --git a/packages/ui/table/src/hooks/use-col-width.ts b/packages/ui/table/src/hooks/use-col-width.ts
@@ -221,7 +221,7 @@ export const useColWidth = ({
    * 列宽拖拽 resize，只处理拖拽线两边的列宽度
    */
   const onColumnResizable = React.useCallback(
-    (_, { size }, index: number) => {
+    (evt, { size }, index: number) => {
       const minWidth = minColWidth[index]
       const anotherMinWidth = minColWidth[index + 1]
       let nextWidth = size.width > minWidth ? size.width : minWidth

diff --git a/packages/ui/table/stories/resizable.stories.tsx b/packages/ui/table/stories/resizable.stories.tsx
@@ -13,6 +13,9 @@ export const Resizable = () => {
         <Table
           fixedToColumn={{ left: 'type', right: 'address' }}
           resizable
+          onResizeStop={(e, data, index, columnsWidth) => {
+            console.log('onResizeStop', e, data, index, columnsWidth)
+          }}
           columns={[
             {
               title: '商品名',