@zat-design/sisyphus-react 3.13.1 → 3.13.2-beta.2

package/lib/ProTooltip/index.js

@@ -14,8 +14,15 @@ var _ahooks = require("ahooks");
 var _antd = require("antd");
 var _react = require("react");
 var _classnames2 = _interopRequireDefault(require("classnames"));
-require("./style/index.less");
-var _excluded = ["text", "mode", "width", "line", "isResponsiveWidth", "className", "style", "lineHeight"];
+var _utils = require("../utils");
+var _excluded = ["text", "mode", "width", "line", "className", "style", "lineHeight", "scrollFollowParent"];
+var _findTableParent = function findTableParent(element) {
+  var _element$tagName;
+  var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (!element || depth >= 3) return false;
+  if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'td') return true;
+  return _findTableParent(element.parentElement, depth + 1);
+};
 var ProTooltip = function ProTooltip(props) {
   var _useSize;
   var ref = (0, _react.useRef)();
@@ -24,18 +31,17 @@ var ProTooltip = function ProTooltip(props) {
   var text = props.text,
     _props$mode = props.mode,
     mode = _props$mode === void 0 ? 'default' : _props$mode,
-    _props$width = props.width,
-    width = _props$width === void 0 ? '120px' : _props$width,
+    width = props.width,
     _props$line = props.line,
     line = _props$line === void 0 ? 1 : _props$line,
-    _props$isResponsiveWi = props.isResponsiveWidth,
-    isResponsiveWidth = _props$isResponsiveWi === void 0 ? false : _props$isResponsiveWi,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style,
     _props$lineHeight = props.lineHeight,
     lineHeight = _props$lineHeight === void 0 ? 22 : _props$lineHeight,
+    _props$scrollFollowPa = props.scrollFollowParent,
+    scrollFollowParent = _props$scrollFollowPa === void 0 ? true : _props$scrollFollowPa,
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _width = mode === 'auto' ? 'auto' : width;
   var content = text !== null && text !== void 0 ? text : '-';
@@ -65,6 +71,7 @@ var ProTooltip = function ProTooltip(props) {
   });
   var _ref = (_useSize = (0, _ahooks.useSize)(localElement)) !== null && _useSize !== void 0 ? _useSize : {},
     _localSizeWidth = _ref.width;
+  var isTable = _findTableParent(ref.current);
   var overlayStyle = mode === 'auto' ? {
     maxWidth: _localSizeWidth
   } : {};
@@ -147,23 +154,6 @@ var ProTooltip = function ProTooltip(props) {
     }
     return line > 1 ? (0, _jsxRuntime.jsx)(AutoMixinMulti, {}) : (0, _jsxRuntime.jsx)(AutoMixinSingle, {});
   };
-  (0, _ahooks.useDebounceEffect)(function () {
-    if (isResponsiveWidth && parentElement) {
-      var cWidth = parentElement.clientWidth - 32;
-      var contentDom = childRef.current;
-      setState({
-        isShowToolTip: contentDom.scrollWidth > contentDom.offsetWidth,
-        localWidth: cWidth
-      });
-    }
-    if (!isResponsiveWidth) {
-      setState({
-        localWidth: _width
-      });
-    }
-  }, [isResponsiveWidth, size], {
-    wait: 300
-  });
   (0, _react.useEffect)(function () {
     if (mode === 'auto' && line === 1) {
       var localDom = ref.current;
@@ -243,57 +233,63 @@ var ProTooltip = function ProTooltip(props) {
   }, [debouncedValue]);
   (0, _react.useEffect)(function () {
     var localDom = ref.current;
-    var contentDom = childRef.current;
+    var isEllipsis = (0, _utils.isEllipsisActive)(childRef === null || childRef === void 0 ? void 0 : childRef.current);
     setState({
       parentElement: localDom.parentElement,
-      isShowToolTip: contentDom.scrollWidth > contentDom.offsetWidth
+      isShowToolTip: isEllipsis
     });
   }, []);
   var cls = (0, _classnames2.default)((0, _defineProperty2.default)({
     'pro-tooltip': true
   }, "".concat(className), className));
-  return (0, _jsxRuntime.jsx)("div", {
-    className: cls,
-    ref: ref,
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), multiStyle), {}, {
-      width: localWidth
-    }),
-    children: isResponsiveWidth && isShowToolTip ? (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-      title: text,
-      getPopupContainer: function getPopupContainer(triggerNode) {
-        return triggerNode.parentNode;
-      }
-    }, restProps), {}, {
-      children: (0, _jsxRuntime.jsx)("div", {
-        className: isMultiLine ? 'multiLine' : 'singleLine',
-        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, multiStyle), {}, {
-          width: localWidth
-        }),
-        ref: childRef,
-        children: content
-      })
-    })) : isResponsiveWidth ? (0, _jsxRuntime.jsx)("div", {
+  var renderContentBox = function renderContentBox() {
+    return (0, _jsxRuntime.jsx)("div", {
       className: isMultiLine ? 'multiLine' : 'singleLine',
       style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, multiStyle), {}, {
         width: localWidth
       }),
       ref: childRef,
       children: content
-    }) : mode === 'default' ? (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    });
+  };
+  var renderTooltipContent = function renderTooltipContent() {
+    return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
       title: text,
       getPopupContainer: function getPopupContainer(triggerNode) {
-        return triggerNode.parentNode;
+        // 修复scrollFollowParent为false时tooltip不显示的问题
+        // 当scrollFollowParent为false时，应该返回document.body而不是triggerNode本身
+        return scrollFollowParent ? triggerNode.parentNode : document.body;
       }
     }, restProps), {}, {
-      children: (0, _jsxRuntime.jsx)("div", {
-        className: isMultiLine ? 'multiLine' : 'singleLine',
-        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, multiStyle), {}, {
-          width: localWidth
-        }),
-        ref: childRef,
-        children: content
-      })
-    })) : (0, _jsxRuntime.jsx)(AutoMixin, {})
+      overlayStyle: mode === 'auto' ? overlayStyle : {},
+      children: renderContentBox()
+    }));
+  };
+  var renderContent = function renderContent() {
+    // 自动模式使用专门的渲染逻辑
+    if (mode === 'auto') {
+      return (0, _jsxRuntime.jsx)(AutoMixin, {});
+    }
+    // 响应式宽度模式，根据是否需要显示tooltip决定渲染内容 且 父元素为table
+    if (isTable) {
+      if (isShowToolTip) {
+        return renderTooltipContent();
+      }
+      return renderContentBox();
+    }
+    // 默认模式始终显示tooltip
+    if (mode === 'default') {
+      return renderTooltipContent();
+    }
+    return renderContentBox();
+  };
+  return (0, _jsxRuntime.jsx)("div", {
+    className: cls,
+    ref: ref,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), multiStyle), {}, {
+      width: localWidth
+    }),
+    children: renderContent()
   });
 };
 var _default = exports.default = ProTooltip;

package/lib/ProTooltip/propsType.d.ts

@@ -9,9 +9,8 @@ export interface ProTooltipType {
     /**
      * 提示框宽度
      * @description 设置提示框的宽度，支持各种CSS宽度单位
-     * @default 'auto'
      */
-    width?: string;
+    width?: string | number;
     /**
      * 显示的行数
      * @description 当内容超过设定行数时将截断显示
@@ -19,11 +18,11 @@ export interface ProTooltipType {
      */
     line?: number;
     /**
-     * 是否响应式宽度
-     * @description 启用后提示框宽度将根据内容自适应
-     * @default false
+     * 是否跟随父元素滚动
+     * @description 启用后，提示框将跟随父元素滚动
+     * @default true
      */
-    isResponsiveWidth?: Boolean;
+    scrollFollowParent?: boolean;
     /**
      * 自定义类名
      * @description 额外的CSS类名

package/lib/utils/index.d.ts

@@ -3,4 +3,12 @@
  * 空值 或者 仅包含空值的数组视为空
  */
 export declare const isEmpty: (value: any, emptyValue?: string) => boolean;
+/**
+ * 判断一个元素是否触发了省略号（文本溢出）
+ * 如果元素设置为单行（white-space: nowrap）则比较 scrollWidth 与 clientWidth，
+ * 如果是多行文本（例如使用 -webkit-line-clamp 实现多行截断）则比较 scrollHeight 与 clientHeight。
+ * @param {HTMLElement} element 要检测的元素
+ * @returns {boolean} 如果内容溢出返回 true，否则返回 false
+ */
+export declare const isEllipsisActive: (element: Element) => boolean;
 export declare const useFocus: (element: Element) => boolean;

package/lib/utils/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFocus = exports.isEmpty = void 0;
+exports.useFocus = exports.isEmpty = exports.isEllipsisActive = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var EMPTY_VALUE = [undefined, null, ''];
@@ -26,6 +26,23 @@ var isEmpty = exports.isEmpty = function isEmpty(value, emptyValue) {
   }
   return false;
 };
+/**
+ * 判断一个元素是否触发了省略号（文本溢出）
+ * 如果元素设置为单行（white-space: nowrap）则比较 scrollWidth 与 clientWidth，
+ * 如果是多行文本（例如使用 -webkit-line-clamp 实现多行截断）则比较 scrollHeight 与 clientHeight。
+ * @param {HTMLElement} element 要检测的元素
+ * @returns {boolean} 如果内容溢出返回 true，否则返回 false
+ */
+var isEllipsisActive = exports.isEllipsisActive = function isEllipsisActive(element) {
+  if (!element) return false;
+  var computedStyle = window.getComputedStyle(element);
+  // 如果使用单行显示（nowrap），则判断宽度是否足够
+  if (computedStyle.whiteSpace === 'nowrap') {
+    return element.scrollWidth > element.clientWidth;
+  }
+  // 多行情况下，判断高度是否足够
+  return element.scrollHeight > element.clientHeight;
+};
 var useFocus = exports.useFocus = function useFocus(element) {
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/package.json

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