antd-mobile 5.3.1 → 5.5.1

package/cjs/components/popover/popover.css

@@ -29,90 +29,6 @@
 .adm-popover-hidden {
   display: none;
 }
-.adm-popover-placement-top,
-.adm-popover-placement-topLeft,
-.adm-popover-placement-topRight {
-  padding-bottom: var(--arrow-size);
-}
-.adm-popover-placement-top .adm-popover-arrow,
-.adm-popover-placement-topLeft .adm-popover-arrow,
-.adm-popover-placement-topRight .adm-popover-arrow {
-  bottom: 0;
-  --arrow-icon-rotate: 0deg;
-}
-.adm-popover-placement-top .adm-popover-arrow {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.adm-popover-placement-topLeft .adm-popover-arrow {
-  left: 12px;
-}
-.adm-popover-placement-topRight .adm-popover-arrow {
-  right: 12px;
-}
-.adm-popover-placement-right,
-.adm-popover-placement-rightTop,
-.adm-popover-placement-rightBottom {
-  padding-left: var(--arrow-size);
-}
-.adm-popover-placement-right .adm-popover-arrow,
-.adm-popover-placement-rightTop .adm-popover-arrow,
-.adm-popover-placement-rightBottom .adm-popover-arrow {
-  left: 0;
-  --arrow-icon-rotate: 90deg;
-}
-.adm-popover-placement-right .adm-popover-arrow {
-  top: 50%;
-  transform: translateY(-50%);
-}
-.adm-popover-placement-rightTop .adm-popover-arrow {
-  top: 12px;
-}
-.adm-popover-placement-rightBottom .adm-popover-arrow {
-  bottom: 12px;
-}
-.adm-popover-placement-bottom,
-.adm-popover-placement-bottomLeft,
-.adm-popover-placement-bottomRight {
-  padding-top: var(--arrow-size);
-}
-.adm-popover-placement-bottom .adm-popover-arrow,
-.adm-popover-placement-bottomLeft .adm-popover-arrow,
-.adm-popover-placement-bottomRight .adm-popover-arrow {
-  top: 0;
-  --arrow-icon-rotate: 180deg;
-}
-.adm-popover-placement-bottom .adm-popover-arrow {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.adm-popover-placement-bottomLeft .adm-popover-arrow {
-  left: 12px;
-}
-.adm-popover-placement-bottomRight .adm-popover-arrow {
-  right: 12px;
-}
-.adm-popover-placement-left,
-.adm-popover-placement-leftTop,
-.adm-popover-placement-leftBottom {
-  padding-right: var(--arrow-size);
-}
-.adm-popover-placement-left .adm-popover-arrow,
-.adm-popover-placement-leftTop .adm-popover-arrow,
-.adm-popover-placement-leftBottom .adm-popover-arrow {
-  right: 0;
-  --arrow-icon-rotate: 270deg;
-}
-.adm-popover-placement-left .adm-popover-arrow {
-  top: 50%;
-  transform: translateY(-50%);
-}
-.adm-popover-placement-leftTop .adm-popover-arrow {
-  top: 12px;
-}
-.adm-popover-placement-leftBottom .adm-popover-arrow {
-  bottom: 12px;
-}
 .adm-popover-inner {
   background-color: var(--background);
   background-clip: padding-box;

package/cjs/components/popover/popover.d.ts

@@ -1,30 +1,36 @@
 import React, { ReactElement } from 'react';
-import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
 import { NativeProps } from '../../utils/native-props';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { GetContainer } from '../../utils/render-to-container';
+import { DeprecatedPlacement, Placement } from './index';
 export declare type PopoverProps = {
+    defaultVisible?: boolean;
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
     getContainer?: GetContainer;
     destroyOnHide?: boolean;
     children: ReactElement;
     mode?: 'light' | 'dark';
     trigger?: 'click';
-    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    placement?: Placement | DeprecatedPlacement;
     stopPropagation?: PropagationEvent[];
     content: React.ReactNode;
-} & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'align'> & NativeProps<'--z-index'>;
+} & NativeProps<'--z-index'>;
 export declare type PopoverRef = {
     show: () => void;
     hide: () => void;
     visible: boolean;
 };
 export declare const Popover: React.ForwardRefExoticComponent<{
+    defaultVisible?: boolean | undefined;
+    visible?: boolean | undefined;
+    onVisibleChange?: ((visible: boolean) => void) | undefined;
     getContainer?: GetContainer | undefined;
     destroyOnHide?: boolean | undefined;
     children: ReactElement;
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
-    placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
+    placement?: DeprecatedPlacement | Placement | undefined;
     stopPropagation?: "click"[] | undefined;
     content: React.ReactNode;
-} & Pick<TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & NativeProps<"--z-index"> & React.RefAttributes<PopoverRef>>;
+} & NativeProps<"--z-index"> & React.RefAttributes<PopoverRef>>;

package/cjs/components/popover/popover.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Popover = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _tslib = require("tslib");
 
-var _rcTooltip = _interopRequireDefault(require("rc-tooltip"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -15,10 +15,26 @@ var _usePropsValue = require("../../utils/use-props-value");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _nativeProps = require("../../utils/native-props");
+
 var _withStopPropagation = require("../../utils/with-stop-propagation");
 
 var _arrow = require("./arrow");
 
+var _renderToContainer = require("../../utils/render-to-container");
+
+var _tempFloatingUiMin = require("./temp-floating-ui.min.js");
+
+var _wrapper = require("./wrapper");
+
+var _shouldRender = require("../../utils/should-render");
+
+var _ahooks = require("ahooks");
+
+var _normalizePlacement = require("./normalize-placement");
+
+var _convertPx = require("../../utils/convert-px");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,12 +49,11 @@ const defaultProps = {
   getContainer: () => document.body
 };
 const Popover = (0, _react.forwardRef)((p, ref) => {
-  var _a;
-
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const {
     mode = 'light'
   } = props;
+  const placement = (0, _normalizePlacement.normalizePlacement)(props.placement);
   const [visible, setVisible] = (0, _usePropsValue.usePropsValue)({
     value: props.visible,
     defaultValue: props.defaultVisible,
@@ -51,24 +66,113 @@ const Popover = (0, _react.forwardRef)((p, ref) => {
       visible
     };
   }, [visible]);
-  const overlay = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, _react.default.createElement("div", {
+  const targetRef = (0, _react.useRef)(null);
+  const floatingRef = (0, _react.useRef)(null);
+  const arrowRef = (0, _react.useRef)(null);
+  const floating = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${mode}`, !visible && `${classPrefix}-hidden`),
+    ref: floatingRef
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-arrow`,
+    ref: arrowRef
+  }, _react.default.createElement(_arrow.Arrow, {
+    className: `${classPrefix}-arrow-icon`
+  })), _react.default.createElement("div", {
+    className: `${classPrefix}-inner`
+  }, _react.default.createElement("div", {
     className: `${classPrefix}-inner-content`
-  }, props.content));
-  return _react.default.createElement(_rcTooltip.default, Object.assign({}, props, {
-    placement: props.placement,
-    align: props.align,
-    overlayClassName: (0, _classnames.default)(`${classPrefix}-${mode}`, props.className),
-    overlayStyle: props.style,
-    destroyTooltipOnHide: props.destroyOnHide,
-    prefixCls: classPrefix,
-    getTooltipContainer: props.getContainer || (() => document.body),
-    visible: visible,
-    arrowContent: _react.default.createElement(_arrow.Arrow, {
-      className: `${classPrefix}-arrow-icon`
-    }),
-    onVisibleChange: setVisible,
-    trigger: (_a = props.trigger) !== null && _a !== void 0 ? _a : [],
-    overlay: overlay
-  }), props.children);
+  }, props.content)))));
+  const [targetElement, setTargetElement] = (0, _react.useState)(null);
+
+  function update() {
+    var _a, _b, _c;
+
+    return (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
+      const target = (_b = (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : null;
+      const floating = floatingRef.current;
+      const arrowElement = arrowRef.current;
+      setTargetElement(target);
+      if (!target || !floating || !arrowElement) return;
+      const {
+        x,
+        y,
+        placement: realPlacement,
+        middlewareData
+      } = yield (0, _tempFloatingUiMin.computePosition)(target, floating, {
+        placement,
+        middleware: [(0, _tempFloatingUiMin.offset)((0, _convertPx.convertPx)(12)), (0, _tempFloatingUiMin.shift)({
+          padding: (0, _convertPx.convertPx)(4),
+          crossAxis: false,
+          limiter: (0, _tempFloatingUiMin.limitShift)()
+        }), (0, _tempFloatingUiMin.flip)(), (0, _tempFloatingUiMin.hide)(), (0, _tempFloatingUiMin.arrow)({
+          element: arrowElement,
+          padding: (0, _convertPx.convertPx)(12)
+        })]
+      });
+      Object.assign(floating.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      const side = realPlacement.split('-')[0];
+      const arrowSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+      }[side];
+      const {
+        x: arrowX,
+        y: arrowY
+      } = (_c = middlewareData.arrow) !== null && _c !== void 0 ? _c : {};
+      Object.assign(arrowElement.style, {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
+        right: '',
+        bottom: '',
+        [arrowSide]: `-${(0, _convertPx.convertPx)(8)}px`
+      });
+      const arrowRotate = {
+        top: '0deg',
+        bottom: '180deg',
+        left: '270deg',
+        right: '90deg'
+      }[side];
+      arrowElement.style.setProperty('--arrow-icon-rotate', arrowRotate);
+    });
+  }
+
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    update();
+  });
+  (0, _react.useEffect)(() => {
+    if (!targetElement) return;
+    if (!props.trigger) return;
+
+    function handleClick() {
+      setVisible(v => !v);
+    }
+
+    targetElement.addEventListener('click', handleClick);
+    return () => {
+      targetElement.removeEventListener('click', handleClick);
+    };
+  }, [targetElement, props.trigger]);
+  (0, _react.useEffect)(() => {
+    const floatingElement = floatingRef.current;
+    if (!targetElement || !floatingElement) return;
+    return (0, _tempFloatingUiMin.autoUpdate)(targetElement, floatingElement, update);
+  }, [targetElement]);
+  (0, _ahooks.useClickAway)(() => {
+    if (!props.trigger) return;
+    setVisible(false);
+  }, () => {
+    var _a;
+
+    return (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element;
+  });
+  const shouldRender = (0, _shouldRender.useShouldRender)(visible, false, props.destroyOnHide);
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_wrapper.Wrapper, {
+    ref: targetRef
+  }, props.children), shouldRender && (0, _renderToContainer.renderToContainer)(props.getContainer, floating));
 });
 exports.Popover = Popover;

package/cjs/components/popover/temp-floating-ui.min.d.ts

@@ -0,0 +1 @@
+export * from '@floating-ui/dom'