Skip to content

Commit 38d75cd

Browse files
li-jia-nanli-jia-nan
authored
feat: expandedRowClassName support receive a string (#1195)
1 parent 8efa10c commit 38d75cd

9 files changed

Lines changed: 67 additions & 49 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ React.render(<Table columns={columns} data={data} />, mountNode);
9393
| expandable.defaultExpandedRowKeys | String[] | [] | initial expanded rows keys |
9494
| expandable.expandedRowKeys | String[] | | current expanded rows keys |
9595
| expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode | | Content render to expanded row |
96-
| expandable.expandedRowClassName | Function(recode, index, indent):string | | get expanded row's className |
96+
| expandable.expandedRowClassName | `string` \| `(recode, index, indent) => string` | | get expanded row's className |
9797
| expandable.expandRowByClick | boolean | | Support expand by click row |
9898
| expandable.expandIconColumnIndex | Number | 0 | The index of expandIcon which column will be inserted when expandIconAsCell is false |
9999
| expandable.expandIcon | props => ReactNode | | Customize expand icon |

‎docs/examples/virtual.tsx‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -188,32 +188,20 @@ const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
188188
// ],
189189
}));
190190

191-
const Demo = () => {
192-
const tblRef = React.useRef<Reference>();
193-
191+
const Demo: React.FC = () => {
192+
const tableRef = React.useRef<Reference>();
194193
return (
195194
<div style={{ width: 800, padding: `0 64px` }}>
196-
<button
197-
onClick={() => {
198-
tblRef.current?.scrollTo({
199-
top: 9999999999999,
200-
});
201-
}}
202-
>
195+
<button onClick={() => tableRef.current?.scrollTo({ top: 9999999999999 })}>
203196
Scroll To End
204197
</button>
205-
206-
<button
207-
onClick={() => {
208-
tblRef.current?.scrollTo({
209-
index: data.length - 1,
210-
});
211-
}}
212-
>
198+
<button onClick={() => tableRef.current?.scrollTo({ top: 0 })}>Scroll To Start</button>
199+
<button onClick={() => tableRef.current?.scrollTo({ index: data.length - 1 })}>
213200
Scroll To Key
214201
</button>
215-
216202
<VirtualTable
203+
style={{ marginTop: 16 }}
204+
ref={tableRef}
217205
columns={columns}
218206
// expandedRowRender={({ b, c }) => b || c}
219207
scroll={{ x: 1300, y: 200 }}
@@ -229,14 +217,10 @@ const Demo = () => {
229217
rowClassName="nice-try"
230218
getContainerWidth={(ele, width) => {
231219
// Minus border
232-
const borderWidth = getComputedStyle(
233-
ele.querySelector('.rc-table-tbody'),
234-
).borderInlineStartWidth;
235-
const mergedWidth = width - parseInt(borderWidth, 10);
236-
220+
const { borderInlineStartWidth } = getComputedStyle(ele.querySelector('.rc-table-tbody'));
221+
const mergedWidth = width - parseInt(borderInlineStartWidth, 10);
237222
return mergedWidth;
238223
}}
239-
ref={tblRef}
240224
/>
241225
</div>
242226
);

‎src/Body/BodyRow.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import devRenderTimes from '../hooks/useRenderTimes';
66
import useRowInfo from '../hooks/useRowInfo';
77
import type { ColumnType, CustomizeComponent, GetRowKey } from '../interface';
88
import ExpandedRow from './ExpandedRow';
9+
import { computedExpandedClassName } from '../utils/expandUtil';
910

1011
export interface BodyRowProps<RecordType> {
1112
record: RecordType;
@@ -126,8 +127,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
126127

127128
// 若没有 expandedRowRender 参数, 将使用 baseRowNode 渲染 Children
128129
// 此时如果 level > 1 则说明是 expandedRow, 一样需要附加 computedExpandedRowClassName
129-
const computedExpandedRowClassName =
130-
expandedRowClassName && expandedRowClassName(record, index, indent);
130+
const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
131131

132132
// ======================== Base tr row ========================
133133
const baseRowNode = (
@@ -139,12 +139,11 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
139139
`${prefixCls}-row`,
140140
`${prefixCls}-row-level-${indent}`,
141141
rowProps?.className,
142-
indent >= 1 ? computedExpandedRowClassName : '',
142+
{
143+
[expandedClsName]: indent >= 1,
144+
},
143145
)}
144-
style={{
145-
...style,
146-
...rowProps?.style,
147-
}}
146+
style={{ ...style, ...rowProps?.style }}
148147
>
149148
{flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
150149
const { render, dataIndex, className: columnClassName } = column;
@@ -192,7 +191,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
192191
className={classNames(
193192
`${prefixCls}-expanded-row`,
194193
`${prefixCls}-expanded-row-level-${indent + 1}`,
195-
computedExpandedRowClassName,
194+
expandedClsName,
196195
)}
197196
prefixCls={prefixCls}
198197
component={RowComponent}

‎src/VirtualTable/BodyLine.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type { FlattenData } from '../hooks/useFlattenRecords';
77
import useRowInfo from '../hooks/useRowInfo';
88
import VirtualCell from './VirtualCell';
99
import { StaticContext } from './context';
10+
import { computedExpandedClassName } from '../utils/expandUtil';
1011

1112
export interface BodyLineProps<RecordType = any> {
1213
data: FlattenData<RecordType>;
@@ -41,7 +42,8 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
4142
let expandRowNode: React.ReactElement;
4243
if (rowSupportExpand && expanded) {
4344
const expandContent = expandedRowRender(record, index, indent + 1, expanded);
44-
const computedExpandedRowClassName = expandedRowClassName?.(record, index, indent);
45+
46+
const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
4547

4648
let additionalProps: React.TdHTMLAttributes<HTMLElement> = {};
4749
if (fixColumn) {
@@ -59,7 +61,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
5961
className={classNames(
6062
`${prefixCls}-expanded-row`,
6163
`${prefixCls}-expanded-row-level-${indent + 1}`,
62-
computedExpandedRowClassName,
64+
expandedClsName,
6365
)}
6466
>
6567
<Cell

‎src/context/TableContext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export interface TableContextProps<RecordType = any> {
3737

3838
// Body
3939
rowClassName: string | RowClassName<RecordType>;
40-
expandedRowClassName: RowClassName<RecordType>;
40+
expandedRowClassName: string | RowClassName<RecordType>;
4141
onRow?: GetComponentProps<RecordType>;
4242
emptyNode?: React.ReactNode;
4343

‎src/interface.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ export interface ExpandableConfig<RecordType> {
247247
/** @deprecated Please use `EXPAND_COLUMN` in `columns` directly */
248248
expandIconColumnIndex?: number;
249249
showExpandColumn?: boolean;
250-
expandedRowClassName?: RowClassName<RecordType>;
250+
expandedRowClassName?: string | RowClassName<RecordType>;
251251
childrenColumnName?: string;
252252
rowExpandable?: (record: RecordType) => boolean;
253253
columnWidth?: number | string;

‎src/utils/expandUtil.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import classNames from 'classnames';
3-
import type { RenderExpandIconProps, Key, GetRowKey } from '../interface';
3+
import type { RenderExpandIconProps, Key, GetRowKey, ExpandableConfig } from '../interface';
44

55
export function renderExpandIcon<RecordType>({
66
prefixCls,
@@ -50,3 +50,18 @@ export function findAllChildrenKeys<RecordType>(
5050

5151
return keys;
5252
}
53+
54+
export function computedExpandedClassName<RecordType>(
55+
cls: ExpandableConfig<RecordType>['expandedRowClassName'],
56+
record: RecordType,
57+
index: number,
58+
indent: number,
59+
) {
60+
if (typeof cls === 'string') {
61+
return cls;
62+
}
63+
if (typeof cls === 'function') {
64+
return cls(record, index, indent);
65+
}
66+
return '';
67+
}

‎tests/ExpandRow.spec.jsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -415,6 +415,21 @@ describe('Table.Expand', () => {
415415
expect(wrapper.find('tbody tr').at(1).hasClass('expand-row-test-class-name')).toBeTruthy();
416416
});
417417

418+
it("renders expend row class correctly when it's string", () => {
419+
const expandedRowClassName = 'expand-row-test-str-class-name';
420+
const wrapper = mount(
421+
createTable({
422+
expandable: {
423+
expandedRowRender,
424+
expandedRowKeys: [0],
425+
expandedRowClassName,
426+
},
427+
}),
428+
);
429+
430+
expect(wrapper.find('tbody tr').at(1).hasClass(expandedRowClassName)).toBeTruthy();
431+
});
432+
418433
it('renders expend row class correctly using children without expandedRowRender', () => {
419434
const expandedRowClassName = vi.fn().mockReturnValue('expand-row-test-class-name');
420435

‎tests/Virtual.spec.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -159,17 +159,20 @@ describe('Table.Virtual', () => {
159159

160160
describe('expandable', () => {
161161
it('basic', () => {
162-
const { container } = getTable({
163-
expandable: {
164-
expandedRowKeys: ['name0', 'name3'],
165-
expandedRowRender: record => record.name,
166-
},
162+
(['bamboo', () => 'bamboo'] as const).forEach(cls => {
163+
const { container } = getTable({
164+
expandable: {
165+
expandedRowKeys: ['name0', 'name3'],
166+
expandedRowRender: record => record.name,
167+
expandedRowClassName: cls,
168+
},
169+
});
170+
const expandedCells = container.querySelectorAll('.rc-table-expanded-row-cell');
171+
expect(expandedCells).toHaveLength(2);
172+
expect(expandedCells[0].textContent).toBe('name0');
173+
expect(expandedCells[1].textContent).toBe('name3');
174+
expect(container.querySelector('.rc-table-expanded-row')).toHaveClass('bamboo');
167175
});
168-
169-
const expandedCells = container.querySelectorAll('.rc-table-expanded-row-cell');
170-
expect(expandedCells).toHaveLength(2);
171-
expect(expandedCells[0].textContent).toBe('name0');
172-
expect(expandedCells[1].textContent).toBe('name3');
173176
});
174177

175178
it('fixed', () => {

0 commit comments

Comments
 (0)