diff --git a/.changeset/fuzzy-radios-know.md b/.changeset/fuzzy-radios-know.md new file mode 100644 index 000000000..793dcb29d --- /dev/null +++ b/.changeset/fuzzy-radios-know.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/table": minor +--- + +feat: 将表格中的交互统一加上回调事件 diff --git a/.changeset/shy-coats-crash.md b/.changeset/shy-coats-crash.md new file mode 100644 index 000000000..335876994 --- /dev/null +++ b/.changeset/shy-coats-crash.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(table): 将表格中的交互统一加上回调事件 diff --git a/packages/ui/table/src/TableColumnMenu.tsx b/packages/ui/table/src/TableColumnMenu.tsx index ab7463734..bf27e3464 100644 --- a/packages/ui/table/src/TableColumnMenu.tsx +++ b/packages/ui/table/src/TableColumnMenu.tsx @@ -33,6 +33,8 @@ export const TableColumnMenu = forwardRef { onHighlightedColChange(column, shouldActive) + const latestHighlightedColKeys = shouldActive + ? [...highlightedColKeys, column.raw.dataKey || ''].filter(Boolean) + : [...highlightedColKeys.filter((keys: string) => keys !== column.raw.dataKey)] + onHighlightedCol?.( + { active: shouldActive, column: column.raw }, + latestHighlightedColKeys + ) menuVisibleAction.off() }} /> diff --git a/packages/ui/table/src/hooks/use-change.ts b/packages/ui/table/src/hooks/use-change.ts new file mode 100644 index 000000000..7b1ecf228 --- /dev/null +++ b/packages/ui/table/src/hooks/use-change.ts @@ -0,0 +1,56 @@ +import { useEffect, useRef } from 'react' +import { TableColumnItem, FlattedTableRowData } from '../types' + +export interface Sorter { + order: string | null + column: TableColumnItem +} + +export interface Action { + sorter?: Sorter +} + +export interface Extra { + action: keyof Action + currentDataSource: object[] +} + +export interface UseChangeProps { + activeSorterColumn: string | null + activeSorterType: string | null + columns: TableColumnItem[] + showData: FlattedTableRowData[] + onChange?: (action: Action, extra: Extra) => void +} + +export const useChange = ({ + activeSorterColumn, + activeSorterType, + columns, + showData, + onChange, +}: UseChangeProps) => { + const changeRef = useRef({ + sort: { activeSorterColumn, activeSorterType }, + }) + + useEffect(() => { + const { sort } = changeRef.current + const sortNotChange = + sort.activeSorterColumn === activeSorterColumn && sort.activeSorterType === activeSorterType + if (sortNotChange) return + const changeObj = { + sorter: { + order: activeSorterType, + column: columns.filter((d) => d.dataKey === activeSorterColumn)[0], + }, + extra: { + action: 'sorter', + currentDataSource: showData.map((d) => d.raw), + } as Extra, + } + onChange?.({ sorter: changeObj.sorter }, changeObj.extra) + sort.activeSorterColumn = activeSorterColumn + sort.activeSorterType = activeSorterType + }, [activeSorterColumn, activeSorterType, columns, showData, onChange]) +} diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts index 24cbd7f6a..344f9bda5 100644 --- a/packages/ui/table/src/use-table.ts +++ b/packages/ui/table/src/use-table.ts @@ -21,6 +21,7 @@ import { PaginationProps } from '@hi-ui/pagination' import { ScrollbarProps } from '@hi-ui/scrollbar' import { parseFixedColumns, setColumnsDefaultWidth } from './utils' import { useAsyncSwitch, useExpand } from './hooks' +import { useChange, Action, Extra } from './hooks/use-change' import { useColWidth } from './hooks/use-col-width' import { useColumns } from './hooks/use-colgroup' import { useTableDrag } from './hooks/use-drag' @@ -84,6 +85,8 @@ export const useTable = ({ scrollbar, rowClassName, cellClassName, + onChange, + onHighlightedCol, ...rootProps }: UseTableProps) => { /** @@ -593,6 +596,13 @@ export const useTable = ({ return _data }, [activeSorterColumn, activeSorterType, transitionData, columns]) + useChange({ + activeSorterColumn, + activeSorterType, + columns, + showData, + onChange, + }) return { measureRowElementRef, rootProps, @@ -676,6 +686,7 @@ export const useTable = ({ scrollbar, rowClassName, cellClassName, + onHighlightedCol, } } @@ -866,6 +877,20 @@ export interface UseTableProps { column: Record, index: number ) => string + /** + * 设置排序变化回调 + */ + onChange?: (action: Action, extra: Extra) => void + /** + * 设置列高亮回调 + */ + onHighlightedCol?: ( + changedColInfo: { + active: boolean + column: TableColumnItem + }, + highlightedColKeys: string[] + ) => void } export type UseTableReturn = ReturnType diff --git a/packages/ui/table/stories/col-menu.stories.tsx b/packages/ui/table/stories/col-menu.stories.tsx index 787012755..4d593dd4f 100644 --- a/packages/ui/table/stories/col-menu.stories.tsx +++ b/packages/ui/table/stories/col-menu.stories.tsx @@ -232,11 +232,25 @@ export const ColMenu = () => { }, ]) + const onHighlightedCol = (changedColInfo, highlightedColKeys) => { + console.log(changedColInfo, highlightedColKeys) + } + + const onChange = (pagination, sorter, extra) => { + console.log(pagination, sorter, extra) + } + return ( <>

ColMenu for Table

- +
) diff --git a/packages/ui/table/stories/data-sorter.stories.tsx b/packages/ui/table/stories/data-sorter.stories.tsx index d060bfbee..a5a06a530 100644 --- a/packages/ui/table/stories/data-sorter.stories.tsx +++ b/packages/ui/table/stories/data-sorter.stories.tsx @@ -232,11 +232,15 @@ export const DataSorter = () => { }, ]) + const onChange = (pagination, sorter, extra) => { + console.log(pagination, sorter, extra) + } + return ( <>

DataSorter for Table

-
+
)