diff --git a/src/table/PrimaryTable.tsx b/src/table/PrimaryTable.tsx index a62b8f0348..259faa4b38 100644 --- a/src/table/PrimaryTable.tsx +++ b/src/table/PrimaryTable.tsx @@ -36,8 +36,14 @@ const PrimaryTable = forwardRef((originalPr // 自定义列配置功能 const { tDisplayColumns, renderColumnController } = useColumnController(props, { onColumnReduce }); // 展开/收起行功能 - const { showExpandedRow, showExpandIconColumn, getExpandColumn, renderExpandedRow, onInnerExpandRowClick } = - useRowExpand(props); + const { + showExpandedRow, + showExpandIconColumn, + getExpandColumn, + renderExpandedRow, + onInnerExpandRowClick, + getExpandedRowClass, + } = useRowExpand(props); // 排序功能 const { renderSortIcon } = useSorter(props); // 行选中功能 @@ -75,7 +81,7 @@ const PrimaryTable = forwardRef((originalPr // 如果想给 TR 添加类名，请在这里补充，不要透传更多额外 Props 到 BaseTable const tRowClassNames = (() => { - const tClassNames = [props.rowClassName, selectedRowClassNames]; + const tClassNames = [props.rowClassName, selectedRowClassNames, getExpandedRowClass]; return tClassNames.filter((v) => v); })(); @@ -264,7 +270,6 @@ const PrimaryTable = forwardRef((originalPr if (props.expandOnRowClick || props.selectOnRowClick) { baseTableProps.onRowClick = onInnerRowClick; } - return ( { - const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, type: 'body' }, rowKey || 'id'); + const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, rowKey, type: 'body' }, rowKey || 'id'); return [trStyles?.classes, customClasses]; }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]); diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts index 353d89d83c..5506a41f7d 100644 --- a/src/table/hooks/useClassName.ts +++ b/src/table/hooks/useClassName.ts @@ -108,6 +108,8 @@ export default function useClassName() { tableExpandClasses: { iconBox: `${classPrefix}-table__expand-box`, iconCell: `${classPrefix}-table__expandable-icon-cell`, + rowExpanded: `${classPrefix}-table__row--expanded`, + rowFolded: `${classPrefix}-table__row--folded`, row: `${classPrefix}-table__expanded-row`, rowInner: `${classPrefix}-table__expanded-row-inner`, expanded: `${classPrefix}-table__row--expanded`, diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx index 65a0a3a1e4..2aa8b61fb9 100644 --- a/src/table/hooks/useRowExpand.tsx +++ b/src/table/hooks/useRowExpand.tsx @@ -1,4 +1,4 @@ -import React, { MouseEvent, ReactNode } from 'react'; +import React, { MouseEvent, ReactNode, useCallback } from 'react'; import { ChevronRightCircleIcon as TdChevronRightCircleIcon } from 'tdesign-icons-react'; import get from 'lodash/get'; import isFunction from 'lodash/isFunction'; @@ -10,6 +10,7 @@ import { PrimaryTableCellParams, TableExpandedRowParams, RowEventContext, + RowClassNameParams, } from '../type'; import useClassName from './useClassName'; import useControlled from '../../hooks/useControlled'; @@ -31,6 +32,17 @@ export default function useRowExpand(props: TdPrimaryTableProps) { const showExpandedRow = Boolean(expandedRow); + const getExpandedRowClass = useCallback( + (params: RowClassNameParams) => { + // 如果没有配置展开行，则不需要增加展开收起相关的类名 + if (!showExpandedRow) return null; + const { row, rowKey } = params; + const currentRowKey = get(row, rowKey || 'id'); + return tableExpandClasses[tExpandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded']; + }, + [tExpandedRowKeys, tableExpandClasses, showExpandedRow], + ); + const showExpandIconColumn = props.expandIcon !== false && showExpandedRow; const isFirstColumnFixed = props.columns?.[0]?.fixed === 'left'; @@ -117,5 +129,6 @@ export default function useRowExpand(props: TdPrimaryTableProps) { getExpandColumn, renderExpandedRow, onInnerExpandRowClick, + getExpandedRowClass, }; } diff --git a/src/table/type.ts b/src/table/type.ts index ad8fc49bae..055bda1b2e 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -963,6 +963,7 @@ export type TableRowAttributes = export interface RowClassNameParams { row: T; rowIndex: number; + rowKey?: string; type?: 'body' | 'foot'; } diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 5d0786d1fb..0b6bd3dde1 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -93711,7 +93711,7 @@ exports[`csr snapshot test > csr test src/table/_example/expandable.tsx 1`] = ` class="t-table__body" > csr test src/table/_example/expandable.tsx 1`] = ` csr test src/table/_example/expandable.tsx 1`] = ` csr test src/table/_example/expandable.tsx 1`] = ` csr test src/table/_example/expandable.tsx 1`] = ` csr test src/table/_example/tree-select.tsx 1`] = ` style="transform: translateY(0px);" > csr test src/table/_example/tree-select.tsx 1`] = ` csr test src/table/_example/tree-select.tsx 1`] = ` csr test src/table/_example/tree-select.tsx 1`] = ` csr test src/table/_example/tree-select.tsx 1`] = ` csr test src/table/_example/tree-select.tsx 1`] = ` csr test src/table/_example/tree-select.tsx 1`] = ` csr test src/table/_example/tree-select.tsx 1`] = ` csr test src/table/_example/tree-select.tsx 1`] = ` csr test src/table/_example/tree-select.tsx 1`] = ` ssr test src/table/_example/ellipsis.tsx 1`] = `" ssr test src/table/_example/empty.tsx 1`] = `"
项目名称
管理员
所属公司
Empty Data
项目名称
管理员
所属公司
😄 it is empty. 😁
"`; -exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"
申请人
申请状态
签署方式
邮箱地址
申请时间
操作
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-01-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-02-01再次申请
王芳
审批过期
纸质签署
p.cumx@rampblpa.ru
2022-03-01再次申请
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-04-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-01-01再次申请
"`; +exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"
申请人
申请状态
签署方式
邮箱地址
申请时间
操作
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-01-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-02-01再次申请
王芳
审批过期
纸质签署
p.cumx@rampblpa.ru
2022-03-01再次申请
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-04-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-01-01再次申请
"`; exports[`ssr snapshot test > ssr test src/table/_example/filter-controlled.tsx 1`] = `"
已选筛选条件：{"lastName":[]}
申请人
申请状态
签署方式
Email
Date
贾明
审批通过
电子签署w.cezkdudy@lhll.au2022-01-01
张三
审批失败
纸质签署r.nmgw@peurezgn.sl2022-02-01
王芳
审批过期
纸质签署p.cumx@rampblpa.ru2022-03-01
贾明
审批通过
电子签署w.cezkdudy@lhll.au2022-04-01
张三
审批失败
纸质签署r.nmgw@peurezgn.sl2022-01-01
Total 0 items
please select
  • 1
jump to
/ 1
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index ede6996953..c4d3d7d792 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -964,7 +964,7 @@ exports[`ssr snapshot test > ssr test src/table/_example/ellipsis.tsx 1`] = `" ssr test src/table/_example/empty.tsx 1`] = `"
项目名称
管理员
所属公司
Empty Data
项目名称
管理员
所属公司
😄 it is empty. 😁
"`; -exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"
申请人
申请状态
签署方式
邮箱地址
申请时间
操作
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-01-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-02-01再次申请
王芳
审批过期
纸质签署
p.cumx@rampblpa.ru
2022-03-01再次申请
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-04-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-01-01再次申请
"`; +exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"
申请人
申请状态
签署方式
邮箱地址
申请时间
操作
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-01-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-02-01再次申请
王芳
审批过期
纸质签署
p.cumx@rampblpa.ru
2022-03-01再次申请
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-04-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-01-01再次申请
"`; exports[`ssr snapshot test > ssr test src/table/_example/filter-controlled.tsx 1`] = `"
已选筛选条件：{"lastName":[]}
申请人
申请状态
签署方式
Email
Date
贾明
审批通过
电子签署w.cezkdudy@lhll.au2022-01-01
张三
审批失败
纸质签署r.nmgw@peurezgn.sl2022-02-01
王芳
审批过期
纸质签署p.cumx@rampblpa.ru2022-03-01
贾明
审批通过
电子签署w.cezkdudy@lhll.au2022-04-01
张三
审批失败
纸质签署r.nmgw@peurezgn.sl2022-01-01
Total 0 items
please select
  • 1
jump to
/ 1
"`;