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

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

@@ -1,12 +1,14 @@
 import classNames from 'classnames';
-import React, { useEffect, useState, useRef } from 'react';
-import { CSSTransition } from 'react-transition-group';
+import React, { useState, useRef } from 'react';
+import { useUnmountedRef } from 'ahooks';
 import { withNativeProps } from '../../utils/native-props';
-import { useInitialized } from '../../utils/use-initialized';
 import { mergeProps } from '../../utils/with-default-props';
 import Mask from '../mask';
 import { useLockScroll } from '../../utils/use-lock-scroll';
 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 = {
   position: 'bottom',
@@ -14,55 +16,85 @@ var defaultProps = {
   getContainer: function getContainer() {
     return document.body;
   },
-  mask: true
+  mask: true,
+  stopPropagation: ['click']
 };
 export var Popup = function Popup(p) {
-  var _classNames, _classNames2;
+  var props = mergeProps(defaultProps, p);
+  var bodyCls = classNames(classPrefix + "-body", props.bodyClassName, classPrefix + "-body-position-" + props.position);
+  var ref = useRef(null);
 
-  var props = mergeProps(defaultProps, p); // 动画执行完，才隐藏最外层
+  var _useState = useState(props.visible),
+      active = _useState[0],
+      setActive = _useState[1];
 
-  var _useState = useState(!props.visible),
-      hidden = _useState[0],
-      setHidden = _useState[1];
+  useLockScroll(ref, active);
+  var shouldRender = useShouldRender(active, props.forceRender, props.destroyOnClose);
+  var unmountedRef = useUnmountedRef();
 
-  useEffect(function () {
-    if (props.visible) {
-      setHidden(false);
-    }
-  }, [props.visible]);
+  var _useSpring = 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;
 
-  var afterClose = function afterClose() {
-    var _a;
+      if (unmountedRef.current) return;
+      setActive(props.visible);
 
-    setHidden(true);
-    (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-  };
+      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 cls = classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-hidden"] = hidden, _classNames));
-  var bodyCls = classNames(classPrefix + "-body", props.bodyClassName, (_classNames2 = {}, _classNames2[classPrefix + "-body-hidden"] = !props.visible, _classNames2), classPrefix + "-body-position-" + props.position);
-  var initialized = useInitialized(props.visible || props.forceRender);
-  var ref = useRef(null);
-  useLockScroll(ref, props.visible);
-  var node = withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: cls,
-    onClick: props.onClick
+  var node = withStopPropagation(props.stopPropagation, withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix,
+    onClick: props.onClick,
+    style: {
+      display: active ? 'unset' : 'none'
+    }
   }, props.mask && /*#__PURE__*/React.createElement(Mask, {
     visible: props.visible,
     onMaskClick: props.onMaskClick,
     className: props.maskClassName,
     style: props.maskStyle,
-    disableBodyScroll: false
-  }), /*#__PURE__*/React.createElement(CSSTransition, {
-    classNames: classPrefix + "-body",
-    "in": props.visible,
-    timeout: 200,
-    onEntered: props.afterShow,
-    onExited: afterClose,
-    unmountOnExit: props.destroyOnClose
-  }, /*#__PURE__*/React.createElement("div", {
+    disableBodyScroll: false,
+    stopPropagation: props.stopPropagation
+  }), /*#__PURE__*/React.createElement(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 renderToContainer(props.getContainer, node);
 };

package/2x/es/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/es/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/es/components/progress-bar/progress-bar.js

@@ -1,38 +1,20 @@
-import classNames from 'classnames';
 import React from 'react';
-import { convertPx } from '../../utils/convert-px';
 import { withNativeProps } from '../../utils/native-props';
-import { withDefaultProps } from '../../utils/with-default-props';
+import { mergeProps } from '../../utils/with-default-props';
 var classPrefix = "adm-progress-bar";
-export var ProgressBar = withDefaultProps({
-  percent: 0,
-  strokeColor: '#1677FF'
-})(function (props) {
-  var strokeWidth = props.strokeWidth;
-
-  if (strokeWidth === undefined) {
-    strokeWidth = 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'
+export var ProgressBar = function ProgressBar(p) {
+  var props = mergeProps({
+    percent: 0
+  }, p);
+  var fillStyle = {
+    width: props.percent + "%"
   };
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classPrefix
   }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-trail",
-    style: trailStyle
+    className: classPrefix + "-trail"
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix + "-path"),
-    style: pathStyle
+    className: classPrefix + "-fill",
+    style: fillStyle
   }))));
-});
+};

package/2x/es/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/es/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/es/components/progress-circle/progress-circle.js

@@ -1,41 +1,29 @@
 import React from 'react';
-import { Circle as RCProgressCircle } from 'rc-progress';
 import { withNativeProps } from '../../utils/native-props';
-import { withDefaultProps } from '../../utils/with-default-props';
-import { convertPx } from '../../utils/convert-px';
-var classPrefix = "adm-progress";
-export var ProgressCircle = withDefaultProps({
-  percent: 0,
-  strokeColor: '#1677FF'
-})(function (props) {
-  var strokeWidth = props.strokeWidth,
-      size = props.size;
-
-  if (strokeWidth === undefined) {
-    strokeWidth = convertPx(6);
-  }
-
-  if (size === undefined) {
-    size = convertPx(50);
-  }
-
-  var contentStyle = {
-    width: size + "px",
-    height: size + "px"
+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'
+  }, p);
+  var style = {
+    '--percent': props.percent.toString()
   };
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-circle-wrap"
+    className: "" + classPrefix,
+    style: style
   }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-circle-content",
-    style: contentStyle
-  }, /*#__PURE__*/React.createElement(RCProgressCircle, {
-    prefixCls: classPrefix,
-    percent: props.percent,
-    strokeWidth: strokeWidth,
-    trailWidth: strokeWidth,
-    trailColor: '#E5E5E5',
-    strokeColor: props.strokeColor
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-circle-info"
+    className: classPrefix + "-content"
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: classPrefix + "-svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: classPrefix + "-track",
+    fill: 'transparent'
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: classPrefix + "-fill",
+    fill: 'transparent'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-info"
   }, props.children))));
-});
+};

package/2x/es/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/es/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>;

package/2x/es/components/pull-to-refresh/pull-to-refresh.js

@@ -30,9 +30,9 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
   });
 };
 
-import { withDefaultProps } from '../../utils/with-default-props';
-import { useSpring, animated } from '@react-spring/web';
-import { useDrag } from 'react-use-gesture';
+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 { supportsPassive } from '../../utils/supports-passive';
@@ -40,30 +40,22 @@ import { convertPx } from '../../utils/convert-px';
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { sleep } from '../../utils/sleep';
 var classPrefix = "adm-pull-to-refresh";
-var PullStatus;
-
-(function (PullStatus) {
-  PullStatus[PullStatus["idle"] = 0] = "idle";
-  PullStatus[PullStatus["thresholdMet"] = 1] = "thresholdMet";
-  PullStatus[PullStatus["refreshing"] = 2] = "refreshing";
-  PullStatus[PullStatus["complete"] = 3] = "complete";
-})(PullStatus || (PullStatus = {}));
-
 export var defaultProps = {
   pullingText: '下拉刷新',
-  releaseText: '释放立即刷新',
+  canReleaseText: '释放立即刷新',
   refreshingText: '加载中……',
   completeText: '刷新成功',
   completeDelay: 500,
   onRefresh: function onRefresh() {}
 };
-export var PullToRefresh = withDefaultProps(defaultProps)(function (props) {
+export var PullToRefresh = function 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(PullStatus.idle),
+  var _useState = useState('pulling'),
       status = _useState[0],
       setStatus = _useState[1];
 
@@ -86,43 +78,29 @@ export var PullToRefresh = withDefaultProps(defaultProps)(function (props) {
   var pullingRef = useRef(false);
 
   function doRefresh() {
-    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
       var _this = this;
 
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
               api.start({
                 height: headHeight
               });
-              setStatus(PullStatus.refreshing);
-              setStatus(PullStatus.refreshing);
-              _context2.prev = 3;
-              _context2.next = 6;
+              setStatus('refreshing');
+              _context3.prev = 2;
+              _context3.next = 5;
               return props.onRefresh();
 
-            case 6:
-              setStatus(PullStatus.complete);
-              _context2.next = 13;
+            case 5:
+              setStatus('complete');
+              _context3.next = 12;
               break;
 
-            case 9:
-              _context2.prev = 9;
-              _context2.t0 = _context2["catch"](3);
-              setStatus(PullStatus.idle);
-              throw _context2.t0;
-
-            case 13:
-              if (!(props.completeDelay > 0)) {
-                _context2.next = 16;
-                break;
-              }
-
-              _context2.next = 16;
-              return sleep(props.completeDelay);
-
-            case 16:
+            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() {
@@ -136,41 +114,71 @@ export var PullToRefresh = withDefaultProps(defaultProps)(function (props) {
                             });
 
                           case 2:
-                            _context.next = 4;
+                            setStatus('pulling');
+
+                          case 3:
+                          case "end":
+                            return _context.stop();
+                        }
+                      }
+                    }, _callee);
+                  }));
+                }
+              });
+              throw _context3.t0;
+
+            case 12:
+              if (!(props.completeDelay > 0)) {
+                _context3.next = 15;
+                break;
+              }
+
+              _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 4:
-                            setStatus(PullStatus.idle);
+                          case 2:
+                            setStatus('pulling');
 
-                          case 5:
+                          case 3:
                           case "end":
-                            return _context.stop();
+                            return _context2.stop();
                         }
                       }
-                    }, _callee);
+                    }, _callee2);
                   }));
                 }
               });
 
-            case 17:
+            case 16:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2, null, [[3, 9]]);
+      }, _callee3, null, [[2, 8]]);
     }));
   }
 
   useDrag(function (state) {
-    if (status === PullStatus.refreshing || status === PullStatus.complete) return;
+    if (status === 'refreshing' || status === 'complete') return;
     var event = state.event;
 
     if (state.last) {
       pullingRef.current = false;
 
-      if (status === PullStatus.thresholdMet) {
+      if (status === 'canRelease') {
         doRefresh();
       } else {
         api.start({
@@ -182,7 +190,6 @@ export var PullToRefresh = withDefaultProps(defaultProps)(function (props) {
     }
 
     var _state$movement = state.movement,
-        x = _state$movement[0],
         y = _state$movement[1];
 
     if (state.first) {
@@ -199,7 +206,7 @@ export var PullToRefresh = withDefaultProps(defaultProps)(function (props) {
 
     if (!pullingRef.current) return;
 
-    if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    if (event.cancelable) {
       event.preventDefault();
     }
 
@@ -208,15 +215,31 @@ export var PullToRefresh = withDefaultProps(defaultProps)(function (props) {
     api.start({
       height: height
     });
-    setStatus(height > threshold ? PullStatus.thresholdMet : PullStatus.idle);
+    setStatus(height > threshold ? 'canRelease' : 'pulling');
   }, {
-    useTouch: true,
+    pointer: {
+      touch: true
+    },
     axis: 'y',
-    domTarget: elementRef,
+    target: elementRef,
     eventOptions: supportsPassive ? {
       passive: false
     } : false
   });
+
+  var renderStatusText = function renderStatusText() {
+    var _a;
+
+    if (props.renderText) {
+      return (_a = props.renderText) === null || _a === void 0 ? void 0 : _a.call(props, status);
+    }
+
+    if (status === 'pulling') return props.pullingText;
+    if (status === 'canRelease') return props.canReleaseText;
+    if (status === 'refreshing') return props.refreshingText;
+    if (status === 'complete') return props.completeText;
+  };
+
   return /*#__PURE__*/React.createElement(animated.div, {
     ref: elementRef,
     className: classPrefix
@@ -228,5 +251,7 @@ export var PullToRefresh = withDefaultProps(defaultProps)(function (props) {
     style: {
       height: headHeight
     }
-  }, status === PullStatus.idle && props.pullingText, status === PullStatus.thresholdMet && props.releaseText, status === PullStatus.refreshing && props.refreshingText, status === PullStatus.complete && props.completeText)), /*#__PURE__*/React.createElement("div", null, props.children));
-});
+  }, renderStatusText())), /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-content"
+  }, props.children));
+};

package/2x/es/components/radio/group.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { RadioValue } from '.';
 export interface RadioGroupProps {
     value?: RadioValue | null;
@@ -6,4 +6,4 @@ export interface RadioGroupProps {
     defaultValue?: RadioValue | null;
     disabled?: boolean;
 }
-export declare const Group: React.FC<RadioGroupProps>;
+export declare const Group: FC<RadioGroupProps>;