-
Notifications
You must be signed in to change notification settings - Fork 577
/
index.tsx
121 lines (106 loc) · 3.24 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { useContext } from '@rc-component/context';
import * as React from 'react';
import type { PerfRecord } from '../context/PerfContext';
import PerfContext from '../context/PerfContext';
import TableContext, { responseImmutable } from '../context/TableContext';
import useFlattenRecords from '../hooks/useFlattenRecords';
import devRenderTimes from '../hooks/useRenderTimes';
import { getColumnsKey } from '../utils/valueUtil';
import BodyRow from './BodyRow';
import ExpandedRow from './ExpandedRow';
import MeasureRow from './MeasureRow';
export interface BodyProps<RecordType> {
data: readonly RecordType[];
measureColumnWidth: boolean;
}
function Body<RecordType>(props: BodyProps<RecordType>) {
if (process.env.NODE_ENV !== 'production') {
devRenderTimes(props);
}
const { data, measureColumnWidth } = props;
const {
prefixCls,
getComponent,
onColumnResize,
flattenColumns,
getRowKey,
expandedKeys,
childrenColumnName,
emptyNode,
} = useContext(TableContext, [
'prefixCls',
'getComponent',
'onColumnResize',
'flattenColumns',
'getRowKey',
'expandedKeys',
'childrenColumnName',
'emptyNode',
]);
const flattenData: { record: RecordType; indent: number; index: number }[] =
useFlattenRecords<RecordType>(data, childrenColumnName, expandedKeys, getRowKey);
// =================== Performance ====================
const perfRef = React.useRef<PerfRecord>({
renderWithProps: false,
});
// ====================== Render ======================
const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody');
const trComponent = getComponent(['body', 'row'], 'tr');
const tdComponent = getComponent(['body', 'cell'], 'td');
const thComponent = getComponent(['body', 'cell'], 'th');
let rows: React.ReactNode;
if (data.length) {
rows = flattenData.map((item, idx) => {
const { record, indent, index: renderIndex } = item;
const key = getRowKey(record, idx);
return (
<BodyRow
key={key}
rowKey={key}
record={record}
index={idx}
renderIndex={renderIndex}
rowComponent={trComponent}
cellComponent={tdComponent}
scopeCellComponent={thComponent}
getRowKey={getRowKey}
indent={indent}
/>
);
});
} else {
rows = (
<ExpandedRow
expanded
className={`${prefixCls}-placeholder`}
prefixCls={prefixCls}
component={trComponent}
cellComponent={tdComponent}
colSpan={flattenColumns.length}
isEmpty
>
{emptyNode}
</ExpandedRow>
);
}
const columnsKey = getColumnsKey(flattenColumns);
return (
<PerfContext.Provider value={perfRef.current}>
<WrapperComponent className={`${prefixCls}-tbody`}>
{/* Measure body column width with additional hidden col */}
{measureColumnWidth && (
<MeasureRow
prefixCls={prefixCls}
columnsKey={columnsKey}
onColumnResize={onColumnResize}
/>
)}
{rows}
</WrapperComponent>
</PerfContext.Provider>
);
}
if (process.env.NODE_ENV !== 'production') {
Body.displayName = 'Body';
}
export default responseImmutable(Body);