feat(table): 将表格中的交互统一加上回调事件 (#2977) (#2978)

* feat(table): 将表格中的交互统一加上回调事件 (#2977) * feat(table): 排序与分页合并为onChange(#2977) * fix: 修改错误 * fix: 修改 * chore: 代码格式 --------- Co-authored-by: wanjinping <[email protected]>
XiaoMi · Nov 6, 2024 · f807f7d · f807f7d
1 parent 2f9f62f
commit f807f7d
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 2 deletions.
diff --git a/.changeset/fuzzy-radios-know.md 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
@@ -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
@@ -33,6 +33,8 @@ export const TableColumnMenu = forwardRef<HTMLDivElement | null, TableColumnMenu
       setLeftFreezeColumn,
       isHighlightedCol,
       onHighlightedColChange,
+      highlightedColKeys,
+      onHighlightedCol,
     } = useTableContext()
 
     const { id: dataKey, raw: columnRaw } = column
@@ -111,6 +113,13 @@ export const TableColumnMenu = forwardRef<HTMLDivElement | null, TableColumnMenu
               onSwitch={(shouldActive) => {
                 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
@@ -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
@@ -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<string, any>,
     index: number
   ) => string
+  /**
+   * 设置排序变化回调
+   */
+  onChange?: (action: Action, extra: Extra) => void
+  /**
+   * 设置列高亮回调
+   */
+  onHighlightedCol?: (
+    changedColInfo: {
+      active: boolean
+      column: TableColumnItem
+    },
+    highlightedColKeys: string[]
+  ) => void
 }
 
 export type UseTableReturn = ReturnType<typeof useTable>
diff --git 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 (
     <>
       <h1>ColMenu for Table</h1>
       <div className="table-col-menu__wrap" style={{ minWidth: 660, background: '#fff' }}>
-        <Table columns={columns} data={data} showColMenu />
+        <Table
+          columns={columns}
+          data={data}
+          showColMenu
+          onHighlightedCol={onHighlightedCol}
+          onChange={onChange}
+        />
       </div>
     </>
   )

diff --git 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 (
     <>
       <h1>DataSorter for Table</h1>
       <div className="table-data-sorter__wrap" style={{ minWidth: 660, background: '#fff' }}>
-        <Table columns={columns} data={data} />
+        <Table columns={columns} data={data} onChange={onChange} />
       </div>
     </>
   )