antd-mobile 5.0.0-rc.9 → 5.2.0

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

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

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

@@ -3,59 +3,51 @@ 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';
+import { Arrow } from './arrow';
+const classPrefix = `adm-popover`;
+const defaultProps = {
+  placement: 'top',
+  defaultVisible: false,
+  stopPropagation: ['click'],
+  getContainer: () => document.body
 };
-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, {
+    placement: props.placement,
+    align: props.align,
+    overlayClassName: classNames(`${classPrefix}-${mode}`, props.className),
+    overlayStyle: props.style,
     destroyTooltipOnHide: props.destroyOnHide,
     prefixCls: classPrefix,
-    getTooltipContainer: props.getContainer || function () {
-      return document.body;
-    },
+    getTooltipContainer: props.getContainer || (() => document.body),
     visible: visible,
+    arrowContent: React.createElement(Arrow, {
+      className: `${classPrefix}-arrow-icon`
+    }),
     onVisibleChange: setVisible,
-    trigger: props.trigger,
-    motion: {
-      motionName: {
-        appear: enterClassName,
-        appearActive: enterClassName,
-        enter: enterClassName,
-        enterActive: enterClassName,
-        leaveActive: leaveClassName,
-        leave: leaveClassName
-      },
-      motionDeadline: 200
-    },
-    overlay: /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-inner-content"
-    }, props.content)
+    trigger: (_a = props.trigger) !== null && _a !== void 0 ? _a : [],
+    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,7 +1,7 @@
 .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);
+  --fill-color: var(--adm-progress-bar-fill-color, var(--adm-color-primary));
 }
 
 .adm-progress-bar-trail {

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.css

@@ -1,10 +1,10 @@
 /*进度圈*/
 
 .adm-progress-circle {
-  --track-width: 6px;
-  --size: 100px;
-  --track-color: #e5e5e5;
-  --fill-color: #1677ff;
+  --track-width: var(--adm-progress-circle-track-width, 6px);
+  --size: var(--adm-progress-circle-size, 100px);
+  --track-color: var(--adm-progress-circle-track-color, #e5e5e5);
+  --fill-color: var(--adm-progress-circle-fill-color, var(--adm-color-primary));
   --percent: 0;
   --pi: 3.14159265;
   --radius: calc(var(--size) / 2 - var(--track-width) / 2);

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

@@ -1,29 +1,28 @@
 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({
-    percent: 0,
-    strokeColor: '#1677FF'
+const classPrefix = `adm-progress-circle`;
+export const ProgressCircle = p => {
+  const props = mergeProps({
+    percent: 0
   }, 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.js

@@ -1,180 +1,91 @@
-var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
+import { __awaiter } from "tslib";
 import { mergeProps } from '../../utils/with-default-props';
 import { animated, useSpring } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 import { getScrollParent } from '../../utils/get-scroll-parent';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { supportsPassive } from '../../utils/supports-passive';
 import { convertPx } from '../../utils/convert-px';
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { sleep } from '../../utils/sleep';
-var classPrefix = "adm-pull-to-refresh";
-export var defaultProps = {
+const classPrefix = `adm-pull-to-refresh`;
+export const defaultProps = {
   pullingText: '下拉刷新',
   canReleaseText: '释放立即刷新',
   refreshingText: '加载中……',
   completeText: '刷新成功',
   completeDelay: 500,
   disabled: false,
-  onRefresh: function onRefresh() {}
+  onRefresh: () => {}
 };
-export var PullToRefresh = function PullToRefresh(p) {
+export const PullToRefresh = p => {
   var _a, _b;
 
-  var props = mergeProps(defaultProps, p);
-  var headHeight = (_a = props.headHeight) !== null && _a !== void 0 ? _a : convertPx(40);
-  var threshold = (_b = props.threshold) !== null && _b !== void 0 ? _b : convertPx(60);
-
-  var _useState = useState('pulling'),
-      status = _useState[0],
-      setStatus = _useState[1];
+  const props = mergeProps(defaultProps, p);
+  const headHeight = (_a = props.headHeight) !== null && _a !== void 0 ? _a : convertPx(40);
+  const threshold = (_b = props.threshold) !== null && _b !== void 0 ? _b : convertPx(60);
+  const [status, setStatus] = useState('pulling');
+  const [springStyles, api] = useSpring(() => ({
+    from: {
+      height: 0
+    },
+    config: {
+      tension: 300,
+      friction: 30,
+      clamp: true
+    }
+  }));
+  const elementRef = useRef(null);
+  const pullingRef = useRef(false); //防止下拉时抖动
 
-  var _useSpring = useSpring(function () {
-    return {
-      from: {
-        height: 0
-      },
-      config: {
-        tension: 300,
-        friction: 30,
-        clamp: true
-      }
-    };
-  }),
-      springStyles = _useSpring[0],
-      api = _useSpring[1];
+  useEffect(() => {
+    var _a;
 
-  var elementRef = useRef(null);
-  var pullingRef = useRef(false);
+    (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('touchmove', () => {});
+  }, []);
 
   function doRefresh() {
-    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var _this = this;
-
-      return regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              api.start({
-                height: headHeight
-              });
-              setStatus('refreshing');
-              _context3.prev = 2;
-              _context3.next = 5;
-              return props.onRefresh();
-
-            case 5:
-              setStatus('complete');
-              _context3.next = 12;
-              break;
-
-            case 8:
-              _context3.prev = 8;
-              _context3.t0 = _context3["catch"](2);
-              api.start({
-                to: function to(next) {
-                  return __awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-                    return regeneratorRuntime.wrap(function _callee$(_context) {
-                      while (1) {
-                        switch (_context.prev = _context.next) {
-                          case 0:
-                            _context.next = 2;
-                            return next({
-                              height: 0
-                            });
-
-                          case 2:
-                            setStatus('pulling');
-
-                          case 3:
-                          case "end":
-                            return _context.stop();
-                        }
-                      }
-                    }, _callee);
-                  }));
-                }
-              });
-              throw _context3.t0;
-
-            case 12:
-              if (!(props.completeDelay > 0)) {
-                _context3.next = 15;
-                break;
-              }
+    return __awaiter(this, void 0, void 0, function* () {
+      api.start({
+        height: headHeight
+      });
+      setStatus('refreshing');
 
-              _context3.next = 15;
-              return sleep(props.completeDelay);
-
-            case 15:
-              api.start({
-                to: function to(next) {
-                  return __awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-                    return regeneratorRuntime.wrap(function _callee2$(_context2) {
-                      while (1) {
-                        switch (_context2.prev = _context2.next) {
-                          case 0:
-                            _context2.next = 2;
-                            return next({
-                              height: 0
-                            });
-
-                          case 2:
-                            setStatus('pulling');
+      try {
+        yield props.onRefresh();
+        setStatus('complete');
+      } catch (e) {
+        api.start({
+          to: next => __awaiter(this, void 0, void 0, function* () {
+            yield next({
+              height: 0
+            });
+            setStatus('pulling');
+          })
+        });
+        throw e;
+      }
 
-                          case 3:
-                          case "end":
-                            return _context2.stop();
-                        }
-                      }
-                    }, _callee2);
-                  }));
-                }
-              });
+      if (props.completeDelay > 0) {
+        yield sleep(props.completeDelay);
+      }
 
-            case 16:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3, null, [[2, 8]]);
-    }));
+      api.start({
+        to: next => __awaiter(this, void 0, void 0, function* () {
+          yield next({
+            height: 0
+          });
+          setStatus('pulling');
+        })
+      });
+    });
   }
 
-  useDrag(function (state) {
+  useDrag(state => {
     if (status === 'refreshing' || status === 'complete') return;
-    var event = state.event;
+    const {
+      event
+    } = state;
 
     if (state.last) {
       pullingRef.current = false;
@@ -190,15 +101,14 @@ export var PullToRefresh = function PullToRefresh(p) {
       return;
     }
 
-    var _state$movement = state.movement,
-        y = _state$movement[1];
+    const [, y] = state.movement;
 
     if (state.first) {
-      var element = elementRef.current;
+      const element = elementRef.current;
       if (!element) return;
-      var scrollParent = getScrollParent(element);
+      const scrollParent = getScrollParent(element);
       if (!scrollParent) return;
-      var top = 'scrollTop' in scrollParent ? scrollParent.scrollTop : scrollParent.pageYOffset;
+      const top = 'scrollTop' in scrollParent ? scrollParent.scrollTop : scrollParent.pageYOffset;
 
       if (top <= 0 && y > 0) {
         pullingRef.current = true;
@@ -212,9 +122,9 @@ export var PullToRefresh = function PullToRefresh(p) {
     }
 
     event.stopPropagation();
-    var height = Math.max(rubberbandIfOutOfBounds(y, 0, 0, headHeight * 5, 0.5), 0);
+    const height = Math.max(rubberbandIfOutOfBounds(y, 0, 0, headHeight * 5, 0.5), 0);
     api.start({
-      height: height
+      height
     });
     setStatus(height > threshold ? 'canRelease' : 'pulling');
   }, {
@@ -229,7 +139,7 @@ export var PullToRefresh = function PullToRefresh(p) {
     } : false
   });
 
-  var renderStatusText = function renderStatusText() {
+  const renderStatusText = () => {
     var _a;
 
     if (props.renderText) {
@@ -242,18 +152,18 @@ export var PullToRefresh = function PullToRefresh(p) {
     if (status === 'complete') return props.completeText;
   };
 
-  return /*#__PURE__*/React.createElement(animated.div, {
+  return React.createElement(animated.div, {
     ref: elementRef,
     className: classPrefix
-  }, /*#__PURE__*/React.createElement(animated.div, {
+  }, React.createElement(animated.div, {
     style: springStyles,
-    className: classPrefix + "-head"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-head-content",
+    className: `${classPrefix}-head`
+  }, React.createElement("div", {
+    className: `${classPrefix}-head-content`,
     style: {
       height: headHeight
     }
-  }, renderStatusText())), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-content"
+  }, renderStatusText())), React.createElement("div", {
+    className: `${classPrefix}-content`
   }, props.children));
 };

package/2x/es/components/radio/group-context.js

@@ -1,2 +1,2 @@
 import { createContext } from 'react';
-export var RadioGroupContext = /*#__PURE__*/createContext(null);
+export const RadioGroupContext = createContext(null);