@arco-design/mobile-react 2.25.3 → 2.26.0

package/esm/popover/hooks/usePosition.js

@@ -12,87 +12,93 @@ var defaultPosition = {
   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
  */
+
 export var defaultAutoDirection = true;
 export 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 = useState(defaultPosition),
-    position = _useState[0],
-    setPosition = _useState[1];
 
+  var _useState = useState(defaultPosition),
+      position = _useState[0],
+      setPosition = _useState[1];
   /**
    * 是否在计算气泡位置
    * @en Whether to calculate the bubble position
    */
+
+
   var isCalcPosition = 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 = 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 = useRefState(direction),
-    directionState = _useRefState[0],
-    directionStateRef = _useRefState[1],
-    setDirectionState = _useRefState[2];
+      directionState = _useRefState[0],
+      directionStateRef = _useRefState[1],
+      setDirectionState = _useRefState[2];
+
   var getOffset = useCallback(function (dir) {
     return getDefaultValue(isObject(edgeOffset) ? edgeOffset[dir] : edgeOffset, defaultEdgeOffset[dir]);
   }, [edgeOffset]);
@@ -102,95 +108,108 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
   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 = _extends({}, config, {
       adjustOffset: 0
     });
+
     newConfig.arrowLeft = adjustArrow({
       childRect: childRect,
       config: config
     });
     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
@@ -199,16 +218,15 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
           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;
@@ -220,30 +238,35 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
         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;
@@ -251,6 +274,7 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
     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) {
@@ -258,33 +282,37 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
     } 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 = _objectWithoutPropertiesLoose(_adjustEdge, _excluded);
+      childRect: childRect,
+      config: config
+    }),
+        adjustOffset = _adjustEdge.adjustOffset,
+        newConfig = _objectWithoutPropertiesLoose(_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 = {
@@ -297,10 +325,11 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
     };
     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 = {
@@ -313,10 +342,11 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
     };
     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 = {
@@ -329,10 +359,11 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
     };
     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 = {
@@ -345,10 +376,11 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
     };
     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 = {
@@ -361,10 +393,11 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
     };
     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 = {
@@ -377,60 +410,73 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
     };
     judgeAndUpdatePosition(childRect, config);
   };
-
   /**
    * 计算气泡内容的位置
    * @en Calculate the position of the content of the bubble
    */
+
+
   var computedChildAndPopoverOffset = 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);
@@ -438,24 +484,28 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
       directionStateRef.current = newDirection;
     }
   };
-
   /**
    * 判断垂直方向是否需要调整
    * @en Determine whether the vertical direction needs to be adjusted
    */
+
+
   var adjustVerticalDirection = 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();
     }

package/esm/popover/index.js

@@ -2,13 +2,12 @@ import { componentWrapper } from '@arco-design/mobile-utils';
 import { componentGenerator } from './menu';
 import { Popover } from './popover';
 export * from './type';
-
 /**
  * 气泡菜单
  * @en Bubble menu
  */
-var Menu = componentGenerator(Popover);
 
+var Menu = componentGenerator(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.
@@ -17,6 +16,7 @@ var Menu = componentGenerator(Popover);
  * @type 信息展示
  * @type_en Data Display
  */
+
 export default componentWrapper(Popover, {
   Menu: Menu
 });