@hi-ui/table 4.12.0 → 4.12.1

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 (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/cjs/BaseTable.js +16 -11
  3. package/lib/cjs/hooks/use-col-width.js +8 -9
  4. package/lib/esm/BaseTable.js +16 -11
  5. package/lib/esm/hooks/use-col-width.js +8 -9
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @hi-ui/table
2
2
 
3
+ ## 4.12.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#3328](https://github.com/XiaoMi/hiui/pull/3328) [`6e274310f`](https://github.com/XiaoMi/hiui/commit/6e274310f9545a82090ffa586cf31a7c79b305ba) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(table): 优化列宽设置逻辑，确保在列变化时准确计算并更新列宽 (#3327)
8
+
9
+ - [#3330](https://github.com/XiaoMi/hiui/pull/3330) [`df35306`](https://github.com/XiaoMi/hiui/commit/df353062b0d0b0cf3bd4e62280df20ba7e7a4774) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(table): 修复设置 scrollbar 后冻结列失效问题 (#3329)
10
+
3
11
  ## 4.12.0
4
12
 
5
13
  ### Minor Changes
package/lib/cjs/BaseTable.js CHANGED
@@ -217,22 +217,27 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
217
217
  var extraFooter = extra && extra.footer;
218
218
  var alwaysFixedColumn = fixedColumnTrigger === 'always';
219
219
  var renderTable = function renderTable() {
220
- var singleTableContent = /*#__PURE__*/React__default["default"].createElement("div", {
221
- ref: scrollBodyElementRef,
222
- className: prefixCls + "-content",
223
- onScroll: onTableBodyScroll,
224
- style: {
225
- // 表格宽度大于div宽度才出现横向滚动条
226
- overflowX: canScroll ? 'scroll' : undefined
227
- }
228
- }, /*#__PURE__*/React__default["default"].createElement("table", {
220
+ var tableContent = /*#__PURE__*/React__default["default"].createElement("table", {
229
221
  ref: bodyTableRef,
230
222
  style: {
231
223
  width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
232
224
  }
233
225
  }, /*#__PURE__*/React__default["default"].createElement(ColGroupContent.ColGroupContent, null), /*#__PURE__*/React__default["default"].createElement(TheadContent.TheadContent, null), /*#__PURE__*/React__default["default"].createElement(TbodyContent.TbodyContent, {
234
226
  emptyContent: emptyContent
235
- })));
227
+ }));
228
+ var singleTableContent = /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
229
+ className: prefixCls + "-content"
230
+ }, !scrollbar ? {
231
+ ref: scrollBodyElementRef,
232
+ onScroll: onTableBodyScroll,
233
+ style: {
234
+ // 表格宽度大于div宽度才出现横向滚动条
235
+ overflowX: canScroll ? 'scroll' : undefined
236
+ }
237
+ } : {}), !scrollbar ? tableContent : ( /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], Object.assign({
238
+ ref: scrollBodyElementRef,
239
+ onScroll: onTableBodyScroll
240
+ }, typeAssertion.isObject(scrollbar) ? scrollbar : null), tableContent)));
236
241
  var doubleTableContent = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React__default["default"].createElement(TableHeader.TableHeader, null), extraHeader ? ( /*#__PURE__*/React__default["default"].createElement("div", {
237
242
  style: {
238
243
  position: 'absolute',
@@ -244,7 +249,7 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
244
249
  }, extraHeader)) : null), /*#__PURE__*/React__default["default"].createElement(TableBody.TableBody, {
245
250
  emptyContent: emptyContent
246
251
  }));
247
- return needDoubleTable ? doubleTableContent : !scrollbar ? singleTableContent : ( /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], Object.assign({}, typeAssertion.isObject(scrollbar) ? scrollbar : null), singleTableContent));
252
+ return needDoubleTable ? doubleTableContent : singleTableContent;
248
253
  };
249
254
  var renderFreezeShadow = function renderFreezeShadow() {
250
255
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? ( /*#__PURE__*/React__default["default"].createElement("div", {
package/lib/cjs/hooks/use-col-width.js CHANGED
@@ -35,6 +35,9 @@ var useColWidth = function useColWidth(_ref) {
35
35
  }),
36
36
  colWidths = _React$useState[0],
37
37
  setColWidths = _React$useState[1];
38
+ /**
39
+ * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
40
+ */
38
41
  var getWidths = React.useCallback(function (measureRowElement) {
39
42
  if (measureRowElement && measureRowElement.childNodes) {
40
43
  // 超出的宽度，即每列真实的宽度超出设置的宽度的总和
@@ -105,16 +108,12 @@ var useColWidth = function useColWidth(_ref) {
105
108
  }
106
109
  }, [getVirtualWidths, virtual]);
107
110
  useUpdateEffect.useUpdateEffect(function () {
111
+ // 当列变化时，重新设置列宽
108
112
  setColWidths(index.getGroupItemWidth(columns).colWidths);
109
- // setColWidths((prev) => {
110
- // // resizable 模式下通过 measureRowElementRef.current 去更新列宽，防止拖拽后宽度被重置
111
- // // 例如同时设置了 resizable 和 rowSelection，当拖拽某列宽度后再选中某行时，该列宽度会被重置
112
- // return resizable && measureRowElementRef.current?.childNodes.length === prev.length
113
- // ? // 走更新逻辑
114
- // getWidths(measureRowElementRef.current)
115
- // : // 当列数变化时重新走初始化逻辑
116
- // getGroupItemWidth(columns)
117
- // })
113
+ // 重新设置列宽后，真实的宽度会发生变化，基于真实的宽度再次重新计算出合适的列宽
114
+ requestAnimationFrame(function () {
115
+ setColWidths(getWidths(measureRowElementRef.current));
116
+ });
118
117
  }, [columns]);
119
118
  /**
120
119
  * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
package/lib/esm/BaseTable.js CHANGED
@@ -204,22 +204,27 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
204
204
  var extraFooter = extra && extra.footer;
205
205
  var alwaysFixedColumn = fixedColumnTrigger === 'always';
206
206
  var renderTable = function renderTable() {
207
- var singleTableContent = /*#__PURE__*/React__default.createElement("div", {
208
- ref: scrollBodyElementRef,
209
- className: prefixCls + "-content",
210
- onScroll: onTableBodyScroll,
211
- style: {
212
- // 表格宽度大于div宽度才出现横向滚动条
213
- overflowX: canScroll ? 'scroll' : undefined
214
- }
215
- }, /*#__PURE__*/React__default.createElement("table", {
207
+ var tableContent = /*#__PURE__*/React__default.createElement("table", {
216
208
  ref: bodyTableRef,
217
209
  style: {
218
210
  width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
219
211
  }
220
212
  }, /*#__PURE__*/React__default.createElement(ColGroupContent, null), /*#__PURE__*/React__default.createElement(TheadContent, null), /*#__PURE__*/React__default.createElement(TbodyContent, {
221
213
  emptyContent: emptyContent
222
- })));
214
+ }));
215
+ var singleTableContent = /*#__PURE__*/React__default.createElement("div", Object.assign({
216
+ className: prefixCls + "-content"
217
+ }, !scrollbar ? {
218
+ ref: scrollBodyElementRef,
219
+ onScroll: onTableBodyScroll,
220
+ style: {
221
+ // 表格宽度大于div宽度才出现横向滚动条
222
+ overflowX: canScroll ? 'scroll' : undefined
223
+ }
224
+ } : {}), !scrollbar ? tableContent : ( /*#__PURE__*/React__default.createElement(Scrollbar, Object.assign({
225
+ ref: scrollBodyElementRef,
226
+ onScroll: onTableBodyScroll
227
+ }, isObject(scrollbar) ? scrollbar : null), tableContent)));
223
228
  var doubleTableContent = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React__default.createElement(TableHeader, null), extraHeader ? ( /*#__PURE__*/React__default.createElement("div", {
224
229
  style: {
225
230
  position: 'absolute',
@@ -231,7 +236,7 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
231
236
  }, extraHeader)) : null), /*#__PURE__*/React__default.createElement(TableBody, {
232
237
  emptyContent: emptyContent
233
238
  }));
234
- return needDoubleTable ? doubleTableContent : !scrollbar ? singleTableContent : ( /*#__PURE__*/React__default.createElement(Scrollbar, Object.assign({}, isObject(scrollbar) ? scrollbar : null), singleTableContent));
239
+ return needDoubleTable ? doubleTableContent : singleTableContent;
235
240
  };
236
241
  var renderFreezeShadow = function renderFreezeShadow() {
237
242
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? ( /*#__PURE__*/React__default.createElement("div", {
package/lib/esm/hooks/use-col-width.js CHANGED
@@ -23,6 +23,9 @@ var useColWidth = function useColWidth(_ref) {
23
23
  }),
24
24
  colWidths = _React$useState[0],
25
25
  setColWidths = _React$useState[1];
26
+ /**
27
+ * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
28
+ */
26
29
  var getWidths = useCallback(function (measureRowElement) {
27
30
  if (measureRowElement && measureRowElement.childNodes) {
28
31
  // 超出的宽度，即每列真实的宽度超出设置的宽度的总和
@@ -93,16 +96,12 @@ var useColWidth = function useColWidth(_ref) {
93
96
  }
94
97
  }, [getVirtualWidths, virtual]);
95
98
  useUpdateEffect(function () {
99
+ // 当列变化时，重新设置列宽
96
100
  setColWidths(getGroupItemWidth(columns).colWidths);
97
- // setColWidths((prev) => {
98
- // // resizable 模式下通过 measureRowElementRef.current 去更新列宽，防止拖拽后宽度被重置
99
- // // 例如同时设置了 resizable 和 rowSelection，当拖拽某列宽度后再选中某行时，该列宽度会被重置
100
- // return resizable && measureRowElementRef.current?.childNodes.length === prev.length
101
- // ? // 走更新逻辑
102
- // getWidths(measureRowElementRef.current)
103
- // : // 当列数变化时重新走初始化逻辑
104
- // getGroupItemWidth(columns)
105
- // })
101
+ // 重新设置列宽后，真实的宽度会发生变化，基于真实的宽度再次重新计算出合适的列宽
102
+ requestAnimationFrame(function () {
103
+ setColWidths(getWidths(measureRowElementRef.current));
104
+ });
106
105
  }, [columns]);
107
106
  /**
108
107
  * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/table",
3
- "version": "4.12.0",
3
+ "version": "4.12.1",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",