@zat-design/sisyphus-react 3.13.1-beta.4 → 3.13.1-beta.6

package/es/ProTable/components/RenderColumn/index.js

@@ -7,12 +7,13 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import "antd/es/typography/style";
 import _Typography from "antd/es/typography";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { useSetState } from 'ahooks';
 import { isBoolean } from 'lodash';
 import classNames from 'classnames';
 import { CheckOutlined } from '@ant-design/icons';
 import { ReactSVG } from 'react-svg';
-import { getPadding } from '../../utils';
+import { getPadding, parseWidth } from '../../utils';
 import { isEmpty } from '../../../utils';
 import copySvg from '../../../assets/copy.svg';
 var Paragraph = _Typography.Paragraph,
@@ -32,12 +33,26 @@ var RenderColumn = function RenderColumn(props) {
     minWidth = props.minWidth,
     isInNewRowFlag = props.isInNewRowFlag,
     scroll = props.scroll;
+  var textRef = useRef(null);
   var _useSetState = useSetState({
       tooltip: false
     }),
     _useSetState2 = _slicedToArray(_useSetState, 2),
     tooltip = _useSetState2[0].tooltip,
     setState = _useSetState2[1];
+  // 计算并更新宽度
+  var updateCalculatedWidth = function updateCalculatedWidth(element) {
+    if (!element) return null;
+    if (!textRef.current) return;
+    // 使用closest方法查找最近的tr
+    var tr = element.closest('tr');
+    if (!tr) return;
+    // 获取tr的宽度
+    var trWidth = tr.getBoundingClientRect().width;
+    // 计算实际宽度
+    var newWidth = parseWidth(width, trWidth);
+    return newWidth;
+  };
   var cellDiffCls = classNames({
     'varied-cell': props === null || props === void 0 ? void 0 : props.isChanged,
     'add-cell': props === null || props === void 0 ? void 0 : props.isAddCell
@@ -96,6 +111,9 @@ var RenderColumn = function RenderColumn(props) {
         if (ellipsis) {
           return _jsx(_Tooltip, _objectSpread(_objectSpread({
             title: currentValue,
+            getTooltipContainer: function getTooltipContainer() {
+              return document.body;
+            },
             onOpenChange: function onOpenChange(open) {
               setState({
                 tooltip: false
@@ -133,6 +151,7 @@ var RenderColumn = function RenderColumn(props) {
           minWidth: minWidth
         },
         overlayClassName: "original-value-tooltip",
+        destroyTooltipOnHide: true,
         placement: "topLeft",
         autoAdjustOverflow: false,
         title: _jsx(_Space, {
@@ -150,10 +169,7 @@ var RenderColumn = function RenderColumn(props) {
               }) : null
             })]
           }) : node
-        }),
-        getPopupContainer: function getPopupContainer(triggerNode) {
-          return triggerNode.parentNode;
-        }
+        })
       }, toolTipProps), {}, {
         children: renderNode
       }));
@@ -198,18 +214,24 @@ var RenderColumn = function RenderColumn(props) {
         children: "-"
       });
     }
+    var calculatedWidth = updateCalculatedWidth(textRef.current);
     return _jsx(_Tooltip, _objectSpread(_objectSpread({
       title: value,
-      onOpenChange: function onOpenChange(open) {
+      destroyTooltipOnHide: true,
+      onOpenChange: function onOpenChange() {
         setState({
           tooltip: false
         });
       },
       open: tooltip
     }, tooltipProps), {}, {
+      getPopupContainer: function getPopupContainer() {
+        return document.body;
+      },
       children: _jsx(Text, {
+        ref: textRef,
         style: {
-          width: width,
+          width: calculatedWidth,
           minWidth: minWidth
         },
         ellipsis: true,

package/es/ProTable/utils/index.d.ts

@@ -41,3 +41,5 @@ export declare const getPadding: (el: HTMLElement) => {
 };
 /** 判断是有值的对象 */
 export declare const isNonEmptyObject: (obj: any) => obj is Record<string, any>;
+/** 解析宽度值 */
+export declare const parseWidth: (widthValue: number | string | undefined, trWidth: number) => number;

package/es/ProTable/utils/index.js

@@ -105,4 +105,24 @@ export var getPadding = function getPadding(el) {
 /** 判断是有值的对象 */
 export var isNonEmptyObject = function isNonEmptyObject(obj) {
   return obj !== null && _typeof(obj) === 'object' && !Array.isArray(obj) && Object.keys(obj).length > 0;
+};
+/** 解析宽度值 */
+export var parseWidth = function parseWidth(widthValue, trWidth) {
+  // 如果是数字，直接返回
+  if (typeof widthValue === 'number') return widthValue;
+  // 如果是字符串，检查是否是百分比
+  if (typeof widthValue === 'string') {
+    if (widthValue.endsWith('%')) {
+      // 计算百分比
+      var percentage = parseFloat(widthValue) / 100;
+      return Math.max(trWidth * percentage, 0);
+    }
+    // 尝试解析为数字（处理如'300px'这样的情况）
+    var numericValue = parseFloat(widthValue);
+    if (!Number.isNaN(numericValue)) {
+      return numericValue;
+    }
+  }
+  // 所有其他情况，返回默认值
+  return null;
 };

package/lib/ProTable/components/RenderColumn/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
 var _antd = require("antd");
 var _ahooks = require("ahooks");
 var _lodash = require("lodash");
@@ -34,12 +35,26 @@ var RenderColumn = function RenderColumn(props) {
     minWidth = props.minWidth,
     isInNewRowFlag = props.isInNewRowFlag,
     scroll = props.scroll;
+  var textRef = (0, _react.useRef)(null);
   var _useSetState = (0, _ahooks.useSetState)({
       tooltip: false
     }),
     _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
     tooltip = _useSetState2[0].tooltip,
     setState = _useSetState2[1];
+  // 计算并更新宽度
+  var updateCalculatedWidth = function updateCalculatedWidth(element) {
+    if (!element) return null;
+    if (!textRef.current) return;
+    // 使用closest方法查找最近的tr
+    var tr = element.closest('tr');
+    if (!tr) return;
+    // 获取tr的宽度
+    var trWidth = tr.getBoundingClientRect().width;
+    // 计算实际宽度
+    var newWidth = (0, _utils.parseWidth)(width, trWidth);
+    return newWidth;
+  };
   var cellDiffCls = (0, _classnames.default)({
     'varied-cell': props === null || props === void 0 ? void 0 : props.isChanged,
     'add-cell': props === null || props === void 0 ? void 0 : props.isAddCell
@@ -98,6 +113,9 @@ var RenderColumn = function RenderColumn(props) {
         if (ellipsis) {
           return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
             title: currentValue,
+            getTooltipContainer: function getTooltipContainer() {
+              return document.body;
+            },
             onOpenChange: function onOpenChange(open) {
               setState({
                 tooltip: false
@@ -135,6 +153,7 @@ var RenderColumn = function RenderColumn(props) {
           minWidth: minWidth
         },
         overlayClassName: "original-value-tooltip",
+        destroyTooltipOnHide: true,
         placement: "topLeft",
         autoAdjustOverflow: false,
         title: (0, _jsxRuntime.jsx)(_antd.Space, {
@@ -152,10 +171,7 @@ var RenderColumn = function RenderColumn(props) {
               }) : null
             })]
           }) : node
-        }),
-        getPopupContainer: function getPopupContainer(triggerNode) {
-          return triggerNode.parentNode;
-        }
+        })
       }, toolTipProps), {}, {
         children: renderNode
       }));
@@ -200,18 +216,24 @@ var RenderColumn = function RenderColumn(props) {
         children: "-"
       });
     }
+    var calculatedWidth = updateCalculatedWidth(textRef.current);
     return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
       title: value,
-      onOpenChange: function onOpenChange(open) {
+      destroyTooltipOnHide: true,
+      onOpenChange: function onOpenChange() {
         setState({
           tooltip: false
         });
       },
       open: tooltip
     }, tooltipProps), {}, {
+      getPopupContainer: function getPopupContainer() {
+        return document.body;
+      },
       children: (0, _jsxRuntime.jsx)(Text, {
+        ref: textRef,
         style: {
-          width: width,
+          width: calculatedWidth,
           minWidth: minWidth
         },
         ellipsis: true,

package/lib/ProTable/utils/index.d.ts

@@ -41,3 +41,5 @@ export declare const getPadding: (el: HTMLElement) => {
 };
 /** 判断是有值的对象 */
 export declare const isNonEmptyObject: (obj: any) => obj is Record<string, any>;
+/** 解析宽度值 */
+export declare const parseWidth: (widthValue: number | string | undefined, trWidth: number) => number;

package/lib/ProTable/utils/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeEmptyKeys = exports.isNonEmptyObject = exports.isListResult = exports.getRowKey = exports.getPadding = exports.getOriginalValue = exports.getDecimalDigits = exports.getColumnDataIndex = void 0;
+exports.removeEmptyKeys = exports.parseWidth = exports.isNonEmptyObject = exports.isListResult = exports.getRowKey = exports.getPadding = exports.getOriginalValue = exports.getDecimalDigits = exports.getColumnDataIndex = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _lodash = require("lodash");
@@ -112,4 +112,24 @@ var getPadding = exports.getPadding = function getPadding(el) {
 /** 判断是有值的对象 */
 var isNonEmptyObject = exports.isNonEmptyObject = function isNonEmptyObject(obj) {
   return obj !== null && (0, _typeof2.default)(obj) === 'object' && !Array.isArray(obj) && Object.keys(obj).length > 0;
+};
+/** 解析宽度值 */
+var parseWidth = exports.parseWidth = function parseWidth(widthValue, trWidth) {
+  // 如果是数字，直接返回
+  if (typeof widthValue === 'number') return widthValue;
+  // 如果是字符串，检查是否是百分比
+  if (typeof widthValue === 'string') {
+    if (widthValue.endsWith('%')) {
+      // 计算百分比
+      var percentage = parseFloat(widthValue) / 100;
+      return Math.max(trWidth * percentage, 0);
+    }
+    // 尝试解析为数字（处理如'300px'这样的情况）
+    var numericValue = parseFloat(widthValue);
+    if (!Number.isNaN(numericValue)) {
+      return numericValue;
+    }
+  }
+  // 所有其他情况，返回默认值
+  return null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.13.1-beta.4",
+  "version": "3.13.1-beta.6",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",