antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

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

@@ -111,10 +111,11 @@
 }
 
 .adm-popover {
+  --z-index: var(--adm-popover-z-index, 1030);
   position: absolute;
   top: 0;
   left: 0;
-  z-index: var(--adm-z-index-popover);
+  z-index: var(--z-index);
   font-weight: normal;
   white-space: normal;
   text-align: left;

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

@@ -1,12 +1,14 @@
 import React, { ReactElement } from 'react';
 import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
+import { NativeProps } from '../../utils/native-props';
 export declare type BasePopoverProps = {
     getContainer?: () => HTMLElement;
     destroyOnHide?: boolean;
     children: ReactElement;
     mode?: 'light' | 'dark';
-    trigger?: string;
-} & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'placement' | 'onVisibleChange' | 'overlayStyle' | 'overlayClassName' | 'align' | 'zIndex'>;
+    trigger?: 'click';
+    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+} & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'overlayStyle' | 'overlayClassName' | 'align' | 'zIndex'> & NativeProps<'--z-index'>;
 export declare type PopoverRef = {
     show: () => void;
     hide: () => void;
@@ -17,7 +19,8 @@ export declare const Popover: React.ForwardRefExoticComponent<{
     destroyOnHide?: boolean | undefined;
     children: ReactElement;
     mode?: "dark" | "light" | undefined;
-    trigger?: string | undefined;
-} & Pick<TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "placement" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & {
+    trigger?: "click" | undefined;
+    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+} & Pick<TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & NativeProps<"--z-index"> & {
     content: React.ReactNode;
 } & React.RefAttributes<PopoverRef>>;

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

@@ -11,7 +11,7 @@ var _rcTooltip = _interopRequireDefault(require("rc-tooltip"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _useControllableValue = require("../../utils/use-controllable-value");
+var _usePropsValue2 = require("../../utils/use-props-value");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
@@ -32,21 +32,21 @@ var Popover = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
   var _props$mode = props.mode,
       mode = _props$mode === void 0 ? 'light' : _props$mode;
 
-  var _useNewControllableVa = (0, _useControllableValue.useNewControllableValue)({
+  var _usePropsValue = (0, _usePropsValue2.usePropsValue)({
     value: props.visible,
     defaultValue: props.defaultVisible,
     onChange: props.onVisibleChange
   }),
-      visible = _useNewControllableVa[0],
-      onVisibleChange = _useNewControllableVa[1];
+      visible = _usePropsValue[0],
+      setVisible = _usePropsValue[1];
 
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       show: function show() {
-        return onVisibleChange(true);
+        return setVisible(true);
       },
       hide: function hide() {
-        return onVisibleChange(false);
+        return setVisible(false);
       },
       visible: visible
     };
@@ -59,7 +59,7 @@ var Popover = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
       return document.body;
     },
     visible: visible,
-    onVisibleChange: onVisibleChange,
+    onVisibleChange: setVisible,
     trigger: props.trigger,
     motion: {
       motionName: {

package/2x/cjs/components/popup/popup.css

@@ -1,69 +1,35 @@
 .adm-popup {
+  --z-index: var(--adm-popup-z-index, 1000);
   position: fixed;
-  z-index: var(--adm-z-index-popup);
-}
-
-.adm-popup-hidden {
-  display: none;
+  z-index: var(--z-index);
 }
 
 .adm-popup-body {
   position: fixed;
   background-color: #ffffff;
-  z-index: calc(var(--adm-z-index-mask) + 10);
-  --transform-active: none;
+  z-index: calc(var(--z-index) + 10);
 }
 
 .adm-popup-body-position-bottom {
   width: 100%;
   bottom: 0;
   left: 0;
-  --transform-non-active: translate(0, 100%);
 }
 
 .adm-popup-body-position-top {
   width: 100%;
   top: 0;
   left: 0;
-  --transform-non-active: translate(0, -100%);
 }
 
 .adm-popup-body-position-left {
   height: 100%;
   top: 0;
   left: 0;
-  --transform-non-active: translate(-100%, 0);
 }
 
 .adm-popup-body-position-right {
   height: 100%;
   top: 0;
   right: 0;
-  --transform-non-active: translate(100%, 0);
-}
-
-.adm-popup-body-hidden {
-  transform: var(--transform-non-active);
-}
-
-.adm-popup-body-enter {
-  transform: var(--transform-non-active);
-}
-
-.adm-popup-body-enter-active {
-  transform: var(--transform-active);
-  transition: transform 200ms ease-out;
-}
-
-.adm-popup-body-enter-done {
-  transform: var(--transform-active);
-}
-
-.adm-popup-body-exit {
-  transform: var(--transform-active);
-}
-
-.adm-popup-body-exit-active {
-  transform: var(--transform-non-active);
-  transition: transform 200ms;
 }

package/2x/cjs/components/popup/popup.d.ts

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { GetContainer } from '../../utils/render-to-container';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type PopupProps = {
     visible?: boolean;
     mask?: boolean;
@@ -16,5 +17,6 @@ export declare type PopupProps = {
     maskClassName?: string;
     maskStyle?: React.CSSProperties;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-} & NativeProps;
+    stopPropagation?: PropagationEvent[];
+} & NativeProps<'--z-index'>;
 export declare const Popup: FC<PopupProps>;

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

@@ -9,12 +9,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactTransitionGroup = require("react-transition-group");
+var _ahooks = require("ahooks");
 
 var _nativeProps = require("../../utils/native-props");
 
-var _useInitialized = require("../../utils/use-initialized");
-
 var _withDefaultProps = require("../../utils/with-default-props");
 
 var _mask = _interopRequireDefault(require("../mask"));
@@ -23,6 +21,12 @@ var _useLockScroll = require("../../utils/use-lock-scroll");
 
 var _renderToContainer = require("../../utils/render-to-container");
 
+var _web = require("@react-spring/web");
+
+var _useShouldRender = require("../../utils/use-should-render");
+
+var _withStopPropagation = require("../../utils/with-stop-propagation");
+
 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; }
@@ -36,57 +40,87 @@ var defaultProps = {
   getContainer: function getContainer() {
     return document.body;
   },
-  mask: true
+  mask: true,
+  stopPropagation: ['click']
 };
 
 var Popup = function Popup(p) {
-  var _classNames, _classNames2;
-
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p); // 动画执行完，才隐藏最外层
-
-  var _useState = (0, _react.useState)(!props.visible),
-      hidden = _useState[0],
-      setHidden = _useState[1];
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var bodyCls = (0, _classnames["default"])(classPrefix + "-body", props.bodyClassName, classPrefix + "-body-position-" + props.position);
+  var ref = (0, _react.useRef)(null);
 
-  (0, _react.useEffect)(function () {
-    if (props.visible) {
-      setHidden(false);
+  var _useState = (0, _react.useState)(props.visible),
+      active = _useState[0],
+      setActive = _useState[1];
+
+  (0, _useLockScroll.useLockScroll)(ref, active);
+  var shouldRender = (0, _useShouldRender.useShouldRender)(active, props.forceRender, props.destroyOnClose);
+  var unmountedRef = (0, _ahooks.useUnmountedRef)();
+
+  var _useSpring = (0, _web.useSpring)({
+    percent: props.visible ? 0 : 100,
+    config: {
+      precision: 0.1,
+      mass: 0.4,
+      tension: 300,
+      friction: 30
+    },
+    onStart: function onStart() {
+      setActive(true);
+    },
+    onRest: function onRest() {
+      var _a, _b;
+
+      if (unmountedRef.current) return;
+      setActive(props.visible);
+
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    }
+  }),
+      percent = _useSpring.percent;
+
+  var node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix,
+    onClick: props.onClick,
+    style: {
+      display: active ? 'unset' : 'none'
     }
-  }, [props.visible]);
-
-  var afterClose = function afterClose() {
-    var _a;
-
-    setHidden(true);
-    (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-  };
-
-  var cls = (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-hidden"] = hidden, _classNames));
-  var bodyCls = (0, _classnames["default"])(classPrefix + "-body", props.bodyClassName, (_classNames2 = {}, _classNames2[classPrefix + "-body-hidden"] = !props.visible, _classNames2), classPrefix + "-body-position-" + props.position);
-  var initialized = (0, _useInitialized.useInitialized)(props.visible || props.forceRender);
-  var ref = (0, _react.useRef)(null);
-  (0, _useLockScroll.useLockScroll)(ref, props.visible);
-  var node = (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: cls,
-    onClick: props.onClick
   }, props.mask && /*#__PURE__*/_react["default"].createElement(_mask["default"], {
     visible: props.visible,
     onMaskClick: props.onMaskClick,
     className: props.maskClassName,
     style: props.maskStyle,
-    disableBodyScroll: false
-  }), /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
-    classNames: classPrefix + "-body",
-    "in": props.visible,
-    timeout: 200,
-    onEntered: props.afterShow,
-    onExited: afterClose,
-    unmountOnExit: props.destroyOnClose
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+    disableBodyScroll: false,
+    stopPropagation: props.stopPropagation
+  }), /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
     className: bodyCls,
-    style: props.bodyStyle,
+    style: Object.assign(Object.assign({}, props.bodyStyle), {
+      transform: percent.to(function (v) {
+        if (props.position === 'bottom') {
+          return "translate(0, " + v + "%)";
+        }
+
+        if (props.position === 'top') {
+          return "translate(0, -" + v + "%)";
+        }
+
+        if (props.position === 'left') {
+          return "translate(-" + v + "%, 0)";
+        }
+
+        if (props.position === 'right') {
+          return "translate(" + v + "%, 0)";
+        }
+
+        return 'none';
+      })
+    }),
     ref: ref
-  }, initialized && props.children))));
+  }, shouldRender && props.children))));
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
 };
 

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

@@ -0,0 +1,17 @@
+.adm-progress-bar {
+  --track-width: var(--adm-progress-bar-track-width, 6px);
+  --fill-color: var(--adm-progress-bar-fill-color, #1677ff);
+}
+
+.adm-progress-bar-trail {
+  background: #e5e5e5;
+  height: var(--track-width);
+  border-radius: var(--track-width);
+}
+
+.adm-progress-bar-fill {
+  transition: width 0.3s;
+  background: var(--fill-color);
+  height: 100%;
+  border-radius: var(--track-width);
+}

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

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

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

@@ -5,12 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProgressBar = void 0;
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _convertPx = require("../../utils/convert-px");
-
 var _nativeProps = require("../../utils/native-props");
 
 var _withDefaultProps = require("../../utils/with-default-props");
@@ -18,36 +14,22 @@ var _withDefaultProps = require("../../utils/with-default-props");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var classPrefix = "adm-progress-bar";
-var ProgressBar = (0, _withDefaultProps.withDefaultProps)({
-  percent: 0,
-  strokeColor: '#1677FF'
-})(function (props) {
-  var strokeWidth = props.strokeWidth;
-
-  if (strokeWidth === undefined) {
-    strokeWidth = (0, _convertPx.convertPx)(3);
-  }
-
-  var trailStyle = {
-    height: strokeWidth + "px",
-    borderRadius: strokeWidth / 2 + "px",
-    background: '#e5e5e5'
-  };
-  var pathStyle = {
-    height: strokeWidth + "px",
-    borderRadius: strokeWidth / 2 + "px",
-    width: props.percent + "%",
-    background: props.strokeColor,
-    transition: 'width 0.3s'
+
+var ProgressBar = function ProgressBar(p) {
+  var props = (0, _withDefaultProps.mergeProps)({
+    percent: 0
+  }, p);
+  var fillStyle = {
+    width: props.percent + "%"
   };
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-trail",
-    style: trailStyle
+    className: classPrefix + "-trail"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix + "-path"),
-    style: pathStyle
+    className: classPrefix + "-fill",
+    style: fillStyle
   }))));
-});
+};
+
 exports.ProgressBar = ProgressBar;

package/2x/cjs/components/progress-circle/progress-circle.css

@@ -1,12 +1,51 @@
 /*进度圈*/
 
-.adm-progress-circle-wrap {
+.adm-progress-circle {
+  --track-width: 6px;
+  --size: 100px;
+  --track-color: #e5e5e5;
+  --fill-color: #1677ff;
+  --percent: 0;
+  --pi: 3.14159265;
+  --radius: calc(var(--size) / 2 - var(--track-width) / 2);
+  --circumference: calc(var(--radius) * var(--pi) * 2);
   display: inline-block;
+  width: var(--size);
+  height: var(--size);
+}
+
+.adm-progress-circle-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.adm-progress-circle-svg > .adm-progress-circle-track,
+.adm-progress-circle-svg .adm-progress-circle-fill {
+  stroke-width: var(--track-width);
+  r: var(--radius);
+  cx: calc(var(--size) / 2);
+  cy: calc(var(--size) / 2);
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+}
+
+.adm-progress-circle-svg > .adm-progress-circle-track {
+  stroke: var(--track-color);
+}
+
+.adm-progress-circle-svg > .adm-progress-circle-fill {
+  transition: stroke-dashoffset 0.35s;
+  stroke: var(--fill-color);
+  stroke-dasharray: var(--circumference);
+  stroke-dashoffset: calc(var(--circumference) * (1 - var(--percent) / 100));
+  stroke-linecap: round;
 }
 
 .adm-progress-circle-content {
   position: relative;
   margin: auto;
+  width: 100%;
+  height: 100%;
 }
 
 .adm-progress-circle-info {

package/2x/cjs/components/progress-circle/progress-circle.d.ts

@@ -1,10 +1,7 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ProgressCircleProps = {
     percent?: number;
-    strokeWidth?: number;
-    size?: number;
-    strokeColor?: string;
     children?: React.ReactNode;
-} & NativeProps;
-export declare const ProgressCircle: React.FC<ProgressCircleProps>;
+} & NativeProps<'--size' | '--track-width' | '--track-color' | '--fill-color'>;
+export declare const ProgressCircle: FC<ProgressCircleProps>;

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

@@ -7,50 +7,38 @@ exports.ProgressCircle = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _rcProgress = require("rc-progress");
-
 var _nativeProps = require("../../utils/native-props");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-var _convertPx = require("../../utils/convert-px");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var classPrefix = "adm-progress";
-var ProgressCircle = (0, _withDefaultProps.withDefaultProps)({
-  percent: 0,
-  strokeColor: '#1677FF'
-})(function (props) {
-  var strokeWidth = props.strokeWidth,
-      size = props.size;
-
-  if (strokeWidth === undefined) {
-    strokeWidth = (0, _convertPx.convertPx)(6);
-  }
-
-  if (size === undefined) {
-    size = (0, _convertPx.convertPx)(50);
-  }
-
-  var contentStyle = {
-    width: size + "px",
-    height: size + "px"
+var classPrefix = "adm-progress-circle";
+
+var ProgressCircle = function ProgressCircle(p) {
+  var props = (0, _withDefaultProps.mergeProps)({
+    percent: 0,
+    strokeColor: '#1677FF'
+  }, p);
+  var style = {
+    '--percent': props.percent.toString()
   };
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-circle-wrap"
+    className: "" + classPrefix,
+    style: style
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-circle-content",
-    style: contentStyle
-  }, /*#__PURE__*/_react["default"].createElement(_rcProgress.Circle, {
-    prefixCls: classPrefix,
-    percent: props.percent,
-    strokeWidth: strokeWidth,
-    trailWidth: strokeWidth,
-    trailColor: '#E5E5E5',
-    strokeColor: props.strokeColor
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-circle-info"
+    className: classPrefix + "-content"
+  }, /*#__PURE__*/_react["default"].createElement("svg", {
+    className: classPrefix + "-svg"
+  }, /*#__PURE__*/_react["default"].createElement("circle", {
+    className: classPrefix + "-track",
+    fill: 'transparent'
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
+    className: classPrefix + "-fill",
+    fill: 'transparent'
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-info"
   }, props.children))));
-});
+};
+
 exports.ProgressCircle = ProgressCircle;

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

@@ -1,4 +1,4 @@
 import './pull-to-refresh.less';
 import { PullToRefresh } from './pull-to-refresh';
-export type { PullToRefreshProps } from './pull-to-refresh';
+export type { PullToRefreshProps, PullStatus } from './pull-to-refresh';
 export default PullToRefresh;

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

@@ -1,20 +1,22 @@
-import React, { ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
+export declare type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete';
 export declare type PullToRefreshProps = {
     onRefresh?: () => Promise<any>;
     pullingText?: ReactNode;
-    releaseText?: ReactNode;
+    canReleaseText?: ReactNode;
     refreshingText?: ReactNode;
     completeText?: ReactNode;
     completeDelay?: number;
     headHeight?: number;
     threshold?: number;
+    renderText?: (status: PullStatus) => ReactNode;
 };
 export declare const defaultProps: {
     pullingText: string;
-    releaseText: string;
+    canReleaseText: string;
     refreshingText: string;
     completeText: string;
     completeDelay: number;
     onRefresh: () => void;
 };
-export declare const PullToRefresh: React.FC<PullToRefreshProps>;
+export declare const PullToRefresh: FC<PullToRefreshProps>;