From 5524853d3396f250c3f725793a00413ea7532421 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sat, 28 Sep 2024 23:56:51 +0800 Subject: [PATCH 01/10] feat: expandedRowClassName support receive a string --- src/Body/BodyRow.tsx | 15 ++++++++++++--- src/context/TableContext.tsx | 2 +- tests/ExpandRow.spec.jsx | 15 +++++++++++++++ 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx index 8cee145bf..bbc64db9c 100644 --- a/src/Body/BodyRow.tsx +++ b/src/Body/BodyRow.tsx @@ -126,8 +126,15 @@ function BodyRow( // 若没有 expandedRowRender 参数, 将使用 baseRowNode 渲染 Children // 此时如果 level > 1 则说明是 expandedRow, 一样需要附加 computedExpandedRowClassName - const computedExpandedRowClassName = - expandedRowClassName && expandedRowClassName(record, index, indent); + const computedExpandedRowClassName = React.useMemo(() => { + if (typeof expandedRowClassName === 'string') { + return expandedRowClassName; + } + if (typeof expandedRowClassName === 'function') { + return expandedRowClassName(record, index, indent); + } + return ''; + }, [expandedRowClassName, record, index, indent]); // ======================== Base tr row ======================== const baseRowNode = ( @@ -139,7 +146,9 @@ function BodyRow( `${prefixCls}-row`, `${prefixCls}-row-level-${indent}`, rowProps?.className, - indent >= 1 ? computedExpandedRowClassName : '', + { + [computedExpandedRowClassName]: indent >= 1, + }, )} style={{ ...style, diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx index fd810b378..f566c84f0 100644 --- a/src/context/TableContext.tsx +++ b/src/context/TableContext.tsx @@ -37,7 +37,7 @@ export interface TableContextProps { // Body rowClassName: string | RowClassName; - expandedRowClassName: RowClassName; + expandedRowClassName: string | RowClassName; onRow?: GetComponentProps; emptyNode?: React.ReactNode; diff --git a/tests/ExpandRow.spec.jsx b/tests/ExpandRow.spec.jsx index d06746cd3..93c0bed35 100644 --- a/tests/ExpandRow.spec.jsx +++ b/tests/ExpandRow.spec.jsx @@ -415,6 +415,21 @@ describe('Table.Expand', () => { expect(wrapper.find('tbody tr').at(1).hasClass('expand-row-test-class-name')).toBeTruthy(); }); + it("renders expend row class correctly when it's string", () => { + const expandedRowClassName = 'expand-row-test-str-class-name'; + const wrapper = mount( + createTable({ + expandable: { + expandedRowRender, + expandedRowKeys: [0], + expandedRowClassName, + }, + }), + ); + + expect(wrapper.find('tbody tr').at(1).hasClass(expandedRowClassName)).toBeTruthy(); + }); + it('renders expend row class correctly using children without expandedRowRender', () => { const expandedRowClassName = vi.fn().mockReturnValue('expand-row-test-class-name'); From 99f61c840ae84bf677f35bd61a2080114c4416be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sun, 29 Sep 2024 00:01:22 +0800 Subject: [PATCH 02/10] fix: fix type --- src/VirtualTable/BodyLine.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/VirtualTable/BodyLine.tsx b/src/VirtualTable/BodyLine.tsx index 4be634457..618bd8e6e 100644 --- a/src/VirtualTable/BodyLine.tsx +++ b/src/VirtualTable/BodyLine.tsx @@ -41,7 +41,15 @@ const BodyLine = React.forwardRef((props, ref) => let expandRowNode: React.ReactElement; if (rowSupportExpand && expanded) { const expandContent = expandedRowRender(record, index, indent + 1, expanded); - const computedExpandedRowClassName = expandedRowClassName?.(record, index, indent); + + let computedExpandedRowClassName = ''; + + if (typeof expandedRowClassName === 'string') { + computedExpandedRowClassName = expandedRowClassName; + } + if (typeof expandedRowClassName === 'function') { + computedExpandedRowClassName = expandedRowClassName(record, index, indent); + } let additionalProps: React.TdHTMLAttributes = {}; if (fixColumn) { From 3dcc4a52b1e3e81e0674d2a2759fefce2edbedcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sun, 29 Sep 2024 00:15:47 +0800 Subject: [PATCH 03/10] demo: update demo --- docs/examples/virtual.tsx | 57 ++++++++++++++++++++++++++++----------- src/interface.ts | 2 +- 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/docs/examples/virtual.tsx b/docs/examples/virtual.tsx index bcb1a59fe..d1dfa0857 100644 --- a/docs/examples/virtual.tsx +++ b/docs/examples/virtual.tsx @@ -189,31 +189,37 @@ const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({ })); const Demo = () => { - const tblRef = React.useRef(); - + const table1Ref = React.useRef(); + const table2Ref = React.useRef(); return (
- + - b || c} scroll={{ x: 1300, y: 200 }} @@ -229,14 +235,33 @@ const Demo = () => { rowClassName="nice-try" getContainerWidth={(ele, width) => { // Minus border - const borderWidth = getComputedStyle( - ele.querySelector('.rc-table-tbody'), - ).borderInlineStartWidth; - const mergedWidth = width - parseInt(borderWidth, 10); - + const { borderInlineStartWidth } = getComputedStyle(ele.querySelector('.rc-table-tbody')); + const mergedWidth = width - parseInt(borderInlineStartWidth, 10); + return mergedWidth; + }} + /> + b || c} + scroll={{ x: 1300, y: 200 }} + data={data} + // data={[]} + rowKey="indexKey" + expandable={{ + expandedRowRender: () => 2333, + columnWidth: 60, + expandedRowClassName: 'good-one-string', + }} + // onRow={() => ({ className: 'rowed' })} + rowClassName="nice-try" + getContainerWidth={(ele, width) => { + // Minus border + const { borderInlineStartWidth } = getComputedStyle(ele.querySelector('.rc-table-tbody')); + const mergedWidth = width - parseInt(borderInlineStartWidth, 10); return mergedWidth; }} - ref={tblRef} />
); diff --git a/src/interface.ts b/src/interface.ts index 051ac57ae..e645b2145 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -247,7 +247,7 @@ export interface ExpandableConfig { /** @deprecated Please use `EXPAND_COLUMN` in `columns` directly */ expandIconColumnIndex?: number; showExpandColumn?: boolean; - expandedRowClassName?: RowClassName; + expandedRowClassName?: string | RowClassName; childrenColumnName?: string; rowExpandable?: (record: RecordType) => boolean; columnWidth?: number | string; From edcd86512806d13c2435ba609f523390c4491be9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sun, 29 Sep 2024 00:29:51 +0800 Subject: [PATCH 04/10] test: add test case --- tests/Virtual.spec.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tests/Virtual.spec.tsx b/tests/Virtual.spec.tsx index db6946deb..0bfff31c9 100644 --- a/tests/Virtual.spec.tsx +++ b/tests/Virtual.spec.tsx @@ -163,13 +163,14 @@ describe('Table.Virtual', () => { expandable: { expandedRowKeys: ['name0', 'name3'], expandedRowRender: record => record.name, + expandedRowClassName: 'bamboo', }, }); - const expandedCells = container.querySelectorAll('.rc-table-expanded-row-cell'); expect(expandedCells).toHaveLength(2); expect(expandedCells[0].textContent).toBe('name0'); expect(expandedCells[1].textContent).toBe('name3'); + expect(container.querySelector('.rc-table-expanded-row')).toHaveClass('bamboo'); }); it('fixed', () => { From 8c568844cb4ae6c67f7fa021c104efbd51c50e86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sun, 29 Sep 2024 00:34:07 +0800 Subject: [PATCH 05/10] test: add test case --- tests/Virtual.spec.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/tests/Virtual.spec.tsx b/tests/Virtual.spec.tsx index 0bfff31c9..f9170c7d5 100644 --- a/tests/Virtual.spec.tsx +++ b/tests/Virtual.spec.tsx @@ -159,18 +159,20 @@ describe('Table.Virtual', () => { describe('expandable', () => { it('basic', () => { - const { container } = getTable({ - expandable: { - expandedRowKeys: ['name0', 'name3'], - expandedRowRender: record => record.name, - expandedRowClassName: 'bamboo', - }, + (['bamboo', () => 'bamboo'] as const).forEach(cls => { + const { container } = getTable({ + expandable: { + expandedRowKeys: ['name0', 'name3'], + expandedRowRender: record => record.name, + expandedRowClassName: cls, + }, + }); + const expandedCells = container.querySelectorAll('.rc-table-expanded-row-cell'); + expect(expandedCells).toHaveLength(2); + expect(expandedCells[0].textContent).toBe('name0'); + expect(expandedCells[1].textContent).toBe('name3'); + expect(container.querySelector('.rc-table-expanded-row')).toHaveClass('bamboo'); }); - const expandedCells = container.querySelectorAll('.rc-table-expanded-row-cell'); - expect(expandedCells).toHaveLength(2); - expect(expandedCells[0].textContent).toBe('name0'); - expect(expandedCells[1].textContent).toBe('name3'); - expect(container.querySelector('.rc-table-expanded-row')).toHaveClass('bamboo'); }); it('fixed', () => { From fa5f1db47713a38192e68398c38f2787024a00cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sun, 29 Sep 2024 09:03:26 +0800 Subject: [PATCH 06/10] fix: fix --- README.md | 2 +- docs/examples/virtual.tsx | 53 +++++---------------------------------- 2 files changed, 7 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index 5adb71f89..8d23a487f 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ React.render(, mountNode); | expandable.defaultExpandedRowKeys | String[] | [] | initial expanded rows keys | | expandable.expandedRowKeys | String[] | | current expanded rows keys | | expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode | | Content render to expanded row | -| expandable.expandedRowClassName | Function(recode, index, indent):string | | get expanded row's className | +| expandable.expandedRowClassName | `string` \| `(recode, index, indent) => string` | | get expanded row's className | | expandable.expandRowByClick | boolean | | Support expand by click row | | expandable.expandIconColumnIndex | Number | 0 | The index of expandIcon which column will be inserted when expandIconAsCell is false | | expandable.expandIcon | props => ReactNode | | Customize expand icon | diff --git a/docs/examples/virtual.tsx b/docs/examples/virtual.tsx index d1dfa0857..3371ebd73 100644 --- a/docs/examples/virtual.tsx +++ b/docs/examples/virtual.tsx @@ -188,38 +188,20 @@ const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({ // ], })); -const Demo = () => { - const table1Ref = React.useRef(); - const table2Ref = React.useRef(); +const Demo: React.FC = () => { + const tableRef = React.useRef(); return (
- - - + b || c} scroll={{ x: 1300, y: 200 }} @@ -240,29 +222,6 @@ const Demo = () => { return mergedWidth; }} /> - b || c} - scroll={{ x: 1300, y: 200 }} - data={data} - // data={[]} - rowKey="indexKey" - expandable={{ - expandedRowRender: () => 2333, - columnWidth: 60, - expandedRowClassName: 'good-one-string', - }} - // onRow={() => ({ className: 'rowed' })} - rowClassName="nice-try" - getContainerWidth={(ele, width) => { - // Minus border - const { borderInlineStartWidth } = getComputedStyle(ele.querySelector('.rc-table-tbody')); - const mergedWidth = width - parseInt(borderInlineStartWidth, 10); - return mergedWidth; - }} - />
); }; From 4beffa5b4e98cdae4d8f0ee57ad2bebcc6e0f450 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sun, 29 Sep 2024 10:45:02 +0800 Subject: [PATCH 07/10] chore: Code Optimization --- src/Body/BodyRow.tsx | 20 +++++--------------- src/VirtualTable/BodyLine.tsx | 12 +++--------- src/utils/expandUtil.tsx | 18 +++++++++++++++++- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx index bbc64db9c..7419fc0b4 100644 --- a/src/Body/BodyRow.tsx +++ b/src/Body/BodyRow.tsx @@ -6,6 +6,7 @@ import devRenderTimes from '../hooks/useRenderTimes'; import useRowInfo from '../hooks/useRowInfo'; import type { ColumnType, CustomizeComponent, GetRowKey } from '../interface'; import ExpandedRow from './ExpandedRow'; +import { computedExpandedClassName } from '@/utils/expandUtil'; export interface BodyRowProps { record: RecordType; @@ -126,15 +127,7 @@ function BodyRow( // 若没有 expandedRowRender 参数, 将使用 baseRowNode 渲染 Children // 此时如果 level > 1 则说明是 expandedRow, 一样需要附加 computedExpandedRowClassName - const computedExpandedRowClassName = React.useMemo(() => { - if (typeof expandedRowClassName === 'string') { - return expandedRowClassName; - } - if (typeof expandedRowClassName === 'function') { - return expandedRowClassName(record, index, indent); - } - return ''; - }, [expandedRowClassName, record, index, indent]); + const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent); // ======================== Base tr row ======================== const baseRowNode = ( @@ -147,13 +140,10 @@ function BodyRow( `${prefixCls}-row-level-${indent}`, rowProps?.className, { - [computedExpandedRowClassName]: indent >= 1, + [expandedClsName]: indent >= 1, }, )} - style={{ - ...style, - ...rowProps?.style, - }} + style={{ ...style, ...rowProps?.style }} > {flattenColumns.map((column: ColumnType, colIndex) => { const { render, dataIndex, className: columnClassName } = column; @@ -201,7 +191,7 @@ function BodyRow( className={classNames( `${prefixCls}-expanded-row`, `${prefixCls}-expanded-row-level-${indent + 1}`, - computedExpandedRowClassName, + expandedClsName, )} prefixCls={prefixCls} component={RowComponent} diff --git a/src/VirtualTable/BodyLine.tsx b/src/VirtualTable/BodyLine.tsx index 618bd8e6e..55416a43d 100644 --- a/src/VirtualTable/BodyLine.tsx +++ b/src/VirtualTable/BodyLine.tsx @@ -7,6 +7,7 @@ import type { FlattenData } from '../hooks/useFlattenRecords'; import useRowInfo from '../hooks/useRowInfo'; import VirtualCell from './VirtualCell'; import { StaticContext } from './context'; +import { computedExpandedClassName } from '@/utils/expandUtil'; export interface BodyLineProps { data: FlattenData; @@ -42,14 +43,7 @@ const BodyLine = React.forwardRef((props, ref) => if (rowSupportExpand && expanded) { const expandContent = expandedRowRender(record, index, indent + 1, expanded); - let computedExpandedRowClassName = ''; - - if (typeof expandedRowClassName === 'string') { - computedExpandedRowClassName = expandedRowClassName; - } - if (typeof expandedRowClassName === 'function') { - computedExpandedRowClassName = expandedRowClassName(record, index, indent); - } + const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent); let additionalProps: React.TdHTMLAttributes = {}; if (fixColumn) { @@ -67,7 +61,7 @@ const BodyLine = React.forwardRef((props, ref) => className={classNames( `${prefixCls}-expanded-row`, `${prefixCls}-expanded-row-level-${indent + 1}`, - computedExpandedRowClassName, + expandedClsName, )} > ({ prefixCls, @@ -50,3 +50,19 @@ export function findAllChildrenKeys( return keys; } + +export function computedExpandedClassName( + cls: ExpandableConfig['expandedRowClassName'], + record: RecordType, + index: number, + indent: number, +) { + let resultClsName = ''; + if (typeof cls === 'string') { + resultClsName = cls; + } + if (typeof cls === 'function') { + resultClsName = cls(record, index, indent); + } + return resultClsName; +} From e7d1f360fb7f1630606c0bacf9706ffd865cdb6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sun, 29 Sep 2024 10:48:07 +0800 Subject: [PATCH 08/10] chore: Code Optimization --- src/Body/BodyRow.tsx | 2 +- src/VirtualTable/BodyLine.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx index 7419fc0b4..d33cf38dc 100644 --- a/src/Body/BodyRow.tsx +++ b/src/Body/BodyRow.tsx @@ -6,7 +6,7 @@ import devRenderTimes from '../hooks/useRenderTimes'; import useRowInfo from '../hooks/useRowInfo'; import type { ColumnType, CustomizeComponent, GetRowKey } from '../interface'; import ExpandedRow from './ExpandedRow'; -import { computedExpandedClassName } from '@/utils/expandUtil'; +import { computedExpandedClassName } from '../utils/expandUtil'; export interface BodyRowProps { record: RecordType; diff --git a/src/VirtualTable/BodyLine.tsx b/src/VirtualTable/BodyLine.tsx index 55416a43d..a02d195a3 100644 --- a/src/VirtualTable/BodyLine.tsx +++ b/src/VirtualTable/BodyLine.tsx @@ -7,7 +7,7 @@ import type { FlattenData } from '../hooks/useFlattenRecords'; import useRowInfo from '../hooks/useRowInfo'; import VirtualCell from './VirtualCell'; import { StaticContext } from './context'; -import { computedExpandedClassName } from '@/utils/expandUtil'; +import { computedExpandedClassName } from '../utils/expandUtil'; export interface BodyLineProps { data: FlattenData; From 251c00ef9692793179de95006d0e0399dcf15a65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sun, 29 Sep 2024 10:58:14 +0800 Subject: [PATCH 09/10] chore: Code Optimization --- src/utils/expandUtil.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/utils/expandUtil.tsx b/src/utils/expandUtil.tsx index 7ae5032df..8ac353504 100644 --- a/src/utils/expandUtil.tsx +++ b/src/utils/expandUtil.tsx @@ -57,12 +57,10 @@ export function computedExpandedClassName( index: number, indent: number, ) { - let resultClsName = ''; if (typeof cls === 'string') { - resultClsName = cls; + return cls; } if (typeof cls === 'function') { - resultClsName = cls(record, index, indent); + return cls(record, index, indent); } - return resultClsName; } From 687e0a5df03181f9b5b5085d2e5643f04e9103b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sun, 29 Sep 2024 11:02:08 +0800 Subject: [PATCH 10/10] test: fix test case --- src/utils/expandUtil.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/expandUtil.tsx b/src/utils/expandUtil.tsx index 8ac353504..df6395c78 100644 --- a/src/utils/expandUtil.tsx +++ b/src/utils/expandUtil.tsx @@ -63,4 +63,5 @@ export function computedExpandedClassName( if (typeof cls === 'function') { return cls(record, index, indent); } + return ''; }