feat(table): Add onResize api (#2984)

XiaoMi · Sep 6, 2024 · 2736cb1 · 2736cb1
1 parent 878941f
commit 2736cb1
Show file tree

Hide file tree

Showing 6 changed files with 40 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 onResize 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 onResize api
diff --git 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
@@ -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
@@ -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
@@ -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: '商品名',