From 2736cb19f95585b53d9f5254e39e9138230b2b13 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Fri, 6 Sep 2024 16:17:09 +0800
Subject: [PATCH] feat(table): Add onResize api (#2984)

---
 .changeset/cyan-ads-sparkle.md                  |  5 +++++
 .changeset/sharp-days-repeat.md                 |  5 +++++
 packages/ui/table/src/BaseTable.tsx             |  4 ++--
 packages/ui/table/src/hooks/use-col-width.ts    | 15 +++++++++++++--
 packages/ui/table/src/use-table.ts              | 12 ++++++++++++
 packages/ui/table/stories/resizable.stories.tsx |  3 +++
 6 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/cyan-ads-sparkle.md
 create mode 100644 .changeset/sharp-days-repeat.md

diff --git a/.changeset/cyan-ads-sparkle.md b/.changeset/cyan-ads-sparkle.md
new file mode 100644
index 000000000..eaa209cfe
--- /dev/null
+++ b/.changeset/cyan-ads-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(table): Add onResize api
diff --git a/.changeset/sharp-days-repeat.md b/.changeset/sharp-days-repeat.md
new file mode 100644
index 000000000..6759021fe
--- /dev/null
+++ b/.changeset/sharp-days-repeat.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": minor
+---
+
+feat: Add onResize api
diff --git a/packages/ui/table/src/BaseTable.tsx b/packages/ui/table/src/BaseTable.tsx
index e0fd9845c..2b24bf434 100644
--- a/packages/ui/table/src/BaseTable.tsx
+++ b/packages/ui/table/src/BaseTable.tsx
@@ -17,7 +17,7 @@ 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'
 
 const _role = 'table'
 const _prefix = getPrefixCls('table')
@@ -151,7 +151,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')
         }
diff --git a/packages/ui/table/src/hooks/use-col-width.ts b/packages/ui/table/src/hooks/use-col-width.ts
index 2b7562bda..2af0033c1 100644
--- a/packages/ui/table/src/hooks/use-col-width.ts
+++ b/packages/ui/table/src/hooks/use-col-width.ts
@@ -2,17 +2,25 @@ import React, { useCallback } from 'react'
 import { FlattedTableColumnItemData, TableColumnItem, TableRowRecord } from '../types'
 import { getGroupItemWidth } from '../utils'
 import { useUpdateEffect } from '@hi-ui/use-update-effect'
+import { ResizeCallbackData } from 'react-resizable'
 
 export const useColWidth = ({
   resizable,
   data,
   columns,
   virtual,
+  onResize,
 }: {
   resizable: boolean
   data: TableRowRecord[]
   columns: TableColumnItem[]
   virtual?: boolean
+  onResize?: (
+    e: React.SyntheticEvent,
+    data: ResizeCallbackData,
+    index: number,
+    columnsWidth: number[]
+  ) => void
 }) => {
   const measureRowElementRef = React.useRef<HTMLTableRowElement | null>(null)
   // 是否重新设置过表格每列宽度
@@ -221,7 +229,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
@@ -237,10 +245,13 @@ export const useColWidth = ({
 
         nextColWidths[index] = nextWidth
         nextColWidths[index + 1] = anotherWidth
+
+        onResize?.(evt, size, index, nextColWidths)
+
         return nextColWidths
       })
     },
-    [minColWidth]
+    [minColWidth, onResize]
   )
 
   const getColgroupProps = React.useCallback(
diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts
index 24cbd7f6a..91bd01f7f 100644
--- a/packages/ui/table/src/use-table.ts
+++ b/packages/ui/table/src/use-table.ts
@@ -33,6 +33,7 @@ import {
   FlattedTableRowData,
 } from './types'
 import { SELECTION_DATA_KEY } from './Table'
+import { ResizeCallbackData } from 'react-resizable'
 
 const DEFAULT_COLUMNS = [] as []
 const DEFAULT_DATA = [] as []
@@ -84,6 +85,7 @@ export const useTable = ({
   scrollbar,
   rowClassName,
   cellClassName,
+  onResize,
   ...rootProps
 }: UseTableProps) => {
   /**
@@ -193,6 +195,7 @@ export const useTable = ({
     columns,
     resizable,
     virtual: virtual,
+    onResize,
   })
 
   // ************************ 列冻结 ************************ //
@@ -866,6 +869,15 @@ export interface UseTableProps {
     column: Record<string, any>,
     index: number
   ) => string
+  /**
+   * resizable 模式下，设置列宽变化时触发的回调
+   */
+  onResize?: (
+    e: React.SyntheticEvent,
+    data: ResizeCallbackData,
+    index: number,
+    columnsWidth: number[]
+  ) => void
 }
 
 export type UseTableReturn = ReturnType<typeof useTable>
diff --git a/packages/ui/table/stories/resizable.stories.tsx b/packages/ui/table/stories/resizable.stories.tsx
index a9be2c14f..46f6f1e94 100644
--- 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
+          onResize={(e, data, index, columnsWidth) => {
+            console.log('onResize', e, data, index, columnsWidth)
+          }}
           columns={[
             {
               title: '商品名',