From 81dafa50a44ab49940140fd9914887ec4d4683d6 Mon Sep 17 00:00:00 2001 From: Uyarn <uyarnchen@gmail.com> Date: Thu, 12 Sep 2024 16:35:01 +0800 Subject: [PATCH 1/7] feat(table): add class to identify expanded and folded row when expandRowKeys is defined --- src/table/BaseTable.tsx | 2 ++ src/table/PrimaryTable.tsx | 12 ++++++--- src/table/TR.tsx | 20 ++++++++++---- src/table/defaultProps.ts | 2 +- src/table/hooks/useClassName.ts | 2 ++ src/table/hooks/useRowExpand.tsx | 4 +++ src/table/interface.ts | 4 +++ test/snap/__snapshots__/csr.test.jsx.snap | 32 +++++++++++------------ test/snap/__snapshots__/ssr.test.jsx.snap | 2 +- 9 files changed, 54 insertions(+), 26 deletions(-) diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx index 712749f988..18f0f5e726 100644 --- a/src/table/BaseTable.tsx +++ b/src/table/BaseTable.tsx @@ -55,6 +55,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref) resizable, lazyLoad, pagination, + expandedRowKeys, } = props; const tableRef = useRef<HTMLDivElement>(); const tableElmRef = useRef<HTMLTableElement>(); @@ -470,6 +471,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref) renderExpandedRow: props.renderExpandedRow, ...pick(props, extendTableProps), pagination: innerPagination, + expandedRowKeys, }; const translate = `translate(0, ${virtualConfig.scrollHeight}px)`; diff --git a/src/table/PrimaryTable.tsx b/src/table/PrimaryTable.tsx index a62b8f0348..d08d03a3d1 100644 --- a/src/table/PrimaryTable.tsx +++ b/src/table/PrimaryTable.tsx @@ -36,8 +36,14 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr // 自定义列配置功能 const { tDisplayColumns, renderColumnController } = useColumnController(props, { onColumnReduce }); // 展开/收起行功能 - const { showExpandedRow, showExpandIconColumn, getExpandColumn, renderExpandedRow, onInnerExpandRowClick } = - useRowExpand(props); + const { + innerExpandedRowKeys, + showExpandedRow, + showExpandIconColumn, + getExpandColumn, + renderExpandedRow, + onInnerExpandRowClick, + } = useRowExpand(props); // 排序功能 const { renderSortIcon } = useSorter(props); // 行选中功能 @@ -264,7 +270,6 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr if (props.expandOnRowClick || props.selectOnRowClick) { baseTableProps.onRowClick = onInnerRowClick; } - return ( <BaseTable ref={primaryTableRef} @@ -272,6 +277,7 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr className={classNames(primaryTableClasses, className)} style={style} onLeafColumnsChange={setDragSortColumns} + expandedRowKeys={innerExpandedRowKeys} /> ); }); diff --git a/src/table/TR.tsx b/src/table/TR.tsx index 111dac27e9..bf01f03a06 100644 --- a/src/table/TR.tsx +++ b/src/table/TR.tsx @@ -5,7 +5,7 @@ import { formatRowAttributes, formatRowClassNames } from './utils'; import { getRowFixedStyles } from './hooks/useFixed'; import { RowAndColFixedPosition } from './interface'; import useClassName from './hooks/useClassName'; -import { TableRowData, RowspanColspan, TdBaseTableProps } from './type'; +import { TableRowData, RowspanColspan } from './type'; import useLazyLoad from './hooks/useLazyLoad'; import { getCellKey, SkipSpansValue } from './hooks/useRowspanAndColspan'; import Cell from './Cell'; @@ -13,7 +13,9 @@ import { PaginationProps } from '../pagination'; import { VirtualScrollConfig } from '../hooks/useVirtualScroll'; import { InfinityScroll } from '../common'; -export type TrCommonProps = Pick<TdBaseTableProps, TrPropsKeys>; +import type { BaseTableProps } from './interface'; + +export type TrCommonProps = Pick<BaseTableProps, TrPropsKeys>; export const TABLE_PROPS = [ 'rowKey', @@ -33,6 +35,7 @@ export const TABLE_PROPS = [ 'onRowMouseenter', 'onRowMouseleave', 'onRowMouseup', + 'expandedRowKeys', ] as const; export type TrPropsKeys = (typeof TABLE_PROPS)[number]; @@ -76,6 +79,7 @@ export default function TR(props: TrProps) { rowAndColFixedPosition, virtualConfig, onRowMounted, + expandedRowKeys, } = props; const trRef = useRef<HTMLTableRowElement>(); @@ -96,10 +100,17 @@ export default function TR(props: TrProps) { [row, rowAttributes, rowIndex], ); + const currentRowKey = useMemo(() => get(row, rowKey || 'id'), [row, rowKey]); + const classes = useMemo(() => { const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, type: 'body' }, rowKey || 'id'); - return [trStyles?.classes, customClasses]; - }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]); + if (!expandedRowKeys) return [trStyles?.classes, customClasses]; + return [ + trStyles?.classes, + classNames.tableExpandClasses[expandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'], + customClasses, + ]; + }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes, currentRowKey, classNames, expandedRowKeys]); const useLazyLoadParams = useMemo(() => ({ ...scroll, rowIndex }), [scroll, rowIndex]); const { hasLazyLoadHolder, tRowHeight } = useLazyLoad(tableContentRef.current, trRef, useLazyLoadParams); @@ -113,7 +124,6 @@ export default function TR(props: TrProps) { } // eslint-disable-next-line }, [virtualConfig.isVirtualScroll, trRef, row]); - const columnVNodeList = props.columns?.map((col, colIndex) => { const cellSpans: RowspanColspan = {}; const params = { diff --git a/src/table/defaultProps.ts b/src/table/defaultProps.ts index 3e0343bd79..82a2ec0abd 100644 --- a/src/table/defaultProps.ts +++ b/src/table/defaultProps.ts @@ -40,7 +40,7 @@ export const primaryTableDefaultProps: Pick< columnControllerVisible: undefined, columns: [], expandIcon: true, - defaultExpandedRowKeys: [], + defaultExpandedRowKeys: undefined, multipleSort: false, reserveSelectedRowOnPaginate: true, defaultSelectedRowKeys: [], 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..4dec03ad67 100644 --- a/src/table/hooks/useRowExpand.tsx +++ b/src/table/hooks/useRowExpand.tsx @@ -29,6 +29,9 @@ export default function useRowExpand(props: TdPrimaryTableProps) { defaultExpandedRowKeys: props.defaultExpandedRowKeys || [], }); + // 用于在可展开收起的场景给各行添加类名使用,如果没有配置则不加相关类名 + const innerExpandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys ? tExpandedRowKeys : undefined; + const showExpandedRow = Boolean(expandedRow); const showExpandIconColumn = props.expandIcon !== false && showExpandedRow; @@ -117,5 +120,6 @@ export default function useRowExpand(props: TdPrimaryTableProps) { getExpandColumn, renderExpandedRow, onInnerExpandRowClick, + innerExpandedRowKeys, }; } diff --git a/src/table/interface.ts b/src/table/interface.ts index af8fccb475..e7828394e3 100644 --- a/src/table/interface.ts +++ b/src/table/interface.ts @@ -27,6 +27,10 @@ export interface BaseTableProps<T extends TableRowData = TableRowData> extends T * 表头是否可拖拽。非公开属性,请勿在业务中使用 */ thDraggable?: boolean; + /** + * 当前展开行的 key 的数组。非公开属性,请勿在业务中使用 + */ + expandedRowKeys?: (string | number)[]; } /** diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 5d0786d1fb..b80363eade 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" > <tr - class="" + class="t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -93780,7 +93780,7 @@ exports[`csr snapshot test > csr test src/table/_example/expandable.tsx 1`] = ` </td> </tr> <tr - class="" + class="t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -93849,7 +93849,7 @@ exports[`csr snapshot test > csr test src/table/_example/expandable.tsx 1`] = ` </td> </tr> <tr - class="" + class="t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -93918,7 +93918,7 @@ exports[`csr snapshot test > csr test src/table/_example/expandable.tsx 1`] = ` </td> </tr> <tr - class="" + class="t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -93987,7 +93987,7 @@ exports[`csr snapshot test > csr test src/table/_example/expandable.tsx 1`] = ` </td> </tr> <tr - class="" + class="t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -112837,7 +112837,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` style="transform: translateY(0px);" > <tr - class="t-table-tr--level-0" + class="t-table__row--folded t-table-tr--level-0" > <td class="t-table__expandable-icon-cell" @@ -112927,7 +112927,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table-tr--level-0" + class="t-table__row--folded t-table-tr--level-0" > <td class="t-table__expandable-icon-cell" @@ -113017,7 +113017,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table-tr--level-0" + class="t-table__row--folded t-table-tr--level-0" > <td class="t-table__expandable-icon-cell" @@ -113107,7 +113107,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table-tr--level-0" + class="t-table__row--folded t-table-tr--level-0" > <td class="t-table__expandable-icon-cell" @@ -113197,7 +113197,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table-tr--level-0" + class="t-table__row--folded t-table-tr--level-0" > <td class="t-table__expandable-icon-cell" @@ -113287,7 +113287,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table-tr--level-0" + class="t-table__row--folded t-table-tr--level-0" > <td class="t-table__expandable-icon-cell" @@ -113377,7 +113377,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table-tr--level-0" + class="t-table__row--folded t-table-tr--level-0" > <td class="t-table__expandable-icon-cell" @@ -113467,7 +113467,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table-tr--level-0" + class="t-table__row--folded t-table-tr--level-0" > <td class="t-table__expandable-icon-cell" @@ -113557,7 +113557,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table-tr--level-0" + class="t-table__row--folded t-table-tr--level-0" > <td class="t-table__expandable-icon-cell" @@ -113647,7 +113647,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table-tr--level-0" + class="t-table__row--folded t-table-tr--level-0" > <td class="t-table__expandable-icon-cell" @@ -134505,7 +134505,7 @@ exports[`ssr snapshot test > ssr test src/table/_example/ellipsis.tsx 1`] = `"<d exports[`ssr snapshot test > ssr test src/table/_example/empty.tsx 1`] = `"<div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:150px\\"/><col style=\\"width:300px\\"/><col style=\\"width:150px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"project\\" class=\\"t-table__th-project\\"><div class=\\"t-table__th-cell-inner\\">项目名称</div></th><th data-colkey=\\"member\\" class=\\"t-table__th-member\\"><div class=\\"t-table__th-cell-inner\\">管理员</div></th><th data-colkey=\\"company\\" class=\\"t-table__th-company\\"><div class=\\"t-table__th-cell-inner\\">所属公司</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__empty-row\\"><td colSpan=\\"3\\"><div class=\\"t-table__empty\\">Empty Data</div></td></tr></tbody></table></div></div><div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:150px\\"/><col style=\\"width:300px\\"/><col style=\\"width:150px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"project\\" class=\\"t-table__th-project\\"><div class=\\"t-table__th-cell-inner\\">项目名称</div></th><th data-colkey=\\"member\\" class=\\"t-table__th-member\\"><div class=\\"t-table__th-cell-inner\\">管理员</div></th><th data-colkey=\\"company\\" class=\\"t-table__th-company\\"><div class=\\"t-table__th-cell-inner\\">所属公司</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__empty-row\\"><td colSpan=\\"3\\"><div class=\\"t-table__empty\\"><span style=\\"display:flex;align-items:center;justify-content:center;height:100px\\">😄 it is empty. 😁</span></div></td></tr></tbody></table></div></div>"`; -exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'true'\\" checked=\\"\\" value=\\"true\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 显示展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'false'\\" value=\\"false\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 隐藏展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'custom'\\" value=\\"custom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 自由控制展开图标 </span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">允许点击行之后展开/收起</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">固定列</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">空数据</span></label></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\" style=\\"width:1200px\\"><colgroup><col style=\\"width:46px\\"/><col style=\\"width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"__EXPAND_ROW_ICON_COLUMN__\\" class=\\"t-table__expandable-icon-cell t-table__th-__EXPAND_ROW_ICON_COLUMN__\\"><div class=\\"t-table__th-cell-inner\\"></div></th><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th><th data-colkey=\\"operation\\" class=\\"t-table__th-operation\\"><div class=\\"t-table__th-cell-inner\\">操作</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr></tbody></table></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`; +exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'true'\\" checked=\\"\\" value=\\"true\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 显示展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'false'\\" value=\\"false\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 隐藏展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'custom'\\" value=\\"custom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 自由控制展开图标 </span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">允许点击行之后展开/收起</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">固定列</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">空数据</span></label></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\" style=\\"width:1200px\\"><colgroup><col style=\\"width:46px\\"/><col style=\\"width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"__EXPAND_ROW_ICON_COLUMN__\\" class=\\"t-table__expandable-icon-cell t-table__th-__EXPAND_ROW_ICON_COLUMN__\\"><div class=\\"t-table__th-cell-inner\\"></div></th><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th><th data-colkey=\\"operation\\" class=\\"t-table__th-operation\\"><div class=\\"t-table__th-cell-inner\\">操作</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr></tbody></table></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`; exports[`ssr snapshot test > ssr test src/table/_example/filter-controlled.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">清空已筛选</span></button></div><div class=\\"t-space-item\\"><span>已选筛选条件:<!-- -->{"lastName":[]}</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:100px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>申请状态</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>签署方式</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"email\\" class=\\"t-table__th-email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>Email</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--sortable t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>Date</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__cell--sort-trigger t-table__double-icons\\"><span class=\\"t-icon-sort--default t-table__sort-icon t-table-sort-asc t-negative-rotate-180\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-caret-down-small\\" style=\\"font-size:18px\\"><path fill=\\"currentColor\\" d=\\"M12 16.5l7-7H5l7 7z\\"></path></svg></span><span class=\\"t-icon-sort--default t-table__sort-icon t-table-sort-desc\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-caret-down-small\\" style=\\"font-size:18px\\"><path fill=\\"currentColor\\" d=\\"M12 16.5l7-7H5l7 7z\\"></path></svg></span></div><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"\\">w.cezkdudy@lhll.au</td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">r.nmgw@peurezgn.sl</td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">p.cumx@rampblpa.ru</td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"\\">w.cezkdudy@lhll.au</td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">r.nmgw@peurezgn.sl</td><td class=\\"\\">2022-01-01</td></tr></tbody></table></div><div class=\\"t-table__pagination-wrap\\" style=\\"opacity:1\\"><div class=\\"t-table__pagination\\"><div class=\\"t-pagination\\"><div class=\\"t-pagination__total\\">Total 0 items</div><div class=\\"t-pagination__select\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\" spellcheck=\\"false\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination__btn t-pagination__btn-prev t-is-disabled\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></div><ul class=\\"t-pagination__pager\\"><li class=\\"t-pagination__number t-is-current\\">1</li></ul><div class=\\"t-pagination__btn t-pagination__btn-next t-is-disabled\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></div><div class=\\"t-pagination__jump\\">jump to<div class=\\"t-input-adornment\\"><div class=\\"t-input-number t-size-m t-input-number--normal t-pagination__input\\"><div class=\\"t-input__wrap\\" value=\\"\\" spellcheck=\\"false\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" autoComplete=\\"off\\" value=\\"\\"/></div></div></div><span class=\\"t-input-adornment__append\\"><span class=\\"t-input-adornment__text\\">/ 1 </span></span></div></div></div></div></div></div></div></div>"`; 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`] = `"<d exports[`ssr snapshot test > ssr test src/table/_example/empty.tsx 1`] = `"<div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:150px\\"/><col style=\\"width:300px\\"/><col style=\\"width:150px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"project\\" class=\\"t-table__th-project\\"><div class=\\"t-table__th-cell-inner\\">项目名称</div></th><th data-colkey=\\"member\\" class=\\"t-table__th-member\\"><div class=\\"t-table__th-cell-inner\\">管理员</div></th><th data-colkey=\\"company\\" class=\\"t-table__th-company\\"><div class=\\"t-table__th-cell-inner\\">所属公司</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__empty-row\\"><td colSpan=\\"3\\"><div class=\\"t-table__empty\\">Empty Data</div></td></tr></tbody></table></div></div><div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:150px\\"/><col style=\\"width:300px\\"/><col style=\\"width:150px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"project\\" class=\\"t-table__th-project\\"><div class=\\"t-table__th-cell-inner\\">项目名称</div></th><th data-colkey=\\"member\\" class=\\"t-table__th-member\\"><div class=\\"t-table__th-cell-inner\\">管理员</div></th><th data-colkey=\\"company\\" class=\\"t-table__th-company\\"><div class=\\"t-table__th-cell-inner\\">所属公司</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__empty-row\\"><td colSpan=\\"3\\"><div class=\\"t-table__empty\\"><span style=\\"display:flex;align-items:center;justify-content:center;height:100px\\">😄 it is empty. 😁</span></div></td></tr></tbody></table></div></div>"`; -exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'true'\\" checked=\\"\\" value=\\"true\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 显示展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'false'\\" value=\\"false\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 隐藏展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'custom'\\" value=\\"custom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 自由控制展开图标 </span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">允许点击行之后展开/收起</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">固定列</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">空数据</span></label></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\" style=\\"width:1200px\\"><colgroup><col style=\\"width:46px\\"/><col style=\\"width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"__EXPAND_ROW_ICON_COLUMN__\\" class=\\"t-table__expandable-icon-cell t-table__th-__EXPAND_ROW_ICON_COLUMN__\\"><div class=\\"t-table__th-cell-inner\\"></div></th><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th><th data-colkey=\\"operation\\" class=\\"t-table__th-operation\\"><div class=\\"t-table__th-cell-inner\\">操作</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr></tbody></table></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`; +exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'true'\\" checked=\\"\\" value=\\"true\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 显示展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'false'\\" value=\\"false\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 隐藏展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"'custom'\\" value=\\"custom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 自由控制展开图标 </span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">允许点击行之后展开/收起</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">固定列</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">空数据</span></label></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\" style=\\"width:1200px\\"><colgroup><col style=\\"width:46px\\"/><col style=\\"width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"__EXPAND_ROW_ICON_COLUMN__\\" class=\\"t-table__expandable-icon-cell t-table__th-__EXPAND_ROW_ICON_COLUMN__\\"><div class=\\"t-table__th-cell-inner\\"></div></th><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th><th data-colkey=\\"operation\\" class=\\"t-table__th-operation\\"><div class=\\"t-table__th-cell-inner\\">操作</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr></tbody></table></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`; exports[`ssr snapshot test > ssr test src/table/_example/filter-controlled.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">清空已筛选</span></button></div><div class=\\"t-space-item\\"><span>已选筛选条件:<!-- -->{"lastName":[]}</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:100px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>申请状态</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>签署方式</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"email\\" class=\\"t-table__th-email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>Email</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--sortable t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>Date</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__cell--sort-trigger t-table__double-icons\\"><span class=\\"t-icon-sort--default t-table__sort-icon t-table-sort-asc t-negative-rotate-180\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-caret-down-small\\" style=\\"font-size:18px\\"><path fill=\\"currentColor\\" d=\\"M12 16.5l7-7H5l7 7z\\"></path></svg></span><span class=\\"t-icon-sort--default t-table__sort-icon t-table-sort-desc\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-caret-down-small\\" style=\\"font-size:18px\\"><path fill=\\"currentColor\\" d=\\"M12 16.5l7-7H5l7 7z\\"></path></svg></span></div><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"\\">w.cezkdudy@lhll.au</td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">r.nmgw@peurezgn.sl</td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">p.cumx@rampblpa.ru</td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"\\">w.cezkdudy@lhll.au</td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">r.nmgw@peurezgn.sl</td><td class=\\"\\">2022-01-01</td></tr></tbody></table></div><div class=\\"t-table__pagination-wrap\\" style=\\"opacity:1\\"><div class=\\"t-table__pagination\\"><div class=\\"t-pagination\\"><div class=\\"t-pagination__total\\">Total 0 items</div><div class=\\"t-pagination__select\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\" spellcheck=\\"false\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination__btn t-pagination__btn-prev t-is-disabled\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></div><ul class=\\"t-pagination__pager\\"><li class=\\"t-pagination__number t-is-current\\">1</li></ul><div class=\\"t-pagination__btn t-pagination__btn-next t-is-disabled\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></div><div class=\\"t-pagination__jump\\">jump to<div class=\\"t-input-adornment\\"><div class=\\"t-input-number t-size-m t-input-number--normal t-pagination__input\\"><div class=\\"t-input__wrap\\" value=\\"\\" spellcheck=\\"false\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" autoComplete=\\"off\\" value=\\"\\"/></div></div></div><span class=\\"t-input-adornment__append\\"><span class=\\"t-input-adornment__text\\">/ 1 </span></span></div></div></div></div></div></div></div></div>"`; From bd469b985156ca2f97eecaf24c14eb0516f3b0fe Mon Sep 17 00:00:00 2001 From: Uyarn <uyarnchen@gmail.com> Date: Thu, 19 Sep 2024 15:48:48 +0800 Subject: [PATCH 2/7] chore: optimize --- src/table/PrimaryTable.tsx | 3 ++- src/table/TR.tsx | 12 ++---------- src/table/hooks/useRowExpand.tsx | 14 +++++++++++++- src/table/utils.ts | 2 +- 4 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/table/PrimaryTable.tsx b/src/table/PrimaryTable.tsx index d08d03a3d1..9716e1cfd8 100644 --- a/src/table/PrimaryTable.tsx +++ b/src/table/PrimaryTable.tsx @@ -43,6 +43,7 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr getExpandColumn, renderExpandedRow, onInnerExpandRowClick, + getExpandedRowClass, } = useRowExpand(props); // 排序功能 const { renderSortIcon } = useSorter(props); @@ -81,7 +82,7 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr // 如果想给 TR 添加类名,请在这里补充,不要透传更多额外 Props 到 BaseTable const tRowClassNames = (() => { - const tClassNames = [props.rowClassName, selectedRowClassNames]; + const tClassNames = [props.rowClassName, selectedRowClassNames, getExpandedRowClass]; return tClassNames.filter((v) => v); })(); diff --git a/src/table/TR.tsx b/src/table/TR.tsx index bf01f03a06..1e31f863c5 100644 --- a/src/table/TR.tsx +++ b/src/table/TR.tsx @@ -79,7 +79,6 @@ export default function TR(props: TrProps) { rowAndColFixedPosition, virtualConfig, onRowMounted, - expandedRowKeys, } = props; const trRef = useRef<HTMLTableRowElement>(); @@ -100,17 +99,10 @@ export default function TR(props: TrProps) { [row, rowAttributes, rowIndex], ); - const currentRowKey = useMemo(() => get(row, rowKey || 'id'), [row, rowKey]); - const classes = useMemo(() => { const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, type: 'body' }, rowKey || 'id'); - if (!expandedRowKeys) return [trStyles?.classes, customClasses]; - return [ - trStyles?.classes, - classNames.tableExpandClasses[expandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'], - customClasses, - ]; - }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes, currentRowKey, classNames, expandedRowKeys]); + return [trStyles?.classes, customClasses]; + }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]); const useLazyLoadParams = useMemo(() => ({ ...scroll, rowIndex }), [scroll, rowIndex]); const { hasLazyLoadHolder, tRowHeight } = useLazyLoad(tableContentRef.current, trRef, useLazyLoadParams); diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx index 4dec03ad67..eaca0a899a 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'; @@ -32,6 +32,17 @@ export default function useRowExpand(props: TdPrimaryTableProps) { // 用于在可展开收起的场景给各行添加类名使用,如果没有配置则不加相关类名 const innerExpandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys ? tExpandedRowKeys : undefined; + const getExpandedRowClass = useCallback( + (params) => { + if (!innerExpandedRowKeys) return null; + const { row } = params; + const { rowKey } = row; + const currentRowKey = get(row, rowKey || 'id'); + return tableExpandClasses[tExpandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded']; + }, + [tExpandedRowKeys, innerExpandedRowKeys, tableExpandClasses], + ); + const showExpandedRow = Boolean(expandedRow); const showExpandIconColumn = props.expandIcon !== false && showExpandedRow; @@ -121,5 +132,6 @@ export default function useRowExpand(props: TdPrimaryTableProps) { renderExpandedRow, onInnerExpandRowClick, innerExpandedRowKeys, + getExpandedRowClass, }; } diff --git a/src/table/utils.ts b/src/table/utils.ts index 32fb09024d..3cb0c42c94 100644 --- a/src/table/utils.ts +++ b/src/table/utils.ts @@ -61,7 +61,7 @@ export function formatRowClassNames( let customClasses: ClassName = []; for (let i = 0, len = rowClassList.length; i < len; i++) { const rName = rowClassList[i]; - let tClass = isFunction(rName) ? rName(params) : rName; + let tClass = isFunction(rName) ? rName({ ...params, row: { ...params.row, rowKey } }) : rName; if (isObject(tClass) && !(tClass instanceof Array)) { // 根据下标设置行类名 tClass[rowIndex] && (tClass = tClass[rowIndex]); From ba1c5abc4c133fbc35a14cbc27cc53490eae9647 Mon Sep 17 00:00:00 2001 From: Uyarn <uyarnchen@gmail.com> Date: Thu, 19 Sep 2024 15:55:54 +0800 Subject: [PATCH 3/7] chore: remove depreacted --- src/table/BaseTable.tsx | 2 -- src/table/PrimaryTable.tsx | 2 -- src/table/TR.tsx | 7 ++----- src/table/interface.ts | 4 ---- 4 files changed, 2 insertions(+), 13 deletions(-) diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx index 18f0f5e726..712749f988 100644 --- a/src/table/BaseTable.tsx +++ b/src/table/BaseTable.tsx @@ -55,7 +55,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref) resizable, lazyLoad, pagination, - expandedRowKeys, } = props; const tableRef = useRef<HTMLDivElement>(); const tableElmRef = useRef<HTMLTableElement>(); @@ -471,7 +470,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref) renderExpandedRow: props.renderExpandedRow, ...pick(props, extendTableProps), pagination: innerPagination, - expandedRowKeys, }; const translate = `translate(0, ${virtualConfig.scrollHeight}px)`; diff --git a/src/table/PrimaryTable.tsx b/src/table/PrimaryTable.tsx index 9716e1cfd8..259faa4b38 100644 --- a/src/table/PrimaryTable.tsx +++ b/src/table/PrimaryTable.tsx @@ -37,7 +37,6 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr const { tDisplayColumns, renderColumnController } = useColumnController(props, { onColumnReduce }); // 展开/收起行功能 const { - innerExpandedRowKeys, showExpandedRow, showExpandIconColumn, getExpandColumn, @@ -278,7 +277,6 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr className={classNames(primaryTableClasses, className)} style={style} onLeafColumnsChange={setDragSortColumns} - expandedRowKeys={innerExpandedRowKeys} /> ); }); diff --git a/src/table/TR.tsx b/src/table/TR.tsx index 1e31f863c5..8ac8b2430d 100644 --- a/src/table/TR.tsx +++ b/src/table/TR.tsx @@ -5,7 +5,7 @@ import { formatRowAttributes, formatRowClassNames } from './utils'; import { getRowFixedStyles } from './hooks/useFixed'; import { RowAndColFixedPosition } from './interface'; import useClassName from './hooks/useClassName'; -import { TableRowData, RowspanColspan } from './type'; +import { TableRowData, RowspanColspan, TdBaseTableProps } from './type'; import useLazyLoad from './hooks/useLazyLoad'; import { getCellKey, SkipSpansValue } from './hooks/useRowspanAndColspan'; import Cell from './Cell'; @@ -13,9 +13,7 @@ import { PaginationProps } from '../pagination'; import { VirtualScrollConfig } from '../hooks/useVirtualScroll'; import { InfinityScroll } from '../common'; -import type { BaseTableProps } from './interface'; - -export type TrCommonProps = Pick<BaseTableProps, TrPropsKeys>; +export type TrCommonProps = Pick<TdBaseTableProps, TrPropsKeys>; export const TABLE_PROPS = [ 'rowKey', @@ -35,7 +33,6 @@ export const TABLE_PROPS = [ 'onRowMouseenter', 'onRowMouseleave', 'onRowMouseup', - 'expandedRowKeys', ] as const; export type TrPropsKeys = (typeof TABLE_PROPS)[number]; diff --git a/src/table/interface.ts b/src/table/interface.ts index e7828394e3..af8fccb475 100644 --- a/src/table/interface.ts +++ b/src/table/interface.ts @@ -27,10 +27,6 @@ export interface BaseTableProps<T extends TableRowData = TableRowData> extends T * 表头是否可拖拽。非公开属性,请勿在业务中使用 */ thDraggable?: boolean; - /** - * 当前展开行的 key 的数组。非公开属性,请勿在业务中使用 - */ - expandedRowKeys?: (string | number)[]; } /** From a0279f9f79be08a1277d834d8d92b7ad970f0638 Mon Sep 17 00:00:00 2001 From: Uyarn <uyarnchen@gmail.com> Date: Thu, 19 Sep 2024 15:58:30 +0800 Subject: [PATCH 4/7] chore: lint --- src/table/TR.tsx | 1 + src/table/defaultProps.ts | 2 +- src/table/hooks/useRowExpand.tsx | 14 ++++++-------- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/table/TR.tsx b/src/table/TR.tsx index 8ac8b2430d..111dac27e9 100644 --- a/src/table/TR.tsx +++ b/src/table/TR.tsx @@ -113,6 +113,7 @@ export default function TR(props: TrProps) { } // eslint-disable-next-line }, [virtualConfig.isVirtualScroll, trRef, row]); + const columnVNodeList = props.columns?.map((col, colIndex) => { const cellSpans: RowspanColspan = {}; const params = { diff --git a/src/table/defaultProps.ts b/src/table/defaultProps.ts index 82a2ec0abd..3e0343bd79 100644 --- a/src/table/defaultProps.ts +++ b/src/table/defaultProps.ts @@ -40,7 +40,7 @@ export const primaryTableDefaultProps: Pick< columnControllerVisible: undefined, columns: [], expandIcon: true, - defaultExpandedRowKeys: undefined, + defaultExpandedRowKeys: [], multipleSort: false, reserveSelectedRowOnPaginate: true, defaultSelectedRowKeys: [], diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx index eaca0a899a..4aaadf2787 100644 --- a/src/table/hooks/useRowExpand.tsx +++ b/src/table/hooks/useRowExpand.tsx @@ -10,6 +10,7 @@ import { PrimaryTableCellParams, TableExpandedRowParams, RowEventContext, + RowClassNameParams, } from '../type'; import useClassName from './useClassName'; import useControlled from '../../hooks/useControlled'; @@ -29,22 +30,20 @@ export default function useRowExpand(props: TdPrimaryTableProps) { defaultExpandedRowKeys: props.defaultExpandedRowKeys || [], }); - // 用于在可展开收起的场景给各行添加类名使用,如果没有配置则不加相关类名 - const innerExpandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys ? tExpandedRowKeys : undefined; + const showExpandedRow = Boolean(expandedRow); const getExpandedRowClass = useCallback( - (params) => { - if (!innerExpandedRowKeys) return null; + (params: RowClassNameParams<TableRowData>) => { + // 如果没有配置展开行,则不需要增加展开收起相关的类名 + if (!showExpandedRow) return null; const { row } = params; const { rowKey } = row; const currentRowKey = get(row, rowKey || 'id'); return tableExpandClasses[tExpandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded']; }, - [tExpandedRowKeys, innerExpandedRowKeys, tableExpandClasses], + [tExpandedRowKeys, tableExpandClasses, showExpandedRow], ); - const showExpandedRow = Boolean(expandedRow); - const showExpandIconColumn = props.expandIcon !== false && showExpandedRow; const isFirstColumnFixed = props.columns?.[0]?.fixed === 'left'; @@ -131,7 +130,6 @@ export default function useRowExpand(props: TdPrimaryTableProps) { getExpandColumn, renderExpandedRow, onInnerExpandRowClick, - innerExpandedRowKeys, getExpandedRowClass, }; } From 14446b37ed95dfc85bbbc263df0a6b5115ce8f69 Mon Sep 17 00:00:00 2001 From: Uyarn <uyarnchen@gmail.com> Date: Thu, 19 Sep 2024 16:15:02 +0800 Subject: [PATCH 5/7] chore: update snapshot --- test/snap/__snapshots__/csr.test.jsx.snap | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index b80363eade..0b6bd3dde1 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -112837,7 +112837,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` style="transform: translateY(0px);" > <tr - class="t-table__row--folded t-table-tr--level-0" + class="t-table-tr--level-0 t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -112927,7 +112927,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table__row--folded t-table-tr--level-0" + class="t-table-tr--level-0 t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -113017,7 +113017,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table__row--folded t-table-tr--level-0" + class="t-table-tr--level-0 t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -113107,7 +113107,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table__row--folded t-table-tr--level-0" + class="t-table-tr--level-0 t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -113197,7 +113197,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table__row--folded t-table-tr--level-0" + class="t-table-tr--level-0 t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -113287,7 +113287,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table__row--folded t-table-tr--level-0" + class="t-table-tr--level-0 t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -113377,7 +113377,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table__row--folded t-table-tr--level-0" + class="t-table-tr--level-0 t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -113467,7 +113467,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table__row--folded t-table-tr--level-0" + class="t-table-tr--level-0 t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -113557,7 +113557,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table__row--folded t-table-tr--level-0" + class="t-table-tr--level-0 t-table__row--folded" > <td class="t-table__expandable-icon-cell" @@ -113647,7 +113647,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = ` </td> </tr> <tr - class="t-table__row--folded t-table-tr--level-0" + class="t-table-tr--level-0 t-table__row--folded" > <td class="t-table__expandable-icon-cell" From c0b03a2d10bc0cb980539ae343efd569e88dbea9 Mon Sep 17 00:00:00 2001 From: Uyarn <uyarnchen@gmail.com> Date: Sat, 21 Sep 2024 16:42:05 +0800 Subject: [PATCH 6/7] chore: optimize --- src/table/hooks/useRowExpand.tsx | 3 +-- src/table/type.ts | 1 + src/table/utils.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx index 4aaadf2787..2aa8b61fb9 100644 --- a/src/table/hooks/useRowExpand.tsx +++ b/src/table/hooks/useRowExpand.tsx @@ -36,8 +36,7 @@ export default function useRowExpand(props: TdPrimaryTableProps) { (params: RowClassNameParams<TableRowData>) => { // 如果没有配置展开行,则不需要增加展开收起相关的类名 if (!showExpandedRow) return null; - const { row } = params; - const { rowKey } = row; + const { row, rowKey } = params; const currentRowKey = get(row, rowKey || 'id'); return tableExpandClasses[tExpandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded']; }, diff --git a/src/table/type.ts b/src/table/type.ts index ad8fc49bae..363c9223c2 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -963,6 +963,7 @@ export type TableRowAttributes<T> = export interface RowClassNameParams<T> { row: T; rowIndex: number; + rowKey: string; type?: 'body' | 'foot'; } diff --git a/src/table/utils.ts b/src/table/utils.ts index 3cb0c42c94..250f41fa20 100644 --- a/src/table/utils.ts +++ b/src/table/utils.ts @@ -61,7 +61,7 @@ export function formatRowClassNames( let customClasses: ClassName = []; for (let i = 0, len = rowClassList.length; i < len; i++) { const rName = rowClassList[i]; - let tClass = isFunction(rName) ? rName({ ...params, row: { ...params.row, rowKey } }) : rName; + let tClass = isFunction(rName) ? rName({ ...params, rowKey }) : rName; if (isObject(tClass) && !(tClass instanceof Array)) { // 根据下标设置行类名 tClass[rowIndex] && (tClass = tClass[rowIndex]); From a2f7a034d7792df84bfb02fac147d1411b39fe6d Mon Sep 17 00:00:00 2001 From: Uyarn <uyarnchen@gmail.com> Date: Sat, 21 Sep 2024 16:45:46 +0800 Subject: [PATCH 7/7] chore: optimize --- src/table/TR.tsx | 2 +- src/table/type.ts | 2 +- src/table/utils.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/table/TR.tsx b/src/table/TR.tsx index 111dac27e9..cf4ae5dbe3 100644 --- a/src/table/TR.tsx +++ b/src/table/TR.tsx @@ -97,7 +97,7 @@ export default function TR(props: TrProps) { ); const classes = useMemo(() => { - 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/type.ts b/src/table/type.ts index 363c9223c2..055bda1b2e 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -963,7 +963,7 @@ export type TableRowAttributes<T> = export interface RowClassNameParams<T> { row: T; rowIndex: number; - rowKey: string; + rowKey?: string; type?: 'body' | 'foot'; } diff --git a/src/table/utils.ts b/src/table/utils.ts index 250f41fa20..32fb09024d 100644 --- a/src/table/utils.ts +++ b/src/table/utils.ts @@ -61,7 +61,7 @@ export function formatRowClassNames( let customClasses: ClassName = []; for (let i = 0, len = rowClassList.length; i < len; i++) { const rName = rowClassList[i]; - let tClass = isFunction(rName) ? rName({ ...params, rowKey }) : rName; + let tClass = isFunction(rName) ? rName(params) : rName; if (isObject(tClass) && !(tClass instanceof Array)) { // 根据下标设置行类名 tClass[rowIndex] && (tClass = tClass[rowIndex]);