@chaoswise/ui 2.5.2 → 2.5.3

package/lib/TooltipText/ResizeObserverManager.js

@@ -0,0 +1,56 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+// ResizeObserverManager.js
+import ResizeObserver from 'resize-observer-polyfill';
+
+// 用于存储回调函数的映射
+var callbackMap = new WeakMap();
+var resizeObserverInstance = new ResizeObserver(function (entries) {
+  // 触发所有注册的回调函数
+  var _iterator = _createForOfIteratorHelper(entries),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var entry = _step.value;
+      var callbacks = callbackMap.get(entry.target);
+      if (callbacks) {
+        var _iterator2 = _createForOfIteratorHelper(callbacks),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var callback = _step2.value;
+            callback(entry);
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+});
+export function observe(element, callback) {
+  // 注册新的回调函数
+  if (!callbackMap.has(element)) {
+    callbackMap.set(element, new Set());
+    resizeObserverInstance.observe(element);
+  }
+  callbackMap.get(element).add(callback);
+}
+export function unobserve(element, callback) {
+  // 移除指定的回调函数
+  var callbacks = callbackMap.get(element);
+  if (callbacks) {
+    callbacks["delete"](callback);
+    if (callbacks.size === 0) {
+      resizeObserverInstance.unobserve(element);
+      callbackMap["delete"](element);
+    }
+  }
+}

package/lib/TooltipText/index.js

@@ -2,7 +2,6 @@ import "@chaoswise/ui/lib/Tooltip/index.less";
 import _Tooltip from "@chaoswise/ui/lib/Tooltip";
 var _excluded = ["children", "width", "ellipsisPosition", "title"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -11,10 +10,10 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useRef, useEffect, useState, useMemo } from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
+import React, { useRef, useEffect, useState, useMemo, memo } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { observe, unobserve } from './ResizeObserverManager';
 import './index.less';
 
 /**
@@ -41,69 +40,60 @@ var TooltipText = function TooltipText(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     ellipsisWidth = _useState6[0],
     setEllipsisWidth = _useState6[1];
-  var watcher = useRef(null);
   useEffect(function () {
+    var isInit = true;
+    var saveWrapperDom = wrapperDom.current;
+    var updateWidth = function updateWidth(width) {
+      var _cloneDom$current, _ellipsisDom$current;
+      setWrapperWidth(width);
+      setTextWidth(((_cloneDom$current = cloneDom.current) === null || _cloneDom$current === void 0 ? void 0 : _cloneDom$current.offsetWidth) || 0);
+      setEllipsisWidth(((_ellipsisDom$current = ellipsisDom.current) === null || _ellipsisDom$current === void 0 ? void 0 : _ellipsisDom$current.offsetWidth) || 0);
+    };
+    var originalWidth = (saveWrapperDom === null || saveWrapperDom === void 0 ? void 0 : saveWrapperDom.offsetWidth) || 0;
+    updateWidth(originalWidth);
+
     // 监听外壳容器变化
-    watcher.current = new ResizeObserver(function (entries) {
-      var _iterator = _createForOfIteratorHelper(entries),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var _cloneDom$current, _ellipsisDom$current, _wrapperDom$current;
-          var entry = _step.value;
-          setTextWidth(((_cloneDom$current = cloneDom.current) === null || _cloneDom$current === void 0 ? void 0 : _cloneDom$current.offsetWidth) || 0);
-          setEllipsisWidth(((_ellipsisDom$current = ellipsisDom.current) === null || _ellipsisDom$current === void 0 ? void 0 : _ellipsisDom$current.offsetWidth) || 0);
-          setWrapperWidth(((_wrapperDom$current = wrapperDom.current) === null || _wrapperDom$current === void 0 ? void 0 : _wrapperDom$current.offsetWidth) || 0);
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
+    var handleResize = function handleResize(entry) {
+      var _entry$target;
+      // 初始化不需要执行那次立即执行的逻辑
+      if (isInit) {
+        isInit = false;
+        return;
       }
-    });
-    watcher.current.observe(wrapperDom.current);
-    watcher.current.observe(cloneDom.current);
+      var newWidth = ((_entry$target = entry.target) === null || _entry$target === void 0 ? void 0 : _entry$target.offsetWidth) || 0;
+      updateWidth(newWidth);
+    };
+    observe(saveWrapperDom, handleResize);
     return function () {
-      if (wrapperDom.current) {
-        var _watcher$current;
-        (_watcher$current = watcher.current) === null || _watcher$current === void 0 || _watcher$current.unobserve(wrapperDom.current);
-      }
-      if (cloneDom.current) {
-        var _watcher$current2;
-        (_watcher$current2 = watcher.current) === null || _watcher$current2 === void 0 || _watcher$current2.unobserve(cloneDom.current);
-      }
+      unobserve(saveWrapperDom, handleResize);
     };
   }, []);
   var isShowTooltip = useMemo(function () {
-    if (width) {
-      if (textWidth > width) {
-        return true;
-      }
-      return false;
-    }
-    if (textWidth > wrapperWidth) {
-      return true;
+    return textWidth > wrapperWidth;
+  }, [textWidth, wrapperWidth]);
+  var isCenterEllipsis = useMemo(function () {
+    return ellipsisPosition === 'center';
+  }, [ellipsisPosition]);
+  var finalChildren = useMemo(function () {
+    if (isCenterEllipsis && isShowTooltip) {
+      var getHalf = function getHalf(width) {
+        return width / 2 - ellipsisWidth / 2;
+      };
+      var halfWrapperWidth = Math.floor(width ? getHalf(width) : getHalf(wrapperWidth));
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "cw-tooltip-middle-ellipsis",
+        style: {
+          width: halfWrapperWidth
+        }
+      }, children), /*#__PURE__*/React.createElement("span", null, "..."), /*#__PURE__*/React.createElement("span", {
+        className: "cw-tooltip-middle-ellipsis cw-tooltip-middle-ellipsis-right",
+        style: {
+          width: halfWrapperWidth
+        }
+      }, children));
     }
-    return false;
-  }, [width, textWidth, wrapperWidth]);
-  var renderChildren = useMemo(function () {
-    var getHalf = function getHalf(width) {
-      return width / 2 - ellipsisWidth / 2;
-    };
-    var halfWrapperWidth = Math.floor(width ? getHalf(width) : getHalf(wrapperWidth));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: "cw-tooltip-middle-ellipsis",
-      style: {
-        width: halfWrapperWidth
-      }
-    }, children), /*#__PURE__*/React.createElement("span", null, "..."), /*#__PURE__*/React.createElement("span", {
-      className: "cw-tooltip-middle-ellipsis cw-tooltip-middle-ellipsis-right",
-      style: {
-        width: halfWrapperWidth
-      }
-    }, children));
-  }, [width, wrapperWidth, children]);
-  var isCenterEllipsis = ellipsisPosition === 'center';
+    return children;
+  }, [width, wrapperWidth, children, isCenterEllipsis, isShowTooltip]);
   return /*#__PURE__*/React.createElement(_Tooltip, _extends({
     title: isShowTooltip ? title ? title : children : ''
   }, resP), /*#__PURE__*/React.createElement("span", {
@@ -114,7 +104,7 @@ var TooltipText = function TooltipText(_ref) {
       width: width
     },
     ref: wrapperDom
-  }, isCenterEllipsis && isShowTooltip ? renderChildren : children, /*#__PURE__*/React.createElement("div", {
+  }, finalChildren, /*#__PURE__*/React.createElement("div", {
     className: "cw-tooltip-clone",
     ref: cloneDom
   }, children), /*#__PURE__*/React.createElement("div", {
@@ -135,4 +125,4 @@ TooltipText.propTypes = {
    */
   ellipsisPosition: PropTypes.oneOf(['end', 'center'])
 };
-export default TooltipText;
+export default /*#__PURE__*/memo(TooltipText);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chaoswise/ui",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "公共UI库",
   "keywords": [
     "ui",
@@ -52,6 +52,7 @@
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-typescript": "^5.0.1",
+    "hox": "1.1.6",
     "jsonp": "^0.2.1",
     "less": "^4.1.0",
     "less-loader": "^6.2.0",
@@ -146,5 +147,5 @@
     "access": "public"
   },
   "license": "MIT",
-  "gitHead": "646f9c71e2d0f20bfdb4c6ce430ccad0562d5304"
+  "gitHead": "3969a3b49d44d76a11a72a3373f55be0fedcb544"
 }