From 0101b04fcaadeb064b0477c002eb59a83d77c703 Mon Sep 17 00:00:00 2001 From: wanjinping Date: Wed, 21 Aug 2024 21:03:58 +0800 Subject: [PATCH 1/2] =?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)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/fuzzy-radios-know.md | 5 +++++ .changeset/shy-coats-crash.md | 5 +++++ packages/ui/table/src/TableAdvancedFilter.tsx | 4 ++++ packages/ui/table/src/TableColumnMenu.tsx | 14 +++++++++++++- packages/ui/table/src/types.ts | 4 ++++ packages/ui/table/src/use-table.ts | 16 ++++++++++++++++ .../ui/table/stories/col-menu.stories.tsx | 19 ++++++++++++++++++- .../ui/table/stories/data-sorter.stories.tsx | 3 +++ 8 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 .changeset/fuzzy-radios-know.md create mode 100644 .changeset/shy-coats-crash.md 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/TableAdvancedFilter.tsx b/packages/ui/table/src/TableAdvancedFilter.tsx index 87805b893..4e8558911 100644 --- a/packages/ui/table/src/TableAdvancedFilter.tsx +++ b/packages/ui/table/src/TableAdvancedFilter.tsx @@ -73,9 +73,11 @@ export const SorterMenu = ({ prefixCls, column }: any) => { if (activeSorterType === 'ascend' && activeSorterColumn === columnKey) { setActiveSorterType(null) setActiveSorterColumn(null) + column.raw.sorterCallback?.(null, column.raw) } else { setActiveSorterType('ascend') setActiveSorterColumn(columnKey) + column.raw.sorterCallback?.('ascend', column.raw) } }} > @@ -90,9 +92,11 @@ export const SorterMenu = ({ prefixCls, column }: any) => { if (activeSorterType === 'descend' && activeSorterColumn === columnKey) { setActiveSorterType(null) setActiveSorterColumn(null) + column.raw.sorterCallback?.(null, column.raw) } else { setActiveSorterType('descend') setActiveSorterColumn(columnKey) + column.raw.sorterCallback?.('descend', column.raw) } }} > diff --git a/packages/ui/table/src/TableColumnMenu.tsx b/packages/ui/table/src/TableColumnMenu.tsx index ab7463734..c3fa9fec8 100644 --- a/packages/ui/table/src/TableColumnMenu.tsx +++ b/packages/ui/table/src/TableColumnMenu.tsx @@ -33,6 +33,9 @@ export const TableColumnMenu = forwardRef} onSwitch={(shouldActive) => { onHighlightedColChange(column, shouldActive) - + const latestHighlightedColKeys = shouldActive + ? [...highlightedColKeys, column.raw.dataKey || ''].filter(Boolean) + : [...highlightedColKeys.filter((keys: string) => keys !== column.raw.dataKey)] + onHighlightedCol?.(shouldActive, column, latestHighlightedColKeys) menuVisibleAction.off() }} /> @@ -123,8 +133,10 @@ export const TableColumnMenu = forwardRef { if (shouldActive) { setLeftFreezeColumn(dataKey) + onLeftFreeze?.(dataKey, columnRaw) } else { setLeftFreezeColumn('') + onLeftFreeze?.('', columnRaw) } menuVisibleAction.off() diff --git a/packages/ui/table/src/types.ts b/packages/ui/table/src/types.ts index 01201cec6..c80e2e6f0 100644 --- a/packages/ui/table/src/types.ts +++ b/packages/ui/table/src/types.ts @@ -128,6 +128,10 @@ export type TableColumnItem = { * 列排序函数 */ sorter?: (a: any, b: any) => number + /** + * 列排序回调函数 + */ + sorterCallback?: (sorterType: string | null, column: TableColumnItem) => void /** * 该列是否支持平均值 */ diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts index 24cbd7f6a..d2625e309 100644 --- a/packages/ui/table/src/use-table.ts +++ b/packages/ui/table/src/use-table.ts @@ -84,6 +84,8 @@ export const useTable = ({ scrollbar, rowClassName, cellClassName, + onLeftFreeze, + onHighlightedCol, ...rootProps }: UseTableProps) => { /** @@ -676,6 +678,8 @@ export const useTable = ({ scrollbar, rowClassName, cellClassName, + onLeftFreeze, + onHighlightedCol, } } @@ -866,6 +870,18 @@ export interface UseTableProps { column: Record, index: number ) => string + /** + * 设置左冻结回调 + */ + onLeftFreeze?: (dataKey: string, column: TableColumnItem) => void + /** + * 设置列高亮回调 + */ + onHighlightedCol?: ( + 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..157df79f9 100644 --- a/packages/ui/table/stories/col-menu.stories.tsx +++ b/packages/ui/table/stories/col-menu.stories.tsx @@ -20,6 +20,9 @@ export const ColMenu = () => { sorter(pre, next) { return pre.raw.age - next.raw.age }, + sorterCallback(sorterType, column) { + console.log(sorterType, column) + }, }, { title: 'Home phone', @@ -232,11 +235,25 @@ export const ColMenu = () => { }, ]) + const onLeftFreeze = (leftFreeze, column) => { + console.log(leftFreeze, column) + } + + const onHighlightedCol = (highlightedCol, column, highlightedColKeys) => { + console.log(highlightedCol, column, highlightedColKeys) + } + 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..6a90e9601 100644 --- a/packages/ui/table/stories/data-sorter.stories.tsx +++ b/packages/ui/table/stories/data-sorter.stories.tsx @@ -20,6 +20,9 @@ export const DataSorter = () => { sorter(pre, next) { return pre.raw.age - next.raw.age }, + sorterCallback(sorterType, sorterColumn) { + console.log(sorterType, sorterColumn) + }, }, { title: 'Home phone', From da77e87afc035c82420d42f2cd48d6940fd2726c Mon Sep 17 00:00:00 2001 From: wanjinping Date: Sun, 25 Aug 2024 21:15:33 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(table):=20=E6=8E=92=E5=BA=8F=E4=B8=8E?= =?UTF-8?q?=E5=88=86=E9=A1=B5=E5=90=88=E5=B9=B6=E4=B8=BAonChange(#2977)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/table/src/Table.tsx | 2 + packages/ui/table/src/TableAdvancedFilter.tsx | 4 - packages/ui/table/src/TableColumnMenu.tsx | 13 +-- packages/ui/table/src/hooks/use-change.ts | 98 +++++++++++++++++++ packages/ui/table/src/use-table.ts | 29 ++++-- .../ui/table/stories/col-menu.stories.tsx | 61 ++++++++++-- .../ui/table/stories/data-sorter.stories.tsx | 9 +- 7 files changed, 185 insertions(+), 31 deletions(-) create mode 100644 packages/ui/table/src/hooks/use-change.ts diff --git a/packages/ui/table/src/Table.tsx b/packages/ui/table/src/Table.tsx index dcd34c833..ffe40668d 100644 --- a/packages/ui/table/src/Table.tsx +++ b/packages/ui/table/src/Table.tsx @@ -331,6 +331,8 @@ export const Table = forwardRef( fieldKey={fieldKey} virtual={virtual} needDoubleTable={needDoubleTable} + current={currentPage} + pageSize={pageSize} extra={{ header: setting ? ( { if (activeSorterType === 'ascend' && activeSorterColumn === columnKey) { setActiveSorterType(null) setActiveSorterColumn(null) - column.raw.sorterCallback?.(null, column.raw) } else { setActiveSorterType('ascend') setActiveSorterColumn(columnKey) - column.raw.sorterCallback?.('ascend', column.raw) } }} > @@ -92,11 +90,9 @@ export const SorterMenu = ({ prefixCls, column }: any) => { if (activeSorterType === 'descend' && activeSorterColumn === columnKey) { setActiveSorterType(null) setActiveSorterColumn(null) - column.raw.sorterCallback?.(null, column.raw) } else { setActiveSorterType('descend') setActiveSorterColumn(columnKey) - column.raw.sorterCallback?.('descend', column.raw) } }} > diff --git a/packages/ui/table/src/TableColumnMenu.tsx b/packages/ui/table/src/TableColumnMenu.tsx index c3fa9fec8..bf27e3464 100644 --- a/packages/ui/table/src/TableColumnMenu.tsx +++ b/packages/ui/table/src/TableColumnMenu.tsx @@ -34,7 +34,6 @@ export const TableColumnMenu = forwardRef} onSwitch={(shouldActive) => { onHighlightedColChange(column, shouldActive) + const latestHighlightedColKeys = shouldActive ? [...highlightedColKeys, column.raw.dataKey || ''].filter(Boolean) : [...highlightedColKeys.filter((keys: string) => keys !== column.raw.dataKey)] - onHighlightedCol?.(shouldActive, column, latestHighlightedColKeys) + onHighlightedCol?.( + { active: shouldActive, column: column.raw }, + latestHighlightedColKeys + ) menuVisibleAction.off() }} /> @@ -133,10 +132,8 @@ export const TableColumnMenu = forwardRef { if (shouldActive) { setLeftFreezeColumn(dataKey) - onLeftFreeze?.(dataKey, columnRaw) } else { setLeftFreezeColumn('') - onLeftFreeze?.('', columnRaw) } 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..5c3d73625 --- /dev/null +++ b/packages/ui/table/src/hooks/use-change.ts @@ -0,0 +1,98 @@ +import { useEffect, useRef } from 'react' +import { TableColumnItem, FlattedTableRowData } from '../types' +export interface Ipagination { + current: number | undefined + pageSize: number | undefined +} +export interface ISorter { + order: string | null + column: TableColumnItem +} +export interface IExtra { + action: string + currentDataSource: object[] +} +export interface UseChangeProps { + activeSorterColumn: string | null + activeSorterType: string | null + current: number | undefined + pageSize: number | undefined + columns: TableColumnItem[] + showData: FlattedTableRowData[] + data: object[] + transitionData: FlattedTableRowData[] + onChange?: (pagination: Ipagination, sorter: ISorter, extra: IExtra) => void +} + +export const useChange = (props: UseChangeProps) => { + const { + activeSorterColumn, + activeSorterType, + current, + pageSize, + columns, + showData, + data, + transitionData, + onChange, + } = props + + const changeRef = useRef({ + sort: { activeSorterColumn, activeSorterType }, + pagination: { current, pageSize }, + showData: showData, + paginationCanChange: false, + paginationDataChange: false, + timer: 0, + }) + changeRef.current.showData = showData + + useEffect(() => { + if (changeRef.current.paginationCanChange) { + changeRef.current.paginationDataChange = true + } + }, [transitionData]) + + useEffect(() => { + const { sort, pagination, paginationCanChange, paginationDataChange, timer } = changeRef.current + const sortNotChange = + sort.activeSorterColumn === activeSorterColumn && sort.activeSorterType === activeSorterType + const paginationNotChange = pagination.current === current && pagination.pageSize === pageSize + if (sortNotChange && paginationNotChange && !paginationCanChange) return + const changeObj = { + pagination: { current, pageSize }, + sorter: { + order: activeSorterType, + column: columns.filter((d) => d.dataKey === activeSorterColumn)[0], + }, + extra: { + action: 'sort', + currentDataSource: showData.map((d) => d.raw), + }, + } + if (paginationCanChange && paginationDataChange) { + changeObj.extra.action = 'paginate' + onChange?.(changeObj.pagination, changeObj.sorter, changeObj.extra) + changeRef.current.paginationCanChange = false + changeRef.current.paginationDataChange = false + clearTimeout(timer) + } + if (!sortNotChange) { + onChange?.(changeObj.pagination, changeObj.sorter, changeObj.extra) + } else if (!paginationNotChange) { + changeObj.extra.action = 'paginate' + changeRef.current.paginationCanChange = true + + changeRef.current.timer = window.setTimeout(() => { + changeObj.extra.currentDataSource = changeRef.current.showData.map((d) => d.raw) + onChange?.(changeObj.pagination, changeObj.sorter, changeObj.extra) + changeRef.current.paginationCanChange = false + changeRef.current.paginationDataChange = false + }, 100) + } + sort.activeSorterColumn = activeSorterColumn + sort.activeSorterType = activeSorterType + pagination.current = current + pagination.pageSize = pageSize + }, [activeSorterColumn, activeSorterType, current, pageSize, columns, showData, data, onChange]) +} diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts index d2625e309..0379a4b7f 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, Ipagination, ISorter, IExtra } from './hooks/use-change' import { useColWidth } from './hooks/use-col-width' import { useColumns } from './hooks/use-colgroup' import { useTableDrag } from './hooks/use-drag' @@ -84,8 +85,10 @@ export const useTable = ({ scrollbar, rowClassName, cellClassName, - onLeftFreeze, + onChange, onHighlightedCol, + current, + pageSize, ...rootProps }: UseTableProps) => { /** @@ -595,6 +598,17 @@ export const useTable = ({ return _data }, [activeSorterColumn, activeSorterType, transitionData, columns]) + useChange({ + activeSorterColumn, + activeSorterType, + current, + pageSize, + columns, + showData, + data, + transitionData, + onChange, + }) return { measureRowElementRef, rootProps, @@ -678,7 +692,6 @@ export const useTable = ({ scrollbar, rowClassName, cellClassName, - onLeftFreeze, onHighlightedCol, } } @@ -871,17 +884,21 @@ export interface UseTableProps { index: number ) => string /** - * 设置左冻结回调 + * 设置排序及翻页回调 */ - onLeftFreeze?: (dataKey: string, column: TableColumnItem) => void + onChange?: (pagination: Ipagination, sorter: ISorter, extra: IExtra) => void /** * 设置列高亮回调 */ onHighlightedCol?: ( - active: boolean, - column: TableColumnItem, + changedColInfo: { + active: boolean + column: TableColumnItem + }, highlightedColKeys: string[] ) => void + current?: number + pageSize?: number } 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 157df79f9..e93c35af0 100644 --- a/packages/ui/table/stories/col-menu.stories.tsx +++ b/packages/ui/table/stories/col-menu.stories.tsx @@ -20,9 +20,6 @@ export const ColMenu = () => { sorter(pre, next) { return pre.raw.age - next.raw.age }, - sorterCallback(sorterType, column) { - console.log(sorterType, column) - }, }, { title: 'Home phone', @@ -233,26 +230,72 @@ export const ColMenu = () => { phone: 18900010002, address: 'Dublin No. 2 Lake Park', }, + { + key: '6', + name: 'Jake White2', + age: 22, + tel1: '0571-22098909', + tel2: '0571-22098909', + tel3: '0571-22098909', + tel4: '0571-22098909', + tel5: '0571-22098909', + tel6: '0571-22098909', + tel: '0575-22098909', + tel7: '0571-22098909', + tel8: '0571-22098909', + tel9: '0571-22098909', + tel10: '0571-22098909', + tel11: '0571-22098909', + tel12: '0571-22098909', + phone: 18900010002, + address: 'Dublin No. 2 Lake Park', + }, ]) - const onLeftFreeze = (leftFreeze, column) => { - console.log(leftFreeze, column) + const onHighlightedCol = (changedColInfo, highlightedColKeys) => { + console.log(changedColInfo, highlightedColKeys) } - const onHighlightedCol = (highlightedCol, column, highlightedColKeys) => { - console.log(highlightedCol, column, highlightedColKeys) + const onChange = (pagination, sorter, extra) => { + console.log(pagination, sorter, extra) } + const [paginationState, setPaginationState] = React.useState({ + current: 1, + data: data.slice(0, 5), + pageSize: 5, + }) + return ( <>

ColMenu for Table

{ + setPaginationState((prev) => ({ + ...prev, + pageSize, + })) + }, + total: data.length, + current: paginationState.current, + onChange: (page, pre, size = 5) => { + setPaginationState((prev) => ({ + ...prev, + current: page, + data: data.slice(size * (page - 1), size * page), + })) + }, + }} /> diff --git a/packages/ui/table/stories/data-sorter.stories.tsx b/packages/ui/table/stories/data-sorter.stories.tsx index 6a90e9601..a5a06a530 100644 --- a/packages/ui/table/stories/data-sorter.stories.tsx +++ b/packages/ui/table/stories/data-sorter.stories.tsx @@ -20,9 +20,6 @@ export const DataSorter = () => { sorter(pre, next) { return pre.raw.age - next.raw.age }, - sorterCallback(sorterType, sorterColumn) { - console.log(sorterType, sorterColumn) - }, }, { title: 'Home phone', @@ -235,11 +232,15 @@ export const DataSorter = () => { }, ]) + const onChange = (pagination, sorter, extra) => { + console.log(pagination, sorter, extra) + } + return ( <>

DataSorter for Table

-
+
)