@hsu-react/ui 2.2.8 → 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 (4) hide show
  1. package/es/components/Table/_hooks/useEllipsisTooltip.js +14 -3
  2. package/lib/components/Table/_hooks/useEllipsisTooltip.js +13 -3
  3. package/package.json +1 -1
  4. package/src/components/Table/_hooks/useEllipsisTooltip.ts +16 -2
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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hsu-react/ui",
3
- "version": "2.2.8",
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,