@arco-design/mobile-react 2.24.1 → 2.25.0

package/umd/popover/hooks/usePosition.js

@@ -14,7 +14,6 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
   _exports.__esModule = true;
   _exports.usePosition = _exports.defaultAutoDirection = void 0;
   _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
@@ -28,95 +27,88 @@
     height: null,
     arrowLeft: 0
   };
+
   /**
    * 安全边界距离默认值
    * @en Default safe boundary distance
    */
-
   var defaultEdgeOffsetValue = 14;
+
   /**
    * 安全距离默认值
    * @en Default safe distance
    */
-
   var defaultEdgeOffset = {
     top: defaultEdgeOffsetValue,
     right: defaultEdgeOffsetValue,
     bottom: defaultEdgeOffsetValue,
     left: defaultEdgeOffsetValue
   };
+
   /**
    * 自适应默认值
    * @en Default autoDirection
    */
-
   var defaultAutoDirection = true;
   _exports.defaultAutoDirection = defaultAutoDirection;
-
   var usePosition = function usePosition(props, popoverRef, childRef, wrapperRef) {
     var _props$direction = props.direction,
-        direction = _props$direction === void 0 ? 'topRight' : _props$direction,
-        _props$verticalOffset = props.verticalOffset,
-        verticalOffset = _props$verticalOffset === void 0 ? 10 : _props$verticalOffset,
-        _props$horizontalOffs = props.horizontalOffset,
-        horizontalOffset = _props$horizontalOffs === void 0 ? 8 : _props$horizontalOffs,
-        _props$edgeOffset = props.edgeOffset,
-        edgeOffset = _props$edgeOffset === void 0 ? defaultEdgeOffsetValue : _props$edgeOffset,
-        _props$arrowWidth = props.arrowWidth,
-        arrowWidth = _props$arrowWidth === void 0 ? 9 : _props$arrowWidth,
-        _props$mode = props.mode,
-        mode = _props$mode === void 0 ? 'follow' : _props$mode,
-        _props$useAutoDirecti = props.useAutoDirection,
-        useAutoDirection = _props$useAutoDirecti === void 0 ? defaultAutoDirection : _props$useAutoDirecti;
+      direction = _props$direction === void 0 ? 'topRight' : _props$direction,
+      _props$verticalOffset = props.verticalOffset,
+      verticalOffset = _props$verticalOffset === void 0 ? 10 : _props$verticalOffset,
+      _props$horizontalOffs = props.horizontalOffset,
+      horizontalOffset = _props$horizontalOffs === void 0 ? 8 : _props$horizontalOffs,
+      _props$edgeOffset = props.edgeOffset,
+      edgeOffset = _props$edgeOffset === void 0 ? defaultEdgeOffsetValue : _props$edgeOffset,
+      _props$arrowWidth = props.arrowWidth,
+      arrowWidth = _props$arrowWidth === void 0 ? 9 : _props$arrowWidth,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'follow' : _props$mode,
+      _props$useAutoDirecti = props.useAutoDirection,
+      useAutoDirection = _props$useAutoDirecti === void 0 ? defaultAutoDirection : _props$useAutoDirecti;
+
     /**
      * 气泡的位置信息
      * @en Position information of the bubbles
      */
-
     var _useState = (0, _react.useState)(defaultPosition),
-        position = _useState[0],
-        setPosition = _useState[1];
+      position = _useState[0],
+      setPosition = _useState[1];
+
     /**
      * 是否在计算气泡位置
      * @en Whether to calculate the bubble position
      */
-
-
     var isCalcPosition = (0, _react.useMemo)(function () {
       var top = position.top,
-          bottom = position.bottom,
-          height = position.height,
-          left = position.left,
-          width = position.width;
-
+        bottom = position.bottom,
+        height = position.height,
+        left = position.left,
+        width = position.width;
       if (left || width || top || height || bottom) {
         return false;
       }
-
       return true;
     }, [position]);
+
     /**
      * 缩放动画中心，尖角的顶部
      * @en Scale animation center, top of sharp corners
      */
-
     var _useState2 = (0, _react.useState)({
-      x: '0',
-      y: '0'
-    }),
-        transformOrigin = _useState2[0],
-        setTransformOrigin = _useState2[1];
+        x: '0',
+        y: '0'
+      }),
+      transformOrigin = _useState2[0],
+      setTransformOrigin = _useState2[1];
     /**
      * 气泡方向，可以会自适应变化
      * @en Bubble direction, can be adaptively changed
      */
-
-
     var _useRefState = (0, _helpers.useRefState)(direction),
-        directionState = _useRefState[0],
-        directionStateRef = _useRefState[1],
-        setDirectionState = _useRefState[2];
-
+      directionState = _useRefState[0],
+      directionStateRef = _useRefState[1],
+      setDirectionState = _useRefState[2];
     var getOffset = (0, _react.useCallback)(function (dir) {
       return (0, _helpers.getDefaultValue)((0, _mobileUtils.isObject)(edgeOffset) ? edgeOffset[dir] : edgeOffset, defaultEdgeOffset[dir]);
     }, [edgeOffset]);
@@ -126,30 +118,27 @@
     (0, _react.useEffect)(function () {
       setDirectionState(direction);
     }, [direction]);
+
     /**
      * 调整尖角图标的位置
      * @en Adjust the position of the sharp corner icon
      */
-
     function adjustArrow(_ref) {
       var childRect = _ref.childRect,
-          config = _ref.config;
-
+        config = _ref.config;
       if (directionState.indexOf('Left') !== -1 || directionState.indexOf('Right') !== -1) {
         return (childRect.width - arrowWidth) / 2 + horizontalOffset;
       }
-
       return (config.width - arrowWidth) / 2;
     }
+
     /**
      * 如果提示框超出屏幕，则向屏幕中间调整一下
      * @en If the prompt box is beyond the screen, adjust it to the middle of the screen
      */
-
-
     function adjustEdge(_ref2) {
       var childRect = _ref2.childRect,
-          config = _ref2.config;
+        config = _ref2.config;
       var newConfig = (0, _extends2.default)({}, config, {
         adjustOffset: 0
       });
@@ -159,73 +148,65 @@
       });
       var screenWidth = screen.availWidth;
       var _ref3 = [getOffset('top'), getOffset('right'), getOffset('bottom'), getOffset('left')],
-          topOffset = _ref3[0],
-          rightOffset = _ref3[1],
-          bottomOffset = _ref3[2],
-          leftOffset = _ref3[3];
+        topOffset = _ref3[0],
+        rightOffset = _ref3[1],
+        bottomOffset = _ref3[2],
+        leftOffset = _ref3[3];
       var _ref4 = [getAutoDirection('vertical'), getAutoDirection('horizontal')],
-          verticalAuto = _ref4[0],
-          horizontalAuto = _ref4[1]; // 水平方向安全距离自动调整
-      // @en Automatic adjustment of safety distance in horizontal direction
+        verticalAuto = _ref4[0],
+        horizontalAuto = _ref4[1];
 
+      // 水平方向安全距离自动调整
+      // @en Automatic adjustment of safety distance in horizontal direction
       if (horizontalAuto) {
         if (directionState.indexOf('Right') !== -1) {
-          var overflow = Number(config.width) - childRect.left - childRect.width; // 左边是否溢出，向右平移安全距离
+          var overflow = Number(config.width) - childRect.left - childRect.width;
+          // 左边是否溢出，向右平移安全距离
           // @en Whether the left overflows, pan to the right by a safe distance
-
           if (overflow > 0) {
             var adjustOffset = overflow + leftOffset;
             newConfig.left = Number(newConfig.left) + adjustOffset;
             newConfig.arrowLeft += adjustOffset;
             newConfig.adjustOffset = adjustOffset;
-          } // 右边是否溢出，向左平移
+          }
+          // 右边是否溢出，向左平移
           // @en Whether to overflow on the right, pan to the left
-
-
           if (screenWidth - childRect.right < rightOffset) {
             overflow = rightOffset;
-
             var _adjustOffset = -(overflow - (screenWidth - childRect.right));
-
             newConfig.left = Number(newConfig.left) + _adjustOffset;
             newConfig.adjustOffset = _adjustOffset;
           }
         } else if (directionState.indexOf('Center') !== -1) {
           var beyondChildEdge = (Number(config.width) - childRect.width) / 2;
           var rightOverflow = beyondChildEdge - (screenWidth - childRect.right);
-          var leftOverflow = beyondChildEdge - childRect.left; // 右边是否溢出
+          var leftOverflow = beyondChildEdge - childRect.left;
+          // 右边是否溢出
           // @en Whether to overflow on the right
-
           if (rightOverflow > 0) {
             var _adjustOffset2 = -(rightOverflow + rightOffset);
-
             newConfig.left = Number(newConfig.left) + _adjustOffset2;
             newConfig.arrowLeft -= _adjustOffset2;
             newConfig.adjustOffset = _adjustOffset2;
-          } // 左边是否溢出
+          }
+          // 左边是否溢出
           // @en Whether the left overflow
-
-
           if (leftOverflow > 0) {
             var _adjustOffset3 = leftOverflow + leftOffset;
-
             newConfig.left = Number(newConfig.left) + _adjustOffset3;
             newConfig.arrowLeft -= _adjustOffset3;
             newConfig.adjustOffset = _adjustOffset3;
           }
         } else if (directionState.indexOf('Left') !== -1) {
-          var _overflow = Number(config.width) - childRect.width - (screenWidth - childRect.right); // 右边是否溢出
+          var _overflow = Number(config.width) - childRect.width - (screenWidth - childRect.right);
+          // 右边是否溢出
           // @en Whether to overflow on the right
-
-
           if (_overflow > 0) {
             var _adjustOffset4 = -(_overflow + rightOffset);
-
             newConfig.left = Number(newConfig.left) + _adjustOffset4;
             newConfig.arrowLeft -= _adjustOffset4;
             newConfig.adjustOffset = _adjustOffset4;
           }
-
           if (childRect.left < leftOffset) {
             // 左边是否不够
             // @en Whether the left is not enough
@@ -234,15 +215,16 @@
             newConfig.adjustOffset = leftOffset;
           }
         }
-      } // 垂直方向安全距离调整
-      // @en Vertical safety distance adjustment
-
+      }
 
+      // 垂直方向安全距离调整
+      // @en Vertical safety distance adjustment
       if (verticalAuto) {
         var popoverTop = childRect.bottom - (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
-        var popoverBottom = childRect.top + (newConfig.top && newConfig.height ? newConfig.top + newConfig.height : 0); // 顶部安全距离不够，调整到底部
-        // @en The top safety distance is not enough, adjust to the bottom
+        var popoverBottom = childRect.top + (newConfig.top && newConfig.height ? newConfig.top + newConfig.height : 0);
 
+        // 顶部安全距离不够，调整到底部
+        // @en The top safety distance is not enough, adjust to the bottom
         if (directionState.indexOf('top') !== -1 && popoverTop < topOffset) {
           newConfig.top = verticalOffset + childRect.height;
           newConfig.bottom = null;
@@ -254,35 +236,30 @@
           newConfig.bottom = verticalOffset + childRect.height;
           onAdjustDirection('top');
         }
-      } // 挂载在全局的气泡需要计算相对屏幕的位置
-      // @en Bubble mounted in the global needs to calculate the position relative to the screen
-
+      }
 
+      // 挂载在全局的气泡需要计算相对屏幕的位置
+      // @en Bubble mounted in the global needs to calculate the position relative to the screen
       if (mode === 'global') {
         var wrapperEl = wrapperRef.current;
         if (!wrapperEl) return newConfig;
-
         var _wrapperEl$getBoundin = wrapperEl.getBoundingClientRect(),
-            top = _wrapperEl$getBoundin.top,
-            left = _wrapperEl$getBoundin.left,
-            bottom = _wrapperEl$getBoundin.bottom;
-
+          top = _wrapperEl$getBoundin.top,
+          left = _wrapperEl$getBoundin.left,
+          bottom = _wrapperEl$getBoundin.bottom;
         if (newConfig.left !== null) newConfig.left += left;
         if (newConfig.top !== null) newConfig.top += top;
-
         if (newConfig.bottom !== null) {
           var windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
           newConfig.bottom = windowInnerHeight - (bottom - newConfig.bottom);
         }
       }
-
       return newConfig;
     }
+
     /**
      * 计算缩放动画中心尖角顶部的位置
      */
-
-
     function getOrigin(config, adjustOffset) {
       var arrowLeft = config.arrowLeft;
       var width = config.width || 0;
@@ -290,7 +267,6 @@
       var halfArrowWidth = arrowWidth / 2;
       var x = width / 2 + "px";
       var y = directionStateRef.current.indexOf('top') > -1 ? halfArrowWidth + height + "px" : "-" + halfArrowWidth + "px";
-
       if (directionStateRef.current.indexOf('Left') > -1) {
         x = arrowLeft + halfArrowWidth + "px";
       } else if (directionStateRef.current.indexOf('Right') > -1) {
@@ -298,37 +274,33 @@
       } else {
         x = width / 2 - adjustOffset + "px";
       }
-
       return {
         x: x,
         y: y
       };
     }
+
     /**
      * 调整边界并更新气泡位置
      * @en Adjust bounds and update bubble position
      */
-
-
     function judgeAndUpdatePosition(childRect, config) {
       var _adjustEdge = adjustEdge({
-        childRect: childRect,
-        config: config
-      }),
-          adjustOffset = _adjustEdge.adjustOffset,
-          newConfig = (0, _objectWithoutPropertiesLoose2.default)(_adjustEdge, _excluded);
-
+          childRect: childRect,
+          config: config
+        }),
+        adjustOffset = _adjustEdge.adjustOffset,
+        newConfig = (0, _objectWithoutPropertiesLoose2.default)(_adjustEdge, _excluded);
       var newTransformOrigin = getOrigin(newConfig, adjustOffset);
       setTransformOrigin(newTransformOrigin);
       setPosition(newConfig);
     }
-    /* eslint-disable react-hooks/exhaustive-deps */
-
 
+    /* eslint-disable react-hooks/exhaustive-deps */
     var setTopRightOffset = function setTopRightOffset(_ref5) {
       var popoverWidth = _ref5.popoverWidth,
-          popoverHeight = _ref5.popoverHeight,
-          childRect = _ref5.childRect;
+        popoverHeight = _ref5.popoverHeight,
+        childRect = _ref5.childRect;
       var left = -(popoverWidth - childRect.width - horizontalOffset);
       var bottom = verticalOffset + childRect.height;
       var config = {
@@ -341,11 +313,10 @@
       };
       judgeAndUpdatePosition(childRect, config);
     };
-
     var setTopCenterOffset = function setTopCenterOffset(_ref6) {
       var popoverWidth = _ref6.popoverWidth,
-          popoverHeight = _ref6.popoverHeight,
-          childRect = _ref6.childRect;
+        popoverHeight = _ref6.popoverHeight,
+        childRect = _ref6.childRect;
       var left = -(popoverWidth - childRect.width) / 2;
       var bottom = verticalOffset + childRect.height;
       var config = {
@@ -358,11 +329,10 @@
       };
       judgeAndUpdatePosition(childRect, config);
     };
-
     var setTopLeftOffset = function setTopLeftOffset(_ref7) {
       var popoverWidth = _ref7.popoverWidth,
-          popoverHeight = _ref7.popoverHeight,
-          childRect = _ref7.childRect;
+        popoverHeight = _ref7.popoverHeight,
+        childRect = _ref7.childRect;
       var left = -horizontalOffset;
       var bottom = verticalOffset + childRect.height;
       var config = {
@@ -375,11 +345,10 @@
       };
       judgeAndUpdatePosition(childRect, config);
     };
-
     var setBottomRightOffset = function setBottomRightOffset(_ref8) {
       var popoverWidth = _ref8.popoverWidth,
-          popoverHeight = _ref8.popoverHeight,
-          childRect = _ref8.childRect;
+        popoverHeight = _ref8.popoverHeight,
+        childRect = _ref8.childRect;
       var left = -(popoverWidth - childRect.width - horizontalOffset);
       var top = verticalOffset + childRect.height;
       var config = {
@@ -392,11 +361,10 @@
       };
       judgeAndUpdatePosition(childRect, config);
     };
-
     var setBottomCenterOffset = function setBottomCenterOffset(_ref9) {
       var popoverWidth = _ref9.popoverWidth,
-          popoverHeight = _ref9.popoverHeight,
-          childRect = _ref9.childRect;
+        popoverHeight = _ref9.popoverHeight,
+        childRect = _ref9.childRect;
       var left = -(popoverWidth - childRect.width) / 2;
       var top = verticalOffset + childRect.height;
       var config = {
@@ -409,11 +377,10 @@
       };
       judgeAndUpdatePosition(childRect, config);
     };
-
     var setBottomLeftOffset = function setBottomLeftOffset(_ref10) {
       var popoverWidth = _ref10.popoverWidth,
-          popoverHeight = _ref10.popoverHeight,
-          childRect = _ref10.childRect;
+        popoverHeight = _ref10.popoverHeight,
+        childRect = _ref10.childRect;
       var left = -horizontalOffset;
       var top = verticalOffset + childRect.height;
       var config = {
@@ -426,73 +393,60 @@
       };
       judgeAndUpdatePosition(childRect, config);
     };
+
     /**
      * 计算气泡内容的位置
      * @en Calculate the position of the content of the bubble
      */
-
-
     var computedChildAndPopoverOffset = (0, _react.useCallback)(function () {
       var _popoverRef$current;
-
       var popoverEle = (_popoverRef$current = popoverRef.current) == null ? void 0 : _popoverRef$current.content;
       if (!popoverEle) return;
       var popoverWidth = popoverEle.offsetWidth;
       var popoverHeight = popoverEle.offsetHeight;
       if (popoverWidth === 0 || popoverHeight === 0) return;
       var childEle = childRef.current;
-
       if (!childEle) {
         return;
       }
-
       var childRect = childEle.getBoundingClientRect();
       var config = {
         popoverWidth: popoverWidth,
         popoverHeight: popoverHeight,
         childRect: childRect
       };
-
       switch (directionState) {
         case 'topRight':
           setTopRightOffset(config);
           break;
-
         case 'topCenter':
           setTopCenterOffset(config);
           break;
-
         case 'topLeft':
           setTopLeftOffset(config);
           break;
-
         case 'bottomRight':
           setBottomRightOffset(config);
           break;
-
         case 'bottomCenter':
           setBottomCenterOffset(config);
           break;
-
         case 'bottomLeft':
           setBottomLeftOffset(config);
           break;
-
         default:
           break;
       }
     }, [childRef, directionState, popoverRef, setTopRightOffset, setTopCenterOffset, setTopLeftOffset, setBottomRightOffset, setBottomCenterOffset, setBottomLeftOffset]);
-
     var resetPosition = function resetPosition() {
       setPosition(defaultPosition);
       setDirectionState(direction);
     };
+
     /**
      * 调整气泡垂直方向回调
      * @en Callback when adjusting the vertical direction of the bubble
      */
-
-
     var onAdjustDirection = function onAdjustDirection(vertical) {
       if (directionState.indexOf(vertical) === -1) {
         var newDirection = directionState.replace(/top|bottom/, vertical);
@@ -500,28 +454,24 @@
         directionStateRef.current = newDirection;
       }
     };
+
     /**
      * 判断垂直方向是否需要调整
      * @en Determine whether the vertical direction needs to be adjusted
      */
-
-
     var adjustVerticalDirection = (0, _react.useCallback)(function () {
       var popover = popoverRef.current;
-
       if (!popover) {
         return;
       }
-
       var popoverEle = popover.content;
       if (!popoverEle) return;
-
       var _popoverEle$getBoundi = popoverEle.getBoundingClientRect(),
-          top = _popoverEle$getBoundi.top,
-          bottom = _popoverEle$getBoundi.bottom; // 顶部安全距离不够，调整到底部
-      // @en The top safety distance is not enough, adjust to the bottom
-
+        top = _popoverEle$getBoundi.top,
+        bottom = _popoverEle$getBoundi.bottom;
 
+      // 顶部安全距离不够，调整到底部
+      // @en The top safety distance is not enough, adjust to the bottom
       if (directionState.indexOf('top') !== -1 && top < getOffset('top') || directionState.indexOf('bottom') !== -1 && bottom + getOffset('bottom') > window.innerHeight) {
         computedChildAndPopoverOffset();
       }
@@ -538,6 +488,5 @@
       adjustVerticalDirection: adjustVerticalDirection
     };
   };
-
   _exports.usePosition = usePosition;
 });

package/umd/popover/index.js

@@ -22,12 +22,12 @@
     if (key in _exports && _exports[key] === _type[key]) return;
     _exports[key] = _type[key];
   });
-
   /**
    * 气泡菜单
    * @en Bubble menu
    */
   var Menu = (0, _menu.componentGenerator)(_popover.Popover);
+
   /**
    * 气泡卡片，支持六个方向，小箭头在各个方向均基于挂载的子元素居中放置，支持受控和非受控模式。
    * @en Bubble card, supports six directions, small arrows are centered in each direction based on the mounted sub-elements, and supports controlled and uncontrolled modes.
@@ -36,10 +36,8 @@
    * @type 信息展示
    * @type_en Data Display
    */
-
   var _default = (0, _mobileUtils.componentWrapper)(_popover.Popover, {
     Menu: Menu
   });
-
   _exports.default = _default;
 });