@arco-design/mobile-react 2.25.3 → 2.26.0

package/umd/popover/hooks/usePosition.js

@@ -14,6 +14,7 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   _exports.usePosition = _exports.defaultAutoDirection = void 0;
   _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
@@ -27,88 +28,95 @@
     height: null,
     arrowLeft: 0
   };
-
   /**
    * 安全边界距离默认值
    * @en Default safe boundary distance
    */
-  var defaultEdgeOffsetValue = 14;
 
+  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];
 
+    var _useState = (0, _react.useState)(defaultPosition),
+        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]);
@@ -118,27 +126,30 @@
     (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
       });
@@ -148,65 +159,73 @@
       });
       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];
-
-      // 水平方向安全距离自动调整
+          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
@@ -215,16 +234,15 @@
             newConfig.adjustOffset = leftOffset;
           }
         }
-      }
-
-      // 垂直方向安全距离调整
+      } // 垂直方向安全距离调整
       // @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);
-
-        // 顶部安全距离不够，调整到底部
+        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;
@@ -236,30 +254,35 @@
           newConfig.bottom = verticalOffset + childRect.height;
           onAdjustDirection('top');
         }
-      }
-
-      // 挂载在全局的气泡需要计算相对屏幕的位置
+      } // 挂载在全局的气泡需要计算相对屏幕的位置
       // @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;
@@ -267,6 +290,7 @@
       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) {
@@ -274,33 +298,37 @@
       } 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 */
+
+
     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 = {
@@ -313,10 +341,11 @@
       };
       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 = {
@@ -329,10 +358,11 @@
       };
       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 = {
@@ -345,10 +375,11 @@
       };
       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 = {
@@ -361,10 +392,11 @@
       };
       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 = {
@@ -377,10 +409,11 @@
       };
       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 = {
@@ -393,60 +426,73 @@
       };
       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);
@@ -454,24 +500,28 @@
         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;
 
-      // 顶部安全距离不够，调整到底部
+      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
+
+
       if (directionState.indexOf('top') !== -1 && top < getOffset('top') || directionState.indexOf('bottom') !== -1 && bottom + getOffset('bottom') > window.innerHeight) {
         computedChildAndPopoverOffset();
       }
@@ -488,5 +538,6 @@
       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,8 +36,10 @@
    * @type 信息展示
    * @type_en Data Display
    */
+
   var _default = (0, _mobileUtils.componentWrapper)(_popover.Popover, {
     Menu: Menu
   });
+
   _exports.default = _default;
 });