@hsu-react/ui 2.2.7 → 2.2.9

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 (7) hide show
  1. package/es/components/Table/_hooks/useEllipsisTooltip.js +14 -3
  2. package/es/components/Table/index.module.scss +13 -8
  3. package/lib/components/Table/_hooks/useEllipsisTooltip.js +13 -3
  4. package/lib/components/Table/index.module.scss +13 -8
  5. package/package.json +1 -1
  6. package/src/components/Table/_hooks/useEllipsisTooltip.ts +16 -2
  7. package/src/components/Table/index.module.scss +13 -8
package/es/components/Table/_hooks/useEllipsisTooltip.js CHANGED
@@ -23,17 +23,28 @@ var useEllipsisTooltip = function useEllipsisTooltip(tooltipConfig) {
23
23
 
24
24
  // If ellipsis is set and there is no custom render
25
25
  if (column.ellipsis && !column.render && column.dataIndex) {
26
+ var _column$width;
27
+ // 宽列（声明宽度 > 300）让 Tooltip 至少铺到列宽：这类列本来就是放长文本的，
28
+ // Tooltip 仍按 200 起步会把一行摊成十几行。
29
+ //
30
+ // 窄列（≤ 300）依旧不传，回落到 TextEllipsis 实测的单元格宽度 —— 声明宽度经
31
+ // fixedWidth 比例分配后与实际渲染宽度并不相等，拿它当 Tooltip 宽度会偏。
32
+ //
33
+ // Number() 只对数值宽度有意义："20%" / "auto" 这类会得到 NaN，而
34
+ // Math.max(NaN, 300) 仍是 NaN、且 NaN === 300 为 false，不拦住就会把 NaN
35
+ // 当宽度传下去。非数值一律按窄列处理，交给实测。
36
+ var declaredWidth = Number((_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : 0);
37
+ var tooltipWidth = Number.isFinite(declaredWidth) ? Math.max(declaredWidth, 300) : 300;
26
38
  return _objectSpread(_objectSpread({}, column), {}, {
27
39
  render: function render(text) {
28
40
  var _column$ellipsisPosit;
29
41
  // Get the actual display value
30
42
  var displayValue = typeof text === "string" || typeof text === "number" ? text : String(text !== null && text !== void 0 ? text : "");
31
-
32
- // Do not pass width: let TextEllipsis measure the cell's actual rendered width as the Tooltip width
33
- // (the declared column width, after fixedWidth proportional allocation, does not match the actual width)
34
43
  return /*#__PURE__*/React.createElement(TextEllipsis, {
35
44
  tooltipConfig: tooltipConfig,
36
45
  children: displayValue,
46
+ // 见上：只有宽列才给显式宽度，undefined 表示交给 TextEllipsis 实测
47
+ width: tooltipWidth === 300 ? undefined : tooltipWidth,
37
48
  ellipsisPosition: (_column$ellipsisPosit = column.ellipsisPosition) !== null && _column$ellipsisPosit !== void 0 ? _column$ellipsisPosit : tooltipConfig === null || tooltipConfig === void 0 ? void 0 : tooltipConfig.ellipsisPosition,
38
49
  key: text
39
50
  });
package/es/components/Table/index.module.scss CHANGED
@@ -294,7 +294,13 @@
294
294
  height: 100%;
295
295
  }
296
296
 
297
- :global(.ant-spin-nested-loading) {
297
+ // 这里原本写的是 `.ant-spin-nested-loading` —— antd v5 里 Spin 包裹子节点时的那层
298
+ // 类名。v6 把它删了（现在包裹层只有 `.ant-spin`），于是**整段滚动布局一条都不命中**，
299
+ // 表体拿不到 `flex: 1` 与 `overflow-y: auto`，纵向滚动直接消失，而且不报错。
300
+ //
301
+ // 改用直接子选择器：wrapper 下本来就只有这一个包裹层，不写死它叫什么，
302
+ // v5 / v6 都命中，将来 antd 再改名也不会又静默失效。
303
+ :global(.ant-table-wrapper) > * {
298
304
  width: 100%;
299
305
  height: 100%;
300
306
 
@@ -344,13 +350,12 @@
344
350
  }
345
351
 
346
352
  &.y-unScroll {
347
- :global(.ant-spin-nested-loading) {
348
- :global(.ant-spin-container) {
349
- :global(.ant-table) {
350
- :global(.ant-table-container) {
351
- > :global(.ant-table-body) {
352
- overflow-y: visible !important;
353
- }
353
+ // 同上：不再经过 v5 才有的 .ant-spin-nested-loading
354
+ :global(.ant-spin-container) {
355
+ :global(.ant-table) {
356
+ :global(.ant-table-container) {
357
+ > :global(.ant-table-body) {
358
+ overflow-y: visible !important;
354
359
  }
355
360
  }
356
361
  }
package/lib/components/Table/_hooks/useEllipsisTooltip.js CHANGED
@@ -25,17 +25,27 @@ const useEllipsisTooltip = tooltipConfig => {
25
25
 
26
26
  // If ellipsis is set and there is no custom render
27
27
  if (column.ellipsis && !column.render && column.dataIndex) {
28
+ // 宽列（声明宽度 > 300）让 Tooltip 至少铺到列宽：这类列本来就是放长文本的，
29
+ // Tooltip 仍按 200 起步会把一行摊成十几行。
30
+ //
31
+ // 窄列（≤ 300）依旧不传，回落到 TextEllipsis 实测的单元格宽度 —— 声明宽度经
32
+ // fixedWidth 比例分配后与实际渲染宽度并不相等，拿它当 Tooltip 宽度会偏。
33
+ //
34
+ // Number() 只对数值宽度有意义："20%" / "auto" 这类会得到 NaN，而
35
+ // Math.max(NaN, 300) 仍是 NaN、且 NaN === 300 为 false，不拦住就会把 NaN
36
+ // 当宽度传下去。非数值一律按窄列处理，交给实测。
37
+ const declaredWidth = Number(column.width ?? 0);
38
+ const tooltipWidth = Number.isFinite(declaredWidth) ? Math.max(declaredWidth, 300) : 300;
28
39
  return {
29
40
  ...column,
30
41
  render: text => {
31
42
  // Get the actual display value
32
43
  const displayValue = typeof text === "string" || typeof text === "number" ? text : String(text ?? "");
33
-
34
- // Do not pass width: let TextEllipsis measure the cell's actual rendered width as the Tooltip width
35
- // (the declared column width, after fixedWidth proportional allocation, does not match the actual width)
36
44
  return /*#__PURE__*/_react.default.createElement(_TextEllipsis.default, {
37
45
  tooltipConfig: tooltipConfig,
38
46
  children: displayValue,
47
+ // 见上：只有宽列才给显式宽度，undefined 表示交给 TextEllipsis 实测
48
+ width: tooltipWidth === 300 ? undefined : tooltipWidth,
39
49
  ellipsisPosition: column.ellipsisPosition ?? tooltipConfig?.ellipsisPosition,
40
50
  key: text
41
51
  });
package/lib/components/Table/index.module.scss CHANGED
@@ -294,7 +294,13 @@
294
294
  height: 100%;
295
295
  }
296
296
 
297
- :global(.ant-spin-nested-loading) {
297
+ // 这里原本写的是 `.ant-spin-nested-loading` —— antd v5 里 Spin 包裹子节点时的那层
298
+ // 类名。v6 把它删了（现在包裹层只有 `.ant-spin`），于是**整段滚动布局一条都不命中**，
299
+ // 表体拿不到 `flex: 1` 与 `overflow-y: auto`，纵向滚动直接消失，而且不报错。
300
+ //
301
+ // 改用直接子选择器：wrapper 下本来就只有这一个包裹层，不写死它叫什么，
302
+ // v5 / v6 都命中，将来 antd 再改名也不会又静默失效。
303
+ :global(.ant-table-wrapper) > * {
298
304
  width: 100%;
299
305
  height: 100%;
300
306
 
@@ -344,13 +350,12 @@
344
350
  }
345
351
 
346
352
  &.y-unScroll {
347
- :global(.ant-spin-nested-loading) {
348
- :global(.ant-spin-container) {
349
- :global(.ant-table) {
350
- :global(.ant-table-container) {
351
- > :global(.ant-table-body) {
352
- overflow-y: visible !important;
353
- }
353
+ // 同上：不再经过 v5 才有的 .ant-spin-nested-loading
354
+ :global(.ant-spin-container) {
355
+ :global(.ant-table) {
356
+ :global(.ant-table-container) {
357
+ > :global(.ant-table-body) {
358
+ overflow-y: visible !important;
354
359
  }
355
360
  }
356
361
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hsu-react/ui",
3
- "version": "2.2.7",
3
+ "version": "2.2.9",
4
4
  "description": "一套基于 React + Ant Design 的中后台业务组件库",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/components/Table/_hooks/useEllipsisTooltip.ts CHANGED
@@ -23,6 +23,20 @@ const useEllipsisTooltip = <T extends AnyObject>(
23
23
 
24
24
  // If ellipsis is set and there is no custom render
25
25
  if (column.ellipsis && !column.render && column.dataIndex) {
26
+ // 宽列（声明宽度 > 300）让 Tooltip 至少铺到列宽：这类列本来就是放长文本的，
27
+ // Tooltip 仍按 200 起步会把一行摊成十几行。
28
+ //
29
+ // 窄列（≤ 300）依旧不传，回落到 TextEllipsis 实测的单元格宽度 —— 声明宽度经
30
+ // fixedWidth 比例分配后与实际渲染宽度并不相等，拿它当 Tooltip 宽度会偏。
31
+ //
32
+ // Number() 只对数值宽度有意义："20%" / "auto" 这类会得到 NaN，而
33
+ // Math.max(NaN, 300) 仍是 NaN、且 NaN === 300 为 false，不拦住就会把 NaN
34
+ // 当宽度传下去。非数值一律按窄列处理，交给实测。
35
+ const declaredWidth = Number(column.width ?? 0);
36
+ const tooltipWidth = Number.isFinite(declaredWidth)
37
+ ? Math.max(declaredWidth, 300)
38
+ : 300;
39
+
26
40
  return {
27
41
  ...column,
28
42
  render: (text) => {
@@ -32,11 +46,11 @@ const useEllipsisTooltip = <T extends AnyObject>(
32
46
  ? text
33
47
  : String(text ?? "");
34
48
 
35
- // Do not pass width: let TextEllipsis measure the cell's actual rendered width as the Tooltip width
36
- // (the declared column width, after fixedWidth proportional allocation, does not match the actual width)
37
49
  return React.createElement(TextEllipsis, {
38
50
  tooltipConfig: tooltipConfig,
39
51
  children: displayValue,
52
+ // 见上：只有宽列才给显式宽度，undefined 表示交给 TextEllipsis 实测
53
+ width: tooltipWidth === 300 ? undefined : tooltipWidth,
40
54
  ellipsisPosition:
41
55
  column.ellipsisPosition ?? tooltipConfig?.ellipsisPosition,
42
56
  key: text,
package/src/components/Table/index.module.scss CHANGED
@@ -294,7 +294,13 @@
294
294
  height: 100%;
295
295
  }
296
296
 
297
- :global(.ant-spin-nested-loading) {
297
+ // 这里原本写的是 `.ant-spin-nested-loading` —— antd v5 里 Spin 包裹子节点时的那层
298
+ // 类名。v6 把它删了（现在包裹层只有 `.ant-spin`），于是**整段滚动布局一条都不命中**，
299
+ // 表体拿不到 `flex: 1` 与 `overflow-y: auto`，纵向滚动直接消失，而且不报错。
300
+ //
301
+ // 改用直接子选择器：wrapper 下本来就只有这一个包裹层，不写死它叫什么，
302
+ // v5 / v6 都命中，将来 antd 再改名也不会又静默失效。
303
+ :global(.ant-table-wrapper) > * {
298
304
  width: 100%;
299
305
  height: 100%;
300
306
 
@@ -344,13 +350,12 @@
344
350
  }
345
351
 
346
352
  &.y-unScroll {
347
- :global(.ant-spin-nested-loading) {
348
- :global(.ant-spin-container) {
349
- :global(.ant-table) {
350
- :global(.ant-table-container) {
351
- > :global(.ant-table-body) {
352
- overflow-y: visible !important;
353
- }
353
+ // 同上：不再经过 v5 才有的 .ant-spin-nested-loading
354
+ :global(.ant-spin-container) {
355
+ :global(.ant-table) {
356
+ :global(.ant-table-container) {
357
+ > :global(.ant-table-body) {
358
+ overflow-y: visible !important;
354
359
  }
355
360
  }
356
361
  }