From 1be5c77469cdc09dc671d861cfa35e4a5f8debe2 Mon Sep 17 00:00:00 2001 From: yunfeic Date: Thu, 27 Jan 2022 17:25:21 +0800 Subject: [PATCH] =?UTF-8?q?feat(table):=20=E8=A1=A8=E6=A0=BC=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E6=A0=91=E5=BD=A2=E8=A1=8C=E9=80=89=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/table/_example/tree-select.jsx | 144 +++++++++++++++++ src/table/base/Table.tsx | 12 +- src/table/base/TableBody.tsx | 10 +- src/table/base/TableCell.tsx | 12 +- src/table/base/TableContext.tsx | 8 +- src/table/enhanced/Table.tsx | 8 +- src/table/enhanced/TableContext.tsx | 11 +- src/table/enhanced/useTree.tsx | 51 ++++-- src/table/primary/useSelect.tsx | 242 +++++++++++++++++++++++----- 9 files changed, 429 insertions(+), 69 deletions(-) create mode 100644 src/table/_example/tree-select.jsx diff --git a/src/table/_example/tree-select.jsx b/src/table/_example/tree-select.jsx new file mode 100644 index 0000000000..33cc952527 --- /dev/null +++ b/src/table/_example/tree-select.jsx @@ -0,0 +1,144 @@ +import React, { useState } from 'react'; +import { EnhancedTable, Radio } from 'tdesign-react'; + +const columns = [ + { + colKey: 'row-select', + type: 'multiple', + disabled: ({ row }) => row.instance === 'JQTest2', + width: 50, + }, + { colKey: 'instance', title: '集群名称', width: 150 }, + { + colKey: 'status', + title: '状态', + width: 100, + cell({ row }) { + switch (row?.status) { + case 0: + return

健康

; + case 1: + return

异常

; + default: + return null; + } + }, + }, + { colKey: 'owner', title: '管理员' }, + { colKey: 'description', title: '描述' }, +]; +const initData = [ + { + id: 1, + instance: 'JQTest1', + status: 0, + owner: 'jenny;peter', + description: 'test', + }, + { + id: '2', + instance: 'JQTest2', + status: 1, + owner: 'jenny', + description: 'test', + }, + { + id: 3, + instance: 'JQTest3', + status: 0, + owner: 'jenny', + description: 'test', + children: [ + { + id: '3-1', + instance: 'JQTest3-1', + status: 1, + owner: 'jenny', + description: 'test', + children: [ + { + id: '3-1-1', + instance: 'JQTest3-1-1', + status: 1, + owner: 'jenny', + description: 'test', + }, + { + id: '3-1-2', + instance: 'JQTest3-1-2', + status: 1, + owner: 'jenny', + description: 'test', + }, + ], + }, + { + id: '3-2', + instance: 'JQTest3-2', + status: 1, + owner: 'jenny', + description: 'test', + }, + ], + }, + { + id: 4, + instance: 'JQTest4', + status: 1, + owner: 'peter', + description: 'test', + }, + { + id: 5, + instance: 'JQTest5', + status: 1, + owner: 'peter', + description: 'test', + children: [ + { + id: '5-1', + instance: 'JQTest5-1', + status: 1, + owner: 'jenny', + description: 'test', + }, + ], + }, + { + id: 6, + instance: 'JQTest6', + status: 1, + owner: 'peter', + description: 'test', + }, +]; + +export default function TableSingleSort() { + const [data] = useState([...initData]); + const [selectedRowKeys, setSelectedRowKeys] = useState([1, '2']); + const [checkStrictly, setCheckStrictly] = useState(true); + + function onSelectChange(value, selectOptions) { + console.log('onSelectChange', value, selectOptions); + setSelectedRowKeys(value); + } + + return ( +
+ + 父子行选中独立 + 父子行选中关联 + + + +
+ ); +} diff --git a/src/table/base/Table.tsx b/src/table/base/Table.tsx index 429e0d1d53..26d157c68a 100644 --- a/src/table/base/Table.tsx +++ b/src/table/base/Table.tsx @@ -18,6 +18,7 @@ import { TableContextProvider } from './TableContext'; import { TableColGroup } from './TableColGroup'; import TableFooter from './TableFooter'; import Loading from '../../loading'; +import { useEnhancedTableContext } from '../enhanced/TableContext'; export interface ExpandInnerProps { handleExpandChange?: Function; @@ -116,7 +117,6 @@ export default function BaseTable(props: BaseTabl // ==================== 固定表头、固定列 ==================== const [scrollBarWidth, setScrollBarWidth] = useState(0); const fixedHeader = height > 0 || maxHeight > 0; - const table = useMemo(() => ({ fixedHeader, flattenColumns }), [fixedHeader, flattenColumns]); const hasFixedColumns = columns.some(({ fixed }) => ['left', 'right'].includes(fixed)); const scrollHeaderRef = useRef(); const scrollBodyRef = useRef(); @@ -126,6 +126,14 @@ export default function BaseTable(props: BaseTabl const [scrollableToRight, setScrollableToRight] = useState(false); const [isHasScrollbar, setIsHasScrollbar] = useState(false); + // ==================== Context ==================== + const { useFlattenData } = useEnhancedTableContext(); + const flattenData = useFlattenData?.(pageData); + const tableContextValue = useMemo( + () => ({ fixedHeader, flattenColumns, flattenData, pageData }), + [fixedHeader, flattenColumns, flattenData, pageData], + ); + useLayoutEffect(() => { if (fixedHeader) { setStateScrollBarWidth(); @@ -314,7 +322,7 @@ export default function BaseTable(props: BaseTabl )} style={style} > - + { + const rows = flattenDataVisible.map((row, index) => { const rowKeyValue = get(row, rowKey) || index; return ( diff --git a/src/table/base/TableCell.tsx b/src/table/base/TableCell.tsx index 8b1213ea7c..32bfda3a93 100644 --- a/src/table/base/TableCell.tsx +++ b/src/table/base/TableCell.tsx @@ -38,7 +38,7 @@ const TableCell = (props: PropsWithChildren>) = } = props; const { classPrefix } = useConfig(); - const { flattenColumns } = useTableContext(); + const { flattenColumns, flattenData, pageData } = useTableContext(); const [offset, setOffset] = useState(0); const [isBoundary, setIsBoundary] = useState(false); @@ -63,7 +63,15 @@ const TableCell = (props: PropsWithChildren>) = } }, [ref, flattenColumns, colKey, fixed]); - const cellNode = customRender({ type, row: record, rowIndex, col: columns?.[colIndex], colIndex }); + const cellNode = customRender({ + type, + row: record, + rowIndex, + col: columns?.[colIndex], + colIndex, + flattenData, + pageData, + }); // ==================== styles ==================== const cellStyle = { ...style }; diff --git a/src/table/base/TableContext.tsx b/src/table/base/TableContext.tsx index 81565641ef..559f93eb4a 100644 --- a/src/table/base/TableContext.tsx +++ b/src/table/base/TableContext.tsx @@ -1,5 +1,7 @@ import { createContext, useContext } from 'react'; -import { BaseTableCol } from '../type'; +import { BaseTableCol, TdBaseTableProps } from '../type'; + +type Data = TdBaseTableProps['data']; export interface TableContextValue { /** @@ -10,11 +12,15 @@ export interface TableContextValue { * 扁平后的Columns */ flattenColumns: BaseTableCol[]; + flattenData: Data; + pageData: Data; } export const TableContext = createContext({ fixedHeader: false, flattenColumns: [], + flattenData: [], + pageData: [], }); export const useTableContext = () => useContext(TableContext); diff --git a/src/table/enhanced/Table.tsx b/src/table/enhanced/Table.tsx index 2c2d7121f2..571f616b5c 100644 --- a/src/table/enhanced/Table.tsx +++ b/src/table/enhanced/Table.tsx @@ -7,14 +7,18 @@ import { EnhancedTableContextProvider } from './TableContext'; export type EnhancedTableProps = TdEnhancedTableProps & TdPrimaryTableProps; export default function EnhancedTable(props: EnhancedTableProps) { - const [treeColumns, useTreeData] = useTree(props); + const { treeColumns, useFlattenData, useFlattenRowData, getFlattenPageData } = useTree(props); const mergeColumns = treeColumns; return ( diff --git a/src/table/enhanced/TableContext.tsx b/src/table/enhanced/TableContext.tsx index 1b44ab1eba..16d189e331 100644 --- a/src/table/enhanced/TableContext.tsx +++ b/src/table/enhanced/TableContext.tsx @@ -1,11 +1,18 @@ import { createContext, useContext } from 'react'; export interface EnhancedTableContextValue { - useTreeData?: any; + useFlattenData?: Function; + useFlattenRowData?: Function; + getFlattenPageData?: Function; + checkStrictly?: undefined | boolean; + childrenKey?: string; [k: string]: any; } -export const EnhancedTableContext = createContext({}); +export const EnhancedTableContext = createContext({ + checkStrictly: true, + childrenKey: 'children', +}); export const useEnhancedTableContext = () => useContext(EnhancedTableContext); export const EnhancedTableContextProvider = EnhancedTableContext.Provider; diff --git a/src/table/enhanced/useTree.tsx b/src/table/enhanced/useTree.tsx index dc5f72d865..bfc73509d6 100644 --- a/src/table/enhanced/useTree.tsx +++ b/src/table/enhanced/useTree.tsx @@ -11,8 +11,15 @@ type Data = TdPrimaryTableProps['data']; type CellParams = PrimaryTableRenderParams; type Column = PrimaryTableCol; -function useTree(props: EnhancedTableProps): [Columns, Function] { - const { columns, tree, rowKey } = props; +interface UseTreeResult { + treeColumns: Columns; + useFlattenData: Function; + useFlattenRowData: Function; + getFlattenPageData: Function; +} + +function useTree(props: EnhancedTableProps): UseTreeResult { + const { columns, tree, rowKey, data } = props; const { classPrefix } = useContext(ConfigContext); const childrenKey = tree?.childrenKey || 'children'; const indent = tree?.indent || 24; @@ -21,25 +28,43 @@ function useTree(props: EnhancedTableProps): [Columns, Function] { const mergedExpandedKeys = React.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]); const treeNodeColumnIndex = getTreeNodeColumnIndex(); - const transformedTreeColumns = getTreeColumns(columns); + const treeColumns = getTreeColumns(columns); + + function useFlattenData(pageData) { + const flattenData = useMemo(() => flatVisibleData(pageData), [pageData]); + return flattenData; + } + + function useFlattenRowData(needFlat) { + return needFlat ? flatData(data) : data; + } + + function getFlattenPageData(pageData) { + return flatData(pageData, 0, true); + } - function useTreeData(pageData) { - const expandedData = useMemo(() => flattenData(pageData), [pageData]); - return expandedData; + function flatData(data: Data, level = 0, needParentRowKey?, parentRowKey?): Data { + const flattenData = []; + data?.forEach((row) => { + flattenData.push({ ...row, level, parentRowKey }); + const childrenNodes = get(row, childrenKey); + flattenData.push(...flatData(childrenNodes, level + 1, needParentRowKey, row[rowKey])); + }); + return flattenData; } - function flattenData(data: Data, level = 0): Data { - const flatData = []; - data.forEach((row) => { - flatData.push({ ...row, level }); + function flatVisibleData(data: Data, level = 0, parentRowKey?): Data { + const flattenData = []; + data?.forEach((row) => { + flattenData.push({ ...row, level, parentRowKey }); const childrenNodes = get(row, childrenKey); const rowValue = get(row, rowKey); const needExpand = Array.isArray(childrenNodes) && childrenNodes.length && mergedExpandedKeys.has(rowValue); if (needExpand) { - flatData.push(...flattenData(childrenNodes, level + 1)); + flattenData.push(...flatVisibleData(childrenNodes, level + 1, rowValue)); } }); - return flatData; + return flattenData; } function getTreeNodeColumnIndex() { @@ -121,7 +146,7 @@ function useTree(props: EnhancedTableProps): [Columns, Function] { return get(cellParams.row, colKey); } - return [transformedTreeColumns, useTreeData]; + return { treeColumns, useFlattenData, useFlattenRowData, getFlattenPageData }; } export default useTree; diff --git a/src/table/primary/useSelect.tsx b/src/table/primary/useSelect.tsx index d038e2b6ce..3d36970fd5 100644 --- a/src/table/primary/useSelect.tsx +++ b/src/table/primary/useSelect.tsx @@ -2,12 +2,14 @@ import React, { useContext, useEffect, useState } from 'react'; import classnames from 'classnames'; import isFunction from 'lodash/isFunction'; import { ConfigContext } from '../../config-provider'; -import { PrimaryTableCol, DataType } from '../type'; +import { PrimaryTableCol, DataType, PrimaryTableRenderParams, SelectOptions, TableRowData } from '../type'; import { PrimaryTableProps } from './Table'; import { Checkbox } from '../../checkbox'; import { Radio } from '../../radio'; +import { useEnhancedTableContext } from '../enhanced/TableContext'; type SelectType = PrimaryTableCol['type']; +type CellParams = PrimaryTableRenderParams; const TypeEnum: { [key in SelectType]: SelectType } = { single: 'single', @@ -21,9 +23,11 @@ const defaultWidth = 50; function useSelect(props: PrimaryTableProps): [PrimaryTableCol[]] { const { classPrefix } = useContext(ConfigContext); const { columns, data, rowKey, defaultSelectedRowKeys, selectedRowKeys, onSelectChange } = props; + const { checkStrictly, childrenKey = 'children', useFlattenRowData, getFlattenPageData } = useEnhancedTableContext(); const isControlled = !!selectedRowKeys; const [innerSelectedRowKeys, setInnerSelectedRowKeys] = useState(defaultSelectedRowKeys || []); const selectColumn = columns.find((column: PrimaryTableCol) => !!TypeEnum[column.type]); + const flattenRowData = useFlattenRowData?.(!!selectColumn) || data; useEffect(() => { if (isControlled) { @@ -34,8 +38,8 @@ function useSelect(props: PrimaryTableProps): [PrimaryTableCol[]] { if (!selectColumn) { return [columns]; } + const disabledFn = getDisableFn({ selectColumn }); - const titleCheckboxProps = getTitleCheckboxProps({ data, disabledFn, innerSelectedRowKeys, selectColumn, TypeEnum }); const transformedColumns = columns.map((column: PrimaryTableCol) => { const { type, className, width } = column; @@ -43,42 +47,53 @@ function useSelect(props: PrimaryTableProps): [PrimaryTableCol[]] { return column; } - let title: PrimaryTableCol['title']; + let title; let cell: PrimaryTableCol['cell']; const isMultiple = type === TypeEnum.multiple; if (isMultiple) { - title = () => { + title = ({ pageData }) => { + const flattenPageData = getFlattenPageData?.(pageData) || pageData; + const titleCheckboxProps = getTitleCheckboxProps({ + data: flattenPageData, + disabledFn, + innerSelectedRowKeys, + }); const { indeterminate, checked, disabled } = titleCheckboxProps; return ( onTitleCheckboxChange(checked)} + onChange={(checked) => onTitleCheckboxChange({ flattenPageData, checked })} /> ); }; - cell = (options) => { - const { row } = options; - const currentRowKeyValue = row[rowKey]; - const checked = innerSelectedRowKeys.includes(currentRowKeyValue); - const disabled = disabledFn(options); + cell = (cellParams: CellParams) => { + const { checked, disabled, indeterminate } = getCellCheckboxProps({ + cellParams, + disabledFn, + innerSelectedRowKeys, + rowKey, + checkStrictly, + }); return ( onRowCheckboxChange(currentRowKeyValue, row, checked)} + indeterminate={indeterminate} + onChange={(checked) => onRowCheckboxChange({ cellParams, checked, checkStrictly, rowKey })} /> ); }; } else { - cell = (options) => { - const { row } = options; - const currentRowKeyValue = row[rowKey]; - const checked = innerSelectedRowKeys.includes(currentRowKeyValue); - const disabled = disabledFn(options); - + cell = (cellParams: CellParams) => { + const { checked, disabled, currentRowKeyValue, row } = getCellRadioProps({ + cellParams, + disabledFn, + innerSelectedRowKeys, + rowKey, + }); return onRadioChange(currentRowKeyValue, row)} />; }; } @@ -93,15 +108,58 @@ function useSelect(props: PrimaryTableProps): [PrimaryTableCol[]] { }; }); - function getTitleCheckboxProps({ data, disabledFn, innerSelectedRowKeys, selectColumn, TypeEnum }) { - if (selectColumn.type !== TypeEnum.multiple) { - return { - checked: false, - indeterminate: false, - disabled: false, - }; + function getCellCheckboxProps({ cellParams, disabledFn, innerSelectedRowKeys, rowKey, checkStrictly }) { + const { row } = cellParams; + const currentRowKeyValue = row[rowKey]; + const checked = innerSelectedRowKeys.includes(currentRowKeyValue); + const disabled = disabledFn(cellParams); + let indeterminate = false; + + if (checkStrictly === false) { + // 当前row是否包含children，有，且后代有部分选中，为半选 + indeterminate = getCellCheckboxIndeterminate(row, rowKey, innerSelectedRowKeys); } + return { + checked, + disabled, + currentRowKeyValue, + row, + indeterminate, + }; + } + + function getCellCheckboxIndeterminate(row, rowKey, selectedRowKeys) { + const children = row[childrenKey]; + if (!children || !children.length) return; + + let selectedChildrenRowKeysCount = 0; + children.forEach((rowItem) => { + const isSelectedRowKeysHasChildrenRowKeys = selectedRowKeys.includes(rowItem[rowKey]); + if (isSelectedRowKeysHasChildrenRowKeys) { + selectedChildrenRowKeysCount += 1; + } + }); + + const indeterminate = selectedChildrenRowKeysCount && selectedChildrenRowKeysCount < children.length; + return indeterminate; + } + + function getCellRadioProps({ cellParams, disabledFn, innerSelectedRowKeys, rowKey }) { + const { row } = cellParams; + const currentRowKeyValue = row[rowKey]; + const checked = innerSelectedRowKeys.includes(currentRowKeyValue); + const disabled = disabledFn(cellParams); + + return { + checked, + disabled, + currentRowKeyValue, + row, + }; + } + + function getTitleCheckboxProps({ data, disabledFn, innerSelectedRowKeys }) { const { rowKeysExcludeDisabled, isDisabledAll } = getRowKeysExcludeDisabledAndIsDisabledAll({ data, disabledFn, @@ -163,45 +221,123 @@ function useSelect(props: PrimaryTableProps): [PrimaryTableCol[]] { }; } - function onTitleCheckboxChange(checked: boolean) { - const selectedRowData = []; + function onTitleCheckboxChange({ flattenPageData, checked }) { + let selectedRowKeysNew = []; + if (checked) { - data.forEach((dataItem, index) => { - const isDisabled = disabledFn({ rowIndex: index, row: dataItem }); - const isChecked = innerSelectedRowKeys.includes(dataItem[rowKey]); - if (!isDisabled || isChecked) { - selectedRowData.push(dataItem); + flattenPageData.forEach((rowItem, index) => { + const isDisabled = disabledFn({ rowIndex: index, row: rowItem }); + const currentRowKeyValue = rowItem[rowKey]; + const isChecked = innerSelectedRowKeys.includes(currentRowKeyValue); + if (!isDisabled && !isChecked) { + selectedRowKeysNew.push(currentRowKeyValue); } }); + selectedRowKeysNew = [...innerSelectedRowKeys, ...selectedRowKeysNew]; } else { - data.forEach((dataItem, index) => { - const isDisabled = disabledFn({ rowIndex: index, row: dataItem }); - const isChecked = innerSelectedRowKeys.includes(dataItem[rowKey]); - if (isDisabled && isChecked) { - selectedRowData.push(dataItem); + flattenPageData.forEach((rowItem, index) => { + const isDisabled = disabledFn({ rowIndex: index, row: rowItem }); + const currentRowKeyValue = rowItem[rowKey]; + const isChecked = innerSelectedRowKeys.includes(currentRowKeyValue); + if (!isDisabled && isChecked) { + const rowKeyIndex = innerSelectedRowKeys.findIndex((selectedRowKey) => selectedRowKey === currentRowKeyValue); + innerSelectedRowKeys.splice(rowKeyIndex, 1); } }); + selectedRowKeysNew = [...innerSelectedRowKeys]; } - const selectedRowKeysNew = selectedRowData.map((record) => record[rowKey]); if (!isControlled) { setInnerSelectedRowKeys(selectedRowKeysNew); } - isFunction(onSelectChange) && onSelectChange(selectedRowKeysNew, { selectedRowData }); + + const selectedRowData = flattenRowData.filter((dataItem) => selectedRowKeysNew.includes(dataItem[rowKey])); + const selectOptions = getSelectOptions({ selectedRowData, checked }); + onSelectChange?.(selectedRowKeysNew, selectOptions); } - function onRowCheckboxChange(currentRowKeyValue: string | number, row: DataType, checked: boolean) { + function onRowCheckboxChange({ cellParams, checked, checkStrictly, rowKey }) { + const { row, flattenData } = cellParams; + const currentRowKeyValue = row[rowKey]; let selectedRowKeysNew = []; if (checked) { selectedRowKeysNew = [...innerSelectedRowKeys, currentRowKeyValue]; } else { selectedRowKeysNew = innerSelectedRowKeys.filter((selectRowKey) => selectRowKey !== currentRowKeyValue); } - const selectedRowData = data.filter((dataItem) => selectedRowKeysNew.includes(dataItem[rowKey])); + + // 父子级关联选中/取消选中 + if (checkStrictly === false) { + handleChildrenRowKey(row, selectedRowKeysNew, checked); + handleParentRowKey(row, selectedRowKeysNew, checked, flattenData); + } + if (!isControlled) { setInnerSelectedRowKeys(selectedRowKeysNew); } - isFunction(onSelectChange) && onSelectChange(selectedRowKeysNew, { selectedRowData }); + + const selectedRowData = flattenRowData.filter((dataItem) => selectedRowKeysNew.includes(dataItem[rowKey])); + const selectOptions = getSelectOptions({ selectedRowData, checked, row }); + onSelectChange?.(selectedRowKeysNew, selectOptions); + } + + // 处理子级的选中与否，即更新selectedRowKeys + function handleChildrenRowKey(row, selectedRowKeys, checked) { + const children = row[childrenKey]; + if (!children || !children.length) return; + + const childrenRowKeys = []; + setChildrenRowKeys(children, rowKey, childrenRowKeys); + + if (childrenRowKeys.length) { + if (checked) { + // 当前选中，子孙级全部选中 + childrenRowKeys.forEach((childrenRowKey) => selectedRowKeys.push(childrenRowKey)); + } else { + // 当前父级不选中，子孙级全部不选中 + childrenRowKeys.forEach((childrenRowKey) => { + const childrenRowKeyIndex = selectedRowKeys.findIndex((selectedRowKey) => selectedRowKey === childrenRowKey); + if (childrenRowKeyIndex !== -1) { + selectedRowKeys.splice(childrenRowKeyIndex, 1); + } + }); + } + } + } + + // 当前选中，兄弟全部选中时，父级也应选中；当前不选中，父级如果选中，需更新为不选中 + function handleParentRowKey(row, selectedRowKeys, checked, flattenData) { + const { parentRowKey } = row; + if (!parentRowKey) return; + + const parentRow = flattenData.find((rowItem) => rowItem[rowKey] === parentRowKey); + if (checked) { + // 当前选中，兄弟全部选中时，父级则更新为选中 + const siblingRowKeys = parentRow[childrenKey].map((rowItem) => rowItem[rowKey]); + const isSelectedRowKeysHasSiblingRowKeys = siblingRowKeys.every((rowKey) => selectedRowKeys.includes(rowKey)); + if (isSelectedRowKeysHasSiblingRowKeys) { + selectedRowKeys.push(parentRowKey); + } + } else { + // 当前不选中，父级如果选中，则更新为不选中 + const isSelectedRowKeysHasParentRowKey = selectedRowKeys.includes(parentRowKey); + if (isSelectedRowKeysHasParentRowKey) { + const parentRowKeyIndex = selectedRowKeys.findIndex((item) => item === parentRowKey); + if (parentRowKeyIndex !== -1) { + selectedRowKeys.splice(parentRowKeyIndex, 1); + } + } + } + handleParentRowKey(parentRow, selectedRowKeys, checked, flattenData); + } + + function setChildrenRowKeys(children, rowKey, rowKeys) { + children.forEach((rowItem) => { + rowKeys.push(rowItem[rowKey]); + if (rowItem[childrenKey]) { + setChildrenRowKeys(rowItem[childrenKey], rowKey, rowKeys); + } + }); } function onRadioChange(currentRowKeyValue: string | number, row: DataType) { @@ -210,7 +346,29 @@ function useSelect(props: PrimaryTableProps): [PrimaryTableCol[]] { if (!isControlled) { setInnerSelectedRowKeys(selectedRowKeysNew); } - isFunction(onSelectChange) && onSelectChange(selectedRowKeysNew, { selectedRowData }); + const selectOptions = getSelectOptions({ selectedRowData, checked: true, row }); + onSelectChange?.(selectedRowKeysNew, selectOptions); + } + + function getSelectOptions({ + selectedRowData, + checked, + row, + }: { + selectedRowData: TableRowData[]; + checked: boolean; + row?; + }): SelectOptions { + return { + selectedRowData, + type: checked ? 'check' : 'uncheck', + ...(row + ? { + currentRowData: row, + currentRowKey: row[rowKey], + } + : {}), + }; } return [transformedColumns];