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

.changeset/fuzzy-radios-know.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": minor
+---
+
+feat: 将表格中的交互统一加上回调事件

.changeset/shy-coats-crash.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(table): 将表格中的交互统一加上回调事件

packages/ui/table/src/Table.tsx

@@ -331,6 +331,8 @@ export const Table = forwardRef<HTMLDivElement | null, TableProps>(
           fieldKey={fieldKey}
           virtual={virtual}
           needDoubleTable={needDoubleTable}
+          current={currentPage}
+          pageSize={pageSize}
           extra={{
             header: setting ? (
               <TableSettingMenu

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()
               }}
             />

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])
+}

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
   /**
    * 该列是否支持平均值
    */

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,6 +85,10 @@ export const useTable = ({
   scrollbar,
   rowClassName,
   cellClassName,
+  onChange,
+  onHighlightedCol,
+  current,
+  pageSize,
   ...rootProps
 }: UseTableProps) => {
   /**
@@ -593,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,
@@ -676,6 +692,7 @@ export const useTable = ({
     scrollbar,
     rowClassName,
     cellClassName,
+    onHighlightedCol,
   }
 }
 
@@ -866,6 +883,22 @@ export interface UseTableProps {
     column: Record<string, any>,
     index: number
   ) => string
+  /**
+   * 设置排序及翻页回调
+   */
+  onChange?: (pagination: Ipagination, sorter: ISorter, extra: IExtra) => void
+  /**
+   * 设置列高亮回调
+   */
+  onHighlightedCol?: (
+    changedColInfo: {
+      active: boolean
+      column: TableColumnItem
+    },
+    highlightedColKeys: string[]
+  ) => void
+  current?: number
+  pageSize?: number
 }
 
 export type UseTableReturn = ReturnType<typeof useTable>

packages/ui/table/stories/col-menu.stories.tsx

@@ -230,13 +230,73 @@ 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 onHighlightedCol = (changedColInfo, highlightedColKeys) => {
+    console.log(changedColInfo, 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 (
     <>
       <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={paginationState.data}
+          showColMenu
+          onHighlightedCol={onHighlightedCol}
+          onChange={onChange}
+          pagination={{
+            showTotal: true,
+            pageSize: paginationState.pageSize,
+            pageSizeOptions: [5, 10, 20],
+            onPageSizeChange: (pageSize) => {
+              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),
+              }))
+            },
+          }}
+        />
       </div>
     </>
   )

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>
     </>
   )