@hi-ui/table 5.0.0-canary.23 → 5.0.0-canary.24

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 (13) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/cjs/hooks/use-col-width.js +10 -3
  3. package/lib/cjs/node_modules/rc-virtual-list/es/List.js +1 -6
  4. package/lib/cjs/node_modules/rc-virtual-list/es/hooks/useHeights.js +3 -14
  5. package/lib/cjs/use-table.js +4 -3
  6. package/lib/esm/hooks/use-col-width.js +10 -3
  7. package/lib/esm/node_modules/rc-virtual-list/es/List.js +1 -6
  8. package/lib/esm/node_modules/rc-virtual-list/es/hooks/useHeights.js +3 -14
  9. package/lib/esm/packages/others/style-inject/lib/esm/index.js +30 -0
  10. package/lib/esm/styles/index.scss.js +2 -2
  11. package/lib/esm/use-table.js +4 -3
  12. package/lib/types/hooks/use-col-width.d.ts +2 -1
  13. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @hi-ui/table
2
2
 
3
+ ## 5.0.0-canary.24
4
+
5
+ ### Patch Changes
6
+
7
+ - 732decb61: perf(table): 优化表格列宽更新逻辑，当内容宽度没有超出时再更新列宽 (5.0)
8
+ - Updated dependencies [732decb61]
9
+ - @hi-ui/empty-state@5.0.0-canary.9
10
+
3
11
  ## 5.0.0-canary.23
4
12
 
5
13
  ### Patch Changes
package/lib/cjs/hooks/use-col-width.js CHANGED
@@ -26,7 +26,8 @@ var useColWidth = function useColWidth(_ref) {
26
26
  var resizable = _ref.resizable,
27
27
  tableWidthAdjustOnResize = _ref.tableWidthAdjustOnResize,
28
28
  columns = _ref.columns,
29
- virtual = _ref.virtual;
29
+ virtual = _ref.virtual,
30
+ scrollBodyElementRef = _ref.scrollBodyElementRef;
30
31
  var measureRowElementRef = React__default["default"].useRef(null);
31
32
  // 是否重新设置过表格每列宽度
32
33
  var hasResetWidths = React__default["default"].useRef(false);
@@ -133,8 +134,14 @@ var useColWidth = function useColWidth(_ref) {
133
134
  // 当列变化时，重新设置列宽
134
135
  setColWidths(index.getGroupItemWidth(columns).colWidths);
135
136
  // 重新设置列宽后，真实的宽度会发生变化，基于真实的宽度再次重新计算出合适的列宽
136
- requestAnimationFrame(function () {
137
- setColWidths(getWidths(measureRowElementRef.current));
137
+ setTimeout(function () {
138
+ var _a, _b, _c;
139
+ var scrollBodyElementWidth = (_b = (_a = scrollBodyElementRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
140
+ var measureRowElementWidth = (_c = measureRowElementRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth;
141
+ // 如果测量元素的宽度小于等于容器宽度，则重新设置列宽
142
+ if (measureRowElementWidth && measureRowElementWidth <= scrollBodyElementWidth) {
143
+ setColWidths(getWidths(measureRowElementRef.current));
144
+ }
138
145
  });
139
146
  }, [columns]);
140
147
  /**
package/lib/cjs/node_modules/rc-virtual-list/es/List.js CHANGED
@@ -408,12 +408,7 @@ function RawList(props, ref) {
408
408
  useLayoutEffect["default"](function () {
409
409
  if (onVisibleChange) {
410
410
  var renderList = mergedData.slice(start, end + 1);
411
- onVisibleChange(renderList, mergedData, {
412
- start: start,
413
- end: end,
414
- scrollTop: scrollTop,
415
- heights: heights
416
- });
411
+ onVisibleChange(renderList, mergedData);
417
412
  }
418
413
  }, [start, end, mergedData]); // ================================ Render ================================
419
414
 
package/lib/cjs/node_modules/rc-virtual-list/es/hooks/useHeights.js CHANGED
@@ -85,17 +85,6 @@ function _iterableToArrayLimit(arr, i) {
85
85
  function _arrayWithHoles(arr) {
86
86
  if (Array.isArray(arr)) return arr;
87
87
  }
88
-
89
- /**
90
- * To get exact height to avoid scrolling deviation
91
- */
92
- function getOuterHeight(el) {
93
- var height = el.offsetHeight;
94
- var computedStyle = window.getComputedStyle(el);
95
- height += parseInt(computedStyle.marginTop, 10);
96
- height += parseInt(computedStyle.marginBottom, 10);
97
- return height;
98
- }
99
88
  function useHeights(getKey, onItemAdd, onItemRemove) {
100
89
  var _React$useState = React__namespace.useState(0),
101
90
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -113,9 +102,9 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
113
102
  instanceRef.current.forEach(function (element, key) {
114
103
  if (element && element.offsetParent) {
115
104
  var htmlElement = findDOMNode["default"](element);
116
- var outerHeight = getOuterHeight(htmlElement);
117
- if (heightsRef.current.get(key) !== outerHeight) {
118
- heightsRef.current.set(key, outerHeight);
105
+ var offsetHeight = htmlElement.offsetHeight;
106
+ if (heightsRef.current.get(key) !== offsetHeight) {
107
+ heightsRef.current.set(key, htmlElement.offsetHeight);
119
108
  }
120
109
  }
121
110
  }); // Always trigger update mark to tell parent that should re-calculate heights when resized
package/lib/cjs/use-table.js CHANGED
@@ -186,13 +186,16 @@ var useTable = function useTable(_a) {
186
186
  }),
187
187
  onHoveredColChange = _useSelect[0],
188
188
  isHoveredHighlightCol = _useSelect[1];
189
+ var bodyTableRef = React.useRef(null);
190
+ var scrollBodyElementRef = React.useRef(null);
189
191
  // ************************ 列宽 resizable ************************ //
190
192
  var _useColWidth = useColWidth.useColWidth({
191
193
  data: data,
192
194
  columns: columns,
193
195
  resizable: resizable,
194
196
  tableWidthAdjustOnResize: tableWidthAdjustOnResize,
195
- virtual: !!virtual
197
+ virtual: !!virtual,
198
+ scrollBodyElementRef: scrollBodyElementRef
196
199
  }),
197
200
  measureRowElementRef = _useColWidth.measureRowElementRef,
198
201
  getColgroupProps = _useColWidth.getColgroupProps,
@@ -200,8 +203,6 @@ var useTable = function useTable(_a) {
200
203
  colWidths = _useColWidth.colWidths,
201
204
  setHeaderTableElement = _useColWidth.setHeaderTableElement;
202
205
  // ************************ 列冻结 ************************ //
203
- var bodyTableRef = React.useRef(null);
204
- var scrollBodyElementRef = React.useRef(null);
205
206
  /**
206
207
  * 左右 fixed 所在的列，抹平数据结构
207
208
  *
package/lib/esm/hooks/use-col-width.js CHANGED
@@ -14,7 +14,8 @@ var useColWidth = function useColWidth(_ref) {
14
14
  var resizable = _ref.resizable,
15
15
  tableWidthAdjustOnResize = _ref.tableWidthAdjustOnResize,
16
16
  columns = _ref.columns,
17
- virtual = _ref.virtual;
17
+ virtual = _ref.virtual,
18
+ scrollBodyElementRef = _ref.scrollBodyElementRef;
18
19
  var measureRowElementRef = React__default.useRef(null);
19
20
  // 是否重新设置过表格每列宽度
20
21
  var hasResetWidths = React__default.useRef(false);
@@ -121,8 +122,14 @@ var useColWidth = function useColWidth(_ref) {
121
122
  // 当列变化时，重新设置列宽
122
123
  setColWidths(getGroupItemWidth(columns).colWidths);
123
124
  // 重新设置列宽后，真实的宽度会发生变化，基于真实的宽度再次重新计算出合适的列宽
124
- requestAnimationFrame(function () {
125
- setColWidths(getWidths(measureRowElementRef.current));
125
+ setTimeout(function () {
126
+ var _a, _b, _c;
127
+ var scrollBodyElementWidth = (_b = (_a = scrollBodyElementRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
128
+ var measureRowElementWidth = (_c = measureRowElementRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth;
129
+ // 如果测量元素的宽度小于等于容器宽度，则重新设置列宽
130
+ if (measureRowElementWidth && measureRowElementWidth <= scrollBodyElementWidth) {
131
+ setColWidths(getWidths(measureRowElementRef.current));
132
+ }
126
133
  });
127
134
  }, [columns]);
128
135
  /**
package/lib/esm/node_modules/rc-virtual-list/es/List.js CHANGED
@@ -383,12 +383,7 @@ function RawList(props, ref) {
383
383
  useLayoutEffect(function () {
384
384
  if (onVisibleChange) {
385
385
  var renderList = mergedData.slice(start, end + 1);
386
- onVisibleChange(renderList, mergedData, {
387
- start: start,
388
- end: end,
389
- scrollTop: scrollTop,
390
- heights: heights
391
- });
386
+ onVisibleChange(renderList, mergedData);
392
387
  }
393
388
  }, [start, end, mergedData]); // ================================ Render ================================
394
389
 
package/lib/esm/node_modules/rc-virtual-list/es/hooks/useHeights.js CHANGED
@@ -60,17 +60,6 @@ function _iterableToArrayLimit(arr, i) {
60
60
  function _arrayWithHoles(arr) {
61
61
  if (Array.isArray(arr)) return arr;
62
62
  }
63
-
64
- /**
65
- * To get exact height to avoid scrolling deviation
66
- */
67
- function getOuterHeight(el) {
68
- var height = el.offsetHeight;
69
- var computedStyle = window.getComputedStyle(el);
70
- height += parseInt(computedStyle.marginTop, 10);
71
- height += parseInt(computedStyle.marginBottom, 10);
72
- return height;
73
- }
74
63
  function useHeights(getKey, onItemAdd, onItemRemove) {
75
64
  var _React$useState = React.useState(0),
76
65
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -88,9 +77,9 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
88
77
  instanceRef.current.forEach(function (element, key) {
89
78
  if (element && element.offsetParent) {
90
79
  var htmlElement = findDOMNode(element);
91
- var outerHeight = getOuterHeight(htmlElement);
92
- if (heightsRef.current.get(key) !== outerHeight) {
93
- heightsRef.current.set(key, outerHeight);
80
+ var offsetHeight = htmlElement.offsetHeight;
81
+ if (heightsRef.current.get(key) !== offsetHeight) {
82
+ heightsRef.current.set(key, htmlElement.offsetHeight);
94
83
  }
95
84
  }
96
85
  }); // Always trigger update mark to tell parent that should re-calculate heights when resized
package/lib/esm/packages/others/style-inject/lib/esm/index.js ADDED
@@ -0,0 +1,30 @@
1
+ /** @LICENSE
2
+ * @hi-ui/table
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
4
+ *
5
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ /** @LICENSE
11
+ * @hi-ui/style-inject
12
+ * https://github.com/XiaoMi/hiui/tree/master/packages/utils/style-inject#readme
13
+ *
14
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
15
+ *
16
+ * This source code is licensed under the MIT license found in the
17
+ * LICENSE file in the root directory of this source tree.
18
+ */
19
+ var isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
20
+ /**
21
+ * TODO: What is styleInject
22
+ */
23
+ var styleInject = function styleInject(css) {
24
+ if (!css || !isBrowser) return;
25
+ var head = document.head || document.getElementsByTagName('head')[0];
26
+ var style = document.createElement('style');
27
+ head.appendChild(style);
28
+ style.appendChild(document.createTextNode(css));
29
+ };
30
+ export { styleInject as default, styleInject };
package/lib/esm/styles/index.scss.js CHANGED
@@ -7,7 +7,7 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import __styleInject__ from '@hi-ui/style-inject';
10
+ import styleInject from '../packages/others/style-inject/lib/esm/index.js';
11
11
  var css_248z = ".hi-v5-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v5-text-size-md, 0.875rem);position: relative;}.hi-v5-table table {width: 100%;text-align: start;background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-sm, 2px) var(--hi-v5-border-radius-sm, 2px) 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v5-table__wrapper {position: relative;z-index: 0;border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table__wrapper::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;border-bottom: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--stretch-height {height: 100%;overflow: hidden;}.hi-v5-table--stretch-height .hi-v5-table__wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-table--stretch-height .hi-v5-table__wrapper .hi-v5-table-body {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;overflow: auto;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-table__wrapper .hi-v5-table-body table {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-scrollbar__wrapper {height: 100%;}.hi-v5-table__switcher.hi-v5-icon-button {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table__switcher--expanded.hi-v5-icon-button {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual {width: 100%;overflow: hidden;}.hi-v5-table--virtual .hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--bordered > .hi-v5-table__wrapper {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-header-cell, .hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-cell {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-row .hi-v5-table-cell {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--sticky {position: sticky;top: 0;}.hi-v5-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v5-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v5-table-header__resizable:hover {background-color: var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;z-index: 1;width: 2px;height: 100%;inset-block-start: 0;inset-inline-end: -2px;-webkit-border-start: 2px solid transparent;border-inline-start: 2px solid transparent;-webkit-border-end: 2px solid transparent;border-inline-end: 2px solid transparent;cursor: col-resize;background-color: transparent;background-clip: content-box;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-table__selection-col > .hi-v5-table-header__resizable-handle {display: none;}.hi-v5-table-header__resizable-handle:hover {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-cell {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-header-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-row--fixed-top, .hi-v5-table-row--fixed-bottom {position: sticky;z-index: 6;}.hi-v5-table-row--fixed-top {inset-block-start: 0;}.hi-v5-table-row--fixed-bottom {inset-block-end: 0;}.hi-v5-table-row--fixed-bottom .hi-v5-table-cell {-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-table-row:has(+ .hi-v5-table-row--fixed-bottom) .hi-v5-table-cell {-webkit-border-after: none;border-block-end: none;}.hi-v5-table-row--hover:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--striped > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--expanded > .hi-v5-table-cell {color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-table-row--error > .hi-v5-table-cell {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-table-row--highlight > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--dragging > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--drag-top > .hi-v5-table-cell {-webkit-border-before: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-start: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--drag-bottom > .hi-v5-table-cell {-webkit-border-after: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--avg > .hi-v5-table-cell, .hi-v5-table-row--total > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--avg:hover > .hi-v5-table-cell, .hi-v5-table-row--total:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-table-header .hi-v5-table-header-col, .hi-v5-table-header .hi-v5-table-col {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-body .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-body .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-header .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-body, .hi-v5-table-content {position: relative;overflow: auto;}.hi-v5-table-body--virtual-holder {overflow: hidden;}.hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;word-break: break-word;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-800, #1a1d26);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-cell__indent {display: inline-block;vertical-align: middle;width: var(--hi-v5-text-size-md, 0.875rem);height: 100%;-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);}.hi-v5-table-cell__switcher.hi-v5-icon-button {-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);color: var(--hi-v5-color-gray-600, #91959e);vertical-align: middle;}.hi-v5-table-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-cell.hi-v5-table-cell__col--highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-cell.hi-v5-table-cell__col--hovered-highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-freeze-shadow {position: absolute;inset-block-start: 0;inset-block-end: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v5-table-freeze-shadow--left {-webkit-margin-end: var(--hi-v5-spacing-5, 10px);margin-inline-end: var(--hi-v5-spacing-5, 10px);inset-inline-start: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-freeze-shadow--right {-webkit-margin-start: var(--hi-v5-spacing-5, 10px);margin-inline-start: var(--hi-v5-spacing-5, 10px);inset-inline-end: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-header-filter-dropdown__trigger.hi-v5-icon-button {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-dropdown__trigger--active.hi-v5-icon-button {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v5-spacing-2, 4px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-table-header-filter-dropdown__item {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v5-color-gray-800, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-table-header-filter-dropdown__item:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-header-filter-dropdown__item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: var(--hi-v5-height-5, 20px);vertical-align: middle;-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);}.hi-v5-table-header-filter-sorter__icon {display: inline-block;height: var(--hi-v5-height-2, 8px);cursor: pointer;overflow: hidden;font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-sorter__icon:hover {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-table-header-filter-sorter__icon svg {position: relative;inset-block-start: -5px;}.hi-v5-table-header-filter-sorter__icon--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-filter-custom__trigger {-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;}.hi-v5-table-header-filter-custom__content {padding: var(--hi-v5-spacing-6, 12px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);}.hi-v5-table-embed-row {position: relative;z-index: 0;}.hi-v5-table-embed-row > td {background-color: var(--hi-v5-color-gray-100, #f2f4f7);padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-setting {position: absolute;height: calc(100% - 2px);z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;inset-inline-end: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;font-size: var(--hi-v5-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-table-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-setting-item--dragging .hi-v5-table-setting-item__wrap {opacity: 0.6;}.hi-v5-table-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-table-setting-item::before, .hi-v5-table-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-table-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-table-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-table-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-table-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}.hi-v5-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v5-spacing-4, 8px);padding: var(--hi-v5-spacing-6, 12px) 0;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v5-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-table--empty th:first-child {-webkit-border-start: none !important;border-inline-start: none !important;}.hi-v5-table--empty td {text-align: center;padding: var(--hi-v5-spacing-12, 24px) 0;}.hi-v5-setting-drawer .hi-v5-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-setting-drawer .hi-v5-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-setting-item:not(.hi-v5-setting-item--drag-disabled) .hi-v5-setting-item__wrap {cursor: move;}.hi-v5-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-setting-item--dragging .hi-v5-setting-item__wrap {opacity: 0.6;}.hi-v5-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-block-end-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-setting-item::before, .hi-v5-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}";
12
- __styleInject__(css_248z);
12
+ styleInject(css_248z);
13
13
  export { css_248z as default };
package/lib/esm/use-table.js CHANGED
@@ -174,13 +174,16 @@ var useTable = function useTable(_a) {
174
174
  }),
175
175
  onHoveredColChange = _useSelect[0],
176
176
  isHoveredHighlightCol = _useSelect[1];
177
+ var bodyTableRef = useRef(null);
178
+ var scrollBodyElementRef = useRef(null);
177
179
  // ************************ 列宽 resizable ************************ //
178
180
  var _useColWidth = useColWidth({
179
181
  data: data,
180
182
  columns: columns,
181
183
  resizable: resizable,
182
184
  tableWidthAdjustOnResize: tableWidthAdjustOnResize,
183
- virtual: !!virtual
185
+ virtual: !!virtual,
186
+ scrollBodyElementRef: scrollBodyElementRef
184
187
  }),
185
188
  measureRowElementRef = _useColWidth.measureRowElementRef,
186
189
  getColgroupProps = _useColWidth.getColgroupProps,
@@ -188,8 +191,6 @@ var useTable = function useTable(_a) {
188
191
  colWidths = _useColWidth.colWidths,
189
192
  setHeaderTableElement = _useColWidth.setHeaderTableElement;
190
193
  // ************************ 列冻结 ************************ //
191
- var bodyTableRef = useRef(null);
192
- var scrollBodyElementRef = useRef(null);
193
194
  /**
194
195
  * 左右 fixed 所在的列，抹平数据结构
195
196
  *
package/lib/types/hooks/use-col-width.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { FlattedTableColumnItemData, TableColumnItem, TableRowRecord } from '../types';
3
- export declare const useColWidth: ({ resizable, tableWidthAdjustOnResize, data, columns, virtual, }: {
3
+ export declare const useColWidth: ({ resizable, tableWidthAdjustOnResize, data, columns, virtual, scrollBodyElementRef, }: {
4
4
  resizable: boolean;
5
5
  tableWidthAdjustOnResize: boolean;
6
6
  data: TableRowRecord[];
7
7
  columns: TableColumnItem[];
8
8
  virtual?: boolean | undefined;
9
+ scrollBodyElementRef: React.RefObject<HTMLTableElement>;
9
10
  }) => {
10
11
  measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;
11
12
  onColumnResizable: (evt: any, { size }: any, index: number) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/table",
3
- "version": "5.0.0-canary.23",
3
+ "version": "5.0.0-canary.24",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -50,7 +50,7 @@
50
50
  "@hi-ui/classname": "^5.0.0-canary.2",
51
51
  "@hi-ui/dom-utils": "^5.0.0-canary.2",
52
52
  "@hi-ui/drawer": "^5.0.0-canary.9",
53
- "@hi-ui/empty-state": "^5.0.0-canary.8",
53
+ "@hi-ui/empty-state": "^5.0.0-canary.9",
54
54
  "@hi-ui/env": "^5.0.0-canary.2",
55
55
  "@hi-ui/func-utils": "^5.0.0-canary.2",
56
56
  "@hi-ui/icon-button": "^5.0.0-canary.8",