Skip to content

Commit 1bb3ca6

Browse files
RedJueRedJue
authored
perf: make column support jsx conditions (#40568) (#954)
* perf: make column support jsx conditions * refactor: filter logic
1 parent ec2374b commit 1bb3ca6

File tree

3 files changed

+149
-32
lines changed

3 files changed

+149
-32
lines changed

‎src/hooks/useColumns.tsx‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import * as React from 'react';
2-
import warning from 'rc-util/lib/warning';
31
import toArray from 'rc-util/lib/Children/toArray';
2+
import warning from 'rc-util/lib/warning';
3+
import * as React from 'react';
4+
import { EXPAND_COLUMN } from '../constant';
45
import type {
6+
ColumnGroupType,
57
ColumnsType,
68
ColumnType,
9+
Direction,
710
FixedType,
8-
Key,
911
GetRowKey,
10-
TriggerEventHandler,
12+
Key,
1113
RenderExpandIcon,
12-
ColumnGroupType,
13-
Direction,
14+
TriggerEventHandler,
1415
} from '../interface';
1516
import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
16-
import { EXPAND_COLUMN } from '../constant';
1717

1818
export function convertChildrenToColumns<RecordType>(
1919
children: React.ReactNode,
@@ -36,30 +36,31 @@ export function convertChildrenToColumns<RecordType>(
3636
}
3737

3838
function flatColumns<RecordType>(columns: ColumnsType<RecordType>): ColumnType<RecordType>[] {
39-
return columns.reduce((list, column) => {
40-
const { fixed } = column;
41-
42-
// Convert `fixed='true'` to `fixed='left'` instead
43-
const parsedFixed = fixed === true ? 'left' : fixed;
39+
return columns
40+
.filter(column => column && typeof column === 'object')
41+
.reduce((list, column) => {
42+
const { fixed } = column;
43+
// Convert `fixed='true'` to `fixed='left'` instead
44+
const parsedFixed = fixed === true ? 'left' : fixed;
4445

45-
const subColumns = (column as ColumnGroupType<RecordType>).children;
46-
if (subColumns && subColumns.length > 0) {
46+
const subColumns = (column as ColumnGroupType<RecordType>).children;
47+
if (subColumns && subColumns.length > 0) {
48+
return [
49+
...list,
50+
...flatColumns(subColumns).map(subColum => ({
51+
fixed: parsedFixed,
52+
...subColum,
53+
})),
54+
];
55+
}
4756
return [
4857
...list,
49-
...flatColumns(subColumns).map(subColum => ({
58+
{
59+
...column,
5060
fixed: parsedFixed,
51-
...subColum,
52-
})),
61+
},
5362
];
54-
}
55-
return [
56-
...list,
57-
{
58-
...column,
59-
fixed: parsedFixed,
60-
},
61-
];
62-
}, []);
63+
}, []);
6364
}
6465

6566
function warningFixed(flattenColumns: readonly { fixed?: FixedType }[]) {

‎tests/Table.spec.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1153,4 +1153,49 @@ describe('Table.Basic', () => {
11531153
expect(wrapper.render()).toMatchSnapshot();
11541154
expect(wrapper.find('col')).toHaveLength(tColumns.length + 1);
11551155
});
1156+
it('columns support JSX condition', () => {
1157+
const Example = () => {
1158+
const [count, setCount] = React.useState(0);
1159+
const columns = [
1160+
{
1161+
title: 'title',
1162+
dataIndex: 'a',
1163+
render: () => count,
1164+
},
1165+
count === 1 && {
1166+
title: 'title2',
1167+
dataIndex: 'b',
1168+
render: () => count + 1,
1169+
},
1170+
count === 2
1171+
? {
1172+
title: 'title3',
1173+
dataIndex: 'c',
1174+
render: () => count + 1,
1175+
}
1176+
: null,
1177+
];
1178+
return (
1179+
<>
1180+
<button
1181+
onClick={() => {
1182+
setCount(val => val + 1);
1183+
}}
1184+
>
1185+
Click {count} times
1186+
</button>
1187+
<Table columns={columns} data={data} />
1188+
</>
1189+
);
1190+
};
1191+
const wrapper = mount(<Example />);
1192+
1193+
wrapper.find('button').simulate('click');
1194+
expect(wrapper.find('.rc-table-cell').at(1).text()).toEqual('title2');
1195+
1196+
wrapper.find('button').simulate('click');
1197+
expect(wrapper.find('.rc-table-cell').at(1).text()).toEqual('title3');
1198+
1199+
expect(wrapper.render()).toMatchSnapshot();
1200+
});
11561201
});

‎tests/__snapshots__/Table.spec.js.snap‎

Lines changed: 77 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,82 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Table.Basic columns support JSX condition 1`] = `
4+
[
5+
<button>
6+
Click 2 times
7+
</button>,
8+
<div
9+
class="rc-table"
10+
>
11+
<div
12+
class="rc-table-container"
13+
>
14+
<div
15+
class="rc-table-content"
16+
>
17+
<table
18+
style="table-layout: auto;"
19+
>
20+
<colgroup />
21+
<thead
22+
class="rc-table-thead"
23+
>
24+
<tr>
25+
<th
26+
class="rc-table-cell"
27+
scope="col"
28+
>
29+
title
30+
</th>
31+
<th
32+
class="rc-table-cell"
33+
scope="col"
34+
>
35+
title3
36+
</th>
37+
</tr>
38+
</thead>
39+
<tbody
40+
class="rc-table-tbody"
41+
>
42+
<tr
43+
class="rc-table-row rc-table-row-level-0"
44+
data-row-key="key0"
45+
>
46+
<td
47+
class="rc-table-cell"
48+
>
49+
2
50+
</td>
51+
<td
52+
class="rc-table-cell"
53+
>
54+
3
55+
</td>
56+
</tr>
57+
<tr
58+
class="rc-table-row rc-table-row-level-0"
59+
data-row-key="key1"
60+
>
61+
<td
62+
class="rc-table-cell"
63+
>
64+
2
65+
</td>
66+
<td
67+
class="rc-table-cell"
68+
>
69+
3
70+
</td>
71+
</tr>
72+
</tbody>
73+
</table>
74+
</div>
75+
</div>
76+
</div>,
77+
]
78+
`;
79+
380
exports[`Table.Basic custom components renders correctly 1`] = `
481
<div
582
class="rc-table"
@@ -609,9 +686,6 @@ exports[`Table.Basic renders correctly falsy columns 1`] = `
609686
>
610687
Lucy
611688
</td>
612-
<td
613-
class="rc-table-cell"
614-
/>
615689
</tr>
616690
<tr
617691
class="rc-table-row rc-table-row-level-0"
@@ -622,9 +696,6 @@ exports[`Table.Basic renders correctly falsy columns 1`] = `
622696
>
623697
Jack
624698
</td>
625-
<td
626-
class="rc-table-cell"
627-
/>
628699
</tr>
629700
</tbody>
630701
</table>

0 commit comments

Comments
 (0)