@arco-design/mobile-react 2.19.0

package/umd/popover/hooks/usePosition.js

@@ -0,0 +1,543 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/objectWithoutPropertiesLoose", "@babel/runtime/helpers/extends", "@arco-design/mobile-utils", "react", "../../_helpers"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/objectWithoutPropertiesLoose"), require("@babel/runtime/helpers/extends"), require("@arco-design/mobile-utils"), require("react"), require("../../_helpers"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.objectWithoutPropertiesLoose, global._extends, global.mobileUtils, global.react, global._helpers);
+    global.usePosition = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _objectWithoutPropertiesLoose2, _extends2, _mobileUtils, _react, _helpers) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.usePosition = _exports.defaultAutoDirection = void 0;
+  _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
+  _extends2 = _interopRequireDefault(_extends2);
+  var _excluded = ["adjustOffset"];
+  var defaultPosition = {
+    left: null,
+    top: null,
+    bottom: null,
+    width: null,
+    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;
+    /**
+     * 气泡的位置信息
+     * @en Position information of the bubbles
+     */
+
+    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;
+
+      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];
+    /**
+     * 气泡方向，可以会自适应变化
+     * @en Bubble direction, can be adaptively changed
+     */
+
+
+    var _useRefState = (0, _helpers.useRefState)(direction),
+        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]);
+    var getAutoDirection = (0, _react.useCallback)(function (dir) {
+      return (0, _helpers.getDefaultValue)((0, _mobileUtils.isObject)(useAutoDirection) ? useAutoDirection[dir] : useAutoDirection, defaultAutoDirection);
+    }, [useAutoDirection]);
+    (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;
+
+      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;
+      var newConfig = (0, _extends2.default)({}, 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];
+      var _ref4 = [getAutoDirection('vertical'), getAutoDirection('horizontal')],
+          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; // 左边是否溢出，向右平移安全距离
+          // @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; // 右边是否溢出
+          // @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); // 右边是否溢出
+          // @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
+            _overflow = leftOffset;
+            newConfig.left = Number(newConfig.left) + _overflow;
+            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); // 顶部安全距离不够，调整到底部
+        // @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;
+          onAdjustDirection('bottom');
+        } else if (directionState.indexOf('bottom') !== -1 && popoverBottom + bottomOffset > window.innerHeight) {
+          // 底部安全距离不够，调整到顶部
+          // @en The bottom safety distance is not enough, adjust to the top
+          newConfig.top = null;
+          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;
+
+        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;
+      var height = config.height || 0;
+      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) {
+        x = width - (arrowLeft + halfArrowWidth) + "px";
+      } 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);
+
+      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;
+      var left = -(popoverWidth - childRect.width - horizontalOffset);
+      var bottom = verticalOffset + childRect.height;
+      var config = {
+        left: left,
+        width: popoverWidth,
+        top: null,
+        height: popoverHeight,
+        bottom: bottom,
+        arrowLeft: 0
+      };
+      judgeAndUpdatePosition(childRect, config);
+    };
+
+    var setTopCenterOffset = function setTopCenterOffset(_ref6) {
+      var popoverWidth = _ref6.popoverWidth,
+          popoverHeight = _ref6.popoverHeight,
+          childRect = _ref6.childRect;
+      var left = -(popoverWidth - childRect.width) / 2;
+      var bottom = verticalOffset + childRect.height;
+      var config = {
+        left: left,
+        width: popoverWidth,
+        top: null,
+        height: popoverHeight,
+        bottom: bottom,
+        arrowLeft: 0
+      };
+      judgeAndUpdatePosition(childRect, config);
+    };
+
+    var setTopLeftOffset = function setTopLeftOffset(_ref7) {
+      var popoverWidth = _ref7.popoverWidth,
+          popoverHeight = _ref7.popoverHeight,
+          childRect = _ref7.childRect;
+      var left = -horizontalOffset;
+      var bottom = verticalOffset + childRect.height;
+      var config = {
+        left: left,
+        width: popoverWidth,
+        top: null,
+        height: popoverHeight,
+        bottom: bottom,
+        arrowLeft: 0
+      };
+      judgeAndUpdatePosition(childRect, config);
+    };
+
+    var setBottomRightOffset = function setBottomRightOffset(_ref8) {
+      var popoverWidth = _ref8.popoverWidth,
+          popoverHeight = _ref8.popoverHeight,
+          childRect = _ref8.childRect;
+      var left = -(popoverWidth - childRect.width - horizontalOffset);
+      var top = verticalOffset + childRect.height;
+      var config = {
+        left: left,
+        width: popoverWidth,
+        bottom: null,
+        height: popoverHeight,
+        top: top,
+        arrowLeft: 0
+      };
+      judgeAndUpdatePosition(childRect, config);
+    };
+
+    var setBottomCenterOffset = function setBottomCenterOffset(_ref9) {
+      var popoverWidth = _ref9.popoverWidth,
+          popoverHeight = _ref9.popoverHeight,
+          childRect = _ref9.childRect;
+      var left = -(popoverWidth - childRect.width) / 2;
+      var top = verticalOffset + childRect.height;
+      var config = {
+        left: left,
+        width: popoverWidth,
+        bottom: null,
+        height: popoverHeight,
+        top: top,
+        arrowLeft: 0
+      };
+      judgeAndUpdatePosition(childRect, config);
+    };
+
+    var setBottomLeftOffset = function setBottomLeftOffset(_ref10) {
+      var popoverWidth = _ref10.popoverWidth,
+          popoverHeight = _ref10.popoverHeight,
+          childRect = _ref10.childRect;
+      var left = -horizontalOffset;
+      var top = verticalOffset + childRect.height;
+      var config = {
+        left: left,
+        width: popoverWidth,
+        bottom: null,
+        height: popoverHeight,
+        arrowLeft: 0,
+        top: top
+      };
+      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);
+        setDirectionState(newDirection);
+        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
+
+
+      if (directionState.indexOf('top') !== -1 && top < getOffset('top') || directionState.indexOf('bottom') !== -1 && bottom + getOffset('bottom') > window.innerHeight) {
+        computedChildAndPopoverOffset();
+      }
+    }, [directionState, popoverRef, computedChildAndPopoverOffset, getOffset]);
+    return {
+      direction: directionState,
+      position: position,
+      isCalcPosition: isCalcPosition,
+      arrowWidth: arrowWidth,
+      transformOrigin: transformOrigin,
+      computedChildAndPopoverOffset: computedChildAndPopoverOffset,
+      resetPosition: resetPosition,
+      onAdjustDirection: onAdjustDirection,
+      adjustVerticalDirection: adjustVerticalDirection
+    };
+  };
+
+  _exports.usePosition = usePosition;
+});

package/umd/popover/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export * from './type';
+declare const _default: import("react").ForwardRefExoticComponent<Partial<import("./type").DefaultPopoverProps> & import("react").RefAttributes<import("./type").PopoverRef>> & {
+    Menu: import("react").ForwardRefExoticComponent<import("./type").PopoverMenuProps & import("react").RefAttributes<import("./type").PopoverRef>>;
+};
+/**
+ * 气泡卡片，支持六个方向，小箭头在各个方向均基于挂载的子元素居中放置，支持受控和非受控模式。
+ * @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.
+ * @name 气泡卡片
+ * @name_en Popover
+ * @type 数据展示
+ * @type_en Data Display
+ */
+export default _default;

package/umd/popover/index.js

@@ -0,0 +1,45 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@arco-design/mobile-utils", "./menu", "./popover", "./type"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@arco-design/mobile-utils"), require("./menu"), require("./popover"), require("./type"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.mobileUtils, global.menu, global.popover, global.type);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _mobileUtils, _menu, _popover, _type) {
+  "use strict";
+
+  _exports.__esModule = true;
+  var _exportNames = {};
+  _exports.default = void 0;
+  Object.keys(_type).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    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.
+   * @name 气泡卡片
+   * @name_en Popover
+   * @type 数据展示
+   * @type_en Data Display
+   */
+
+  var _default = (0, _mobileUtils.componentWrapper)(_popover.Popover, {
+    Menu: Menu
+  });
+
+  _exports.default = _default;
+});

package/umd/popover/menu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PopoverMenuProps, PopoverProps, PopoverRef } from './type';
+export declare function componentGenerator<P extends PopoverProps = PopoverProps, R extends PopoverRef = PopoverRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<PopoverMenuProps & React.RefAttributes<R>>;