@hi-ui/table 4.5.0-alpha.2 → 4.5.0

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 (8) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/lib/cjs/hooks/use-col-width.js +32 -1
  3. package/lib/cjs/use-table.js +22 -3
  4. package/lib/cjs/utils/index.js +2 -1
  5. package/lib/esm/hooks/use-col-width.js +32 -1
  6. package/lib/esm/use-table.js +23 -4
  7. package/lib/esm/utils/index.js +2 -1
  8. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @hi-ui/table
2
2
 
3
+ ## 4.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#2735](https://github.com/XiaoMi/hiui/pull/2735) [`a2b9df50b`](https://github.com/XiaoMi/hiui/commit/a2b9df50b454ae033a5dd0e5f6165ab2f6de07a5) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: 设置 rowSelection 后默认冻结该列
8
+
9
+ - [#2735](https://github.com/XiaoMi/hiui/pull/2735) [`81863f522`](https://github.com/XiaoMi/hiui/commit/81863f52200213ae7740f496c4fe8d73f607b66c) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: setting 增加 trigger 配置
10
+
11
+ ### Patch Changes
12
+
13
+ - [#2726](https://github.com/XiaoMi/hiui/pull/2726) [`459c7940c`](https://github.com/XiaoMi/hiui/commit/459c7940cc94b124e182754474424e13de9f120a) Thanks [@zyprepare](https://github.com/zyprepare)! - fix: 修复双表格结构下，无法设置空状态内容问题
14
+
15
+ - [#2735](https://github.com/XiaoMi/hiui/pull/2735) [`6ac546d3e`](https://github.com/XiaoMi/hiui/commit/6ac546d3e9c1b863fb30941dd365220fa138258a) Thanks [@zyprepare](https://github.com/zyprepare)! - fix: 修复虚拟表格设置 maxHeight 底部内容被遮挡问题
16
+
17
+ - [#2735](https://github.com/XiaoMi/hiui/pull/2735) [`b971c0b06`](https://github.com/XiaoMi/hiui/commit/b971c0b06b1c64dd72c79c23068c4fed684d97c3) Thanks [@zyprepare](https://github.com/zyprepare)! - fix: 修复同时设置 bordered 和 scrollbar 后滚动异常问题
18
+
19
+ - [#2735](https://github.com/XiaoMi/hiui/pull/2735) [`a2b9df50b`](https://github.com/XiaoMi/hiui/commit/a2b9df50b454ae033a5dd0e5f6165ab2f6de07a5) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(table): 设置 rowSelection 后默认冻结该列
20
+
21
+ - [#2748](https://github.com/XiaoMi/hiui/pull/2748) [`ca008e4ae`](https://github.com/XiaoMi/hiui/commit/ca008e4ae9753bc1f11efcdcbf09121d1ef07b56) Thanks [@zyprepare](https://github.com/zyprepare)! - fix: 修复表头分组超过 2 列时冻结列交互异常问题
22
+
23
+ - [#2735](https://github.com/XiaoMi/hiui/pull/2735) [`528314e46`](https://github.com/XiaoMi/hiui/commit/528314e46173dd18cc0140e60e763cb84b52fa2c) Thanks [@zyprepare](https://github.com/zyprepare)! - fix: 修复设置 dataSource 组件首次会执行 2 次请求问题
24
+
25
+ - [#2747](https://github.com/XiaoMi/hiui/pull/2747) [`b5654408e`](https://github.com/XiaoMi/hiui/commit/b5654408ee33b6448b6e9f1297a2790a486d753f) Thanks [@zyprepare](https://github.com/zyprepare)! - fix: 监听列变化,更新列最小可调整宽度
26
+
27
+ - Updated dependencies [[`a9b9c93fc`](https://github.com/XiaoMi/hiui/commit/a9b9c93fc3a3fea60d14052a5afeef9daf7efa1b), [`ca008e4ae`](https://github.com/XiaoMi/hiui/commit/ca008e4ae9753bc1f11efcdcbf09121d1ef07b56)]:
28
+ - @hi-ui/select@4.3.0
29
+ - @hi-ui/tree-utils@4.1.6
30
+
3
31
  ## 4.4.1
4
32
 
5
33
  ### Patch Changes
package/lib/cjs/hooks/use-col-width.js CHANGED
@@ -138,10 +138,41 @@ var useColWidth = function useColWidth(_ref) {
138
138
  var _React$useState2 = React__default["default"].useState(null),
139
139
  headerTableElement = _React$useState2[0],
140
140
  setHeaderTableElement = _React$useState2[1];
141
+ // 控制列最小可调整宽度
142
+ var _React$useState3 = React__default["default"].useState([]),
143
+ minColWidth = _React$useState3[0],
144
+ setMinColWidth = _React$useState3[1];
145
+ // 当列变化时同步更新 minColWidth
146
+ React__default["default"].useEffect(function () {
147
+ var resizeObserver;
148
+ if (headerTableElement) {
149
+ resizeObserver = new ResizeObserver(function () {
150
+ var resizableHandlerWidth = 4;
151
+ var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
152
+ var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
153
+ var childNodes = Array.from(th.childNodes);
154
+ return childNodes.map(function (child) {
155
+ return child.offsetWidth;
156
+ }).reduce(function (prev, next) {
157
+ return prev + next;
158
+ }) + thPaddingLeft * 2 + resizableHandlerWidth;
159
+ });
160
+ setMinColWidth(_minColWidth);
161
+ });
162
+ resizeObserver.observe(headerTableElement);
163
+ } else {
164
+ setMinColWidth(Array(columns.length).fill(0));
165
+ }
166
+ return function () {
167
+ if (resizeObserver) {
168
+ resizeObserver.disconnect();
169
+ }
170
+ };
171
+ }, [columns.length, headerTableElement, resizable]);
141
172
  /**
142
173
  * 控制列最小可调整宽度
143
174
  */
144
- var minColWidth = React__default["default"].useMemo(function () {
175
+ React__default["default"].useMemo(function () {
145
176
  if (resizable && headerTableElement) {
146
177
  var resizableHandlerWidth = 4;
147
178
  var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
package/lib/cjs/use-table.js CHANGED
@@ -200,8 +200,8 @@ var useTable = function useTable(_a) {
200
200
  var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(defaultFixedToColumn, fixedToColumnProp, onFixedToColumn),
201
201
  fixedToColumn = _useUncontrolledState2[0],
202
202
  setFixedToColumn = _useUncontrolledState2[1];
203
- var leftFreezeColumn = columns.some(function (item) {
204
- return item.dataKey === fixedToColumn.left;
203
+ var leftFreezeColumn = treeUtils.findNodeById(columns, fixedToColumn.left || '', {
204
+ idFieldName: 'dataKey'
205
205
  }) ? fixedToColumn.left : Table.SELECTION_DATA_KEY;
206
206
  var rightFreezeColumn = fixedToColumn.right;
207
207
  var setLeftFreezeColumn = React.useCallback(function (columnKey) {
@@ -246,8 +246,27 @@ var useTable = function useTable(_a) {
246
246
  if (colWidths) {
247
247
  // colWidths 记录的是最新的列宽，当它有值时，重置一下列宽，否则会导致冻结列动态调整宽度后定位不准
248
248
  nextColumns = nextColumns.map(function (item, index) {
249
+ var width = item.width,
250
+ children = item.children;
251
+ var parentWidth = 0;
252
+ // 计算父节点宽度
253
+ // 计算父节点宽度
254
+ var dig = function dig(children, index) {
255
+ if (index === void 0) {
256
+ index = 0;
257
+ }
258
+ children === null || children === void 0 ? void 0 : children.forEach(function (child, childIndex) {
259
+ if (child.children) {
260
+ dig(child.children, childIndex);
261
+ } else {
262
+ parentWidth += colWidths[index + childIndex];
263
+ }
264
+ });
265
+ };
266
+ dig(children, index);
249
267
  return Object.assign(Object.assign({}, item), {
250
- width: colWidths[index]
268
+ // 如果是表头分组中的父节点则 width 设置为所有子节点的宽度总和，否则直接拿 colWidths 中的宽度
269
+ width: children ? parentWidth || width : colWidths[index]
251
270
  });
252
271
  });
253
272
  }
package/lib/cjs/utils/index.js CHANGED
@@ -68,8 +68,9 @@ var parseFixedColumns = function parseFixedColumns(item, index, columns, arr, ke
68
68
  children = _item.children;
69
69
  item.children = [];
70
70
  children.forEach(function (childrenItem, idx) {
71
- var child = parseFixedColumns(childrenItem, idx, columns, children, key, index === 0 ? 0 : _parentStickyWidth);
71
+ var child = parseFixedColumns(childrenItem, idx, columns, children, key, idx === 0 ? _parentStickyWidth : 0);
72
72
  item.children[idx] = child;
73
+ children[idx] = child;
73
74
  columns[child.index] = child;
74
75
  });
75
76
  }
package/lib/esm/hooks/use-col-width.js CHANGED
@@ -126,10 +126,41 @@ var useColWidth = function useColWidth(_ref) {
126
126
  var _React$useState2 = React__default.useState(null),
127
127
  headerTableElement = _React$useState2[0],
128
128
  setHeaderTableElement = _React$useState2[1];
129
+ // 控制列最小可调整宽度
130
+ var _React$useState3 = React__default.useState([]),
131
+ minColWidth = _React$useState3[0],
132
+ setMinColWidth = _React$useState3[1];
133
+ // 当列变化时同步更新 minColWidth
134
+ React__default.useEffect(function () {
135
+ var resizeObserver;
136
+ if (headerTableElement) {
137
+ resizeObserver = new ResizeObserver(function () {
138
+ var resizableHandlerWidth = 4;
139
+ var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
140
+ var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
141
+ var childNodes = Array.from(th.childNodes);
142
+ return childNodes.map(function (child) {
143
+ return child.offsetWidth;
144
+ }).reduce(function (prev, next) {
145
+ return prev + next;
146
+ }) + thPaddingLeft * 2 + resizableHandlerWidth;
147
+ });
148
+ setMinColWidth(_minColWidth);
149
+ });
150
+ resizeObserver.observe(headerTableElement);
151
+ } else {
152
+ setMinColWidth(Array(columns.length).fill(0));
153
+ }
154
+ return function () {
155
+ if (resizeObserver) {
156
+ resizeObserver.disconnect();
157
+ }
158
+ };
159
+ }, [columns.length, headerTableElement, resizable]);
129
160
  /**
130
161
  * 控制列最小可调整宽度
131
162
  */
132
- var minColWidth = React__default.useMemo(function () {
163
+ React__default.useMemo(function () {
133
164
  if (resizable && headerTableElement) {
134
165
  var resizableHandlerWidth = 4;
135
166
  var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
package/lib/esm/use-table.js CHANGED
@@ -9,7 +9,7 @@
9
9
  */
10
10
  import { __rest } from 'tslib';
11
11
  import React__default, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
12
- import { cloneTree, flattenTree, getNodeRootParent, flattedTreeSort, getLeafChildren } from '@hi-ui/tree-utils';
12
+ import { cloneTree, flattenTree, findNodeById, getNodeRootParent, flattedTreeSort, getLeafChildren } from '@hi-ui/tree-utils';
13
13
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
14
14
  import { isNullish, isArrayNonEmpty } from '@hi-ui/type-assertion';
15
15
  import { useCheck, useSelect } from '@hi-ui/use-check';
@@ -188,8 +188,8 @@ var useTable = function useTable(_a) {
188
188
  var _useUncontrolledState2 = useUncontrolledState(defaultFixedToColumn, fixedToColumnProp, onFixedToColumn),
189
189
  fixedToColumn = _useUncontrolledState2[0],
190
190
  setFixedToColumn = _useUncontrolledState2[1];
191
- var leftFreezeColumn = columns.some(function (item) {
192
- return item.dataKey === fixedToColumn.left;
191
+ var leftFreezeColumn = findNodeById(columns, fixedToColumn.left || '', {
192
+ idFieldName: 'dataKey'
193
193
  }) ? fixedToColumn.left : SELECTION_DATA_KEY;
194
194
  var rightFreezeColumn = fixedToColumn.right;
195
195
  var setLeftFreezeColumn = useCallback(function (columnKey) {
@@ -234,8 +234,27 @@ var useTable = function useTable(_a) {
234
234
  if (colWidths) {
235
235
  // colWidths 记录的是最新的列宽，当它有值时，重置一下列宽，否则会导致冻结列动态调整宽度后定位不准
236
236
  nextColumns = nextColumns.map(function (item, index) {
237
+ var width = item.width,
238
+ children = item.children;
239
+ var parentWidth = 0;
240
+ // 计算父节点宽度
241
+ // 计算父节点宽度
242
+ var dig = function dig(children, index) {
243
+ if (index === void 0) {
244
+ index = 0;
245
+ }
246
+ children === null || children === void 0 ? void 0 : children.forEach(function (child, childIndex) {
247
+ if (child.children) {
248
+ dig(child.children, childIndex);
249
+ } else {
250
+ parentWidth += colWidths[index + childIndex];
251
+ }
252
+ });
253
+ };
254
+ dig(children, index);
237
255
  return Object.assign(Object.assign({}, item), {
238
- width: colWidths[index]
256
+ // 如果是表头分组中的父节点则 width 设置为所有子节点的宽度总和，否则直接拿 colWidths 中的宽度
257
+ width: children ? parentWidth || width : colWidths[index]
239
258
  });
240
259
  });
241
260
  }
package/lib/esm/utils/index.js CHANGED
@@ -63,8 +63,9 @@ var parseFixedColumns = function parseFixedColumns(item, index, columns, arr, ke
63
63
  children = _item.children;
64
64
  item.children = [];
65
65
  children.forEach(function (childrenItem, idx) {
66
- var child = parseFixedColumns(childrenItem, idx, columns, children, key, index === 0 ? 0 : _parentStickyWidth);
66
+ var child = parseFixedColumns(childrenItem, idx, columns, children, key, idx === 0 ? _parentStickyWidth : 0);
67
67
  item.children[idx] = child;
68
+ children[idx] = child;
68
69
  columns[child.index] = child;
69
70
  });
70
71
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/table",
3
- "version": "4.5.0-alpha.2",
3
+ "version": "4.5.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -60,10 +60,10 @@
60
60
  "@hi-ui/popper": "^4.1.3",
61
61
  "@hi-ui/react-utils": "^4.0.4",
62
62
  "@hi-ui/scrollbar": "^4.1.0",
63
- "@hi-ui/select": "^4.2.5",
63
+ "@hi-ui/select": "^4.3.0",
64
64
  "@hi-ui/spinner": "^4.0.8",
65
65
  "@hi-ui/times": "^4.0.4",
66
- "@hi-ui/tree-utils": "^4.1.5",
66
+ "@hi-ui/tree-utils": "^4.1.6",
67
67
  "@hi-ui/type-assertion": "^4.0.4",
68
68
  "@hi-ui/use-cache": "^4.0.4",
69
69
  "@hi-ui/use-check": "^4.0.5",