diff --git a/.changeset/cyan-ads-sparkle.md b/.changeset/cyan-ads-sparkle.md new file mode 100644 index 000000000..576949b41 --- /dev/null +++ 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 new file mode 100644 index 000000000..639238c48 --- /dev/null +++ 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 index e0fd9845c..908ad3c29 100644 --- 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( emptyContent, virtual, needDoubleTable, + onResizeStop, ...rest }, ref @@ -151,7 +153,7 @@ export const BaseTable = forwardRef( 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( 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 index 1af173175..4639b0b1a 100644 --- a/packages/ui/table/src/TheadContent.tsx +++ b/packages/ui/table/src/TheadContent.tsx @@ -23,6 +23,7 @@ export const TheadContent = forwardRef getStickyColProps, showColMenu, setHeaderTableElement, + onResizeStop, } = useTableContext() const activeColumnKeysAction = useCheckState() @@ -97,6 +98,9 @@ export const TheadContent = forwardRef onResize={(evt, options) => { onColumnResizable(evt, options, colIndex) }} + onResizeStop={(evt, options) => { + onResizeStop?.(evt, options?.size, colIndex, colWidths) + }} > {cell} diff --git a/packages/ui/table/src/context.ts b/packages/ui/table/src/context.ts index 61be15a37..1f8b385c2 100644 --- 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 & @@ -14,6 +15,12 @@ const TableContext = createContext< onRow?: (rowData: Record | 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 index 2b7562bda..704aa484c 100644 --- 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 index a9be2c14f..50dbf4f56 100644 --- a/packages/ui/table/stories/resizable.stories.tsx +++ b/packages/ui/table/stories/resizable.stories.tsx @@ -13,6 +13,9 @@ export const Resizable = () => { { + console.log('onResizeStop', e, data, index, columnsWidth) + }} columns={[ { title: '商品名',