@hi-ui/table 4.1.1 → 4.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/lib/cjs/TableBody.js +14 -30
  3. package/lib/cjs/hooks/use-col-width.js +18 -17
  4. package/lib/cjs/hooks/use-expand.js +8 -1
  5. package/lib/cjs/use-table.js +19 -17
  6. package/lib/esm/TableBody.js +14 -30
  7. package/lib/esm/hooks/use-col-width.js +18 -17
  8. package/lib/esm/hooks/use-expand.js +8 -1
  9. package/lib/esm/use-table.js +19 -17
  10. package/lib/types/context.d.ts +2 -2
  11. package/lib/types/hooks/use-col-width.d.ts +1 -2
  12. package/lib/types/types.d.ts +4 -1
  13. package/lib/types/use-table.d.ts +1 -1
  14. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @hi-ui/table
2
2
 
3
+ ## 4.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2572](https://github.com/XiaoMi/hiui/pull/2572) [`eee5e6d16`](https://github.com/XiaoMi/hiui/commit/eee5e6d1658685a6119b5aa40038c572145b3b4e) Thanks [@zyprepare](https://github.com/zyprepare)! - perf: 表格性能优化
8
+
9
+ - Updated dependencies [[`937052db3`](https://github.com/XiaoMi/hiui/commit/937052db36ecfa50fef53df13d159bee0d08fa41), [`ccb1eec12`](https://github.com/XiaoMi/hiui/commit/ccb1eec122a33466536b365d443f175d1e16dc86), [`eee5e6d16`](https://github.com/XiaoMi/hiui/commit/eee5e6d1658685a6119b5aa40038c572145b3b4e)]:
10
+ - @hi-ui/icons@4.0.14
11
+ - @hi-ui/popper@4.1.0
12
+ - @hi-ui/tree-utils@4.1.1
13
+
3
14
  ## 4.1.1
4
15
 
5
16
  ### Patch Changes
package/lib/cjs/TableBody.js CHANGED
@@ -55,7 +55,6 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
55
55
  var _useTableContext = context.useTableContext(),
56
56
  columns = _useTableContext.columns,
57
57
  leafColumns = _useTableContext.leafColumns,
58
- setMeasureRowElement = _useTableContext.setMeasureRowElement,
59
58
  isExpandTreeRows = _useTableContext.isExpandTreeRows,
60
59
  transitionData = _useTableContext.transitionData,
61
60
  getColgroupProps = _useTableContext.getColgroupProps,
@@ -71,7 +70,8 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
71
70
  hasSumColumn = _useTableContext.hasSumColumn,
72
71
  sumRow = _useTableContext.sumRow,
73
72
  colWidths = _useTableContext.colWidths,
74
- virtual = _useTableContext.virtual;
73
+ virtual = _useTableContext.virtual,
74
+ measureRowElementRef = _useTableContext.measureRowElementRef;
75
75
 
76
76
  var cls = classname.cx(prefixCls + "-body");
77
77
  var getRequiredProps = useLatest.useLatestCallback(function (id) {
@@ -88,10 +88,8 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
88
88
 
89
89
  var _useState = React.useState(0),
90
90
  scrollLeft = _useState[0],
91
- setScrollLeft = _useState[1]; // 是否使用虚拟滚动
91
+ setScrollLeft = _useState[1];
92
92
 
93
-
94
- var showVirtual = virtual && typeAssertion.isArrayNonEmpty(transitionData);
95
93
  var rowWidth = React.useMemo(function () {
96
94
  var tmpWidth = 0;
97
95
  colWidths.forEach(function (width) {
@@ -106,7 +104,7 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
106
104
  onTableBodyScroll(evt);
107
105
  }, [scrollBodyElementRef, onTableBodyScroll]);
108
106
 
109
- if (showVirtual) {
107
+ if (virtual) {
110
108
  // TODO： avg和summay row的逻辑
111
109
  var realHeight = (_a = scrollBodyElementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
112
110
  var vMaxHeight = maxHeight ? !isNaN(Number(String(maxHeight).replace(/px/, ''))) ? Number(maxHeight) : realHeight : 300;
@@ -117,20 +115,11 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
117
115
  onWheel: onTableBodyScrollMock,
118
116
  style: {
119
117
  maxHeight: maxHeight !== undefined ? maxHeight : undefined,
120
- // // maxHeight 小于 table 实际高度才出现纵向滚动条
121
- // overflowY:
122
- // maxHeight !== undefined &&
123
- // bodyTableRef.current &&
124
- // bodyTableRef.current.clientHeight > maxHeight
125
- // ? 'scroll'
126
- // : undefined,
127
118
  // 表格宽度大于div宽度才出现横向滚动条
128
119
  overflowX: canScroll ? 'scroll' : undefined
129
120
  }
130
121
  }, /*#__PURE__*/React__default["default"].createElement("div", {
131
- ref: function ref(domElement) {
132
- setMeasureRowElement(domElement);
133
- },
122
+ ref: measureRowElementRef,
134
123
  style: {
135
124
  height: 1,
136
125
  background: 'transparent'
@@ -142,7 +131,7 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
142
131
  background: 'transparent',
143
132
  width: rowWidth
144
133
  }
145
- }), /*#__PURE__*/React__default["default"].createElement("div", {
134
+ }), typeAssertion.isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default["default"].createElement("div", {
146
135
  style: {
147
136
  width: '100%',
148
137
  position: 'sticky',
@@ -168,7 +157,13 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
168
157
  rowData: row
169
158
  }, getRequiredProps(row.id))));
170
159
  }
171
- })));
160
+ })) : renderEmptyContent(Object.assign({
161
+ className: prefixCls + "-empty-content",
162
+ colSpan: columns.length,
163
+ emptyContent: emptyContent
164
+ }, scrollBodyElementRef.current ? {
165
+ scrollBodyWidth: window.getComputedStyle(scrollBodyElementRef.current).getPropertyValue('width')
166
+ } : {})));
172
167
  } // 外层增加 div 作为滚动容器
173
168
 
174
169
 
@@ -178,13 +173,6 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
178
173
  onScroll: onTableBodyScroll,
179
174
  style: {
180
175
  maxHeight: maxHeight !== undefined ? maxHeight : undefined,
181
- // // maxHeight 小于 table 实际高度才出现纵向滚动条
182
- // overflowY:
183
- // maxHeight !== undefined &&
184
- // bodyTableRef.current &&
185
- // bodyTableRef.current.clientHeight > maxHeight
186
- // ? 'scroll'
187
- // : undefined,
188
176
  // 表格宽度大于div宽度才出现横向滚动条
189
177
  overflowX: canScroll ? 'scroll' : undefined
190
178
  }
@@ -200,11 +188,7 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
200
188
  }, getColgroupProps(col, idx)));
201
189
  })), /*#__PURE__*/React__default["default"].createElement("tbody", null, typeAssertion.isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, transitionData.map(function (row, index) {
202
190
  return /*#__PURE__*/React__default["default"].createElement(TableRow.TableRow, Object.assign({
203
- ref: function ref(dom) {
204
- if (index === 0) {
205
- setMeasureRowElement(dom);
206
- }
207
- },
191
+ ref: index === 0 ? measureRowElementRef : null,
208
192
  // key={depth + index}
209
193
  key: row.id,
210
194
  // @ts-ignore
package/lib/cjs/hooks/use-col-width.js CHANGED
@@ -32,18 +32,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
32
32
  var useColWidth = function useColWidth(_ref) {
33
33
  var columns = _ref.columns,
34
34
  virtual = _ref.virtual;
35
+ var measureRowElementRef = React__default["default"].useRef(null);
35
36
 
36
- var _React$useState = React__default["default"].useState(null),
37
- measureRowElement = _React$useState[0],
38
- setMeasureRowElement = _React$useState[1];
39
-
40
- var _React$useState2 = React__default["default"].useState(function () {
37
+ var _React$useState = React__default["default"].useState(function () {
41
38
  return index.getGroupItemWidth(columns);
42
39
  }),
43
- colWidths = _React$useState2[0],
44
- setColWidths = _React$useState2[1];
40
+ colWidths = _React$useState[0],
41
+ setColWidths = _React$useState[1];
45
42
 
46
43
  var getVirtualWidths = React.useCallback(function () {
44
+ var measureRowElement = measureRowElementRef.current;
45
+
47
46
  if (!measureRowElement) {
48
47
  return index.getGroupItemWidth(columns);
49
48
  }
@@ -70,20 +69,23 @@ var useColWidth = function useColWidth(_ref) {
70
69
  return columnItem.width || columnDefaultWidth;
71
70
  });
72
71
  }
73
- }, [measureRowElement, columns]);
72
+ }, [columns]);
74
73
  useUpdateEffect.useUpdateEffect(function () {
75
74
  if (virtual) {
76
75
  // 虚拟滚动的计算需要根据容器来做分配，不能使用没有witdh默认设置为0的方式来做表格平均分配
77
76
  setColWidths(getVirtualWidths());
78
- } else {
79
- setColWidths(index.getGroupItemWidth(columns));
80
77
  }
81
- }, [columns, getVirtualWidths, virtual]);
78
+ }, [getVirtualWidths, virtual]);
79
+ useUpdateEffect.useUpdateEffect(function () {
80
+ setColWidths(index.getGroupItemWidth(columns));
81
+ }, [columns]);
82
82
  /**
83
83
  * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
84
84
  */
85
85
 
86
86
  React__default["default"].useEffect(function () {
87
+ var measureRowElement = measureRowElementRef.current;
88
+
87
89
  if (measureRowElement) {
88
90
  var _resizeObserver = new ResizeObserver(function () {
89
91
  if (virtual) {
@@ -107,11 +109,11 @@ var useColWidth = function useColWidth(_ref) {
107
109
  }
108
110
 
109
111
  return function () {}; // 测量元素在内容列为空时会是空，切换会使测量元素变化，导致后续的resize时间无法响应,此处测量元素变化时需要重新绑定
110
- }, [measureRowElement, virtual]);
112
+ }, [getVirtualWidths, virtual]);
111
113
 
112
- var _React$useState3 = React__default["default"].useState(null),
113
- headerTableElement = _React$useState3[0],
114
- setHeaderTableElement = _React$useState3[1];
114
+ var _React$useState2 = React__default["default"].useState(null),
115
+ headerTableElement = _React$useState2[0],
116
+ setHeaderTableElement = _React$useState2[1];
115
117
  /**
116
118
  * 控制列最小可调整宽度
117
119
  */
@@ -165,8 +167,7 @@ var useColWidth = function useColWidth(_ref) {
165
167
  };
166
168
  }, [colWidths]);
167
169
  return {
168
- measureRowElement: measureRowElement,
169
- setMeasureRowElement: setMeasureRowElement,
170
+ measureRowElementRef: measureRowElementRef,
170
171
  onColumnResizable: onColumnResizable,
171
172
  getColgroupProps: getColgroupProps,
172
173
  setHeaderTableElement: setHeaderTableElement,
package/lib/cjs/hooks/use-expand.js CHANGED
@@ -66,7 +66,14 @@ var useExpand = function useExpand(flattedData, defaultExpandedIds, expandedIdsP
66
66
 
67
67
  var transitionDataRef = useLatest.useLatestRef(transitionData);
68
68
  var trySetTransitionData = React.useCallback(function (data, expandedIds) {
69
- var nextData = flattenTreeDataWithExpand(data, expandedIds);
69
+ var nextData = data; // 当有 children 时，在构造新的数据，防止重复刷新组件
70
+
71
+ if (data.some(function (item) {
72
+ return !!item.children && item.children.length > 0;
73
+ })) {
74
+ nextData = flattenTreeDataWithExpand(data, expandedIds);
75
+ }
76
+
70
77
  setTransitionData(nextData);
71
78
  }, []); // 用来确保一次折叠动画是一次加锁的单元任务
72
79
  // 防止用户频繁折叠展开导致动画渲染（存在 DOM 操作）异常
package/lib/cjs/use-table.js CHANGED
@@ -215,7 +215,7 @@ var useTable = function useTable(_a) {
215
215
  resizable: resizable,
216
216
  virtual: virtual
217
217
  }),
218
- setMeasureRowElement = _useColWidth.setMeasureRowElement,
218
+ measureRowElementRef = _useColWidth.measureRowElementRef,
219
219
  getColgroupProps = _useColWidth.getColgroupProps,
220
220
  onColumnResizable = _useColWidth.onColumnResizable,
221
221
  colWidths = _useColWidth.colWidths; // ************************ 列冻结 ************************ //
@@ -378,20 +378,22 @@ var useTable = function useTable(_a) {
378
378
  setScrollSize = _useState2[1];
379
379
 
380
380
  React.useEffect(function () {
381
- var _a, _b, _c, _d, _e, _f; // 计算冻结列的宽度
382
- // mutationObserver
383
-
384
-
385
- var tableWidth = (_c = (_b = (_a = bodyTableRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a).width) !== null && _c !== void 0 ? _c : 0;
386
- var tableBodyWidth = (_f = (_e = (_d = scrollBodyElementRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect) === null || _e === void 0 ? void 0 : _e.call(_d).width) !== null && _f !== void 0 ? _f : 0;
387
- var scrollRight = tableWidth - tableBodyWidth; // const scrollLeft = 0
388
-
389
- setScrollSize(function (prev) {
390
- return {
391
- scrollLeft: prev.scrollLeft,
392
- scrollRight: scrollRight
393
- };
394
- });
381
+ var _a, _b, _c, _d, _e, _f;
382
+
383
+ if (leftFrozenColKeys.length > 0 || rightFrozenColKeys.length > 0) {
384
+ // 计算冻结列的宽度
385
+ // mutationObserver
386
+ var tableWidth = (_c = (_b = (_a = bodyTableRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a).width) !== null && _c !== void 0 ? _c : 0;
387
+ var tableBodyWidth = (_f = (_e = (_d = scrollBodyElementRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect) === null || _e === void 0 ? void 0 : _e.call(_d).width) !== null && _f !== void 0 ? _f : 0;
388
+ var scrollRight = tableWidth - tableBodyWidth; // const scrollLeft = 0
389
+
390
+ setScrollSize(function (prev) {
391
+ return {
392
+ scrollLeft: prev.scrollLeft,
393
+ scrollRight: scrollRight
394
+ };
395
+ });
396
+ }
395
397
  }, [leftFrozenColKeys, rightFrozenColKeys]); // const canScroll = scrollSize.scrollRight > 0
396
398
  // 实时计算
397
399
 
@@ -529,7 +531,7 @@ var useTable = function useTable(_a) {
529
531
  var showData = React.useMemo(function () {
530
532
  var _a;
531
533
 
532
- var _data = treeUtils.cloneTree(transitionData);
534
+ var _data = [].concat(transitionData);
533
535
 
534
536
  if (activeSorterColumn) {
535
537
  var sorter = (_a = columns.filter(function (d) {
@@ -550,6 +552,7 @@ var useTable = function useTable(_a) {
550
552
  return _data;
551
553
  }, [activeSorterColumn, activeSorterType, transitionData, columns]);
552
554
  return Object.assign(Object.assign({
555
+ measureRowElementRef: measureRowElementRef,
553
556
  rootProps: rootProps,
554
557
  scrollWidth: scrollWidth,
555
558
  activeSorterColumn: activeSorterColumn,
@@ -571,7 +574,6 @@ var useTable = function useTable(_a) {
571
574
  // 行多选
572
575
  rowSelection: rowSelection,
573
576
  cacheData: cacheData,
574
- setMeasureRowElement: setMeasureRowElement,
575
577
  leafColumns: leafColumns,
576
578
  // ui
577
579
  // 有表头分组那么也要 bordered
package/lib/esm/TableBody.js CHANGED
@@ -30,7 +30,6 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
30
30
  var _useTableContext = useTableContext(),
31
31
  columns = _useTableContext.columns,
32
32
  leafColumns = _useTableContext.leafColumns,
33
- setMeasureRowElement = _useTableContext.setMeasureRowElement,
34
33
  isExpandTreeRows = _useTableContext.isExpandTreeRows,
35
34
  transitionData = _useTableContext.transitionData,
36
35
  getColgroupProps = _useTableContext.getColgroupProps,
@@ -46,7 +45,8 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
46
45
  hasSumColumn = _useTableContext.hasSumColumn,
47
46
  sumRow = _useTableContext.sumRow,
48
47
  colWidths = _useTableContext.colWidths,
49
- virtual = _useTableContext.virtual;
48
+ virtual = _useTableContext.virtual,
49
+ measureRowElementRef = _useTableContext.measureRowElementRef;
50
50
 
51
51
  var cls = cx(prefixCls + "-body");
52
52
  var getRequiredProps = useLatestCallback(function (id) {
@@ -63,10 +63,8 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
63
63
 
64
64
  var _useState = useState(0),
65
65
  scrollLeft = _useState[0],
66
- setScrollLeft = _useState[1]; // 是否使用虚拟滚动
66
+ setScrollLeft = _useState[1];
67
67
 
68
-
69
- var showVirtual = virtual && isArrayNonEmpty(transitionData);
70
68
  var rowWidth = useMemo(function () {
71
69
  var tmpWidth = 0;
72
70
  colWidths.forEach(function (width) {
@@ -81,7 +79,7 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
81
79
  onTableBodyScroll(evt);
82
80
  }, [scrollBodyElementRef, onTableBodyScroll]);
83
81
 
84
- if (showVirtual) {
82
+ if (virtual) {
85
83
  // TODO： avg和summay row的逻辑
86
84
  var realHeight = (_a = scrollBodyElementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
87
85
  var vMaxHeight = maxHeight ? !isNaN(Number(String(maxHeight).replace(/px/, ''))) ? Number(maxHeight) : realHeight : 300;
@@ -92,20 +90,11 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
92
90
  onWheel: onTableBodyScrollMock,
93
91
  style: {
94
92
  maxHeight: maxHeight !== undefined ? maxHeight : undefined,
95
- // // maxHeight 小于 table 实际高度才出现纵向滚动条
96
- // overflowY:
97
- // maxHeight !== undefined &&
98
- // bodyTableRef.current &&
99
- // bodyTableRef.current.clientHeight > maxHeight
100
- // ? 'scroll'
101
- // : undefined,
102
93
  // 表格宽度大于div宽度才出现横向滚动条
103
94
  overflowX: canScroll ? 'scroll' : undefined
104
95
  }
105
96
  }, /*#__PURE__*/React__default.createElement("div", {
106
- ref: function ref(domElement) {
107
- setMeasureRowElement(domElement);
108
- },
97
+ ref: measureRowElementRef,
109
98
  style: {
110
99
  height: 1,
111
100
  background: 'transparent'
@@ -117,7 +106,7 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
117
106
  background: 'transparent',
118
107
  width: rowWidth
119
108
  }
120
- }), /*#__PURE__*/React__default.createElement("div", {
109
+ }), isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default.createElement("div", {
121
110
  style: {
122
111
  width: '100%',
123
112
  position: 'sticky',
@@ -143,7 +132,13 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
143
132
  rowData: row
144
133
  }, getRequiredProps(row.id))));
145
134
  }
146
- })));
135
+ })) : renderEmptyContent(Object.assign({
136
+ className: prefixCls + "-empty-content",
137
+ colSpan: columns.length,
138
+ emptyContent: emptyContent
139
+ }, scrollBodyElementRef.current ? {
140
+ scrollBodyWidth: window.getComputedStyle(scrollBodyElementRef.current).getPropertyValue('width')
141
+ } : {})));
147
142
  } // 外层增加 div 作为滚动容器
148
143
 
149
144
 
@@ -153,13 +148,6 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
153
148
  onScroll: onTableBodyScroll,
154
149
  style: {
155
150
  maxHeight: maxHeight !== undefined ? maxHeight : undefined,
156
- // // maxHeight 小于 table 实际高度才出现纵向滚动条
157
- // overflowY:
158
- // maxHeight !== undefined &&
159
- // bodyTableRef.current &&
160
- // bodyTableRef.current.clientHeight > maxHeight
161
- // ? 'scroll'
162
- // : undefined,
163
151
  // 表格宽度大于div宽度才出现横向滚动条
164
152
  overflowX: canScroll ? 'scroll' : undefined
165
153
  }
@@ -175,11 +163,7 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
175
163
  }, getColgroupProps(col, idx)));
176
164
  })), /*#__PURE__*/React__default.createElement("tbody", null, isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, transitionData.map(function (row, index) {
177
165
  return /*#__PURE__*/React__default.createElement(TableRow, Object.assign({
178
- ref: function ref(dom) {
179
- if (index === 0) {
180
- setMeasureRowElement(dom);
181
- }
182
- },
166
+ ref: index === 0 ? measureRowElementRef : null,
183
167
  // key={depth + index}
184
168
  key: row.id,
185
169
  // @ts-ignore
package/lib/esm/hooks/use-col-width.js CHANGED
@@ -14,18 +14,17 @@ import { useUpdateEffect } from '@hi-ui/use-update-effect';
14
14
  var useColWidth = function useColWidth(_ref) {
15
15
  var columns = _ref.columns,
16
16
  virtual = _ref.virtual;
17
+ var measureRowElementRef = React__default.useRef(null);
17
18
 
18
- var _React$useState = React__default.useState(null),
19
- measureRowElement = _React$useState[0],
20
- setMeasureRowElement = _React$useState[1];
21
-
22
- var _React$useState2 = React__default.useState(function () {
19
+ var _React$useState = React__default.useState(function () {
23
20
  return getGroupItemWidth(columns);
24
21
  }),
25
- colWidths = _React$useState2[0],
26
- setColWidths = _React$useState2[1];
22
+ colWidths = _React$useState[0],
23
+ setColWidths = _React$useState[1];
27
24
 
28
25
  var getVirtualWidths = useCallback(function () {
26
+ var measureRowElement = measureRowElementRef.current;
27
+
29
28
  if (!measureRowElement) {
30
29
  return getGroupItemWidth(columns);
31
30
  }
@@ -52,20 +51,23 @@ var useColWidth = function useColWidth(_ref) {
52
51
  return columnItem.width || columnDefaultWidth;
53
52
  });
54
53
  }
55
- }, [measureRowElement, columns]);
54
+ }, [columns]);
56
55
  useUpdateEffect(function () {
57
56
  if (virtual) {
58
57
  // 虚拟滚动的计算需要根据容器来做分配，不能使用没有witdh默认设置为0的方式来做表格平均分配
59
58
  setColWidths(getVirtualWidths());
60
- } else {
61
- setColWidths(getGroupItemWidth(columns));
62
59
  }
63
- }, [columns, getVirtualWidths, virtual]);
60
+ }, [getVirtualWidths, virtual]);
61
+ useUpdateEffect(function () {
62
+ setColWidths(getGroupItemWidth(columns));
63
+ }, [columns]);
64
64
  /**
65
65
  * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
66
66
  */
67
67
 
68
68
  React__default.useEffect(function () {
69
+ var measureRowElement = measureRowElementRef.current;
70
+
69
71
  if (measureRowElement) {
70
72
  var _resizeObserver = new ResizeObserver(function () {
71
73
  if (virtual) {
@@ -89,11 +91,11 @@ var useColWidth = function useColWidth(_ref) {
89
91
  }
90
92
 
91
93
  return function () {}; // 测量元素在内容列为空时会是空，切换会使测量元素变化，导致后续的resize时间无法响应,此处测量元素变化时需要重新绑定
92
- }, [measureRowElement, virtual]);
94
+ }, [getVirtualWidths, virtual]);
93
95
 
94
- var _React$useState3 = React__default.useState(null),
95
- headerTableElement = _React$useState3[0],
96
- setHeaderTableElement = _React$useState3[1];
96
+ var _React$useState2 = React__default.useState(null),
97
+ headerTableElement = _React$useState2[0],
98
+ setHeaderTableElement = _React$useState2[1];
97
99
  /**
98
100
  * 控制列最小可调整宽度
99
101
  */
@@ -147,8 +149,7 @@ var useColWidth = function useColWidth(_ref) {
147
149
  };
148
150
  }, [colWidths]);
149
151
  return {
150
- measureRowElement: measureRowElement,
151
- setMeasureRowElement: setMeasureRowElement,
152
+ measureRowElementRef: measureRowElementRef,
152
153
  onColumnResizable: onColumnResizable,
153
154
  getColgroupProps: getColgroupProps,
154
155
  setHeaderTableElement: setHeaderTableElement,
package/lib/esm/hooks/use-expand.js CHANGED
@@ -56,7 +56,14 @@ var useExpand = function useExpand(flattedData, defaultExpandedIds, expandedIdsP
56
56
 
57
57
  var transitionDataRef = useLatestRef(transitionData);
58
58
  var trySetTransitionData = useCallback(function (data, expandedIds) {
59
- var nextData = flattenTreeDataWithExpand(data, expandedIds);
59
+ var nextData = data; // 当有 children 时，在构造新的数据，防止重复刷新组件
60
+
61
+ if (data.some(function (item) {
62
+ return !!item.children && item.children.length > 0;
63
+ })) {
64
+ nextData = flattenTreeDataWithExpand(data, expandedIds);
65
+ }
66
+
60
67
  setTransitionData(nextData);
61
68
  }, []); // 用来确保一次折叠动画是一次加锁的单元任务
62
69
  // 防止用户频繁折叠展开导致动画渲染（存在 DOM 操作）异常
package/lib/esm/use-table.js CHANGED
@@ -183,7 +183,7 @@ var useTable = function useTable(_a) {
183
183
  resizable: resizable,
184
184
  virtual: virtual
185
185
  }),
186
- setMeasureRowElement = _useColWidth.setMeasureRowElement,
186
+ measureRowElementRef = _useColWidth.measureRowElementRef,
187
187
  getColgroupProps = _useColWidth.getColgroupProps,
188
188
  onColumnResizable = _useColWidth.onColumnResizable,
189
189
  colWidths = _useColWidth.colWidths; // ************************ 列冻结 ************************ //
@@ -346,20 +346,22 @@ var useTable = function useTable(_a) {
346
346
  setScrollSize = _useState2[1];
347
347
 
348
348
  useEffect(function () {
349
- var _a, _b, _c, _d, _e, _f; // 计算冻结列的宽度
350
- // mutationObserver
351
-
352
-
353
- var tableWidth = (_c = (_b = (_a = bodyTableRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a).width) !== null && _c !== void 0 ? _c : 0;
354
- var tableBodyWidth = (_f = (_e = (_d = scrollBodyElementRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect) === null || _e === void 0 ? void 0 : _e.call(_d).width) !== null && _f !== void 0 ? _f : 0;
355
- var scrollRight = tableWidth - tableBodyWidth; // const scrollLeft = 0
356
-
357
- setScrollSize(function (prev) {
358
- return {
359
- scrollLeft: prev.scrollLeft,
360
- scrollRight: scrollRight
361
- };
362
- });
349
+ var _a, _b, _c, _d, _e, _f;
350
+
351
+ if (leftFrozenColKeys.length > 0 || rightFrozenColKeys.length > 0) {
352
+ // 计算冻结列的宽度
353
+ // mutationObserver
354
+ var tableWidth = (_c = (_b = (_a = bodyTableRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a).width) !== null && _c !== void 0 ? _c : 0;
355
+ var tableBodyWidth = (_f = (_e = (_d = scrollBodyElementRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect) === null || _e === void 0 ? void 0 : _e.call(_d).width) !== null && _f !== void 0 ? _f : 0;
356
+ var scrollRight = tableWidth - tableBodyWidth; // const scrollLeft = 0
357
+
358
+ setScrollSize(function (prev) {
359
+ return {
360
+ scrollLeft: prev.scrollLeft,
361
+ scrollRight: scrollRight
362
+ };
363
+ });
364
+ }
363
365
  }, [leftFrozenColKeys, rightFrozenColKeys]); // const canScroll = scrollSize.scrollRight > 0
364
366
  // 实时计算
365
367
 
@@ -497,7 +499,7 @@ var useTable = function useTable(_a) {
497
499
  var showData = useMemo(function () {
498
500
  var _a;
499
501
 
500
- var _data = cloneTree(transitionData);
502
+ var _data = [].concat(transitionData);
501
503
 
502
504
  if (activeSorterColumn) {
503
505
  var sorter = (_a = columns.filter(function (d) {
@@ -518,6 +520,7 @@ var useTable = function useTable(_a) {
518
520
  return _data;
519
521
  }, [activeSorterColumn, activeSorterType, transitionData, columns]);
520
522
  return Object.assign(Object.assign({
523
+ measureRowElementRef: measureRowElementRef,
521
524
  rootProps: rootProps,
522
525
  scrollWidth: scrollWidth,
523
526
  activeSorterColumn: activeSorterColumn,
@@ -539,7 +542,6 @@ var useTable = function useTable(_a) {
539
542
  // 行多选
540
543
  rowSelection: rowSelection,
541
544
  cacheData: cacheData,
542
- setMeasureRowElement: setMeasureRowElement,
543
545
  leafColumns: leafColumns,
544
546
  // ui
545
547
  // 有表头分组那么也要 bordered
package/lib/types/context.d.ts CHANGED
@@ -41,6 +41,7 @@ export declare const TableProvider: import("react").Provider<(Omit<{
41
41
  onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
42
42
  scrollLeft: number;
43
43
  scrollRight: number;
44
+ measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
44
45
  rootProps: {
45
46
  bordered?: boolean | undefined;
46
47
  pagination?: import("packages/ui/pagination/lib/types").PaginationProps | undefined;
@@ -69,7 +70,6 @@ export declare const TableProvider: import("react").Provider<(Omit<{
69
70
  flattedColumnsWithoutChildren: import("./types").FlattedTableColumnItemData[];
70
71
  rowSelection: import("./types").TableRowSelection | undefined;
71
72
  cacheData: object[];
72
- setMeasureRowElement: import("react").Dispatch<import("react").SetStateAction<Element | null>>;
73
73
  leafColumns: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
74
74
  bordered: boolean;
75
75
  scrollHeaderElementRef: import("react").RefObject<HTMLTableElement>;
@@ -146,6 +146,7 @@ export declare const useTableContext: () => Omit<{
146
146
  onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
147
147
  scrollLeft: number;
148
148
  scrollRight: number;
149
+ measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
149
150
  rootProps: {
150
151
  bordered?: boolean | undefined;
151
152
  pagination?: import("packages/ui/pagination/lib/types").PaginationProps | undefined;
@@ -174,7 +175,6 @@ export declare const useTableContext: () => Omit<{
174
175
  flattedColumnsWithoutChildren: import("./types").FlattedTableColumnItemData[];
175
176
  rowSelection: import("./types").TableRowSelection | undefined;
176
177
  cacheData: object[];
177
- setMeasureRowElement: import("react").Dispatch<import("react").SetStateAction<Element | null>>;
178
178
  leafColumns: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
179
179
  bordered: boolean;
180
180
  scrollHeaderElementRef: import("react").RefObject<HTMLTableElement>;
package/lib/types/hooks/use-col-width.d.ts CHANGED
@@ -6,8 +6,7 @@ export declare const useColWidth: ({ resizable, data, columns, virtual, }: {
6
6
  columns: TableColumnItem[];
7
7
  virtual?: boolean | undefined;
8
8
  }) => {
9
- measureRowElement: Element | null;
10
- setMeasureRowElement: React.Dispatch<React.SetStateAction<Element | null>>;
9
+ measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;
11
10
  onColumnResizable: (_: any, { size }: any, index: number) => void;
12
11
  getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
13
12
  style: {
package/lib/types/types.d.ts CHANGED
@@ -198,12 +198,15 @@ export interface FlattedTableRowData extends TableRowData {
198
198
  /**
199
199
  * 该节点的父节点
200
200
  */
201
- parent?: FlattedTableRowData;
201
+ parent?: FlattedTableRowDataWithChildren;
202
202
  /**
203
203
  * 节点所在列表数据中的下标
204
204
  */
205
205
  pos?: number;
206
206
  }
207
+ export interface FlattedTableRowDataWithChildren extends FlattedTableRowData {
208
+ children: FlattedTableRowData[];
209
+ }
207
210
  export interface FlattedTableColumnItemData extends TableColumnItem {
208
211
  /**
209
212
  * 树节点唯一 id
package/lib/types/use-table.d.ts CHANGED
@@ -42,6 +42,7 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
42
42
  onLoadChildren: ((item: TableRowEventData) => Promise<any[] | void> | void) | undefined;
43
43
  scrollLeft: number;
44
44
  scrollRight: number;
45
+ measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;
45
46
  rootProps: {
46
47
  /**
47
48
  * 是否显示边框（表头分组模式下，表格自带边框）
@@ -85,7 +86,6 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
85
86
  flattedColumnsWithoutChildren: FlattedTableColumnItemData[];
86
87
  rowSelection: TableRowSelection | undefined;
87
88
  cacheData: object[];
88
- setMeasureRowElement: React.Dispatch<React.SetStateAction<Element | null>>;
89
89
  leafColumns: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
90
90
  bordered: boolean;
91
91
  scrollHeaderElementRef: React.RefObject<HTMLTableElement>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/table",
3
- "version": "4.1.1",
3
+ "version": "4.1.2",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -53,16 +53,16 @@
53
53
  "@hi-ui/env": "^4.0.1",
54
54
  "@hi-ui/func-utils": "^4.0.1",
55
55
  "@hi-ui/icon-button": "^4.0.4",
56
- "@hi-ui/icons": "^4.0.4",
56
+ "@hi-ui/icons": "^4.0.14",
57
57
  "@hi-ui/loading": "^4.1.0",
58
58
  "@hi-ui/object-utils": "^4.0.1",
59
59
  "@hi-ui/pagination": "^4.0.8",
60
- "@hi-ui/popper": "^4.0.4",
60
+ "@hi-ui/popper": "^4.1.0",
61
61
  "@hi-ui/react-utils": "^4.0.1",
62
62
  "@hi-ui/select": "^4.0.8",
63
63
  "@hi-ui/spinner": "^4.0.4",
64
64
  "@hi-ui/times": "^4.0.1",
65
- "@hi-ui/tree-utils": "^4.1.0",
65
+ "@hi-ui/tree-utils": "^4.1.1",
66
66
  "@hi-ui/type-assertion": "^4.0.1",
67
67
  "@hi-ui/use-cache": "^4.0.1",
68
68
  "@hi-ui/use-check": "^4.0.2",