antd-mobile 5.0.0-rc.2 → 5.0.0-rc.23

package/2x/es/components/popover/pop-menu.js

@@ -2,17 +2,16 @@ import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef }
 import classNames from 'classnames';
 import Button from '../button';
 import { Popover } from './popover';
-var classPrefix = "adm-popover";
-export var PopMenu = /*#__PURE__*/forwardRef(function (props, ref) {
-  var innerRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return innerRef.current;
-  }, []);
-
-  var _onClick = useCallback(function (e) {
+const classPrefix = `adm-popover`;
+export const PopMenu = forwardRef((props, ref) => {
+  const innerRef = useRef(null);
+  useImperativeHandle(ref, () => innerRef.current, []);
+  const onClick = useCallback(e => {
     var _a;
 
-    var onAction = props.onAction;
+    const {
+      onAction
+    } = props;
 
     if (onAction) {
       onAction(e);
@@ -20,38 +19,36 @@ export var PopMenu = /*#__PURE__*/forwardRef(function (props, ref) {
 
     (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.hide();
   }, [props.onAction]);
-
-  var overlay = useMemo(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, (props.actions || []).map(function (ele, index) {
-      var _classNames;
-
+  const overlay = useMemo(() => {
+    return React.createElement(React.Fragment, null, (props.actions || []).map((ele, index) => {
       var _a;
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(classPrefix + "-inner-menu", (_classNames = {}, _classNames[classPrefix + "-inner-menu-with-icon"] = !!ele.icon, _classNames)),
+      return React.createElement("div", {
+        className: classNames(`${classPrefix}-inner-menu`, {
+          [`${classPrefix}-inner-menu-with-icon`]: !!ele.icon
+        }),
         key: (_a = ele.key) !== null && _a !== void 0 ? _a : index
-      }, /*#__PURE__*/React.createElement(Button, {
+      }, React.createElement(Button, {
         disabled: ele.disabled,
-        onClick: function onClick() {
+        onClick: () => {
           var _a;
 
           if (!ele.disabled) {
-            _onClick(ele);
-
+            onClick(ele);
             (_a = ele.onClick) === null || _a === void 0 ? void 0 : _a.call(ele);
           }
         },
         fill: 'none',
         block: true
-      }, ele.icon && /*#__PURE__*/React.createElement("span", {
-        className: classPrefix + "-inner-menu-icon"
+      }, ele.icon && React.createElement("span", {
+        className: `${classPrefix}-inner-menu-icon`
       }, ele.icon), ele.text));
     }));
-  }, [props.actions, _onClick]);
-  return /*#__PURE__*/React.createElement(Popover, Object.assign({
+  }, [props.actions, onClick]);
+  return React.createElement(Popover, Object.assign({
     ref: innerRef
   }, props, {
-    overlayClassName: classNames(classPrefix + "-menu", props.overlayClassName),
+    overlayClassName: classNames(`${classPrefix}-menu`, props.overlayClassName),
     content: overlay
   }), props.children);
 });

package/2x/es/components/popover/popover.css

@@ -129,7 +129,7 @@
 }
 
 .adm-popover-dark {
-  --popover-bg: rgba(0, 0, 0, 0.75);
+  --popover-bg: rgba(0, 0, 0);
   --adm-color-text: #ffffff;
   color: white;
 }
@@ -147,7 +147,7 @@
 .adm-popover-placement-top,
 .adm-popover-placement-topLeft,
 .adm-popover-placement-topRight {
-  padding-bottom: 12px;
+  padding-bottom: 24px;
 }
 
 .adm-popover-placement-top.leaving,
@@ -167,7 +167,7 @@
 .adm-popover-placement-right,
 .adm-popover-placement-rightTop,
 .adm-popover-placement-rightBottom {
-  padding-left: 12px;
+  padding-left: 24px;
 }
 
 .adm-popover-placement-right.leaving,
@@ -187,7 +187,7 @@
 .adm-popover-placement-bottom,
 .adm-popover-placement-bottomLeft,
 .adm-popover-placement-bottomRight {
-  padding-top: 12px;
+  padding-top: 24px;
 }
 
 .adm-popover-placement-bottom.leaving,
@@ -207,7 +207,7 @@
 .adm-popover-placement-left,
 .adm-popover-placement-leftTop,
 .adm-popover-placement-leftBottom {
-  padding-right: 12px;
+  padding-right: 24px;
 }
 
 .adm-popover-placement-left.leaving,
@@ -286,28 +286,38 @@
 .adm-popover-arrow {
   position: absolute;
   display: block;
-  width: 17px;
-  height: 17px;
+  width: 34px;
+  height: 34px;
   background: transparent;
-  border-style: solid;
-  border-width: 8px;
-  transform: rotate(45deg);
+}
+
+.adm-popover-arrow-content {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  inset: 0;
+  display: block;
+  margin: auto;
+  background-color: var(--popover-bg);
+  content: '';
+  pointer-events: auto;
 }
 
 .adm-popover-placement-top > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-topLeft > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-topRight > .adm-popover-content > .adm-popover-arrow {
-  bottom: 6px;
-  border-top-color: transparent;
-  border-right-color: var(--popover-bg);
-  border-bottom-color: var(--popover-bg);
-  border-left-color: transparent;
-  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.07);
+  bottom: 2px;
+}
+
+.adm-popover-placement-top > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-topLeft > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-topRight > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content {
+  transform: translateY(-8px) rotate(45deg);
 }
 
 .adm-popover-placement-top > .adm-popover-content > .adm-popover-arrow {
   left: 50%;
-  transform: translateX(-50%) rotate(45deg);
+  transform: translateX(-50%);
 }
 
 .adm-popover-placement-topLeft > .adm-popover-content > .adm-popover-arrow {
@@ -321,17 +331,18 @@
 .adm-popover-placement-right > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-rightTop > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-rightBottom > .adm-popover-content > .adm-popover-arrow {
-  left: 6px;
-  border-top-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: var(--popover-bg);
-  border-left-color: var(--popover-bg);
-  box-shadow: -6px 6px 14px rgba(0, 0, 0, 0.07);
+  left: 2px;
+}
+
+.adm-popover-placement-right > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-rightTop > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-rightBottom > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content {
+  transform: translate(8px) rotate(45deg);
 }
 
 .adm-popover-placement-right > .adm-popover-content > .adm-popover-arrow {
   top: 50%;
-  transform: translateY(-50%) rotate(45deg);
+  transform: translateY(-50%);
 }
 
 .adm-popover-placement-rightTop > .adm-popover-content > .adm-popover-arrow {
@@ -345,17 +356,18 @@
 .adm-popover-placement-bottom > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-bottomLeft > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-bottomRight > .adm-popover-content > .adm-popover-arrow {
-  top: 6px;
-  border-top-color: var(--popover-bg);
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-  border-left-color: var(--popover-bg);
-  box-shadow: -4px -4px 10px rgba(0, 0, 0, 0.06);
+  top: 2px;
+}
+
+.adm-popover-placement-bottom > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-bottomLeft > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-bottomRight > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content {
+  transform: translateY(8px) rotate(45deg);
 }
 
 .adm-popover-placement-bottom > .adm-popover-content > .adm-popover-arrow {
   left: 50%;
-  transform: translateX(-50%) rotate(45deg);
+  transform: translateX(-50%);
 }
 
 .adm-popover-placement-bottomLeft > .adm-popover-content > .adm-popover-arrow {
@@ -369,17 +381,18 @@
 .adm-popover-placement-left > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-leftTop > .adm-popover-content > .adm-popover-arrow,
 .adm-popover-placement-leftBottom > .adm-popover-content > .adm-popover-arrow {
-  right: 6px;
-  border-top-color: var(--popover-bg);
-  border-right-color: var(--popover-bg);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  box-shadow: 6px -6px 14px rgba(0, 0, 0, 0.07);
+  right: 2px;
+}
+
+.adm-popover-placement-left > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-leftTop > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content,
+.adm-popover-placement-leftBottom > .adm-popover-content > .adm-popover-arrow > .adm-popover-arrow-content {
+  transform: translate(-8px) rotate(45deg);
 }
 
 .adm-popover-placement-left > .adm-popover-content > .adm-popover-arrow {
   top: 50%;
-  transform: translateY(-50%) rotate(45deg);
+  transform: translateY(-50%);
 }
 
 .adm-popover-placement-leftTop > .adm-popover-content > .adm-popover-arrow {

package/2x/es/components/popover/popover.d.ts

@@ -1,6 +1,7 @@
 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';
 export declare type BasePopoverProps = {
     getContainer?: () => HTMLElement;
     destroyOnHide?: boolean;
@@ -8,6 +9,7 @@ export declare type BasePopoverProps = {
     mode?: 'light' | 'dark';
     trigger?: 'click';
     placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    stopPropagation?: PropagationEvent[];
 } & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'overlayStyle' | 'overlayClassName' | 'align' | 'zIndex'> & NativeProps<'--z-index'>;
 export declare type PopoverRef = {
     show: () => void;
@@ -21,6 +23,7 @@ export declare const Popover: React.ForwardRefExoticComponent<{
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
     placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    stopPropagation?: "click"[] | undefined;
 } & Pick<TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & NativeProps<"--z-index"> & {
     content: React.ReactNode;
 } & React.RefAttributes<PopoverRef>>;

package/2x/es/components/popover/popover.js

@@ -3,46 +3,47 @@ import Tooltip from 'rc-tooltip';
 import classNames from 'classnames';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = "adm-popover";
-var enterClassName = 'entering';
-var leaveClassName = 'leaving';
-var defaultProps = {
-  defaultVisible: false
+import { withStopPropagation } from '../../utils/with-stop-propagation';
+const classPrefix = `adm-popover`;
+const enterClassName = 'entering';
+const leaveClassName = 'leaving';
+const defaultProps = {
+  defaultVisible: false,
+  stopPropagation: ['click']
 };
-export var Popover = /*#__PURE__*/forwardRef(function (p, ref) {
-  var props = mergeProps(defaultProps, p);
-  var _props$mode = props.mode,
-      mode = _props$mode === void 0 ? 'light' : _props$mode;
+export const Popover = forwardRef((p, ref) => {
+  var _a;
 
-  var _usePropsValue = usePropsValue({
+  const props = mergeProps(defaultProps, p);
+  const {
+    mode = 'light'
+  } = props;
+  const [visible, setVisible] = usePropsValue({
     value: props.visible,
     defaultValue: props.defaultVisible,
     onChange: props.onVisibleChange
-  }),
-      visible = _usePropsValue[0],
-      setVisible = _usePropsValue[1];
-
-  useImperativeHandle(ref, function () {
+  });
+  useImperativeHandle(ref, () => {
     return {
-      show: function show() {
-        return setVisible(true);
-      },
-      hide: function hide() {
-        return setVisible(false);
-      },
-      visible: visible
+      show: () => setVisible(true),
+      hide: () => setVisible(false),
+      visible
     };
   }, [visible]);
-  return /*#__PURE__*/React.createElement(Tooltip, Object.assign({}, props, {
-    overlayClassName: classNames(classPrefix + "-" + mode, props.overlayClassName),
+  const overlay = withStopPropagation(props.stopPropagation, React.createElement("div", {
+    className: `${classPrefix}-inner-content`
+  }, props.content));
+  return React.createElement(Tooltip, Object.assign({}, props, {
+    overlayClassName: classNames(`${classPrefix}-${mode}`, props.overlayClassName),
     destroyTooltipOnHide: props.destroyOnHide,
     prefixCls: classPrefix,
-    getTooltipContainer: props.getContainer || function () {
-      return document.body;
-    },
+    getTooltipContainer: props.getContainer || (() => document.body),
     visible: visible,
+    arrowContent: React.createElement("span", {
+      className: `${classPrefix}-arrow-content`
+    }),
     onVisibleChange: setVisible,
-    trigger: props.trigger,
+    trigger: (_a = props.trigger) !== null && _a !== void 0 ? _a : [],
     motion: {
       motionName: {
         appear: enterClassName,
@@ -54,8 +55,6 @@ export var Popover = /*#__PURE__*/forwardRef(function (p, ref) {
       },
       motionDeadline: 200
     },
-    overlay: /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-inner-content"
-    }, props.content)
+    overlay: overlay
   }), props.children);
 });

package/2x/es/components/popup/popup.js

@@ -9,30 +9,25 @@ import { renderToContainer } from '../../utils/render-to-container';
 import { useSpring, animated } from '@react-spring/web';
 import { useShouldRender } from '../../utils/use-should-render';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
-var classPrefix = "adm-popup";
-var defaultProps = {
+const classPrefix = `adm-popup`;
+const defaultProps = {
   position: 'bottom',
   visible: false,
-  getContainer: function getContainer() {
-    return document.body;
-  },
+  getContainer: () => document.body,
   mask: true,
   stopPropagation: ['click']
 };
-export var Popup = function Popup(p) {
-  var props = mergeProps(defaultProps, p);
-  var bodyCls = classNames(classPrefix + "-body", props.bodyClassName, classPrefix + "-body-position-" + props.position);
-  var ref = useRef(null);
-
-  var _useState = useState(props.visible),
-      active = _useState[0],
-      setActive = _useState[1];
-
+export const Popup = p => {
+  const props = mergeProps(defaultProps, p);
+  const bodyCls = classNames(`${classPrefix}-body`, props.bodyClassName, `${classPrefix}-body-position-${props.position}`);
+  const ref = useRef(null);
+  const [active, setActive] = useState(props.visible);
   useLockScroll(ref, active);
-  var shouldRender = useShouldRender(active, props.forceRender, props.destroyOnClose);
-  var unmountedRef = useUnmountedRef();
-
-  var _useSpring = useSpring({
+  const shouldRender = useShouldRender(active, props.forceRender, props.destroyOnClose);
+  const unmountedRef = useUnmountedRef();
+  const {
+    percent
+  } = useSpring({
     percent: props.visible ? 0 : 100,
     config: {
       precision: 0.1,
@@ -40,10 +35,10 @@ export var Popup = function Popup(p) {
       tension: 300,
       friction: 30
     },
-    onStart: function onStart() {
+    onStart: () => {
       setActive(true);
     },
-    onRest: function onRest() {
+    onRest: () => {
       var _a, _b;
 
       if (unmountedRef.current) return;
@@ -55,40 +50,38 @@ export var Popup = function Popup(p) {
         (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
-  }),
-      percent = _useSpring.percent;
-
-  var node = withStopPropagation(props.stopPropagation, withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  });
+  const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
     className: classPrefix,
     onClick: props.onClick,
     style: {
       display: active ? 'unset' : 'none'
     }
-  }, props.mask && /*#__PURE__*/React.createElement(Mask, {
+  }, props.mask && React.createElement(Mask, {
     visible: props.visible,
     onMaskClick: props.onMaskClick,
     className: props.maskClassName,
     style: props.maskStyle,
     disableBodyScroll: false,
     stopPropagation: props.stopPropagation
-  }), /*#__PURE__*/React.createElement(animated.div, {
+  }), React.createElement(animated.div, {
     className: bodyCls,
     style: Object.assign(Object.assign({}, props.bodyStyle), {
-      transform: percent.to(function (v) {
+      transform: percent.to(v => {
         if (props.position === 'bottom') {
-          return "translate(0, " + v + "%)";
+          return `translate(0, ${v}%)`;
         }
 
         if (props.position === 'top') {
-          return "translate(0, -" + v + "%)";
+          return `translate(0, -${v}%)`;
         }
 
         if (props.position === 'left') {
-          return "translate(-" + v + "%, 0)";
+          return `translate(-${v}%, 0)`;
         }
 
         if (props.position === 'right') {
-          return "translate(" + v + "%, 0)";
+          return `translate(${v}%, 0)`;
         }
 
         return 'none';

package/2x/es/components/progress-bar/progress-bar.css

@@ -1,10 +1,12 @@
 .adm-progress-bar {
   --track-width: var(--adm-progress-bar-track-width, 6px);
+  --track-color: var(--adm-progress-bar-track-color, #e5e5e5);
   --fill-color: var(--adm-progress-bar-fill-color, #1677ff);
 }
 
 .adm-progress-bar-trail {
-  background: #e5e5e5;
+  background: var(--track-color);
+  overflow: hidden;
   height: var(--track-width);
   border-radius: var(--track-width);
 }

package/2x/es/components/progress-bar/progress-bar.d.ts

@@ -2,5 +2,5 @@ import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ProgressBarProps = {
     percent?: number;
-} & NativeProps<'--track-width' | '--fill-color'>;
+} & NativeProps<'--track-width' | '--track-color' | '--fill-color'>;
 export declare const ProgressBar: FC<ProgressBarProps>;

package/2x/es/components/progress-bar/progress-bar.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = "adm-progress-bar";
-export var ProgressBar = function ProgressBar(p) {
-  var props = mergeProps({
+const classPrefix = `adm-progress-bar`;
+export const ProgressBar = p => {
+  const props = mergeProps({
     percent: 0
   }, p);
-  var fillStyle = {
-    width: props.percent + "%"
+  const fillStyle = {
+    width: `${props.percent}%`
   };
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  return withNativeProps(props, React.createElement("div", {
     className: classPrefix
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-trail"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-fill",
+  }, React.createElement("div", {
+    className: `${classPrefix}-trail`
+  }, React.createElement("div", {
+    className: `${classPrefix}-fill`,
     style: fillStyle
   }))));
 };

package/2x/es/components/progress-circle/progress-circle.js

@@ -1,29 +1,29 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = "adm-progress-circle";
-export var ProgressCircle = function ProgressCircle(p) {
-  var props = mergeProps({
+const classPrefix = `adm-progress-circle`;
+export const ProgressCircle = p => {
+  const props = mergeProps({
     percent: 0,
     strokeColor: '#1677FF'
   }, p);
-  var style = {
+  const style = {
     '--percent': props.percent.toString()
   };
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: "" + classPrefix,
+  return withNativeProps(props, React.createElement("div", {
+    className: `${classPrefix}`,
     style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-content"
-  }, /*#__PURE__*/React.createElement("svg", {
-    className: classPrefix + "-svg"
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: classPrefix + "-track",
+  }, React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, React.createElement("svg", {
+    className: `${classPrefix}-svg`
+  }, React.createElement("circle", {
+    className: `${classPrefix}-track`,
     fill: 'transparent'
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: classPrefix + "-fill",
+  }), React.createElement("circle", {
+    className: `${classPrefix}-fill`,
     fill: 'transparent'
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-info"
+  })), React.createElement("div", {
+    className: `${classPrefix}-info`
   }, props.children))));
 };

package/2x/es/components/pull-to-refresh/pull-to-refresh.d.ts

@@ -9,6 +9,7 @@ export declare type PullToRefreshProps = {
     completeDelay?: number;
     headHeight?: number;
     threshold?: number;
+    disabled?: boolean;
     renderText?: (status: PullStatus) => ReactNode;
 };
 export declare const defaultProps: {
@@ -17,6 +18,7 @@ export declare const defaultProps: {
     refreshingText: string;
     completeText: string;
     completeDelay: number;
+    disabled: boolean;
     onRefresh: () => void;
 };
 export declare const PullToRefresh: FC<PullToRefreshProps>;