@arco-design/mobile-react 2.19.0

package/cjs/popover/menu.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.componentGenerator = componentGenerator;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _contextProvider = require("../context-provider");
+
+var _excluded = ["menu", "menuLayout", "onSelect", "onClickMenuItem", "className", "useClickStatus", "clickStatusDuration", "clickSelfToClose", "touchSelfToClose", "defaultVisible", "visible", "onChange"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function componentGenerator(Comp) {
+  return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var menu = props.menu,
+        _props$menuLayout = props.menuLayout,
+        menuLayout = _props$menuLayout === void 0 ? 'vertical' : _props$menuLayout,
+        onSelect = props.onSelect,
+        onClickMenuItem = props.onClickMenuItem,
+        _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        _props$useClickStatus = props.useClickStatus,
+        useClickStatus = _props$useClickStatus === void 0 ? false : _props$useClickStatus,
+        _props$clickStatusDur = props.clickStatusDuration,
+        clickStatusDuration = _props$clickStatusDur === void 0 ? 300 : _props$clickStatusDur,
+        _props$clickSelfToClo = props.clickSelfToClose,
+        clickSelfToClose = _props$clickSelfToClo === void 0 ? true : _props$clickSelfToClo,
+        _props$touchSelfToClo = props.touchSelfToClose,
+        touchSelfToClose = _props$touchSelfToClo === void 0 ? props.touchToClose === void 0 ? false : props.touchToClose : _props$touchSelfToClo,
+        _props$defaultVisible = props.defaultVisible,
+        defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
+        visible = props.visible,
+        onChange = props.onChange,
+        restProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        prefixCls = _useContext.prefixCls;
+
+    var _useState = (0, _react.useState)(-1),
+        activeIndex = _useState[0],
+        setActiveIndex = _useState[1];
+
+    var activeTimer = (0, _react.useRef)(0);
+    var formattedMenu = (0, _react.useMemo)(function () {
+      return menu.map(function (item) {
+        if (typeof item === 'string') {
+          return {
+            text: item
+          };
+        }
+
+        return item;
+      });
+    }, [menu]);
+
+    var _useState2 = (0, _react.useState)(visible === void 0 ? defaultVisible : visible),
+        visibleState = _useState2[0],
+        setVisibleState = _useState2[1];
+
+    (0, _react.useEffect)(function () {
+      setVisibleState(Boolean(visible));
+    }, [visible]);
+    var popoverRef = (0, _react.useRef)(null);
+    (0, _react.useImperativeHandle)(ref, function () {
+      return popoverRef.current;
+    });
+
+    var onVisibleChange = function onVisibleChange(newVisible) {
+      var handleVisibleChange = function handleVisibleChange() {
+        if (onChange && typeof onChange === 'function') {
+          onChange(newVisible);
+        }
+
+        if (visible === void 0) {
+          setVisibleState(newVisible);
+        }
+      }; // 如果设置了点击效果则延时回调onChange函数，留出点击效果的时间
+      // @en If the click effect is set, the onChange function is delayed and called back, leaving time for the click effect
+
+
+      if (!newVisible && useClickStatus) {
+        window.setTimeout(handleVisibleChange, Math.max(0, clickStatusDuration - 300));
+      } else {
+        handleVisibleChange();
+      }
+    };
+
+    var content = (0, _react.useMemo)(function () {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixCls + "-popover-menu-content", menuLayout + "-menu")
+      }, formattedMenu.map(function (item, index) {
+        var defaultValue = typeof item.text === 'string' ? item.text : "menu_item_" + index;
+        var text = item.text,
+            _item$value = item.value,
+            value = _item$value === void 0 ? defaultValue : _item$value,
+            _item$disabled = item.disabled,
+            disabled = _item$disabled === void 0 ? false : _item$disabled,
+            icon = item.icon;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-popover-menu-item", {
+            disabled: disabled,
+            active: activeIndex === index
+          }),
+          key: value,
+          onTouchStart: function onTouchStart() {
+            if (useClickStatus && !disabled) {
+              clearTimeout(activeTimer.current);
+              setActiveIndex(index);
+              activeTimer.current = window.setTimeout(function () {
+                setActiveIndex(-1);
+                activeTimer.current = 0;
+              }, clickStatusDuration);
+            }
+          },
+          onClick: function onClick() {
+            onClickMenuItem && onClickMenuItem(value, menu[index]);
+            if (disabled) return;
+            onSelect && onSelect(value, menu[index]);
+          }
+        }, icon && /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-popover-menu-icon")
+        }, icon), /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-popover-menu-text")
+        }, text));
+      }));
+    }, [prefixCls, menuLayout, formattedMenu, activeIndex, useClickStatus, clickStatusDuration, onClickMenuItem, onSelect]);
+    return /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
+      ref: popoverRef,
+      visible: visibleState,
+      clickSelfToClose: clickSelfToClose,
+      touchSelfToClose: touchSelfToClose,
+      onChange: onVisibleChange
+    }, restProps, {
+      content: content,
+      className: (0, _mobileUtils.cls)(className, prefixCls + "-popover-menu")
+    }));
+  });
+}

package/cjs/popover/popover-inner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PopoverInnerProps, PopoverInnerRef } from './type';
+export declare const PopoverInner: React.ForwardRefExoticComponent<PopoverInnerProps & React.RefAttributes<PopoverInnerRef>>;

package/cjs/popover/popover-inner.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.PopoverInner = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _IconClose = _interopRequireDefault(require("../icon/IconClose"));
+
+var _helpers = require("../_helpers");
+
+var _contextProvider = require("../context-provider");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var PopoverInner = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      prefixCls = _useContext.prefixCls;
+
+  var className = props.className,
+      needShadow = props.needShadow,
+      content = props.content,
+      direction = props.direction,
+      position = props.position,
+      minWidth = props.minWidth,
+      maxWidth = props.maxWidth,
+      arrowWidth = props.arrowWidth,
+      transformOrigin = props.transformOrigin,
+      mode = props.mode,
+      _props$showCloseIcon = props.showCloseIcon,
+      showCloseIcon = _props$showCloseIcon === void 0 ? false : _props$showCloseIcon,
+      _props$textSuffix = props.textSuffix,
+      textSuffix = _props$textSuffix === void 0 ? null : _props$textSuffix,
+      renderArrow = props.renderArrow,
+      onClickCloseIcon = props.onClickCloseIcon,
+      onClickTextSuffix = props.onClickTextSuffix;
+  var domRef = (0, _react.useRef)(null);
+  var contentRef = (0, _react.useRef)(null);
+
+  var _useMountedState = (0, _helpers.useMountedState)(false),
+      show = _useMountedState[0],
+      setShow = _useMountedState[1];
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current,
+      content: contentRef.current
+    };
+  });
+  (0, _react.useEffect)(function () {
+    var top = position.top,
+        bottom = position.bottom,
+        height = position.height,
+        left = position.left,
+        width = position.width;
+
+    if (left || width || top || height || bottom) {
+      if (!show) {
+        setTimeout(function () {
+          setShow(true);
+        }, 0);
+      }
+    }
+  }, [position, show]);
+  /**
+   * 计算容器的样式
+   * @en Calculate the stylesheet of the container
+   */
+
+  var getWrapperStyle = function getWrapperStyle() {
+    var top = position.top,
+        bottom = position.bottom,
+        height = position.height,
+        left = position.left;
+    var obj = {
+      height: height + "px",
+      left: left + "px",
+      minWidth: minWidth,
+      maxWidth: maxWidth
+    };
+
+    if (top) {
+      obj.top = top + "px";
+    } else if (bottom) {
+      obj.bottom = bottom + "px";
+    } // 用于执行缩放动画
+    // @en Used to perform zoom animations
+
+
+    obj.transformOrigin = transformOrigin.x + " " + transformOrigin.y;
+    return (0, _helpers.getStyleWithVendor)(obj);
+  };
+  /**
+   * 计算icon的样式
+   * @en Calculate the stylesheet of the icon
+   */
+
+
+  var getArrowStyle = function getArrowStyle() {
+    var arrowLeft = position.arrowLeft;
+    return {
+      width: arrowWidth,
+      height: arrowWidth,
+      marginLeft: arrowLeft ? arrowLeft + "px" : null,
+      marginRight: arrowLeft ? arrowLeft + "px" : null
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: domRef,
+    className: (0, _mobileUtils.cls)(prefixCls + "-popover-inner", 'popover-inner', 'all-border-box', mode + "-mode", className, {
+      show: show,
+      'with-shadow': needShadow,
+      'with-suffix': showCloseIcon || textSuffix,
+      'custom-content': typeof content !== 'string'
+    }),
+    style: getWrapperStyle()
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "popover-bg"
+  }, renderArrow ? renderArrow({
+    arrowWidth: arrowWidth,
+    arrowLeft: position.arrowLeft,
+    direction: direction
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "popover-arrow " + direction,
+    style: getArrowStyle()
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "popover-arrow-content"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)('popover-content', direction, {
+      'show-close-icon': showCloseIcon
+    }),
+    ref: contentRef
+  }, typeof content === 'string' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "content-text"
+  }, content), showCloseIcon && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "icon-divider"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-close-icon",
+    onClick: onClickCloseIcon
+  }, /*#__PURE__*/_react.default.createElement(_IconClose.default, null))), textSuffix && /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-suffix",
+    onClick: onClickTextSuffix
+  }, textSuffix)) : content));
+});
+exports.PopoverInner = PopoverInner;

package/cjs/popover/popover.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PopoverRef } from './type';
+export declare const Popover: React.ForwardRefExoticComponent<Partial<import("./type").DefaultPopoverProps> & React.RefAttributes<PopoverRef>>;

package/cjs/popover/popover.js

@@ -0,0 +1,274 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Popover = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _popoverInner = require("./popover-inner");
+
+var _transition = _interopRequireDefault(require("../transition"));
+
+var _hooks = require("./hooks");
+
+var _portal = _interopRequireDefault(require("../portal"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Popover = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$innerPopoverCl = props.innerPopoverClassName,
+      innerPopoverClassName = _props$innerPopoverCl === void 0 ? '' : _props$innerPopoverCl,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      _props$theme = props.theme,
+      theme = _props$theme === void 0 ? 'black' : _props$theme,
+      _props$needShadow = props.needShadow,
+      needShadow = _props$needShadow === void 0 ? false : _props$needShadow,
+      _props$content = props.content,
+      content = _props$content === void 0 ? '' : _props$content,
+      _props$transitionTime = props.transitionTimeout,
+      transitionTimeout = _props$transitionTime === void 0 ? 300 : _props$transitionTime,
+      _props$minWidth = props.minWidth,
+      minWidth = _props$minWidth === void 0 ? '10px' : _props$minWidth,
+      _props$maxWidth = props.maxWidth,
+      maxWidth = _props$maxWidth === void 0 ? '90vw' : _props$maxWidth,
+      _props$transitionName = props.transitionName,
+      transitionName = _props$transitionName === void 0 ? 'fade' : _props$transitionName,
+      _props$clickSelfToClo = props.clickSelfToClose,
+      clickSelfToClose = _props$clickSelfToClo === void 0 ? true : _props$clickSelfToClo,
+      _props$touchSelfToClo = props.touchSelfToClose,
+      touchSelfToClose = _props$touchSelfToClo === void 0 ? props.touchToClose === void 0 ? false : props.touchToClose : _props$touchSelfToClo,
+      _props$defaultVisible = props.defaultVisible,
+      defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
+      visible = props.visible,
+      children = props.children,
+      _props$bordered = props.bordered,
+      bordered = _props$bordered === void 0 ? props.theme === 'white' : _props$bordered,
+      _props$showCloseIcon = props.showCloseIcon,
+      showCloseIcon = _props$showCloseIcon === void 0 ? false : _props$showCloseIcon,
+      _props$textSuffix = props.textSuffix,
+      textSuffix = _props$textSuffix === void 0 ? null : _props$textSuffix,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'follow' : _props$mode,
+      _props$showMask = props.showMask,
+      showMask = _props$showMask === void 0 ? false : _props$showMask,
+      _props$maskTransition = props.maskTransitionTimeout,
+      maskTransitionTimeout = _props$maskTransition === void 0 ? {
+    enter: 450,
+    exit: 240
+  } : _props$maskTransition,
+      renderArrow = props.renderArrow,
+      onChange = props.onChange,
+      onClickCloseIcon = props.onClickCloseIcon,
+      onClickTextSuffix = props.onClickTextSuffix,
+      onClickMask = props.onClickMask;
+
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      prefixCls = _useContext.prefixCls;
+
+  var _useState = (0, _react.useState)(false),
+      visibleState = _useState[0],
+      setVisibleState = _useState[1];
+
+  var visibleRef = (0, _react.useRef)(visibleState);
+  var wrapperRef = (0, _react.useRef)(null);
+  var childRef = (0, _react.useRef)(null);
+  var popoverRef = (0, _react.useRef)(null);
+
+  var _usePosition = (0, _hooks.usePosition)(props, popoverRef, childRef, wrapperRef),
+      direction = _usePosition.direction,
+      position = _usePosition.position,
+      isCalcPosition = _usePosition.isCalcPosition,
+      transformOrigin = _usePosition.transformOrigin,
+      computedChildAndPopoverOffset = _usePosition.computedChildAndPopoverOffset,
+      arrowWidth = _usePosition.arrowWidth,
+      resetPosition = _usePosition.resetPosition,
+      adjustVerticalDirection = _usePosition.adjustVerticalDirection;
+  /**
+   * 气泡状态切换
+   * @en Bubble state toggle
+   */
+
+
+  var onVisibleChange = function onVisibleChange(newVisible) {
+    if (newVisible === void 0) {
+      newVisible = true;
+    }
+
+    // 为了防止退出中有缩放动画影响气泡位置计算，在退出动画结束前不可切换到展示气泡状态
+    // @en In order to prevent the zoom animation in the exit from affecting the calculation of the bubble position, it is not possible to switch to the display bubble state before the exit animation ends.
+    if (newVisible && !isCalcPosition) {
+      return;
+    }
+
+    onChange == null ? void 0 : onChange(newVisible);
+
+    if (visible === void 0) {
+      setVisibleState(newVisible);
+    }
+  };
+
+  var _useEvent = (0, _hooks.useEvent)(props, wrapperRef, popoverRef, visibleRef, onVisibleChange, adjustVerticalDirection),
+      popoverDisappear = _useEvent.popoverDisappear,
+      mayAddEventOnBody = _useEvent.mayAddEventOnBody,
+      startCloseTimer = _useEvent.startCloseTimer,
+      mayRemoveEventListenerOnBody = _useEvent.mayRemoveEventListenerOnBody;
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    var _popoverRef$current;
+
+    return {
+      dom: wrapperRef.current,
+      child: childRef.current,
+      innerPopover: popoverRef.current,
+      innerPopoverDom: ((_popoverRef$current = popoverRef.current) == null ? void 0 : _popoverRef$current.dom) || null,
+      updatePosition: updatePosition
+    };
+  });
+  (0, _react.useEffect)(function () {
+    if (defaultVisible || visible) {
+      setVisibleState(true);
+    }
+
+    return function () {
+      mayRemoveEventListenerOnBody();
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (visible !== void 0) {
+      setVisibleState(Boolean(visible));
+    }
+  }, [visible]);
+  (0, _react.useEffect)(function () {
+    // 非 visibleState 变化引起的回调，仅用于更新位置
+    // @en Callbacks not caused by visibleState changes, only used to update the position
+    if (visibleRef.current) {
+      computedChildAndPopoverOffset();
+    }
+  }, [children, content, direction, mode]);
+  (0, _react.useEffect)(function () {
+    visibleState && showPopover();
+    visibleRef.current = visibleState;
+
+    if (!visibleState) {
+      mayRemoveEventListenerOnBody();
+      setTimeout(function () {
+        !visibleRef.current && resetPosition();
+      }, (typeof transitionTimeout === 'object' ? transitionTimeout.exit : transitionTimeout) || 300);
+    }
+  }, [visibleState]);
+
+  function showPopover() {
+    startCloseTimer();
+    setTimeout(mayAddEventOnBody, 0); // 为了防止缩放动画影响气泡位置计算，气泡漏出阶段不重新计算位置
+    // @en In order to prevent the zoom animation from affecting the bubble position calculation, the bubble leakage stage does not recalculate the position
+
+    if (!isCalcPosition) {
+      return;
+    } // 异步计算气泡位置，等待气泡渲染
+    // @en Calculate the bubble position asynchronously and wait for the bubble to render
+
+
+    setTimeout(function () {
+      computedChildAndPopoverOffset();
+    }, 0);
+  }
+
+  function updatePosition() {
+    if (!visibleState) return;
+    computedChildAndPopoverOffset();
+  }
+
+  function onClickWrapper() {
+    var visibleRefValue = visibleRef.current;
+
+    if (!visibleRefValue) {
+      onVisibleChange(true);
+      return;
+    }
+
+    if (visibleRefValue && clickSelfToClose && !touchSelfToClose) {
+      popoverDisappear();
+    }
+  }
+
+  function onTouchWrapper() {
+    // 仅处理气泡消失，气泡出现交给onClick来处理
+    // @en Only the disappearance of the bubble is processed, and the appearance of the bubble is handed over to onClick for processing
+    if (touchSelfToClose && visibleRef.current) {
+      popoverDisappear();
+    }
+  }
+
+  var renderInnerPopover = function renderInnerPopover() {
+    return /*#__PURE__*/_react.default.createElement(_popoverInner.PopoverInner, {
+      className: (0, _mobileUtils.cls)(theme + "-theme", innerPopoverClassName, {
+        bordered: bordered
+      }),
+      ref: popoverRef,
+      direction: direction,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      position: position,
+      arrowWidth: arrowWidth,
+      transformOrigin: transformOrigin,
+      needShadow: needShadow,
+      content: content,
+      mode: mode,
+      showCloseIcon: showCloseIcon,
+      textSuffix: textSuffix,
+      renderArrow: renderArrow,
+      onClickCloseIcon: onClickCloseIcon,
+      onClickTextSuffix: onClickTextSuffix
+    });
+  };
+
+  var renderPopover = function renderPopover() {
+    return /*#__PURE__*/_react.default.createElement(_portal.default, {
+      getContainer: function getContainer() {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return mode === 'global' ? document.body : wrapperRef.current;
+      }
+    }, visibleState && isCalcPosition && renderInnerPopover(), /*#__PURE__*/_react.default.createElement(_transition.default, {
+      in: visibleState && !isCalcPosition,
+      timeout: transitionTimeout,
+      type: transitionName,
+      mountOnEnter: true,
+      unmountOnExit: true
+    }, renderInnerPopover()));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showMask && /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_transition.default, {
+    in: visibleState && !isCalcPosition,
+    timeout: maskTransitionTimeout,
+    type: "fade",
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-popover-mask",
+    onClick: onClickMask
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-popover", className, theme + "-theme", mode + "-mode", {
+      bordered: bordered,
+      'custom-content': typeof content !== 'string'
+    }),
+    style: style,
+    ref: wrapperRef,
+    onClick: onClickWrapper,
+    onTouchStart: onTouchWrapper
+  }, renderPopover(), /*#__PURE__*/_react.default.createElement("div", {
+    ref: childRef,
+    className: "popover-child-inner"
+  }, children)));
+});
+exports.Popover = Popover;