From f807f7ddae07184a0584e16d017a3d9f5785d4b8 Mon Sep 17 00:00:00 2001 From: fcppddl <112799728+fcppddl@users.noreply.github.com> Date: Wed, 6 Nov 2024 19:39:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(table):=20=E5=B0=86=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E4=B8=AD=E7=9A=84=E4=BA=A4=E4=BA=92=E7=BB=9F=E4=B8=80=E5=8A=A0?= =?UTF-8?q?=E4=B8=8A=E5=9B=9E=E8=B0=83=E4=BA=8B=E4=BB=B6=20(#2977)=20(#297?= =?UTF-8?q?8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(table): 将表格中的交互统一加上回调事件 (#2977) * feat(table): 排序与分页合并为onChange(#2977) * fix: 修改错误 * fix: 修改 * chore: 代码格式 --------- Co-authored-by: wanjinping --- .changeset/fuzzy-radios-know.md | 5 ++ .changeset/shy-coats-crash.md | 5 ++ packages/ui/table/src/TableColumnMenu.tsx | 9 +++ packages/ui/table/src/hooks/use-change.ts | 56 +++++++++++++++++++ packages/ui/table/src/use-table.ts | 25 +++++++++ .../ui/table/stories/col-menu.stories.tsx | 16 +++++- .../ui/table/stories/data-sorter.stories.tsx | 6 +- 7 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 .changeset/fuzzy-radios-know.md create mode 100644 .changeset/shy-coats-crash.md create mode 100644 packages/ui/table/src/hooks/use-change.ts 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 40cf1295b..805e1dd07 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, } } @@ -879,6 +890,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

-
+
)