@arco-design/mobile-react 2.24.1 → 2.25.0

package/esm/popover/hooks/usePosition.js

@@ -12,93 +12,87 @@ var defaultPosition = {
   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
  */
-
 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];
+    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]);
@@ -108,108 +102,95 @@ 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]; // 水平方向安全距离自动调整
-    // @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
@@ -218,15 +199,16 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
           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;
@@ -238,35 +220,30 @@ 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
-
+    }
 
+    // 挂载在全局的气泡需要计算相对屏幕的位置
+    // @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;
@@ -274,7 +251,6 @@ 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) {
@@ -282,37 +258,33 @@ 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 */
-
 
+  /* 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 = {
@@ -325,11 +297,10 @@ 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 = {
@@ -342,11 +313,10 @@ 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 = {
@@ -359,11 +329,10 @@ 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 = {
@@ -376,11 +345,10 @@ 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 = {
@@ -393,11 +361,10 @@ 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 = {
@@ -410,73 +377,60 @@ 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);
@@ -484,28 +438,24 @@ 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; // 顶部安全距离不够，调整到底部
-    // @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();
     }

package/esm/popover/index.js

@@ -2,12 +2,13 @@ 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);
+
 /**
  * 气泡卡片，支持六个方向，小箭头在各个方向均基于挂载的子元素居中放置，支持受控和非受控模式。
  * @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.
@@ -16,7 +17,6 @@ var Menu = componentGenerator(Popover);
  * @type 信息展示
  * @type_en Data Display
  */
-
 export default componentWrapper(Popover, {
   Menu: Menu
 });