-
Notifications
You must be signed in to change notification settings - Fork 573
/
index.tsx
121 lines (111 loc) · 3.3 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 * as React from 'react';
import BodyRow from './BodyRow';
import TableContext from '../context/TableContext';
import { GetRowKey, Key, GetComponentProps } from '../interface';
import ExpandedRow from './ExpandedRow';
import BodyContext from '../context/BodyContext';
import { getColumnsKey } from '../utils/valueUtil';
import ResizeContext from '../context/ResizeContext';
import MeasureCell from './MeasureCell';
export interface BodyProps<RecordType> {
data: ReadonlyArray<RecordType>;
getRowKey: GetRowKey<RecordType>;
measureColumnWidth: boolean;
expandedKeys: Set<Key>;
onRow: GetComponentProps<RecordType>;
rowExpandable: (record: RecordType) => boolean;
emptyNode: React.ReactNode;
childrenColumnName: string;
}
function Body<RecordType>({
data,
getRowKey,
measureColumnWidth,
expandedKeys,
onRow,
rowExpandable,
emptyNode,
childrenColumnName,
}: BodyProps<RecordType>) {
const { onColumnResize } = React.useContext(ResizeContext);
const { prefixCls, getComponent } = React.useContext(TableContext);
const { fixHeader, horizonScroll, flattenColumns, componentWidth } = React.useContext(
BodyContext,
);
return React.useMemo(() => {
const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody');
const trComponent = getComponent(['body', 'row'], 'tr');
const tdComponent = getComponent(['body', 'cell'], 'td');
let rows: React.ReactNode;
if (data.length) {
rows = data.map((record, index) => {
const key = getRowKey(record, index);
return (
<BodyRow
key={key}
rowKey={key}
record={record}
recordKey={key}
index={index}
rowComponent={trComponent}
cellComponent={tdComponent}
expandedKeys={expandedKeys}
onRow={onRow}
getRowKey={getRowKey}
rowExpandable={rowExpandable}
childrenColumnName={childrenColumnName}
/>
);
});
} else {
rows = (
<ExpandedRow
expanded
className={`${prefixCls}-placeholder`}
prefixCls={prefixCls}
fixHeader={fixHeader}
fixColumn={horizonScroll}
horizonScroll={horizonScroll}
component={trComponent}
componentWidth={componentWidth}
cellComponent={tdComponent}
colSpan={flattenColumns.length}
>
{emptyNode}
</ExpandedRow>
);
}
const columnsKey = getColumnsKey(flattenColumns);
return (
<WrapperComponent className={`${prefixCls}-tbody`}>
{/* Measure body column width with additional hidden col */}
{measureColumnWidth && (
<tr
aria-hidden="true"
className={`${prefixCls}-measure-row`}
style={{ height: 0, fontSize: 0 }}
>
{columnsKey.map(columnKey => (
<MeasureCell key={columnKey} columnKey={columnKey} onColumnResize={onColumnResize} />
))}
</tr>
)}
{rows}
</WrapperComponent>
);
}, [
data,
prefixCls,
onRow,
measureColumnWidth,
expandedKeys,
getRowKey,
getComponent,
componentWidth,
emptyNode,
flattenColumns,
]);
}
const MemoBody = React.memo(Body);
MemoBody.displayName = 'Body';
export default MemoBody;