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

package/cjs/components/swipe-action/swipe-action.js

@@ -11,7 +11,7 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _web = require("@react-spring/web");
 
-var _reactUseGesture = require("react-use-gesture");
+var _react2 = require("@use-gesture/react");
 
 var _button = _interopRequireDefault(require("../button"));
 
@@ -28,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var defaultProps = {
   rightActions: [],
   leftActions: [],
-  closeOnTouchAway: true,
+  closeOnTouchOutside: true,
   closeOnAction: true
 };
 var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
@@ -64,19 +64,19 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
       api = _useSpring[1];
 
   var draggingRef = (0, _react.useRef)(false);
-  var bind = (0, _reactUseGesture.useDrag)(function (state) {
+  var bind = (0, _react2.useDrag)(function (state) {
     draggingRef.current = true;
-    var _state$movement = state.movement,
-        mx = _state$movement[0];
+    var _state$offset = state.offset,
+        offsetX = _state$offset[0];
 
     if (state.last) {
       var leftWidth = getLeftWidth();
       var rightWidth = getRightWidth();
-      var position = mx + state.vxvy[0] * 50;
+      var position = offsetX + state.velocity[0] * state.direction[0] * 50;
 
-      if (mx > 0) {
+      if (offsetX > 0) {
         position = Math.max(0, position);
-      } else if (mx < 0) {
+      } else if (offsetX < 0) {
         position = Math.min(0, position);
       } else {
         position = 0;
@@ -90,12 +90,12 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
       });
     } else {
       api.start({
-        x: mx,
+        x: offsetX,
         immediate: true
       });
     }
   }, {
-    initial: function initial() {
+    from: function from() {
       return [x.get(), 0];
     },
     bounds: function bounds() {
@@ -108,7 +108,10 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     },
     // rubberband: true,
     axis: 'x',
-    experimental_preventWindowScrollY: true
+    preventScroll: true,
+    pointer: {
+      touch: true
+    }
   });
 
   function close() {
@@ -126,7 +129,7 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
 
         if (side === 'right') {
           api.start({
-            x: getRightWidth()
+            x: -getRightWidth()
           });
         } else if (side === 'left') {
           api.start({
@@ -138,7 +141,7 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     };
   });
   (0, _react.useEffect)(function () {
-    if (!props.closeOnTouchAway) return;
+    if (!props.closeOnTouchOutside) return;
 
     function handle(e) {
       if (x.get() === 0) {
@@ -152,11 +155,11 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
       }
     }
 
-    document.addEventListener('pointerdown', handle);
+    document.addEventListener('touchstart', handle);
     return function () {
-      document.removeEventListener('pointerdown', handle);
+      document.removeEventListener('touchstart', handle);
     };
-  }, [props.closeOnTouchAway]);
+  }, [props.closeOnTouchOutside]);
 
   function renderAction(action) {
     var _a, _b;
@@ -168,14 +171,14 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
       style: {
         '--background-color': (_b = colorRecord[color]) !== null && _b !== void 0 ? _b : color
       },
-      onClick: function onClick() {
+      onClick: function onClick(e) {
         var _a, _b;
 
         if (props.closeOnAction) {
           close();
         }
 
-        (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+        (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
         (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action);
       }
     }, action.text);

package/cjs/components/swiper/index.d.ts

@@ -7,11 +7,16 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     autoplay?: boolean | undefined;
     autoplayInterval?: number | undefined;
     loop?: boolean | undefined;
+    direction?: "horizontal" | "vertical" | undefined;
     onIndexChange?: ((index: number) => void) | undefined;
-    indicatorProps?: Pick<import("../page-indicator").PageIndicatorProps, "color" | "style" | "className"> | undefined;
+    indicatorProps?: Pick<import("../page-indicator").PageIndicatorProps, "style" | "color" | "className"> | undefined;
     indicator?: ((total: number, current: number) => import("react").ReactNode) | undefined;
+    slideSize?: number | undefined;
+    trackOffset?: number | undefined;
+    stuckAtBoundary?: boolean | undefined;
+    rubberband?: boolean | undefined;
     children?: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>[] | undefined;
-} & import("../../utils/native-props").NativeProps<"--border-radius" | "--height" | "--width" | "--slide-width" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
+} & import("../../utils/native-props").NativeProps<"--border-radius" | "--height" | "--width" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
     Item: import("react").FC<{
         onClick?: ((e: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
     } & import("../../utils/native-props").NativeProps<never>>;

package/cjs/components/swiper/swiper.css

@@ -1,19 +1,21 @@
 .adm-swiper {
   --height: auto;
   --width: 100%;
-  --slide-width: 100%;
   --border-radius: 0;
   --track-padding: 0;
+  --slide-size: 100%;
+  --track-offset: 0%;
   display: block;
   width: var(--width);
   height: var(--height);
   position: relative;
   border-radius: var(--border-radius);
   z-index: 0;
+  overflow: hidden;
 }
 .adm-swiper-track {
   width: 100%;
-  overflow: hidden;
+  height: 100%;
   white-space: nowrap;
   padding: var(--track-padding);
 }
@@ -21,18 +23,13 @@
   cursor: grab;
 }
 .adm-swiper-track-inner {
-  width: var(--slide-width);
+  width: 100%;
+  height: 100%;
   overflow: visible;
   position: relative;
   display: flex;
   flex-wrap: nowrap;
 }
-.adm-swiper-indicator {
-  position: absolute;
-  bottom: 6px;
-  left: 50%;
-  transform: translateX(-50%);
-}
 .adm-swiper-slide {
   width: 100%;
   height: 100%;
@@ -44,5 +41,38 @@
 .adm-swiper-item {
   display: block;
   width: 100%;
-  height: auto;
+  height: 100%;
+  white-space: normal;
+}
+.adm-swiper-horizontal .adm-swiper-track-allow-touch-move {
+  touch-action: pan-y;
+}
+.adm-swiper-horizontal .adm-swiper-indicator {
+  position: absolute;
+  bottom: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.adm-swiper-horizontal .adm-swiper-track {
+  transform: translateX(var(--track-offset));
+}
+.adm-swiper-horizontal .adm-swiper-track-inner {
+  flex-direction: row;
+  width: var(--slide-size);
+}
+.adm-swiper-vertical .adm-swiper-track-allow-touch-move {
+  touch-action: pan-x;
+}
+.adm-swiper-vertical .adm-swiper-indicator {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.adm-swiper-vertical .adm-swiper-track {
+  transform: translateY(var(--track-offset));
+}
+.adm-swiper-vertical .adm-swiper-track-inner {
+  flex-direction: column;
+  height: var(--slide-size);
 }

package/cjs/components/swiper/swiper.d.ts

@@ -12,19 +12,29 @@ export declare type SwiperProps = {
     autoplay?: boolean;
     autoplayInterval?: number;
     loop?: boolean;
+    direction?: 'horizontal' | 'vertical';
     onIndexChange?: (index: number) => void;
     indicatorProps?: Pick<PageIndicatorProps, 'color' | 'style' | 'className'>;
     indicator?: (total: number, current: number) => ReactNode;
+    slideSize?: number;
+    trackOffset?: number;
+    stuckAtBoundary?: boolean;
+    rubberband?: boolean;
     children?: ReactElement | ReactElement[];
-} & NativeProps<'--height' | '--width' | '--slide-width' | '--border-radius' | '--track-padding'>;
+} & NativeProps<'--height' | '--width' | '--border-radius' | '--track-padding'>;
 export declare const Swiper: React.ForwardRefExoticComponent<{
     defaultIndex?: number | undefined;
     allowTouchMove?: boolean | undefined;
     autoplay?: boolean | undefined;
     autoplayInterval?: number | undefined;
     loop?: boolean | undefined;
+    direction?: "horizontal" | "vertical" | undefined;
     onIndexChange?: ((index: number) => void) | undefined;
-    indicatorProps?: Pick<PageIndicatorProps, "color" | "style" | "className"> | undefined;
+    indicatorProps?: Pick<PageIndicatorProps, "style" | "color" | "className"> | undefined;
     indicator?: ((total: number, current: number) => ReactNode) | undefined;
+    slideSize?: number | undefined;
+    trackOffset?: number | undefined;
+    stuckAtBoundary?: boolean | undefined;
+    rubberband?: boolean | undefined;
     children?: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>[] | undefined;
-} & NativeProps<"--border-radius" | "--height" | "--width" | "--slide-width" | "--track-padding"> & React.RefAttributes<SwiperRef>>;
+} & NativeProps<"--border-radius" | "--height" | "--width" | "--track-padding"> & React.RefAttributes<SwiperRef>>;

package/cjs/components/swiper/swiper.js

@@ -19,7 +19,7 @@ var _devLog = require("../../utils/dev-log");
 
 var _web = require("@react-spring/web");
 
-var _reactUseGesture = require("react-use-gesture");
+var _react2 = require("@use-gesture/react");
 
 var _pageIndicator = _interopRequireDefault(require("../page-indicator"));
 
@@ -40,10 +40,18 @@ var defaultProps = {
   allowTouchMove: true,
   autoplay: false,
   autoplayInterval: 3000,
-  loop: true
+  loop: false,
+  direction: 'horizontal',
+  slideSize: 100,
+  trackOffset: 0,
+  stuckAtBoundary: true,
+  rubberband: true
 };
 var Swiper = /*#__PURE__*/(0, _react.forwardRef)((0, _stagedComponents.staged)(function (p, ref) {
   var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var isVertical = props.direction === 'vertical';
+  var slideRatio = props.slideSize / 100;
+  var offsetRatio = props.trackOffset / 100;
 
   var _useMemo = (0, _react.useMemo)(function () {
     var count = 0;
@@ -68,7 +76,7 @@ var Swiper = /*#__PURE__*/(0, _react.forwardRef)((0, _stagedComponents.staged)(f
       validChildren = _useMemo.validChildren,
       count = _useMemo.count;
 
-  if (count === 0) {
+  if (count === 0 || !validChildren) {
     (0, _devLog.devWarning)('Swiper', '`Swiper` needs at least one child.');
     return null;
   }
@@ -76,17 +84,17 @@ var Swiper = /*#__PURE__*/(0, _react.forwardRef)((0, _stagedComponents.staged)(f
   return function () {
     var loop = props.loop;
 
-    if (count === 1 && loop) {
-      (0, _devLog.devWarning)('Swiper', '`Swiper` needs at least two children to enable loop.');
+    if (slideRatio * (count - 1) < 1) {
       loop = false;
     }
 
     var trackRef = (0, _react.useRef)(null);
 
-    function getWidth() {
+    function getSlidePixels() {
       var track = trackRef.current;
       if (!track) return 0;
-      return track.offsetWidth;
+      var trackPixels = isVertical ? track.offsetHeight : track.offsetWidth;
+      return trackPixels * props.slideSize / 100;
     }
 
     var _useState = (0, _react.useState)(props.defaultIndex),
@@ -98,72 +106,100 @@ var Swiper = /*#__PURE__*/(0, _react.forwardRef)((0, _stagedComponents.staged)(f
         setDragging = _useRefState[1],
         draggingRef = _useRefState[2];
 
+    function boundIndex(current) {
+      var min = 0;
+      var max = count - 1;
+
+      if (props.stuckAtBoundary) {
+        min += offsetRatio / slideRatio;
+        max -= (1 - slideRatio - offsetRatio) / slideRatio;
+      }
+
+      return (0, _bound.bound)(current, min, max);
+    }
+
     var _useSpring = (0, _web.useSpring)(function () {
       return {
-        x: (0, _bound.bound)(current, 0, count - 1) * 100,
+        position: boundIndex(current) * 100,
         config: {
           tension: 200,
           friction: 30
         },
         onRest: function onRest() {
           if (draggingRef.current) return;
-          var rawX = x.get();
+          var rawX = position.get();
           var totalWidth = 100 * count;
-          var standardX = modulus(rawX, totalWidth);
-          if (standardX === rawX) return;
+          var standardPosition = modulus(rawX, totalWidth);
+          if (standardPosition === rawX) return;
           api.start({
-            x: standardX,
+            position: standardPosition,
             immediate: true
           });
         }
       };
     }, [count]),
-        x = _useSpring[0].x,
+        position = _useSpring[0].position,
         api = _useSpring[1];
 
-    var bind = (0, _reactUseGesture.useDrag)(function (state) {
-      var width = getWidth();
-      if (!width) return;
-      var _state$movement = state.movement,
-          mx = _state$movement[0];
+    var bind = (0, _react2.useDrag)(function (state) {
+      var slidePixels = getSlidePixels();
+      if (!slidePixels) return;
+      var paramIndex = isVertical ? 1 : 0;
+      var offset = state.offset[paramIndex];
+      var direction = state.direction[paramIndex];
+      var velocity = state.velocity[paramIndex];
+      setDragging(true);
 
-      if (state.last) {
-        window.setTimeout(function () {
-          setDragging(false);
-        });
-        var index = Math.round((mx + state.vxvy[0] * 100) / width);
-        swipeTo(index);
-      } else {
-        setDragging(true);
+      if (!state.last) {
         api.start({
-          x: mx * 100 / width,
+          position: offset * 100 / slidePixels,
           immediate: true
         });
+      } else {
+        var minIndex = Math.floor(offset / slidePixels);
+        var maxIndex = minIndex + 1;
+        var index = Math.round((offset + velocity * 2000 * direction) / slidePixels);
+        swipeTo((0, _bound.bound)(index, minIndex, maxIndex));
+        window.setTimeout(function () {
+          setDragging(false);
+        });
       }
     }, {
       transform: function transform(_ref) {
         var x = _ref[0],
             y = _ref[1];
-        return [-x, y];
+        return [-x, -y];
       },
-      initial: function initial() {
-        var width = getWidth();
-        return [x.get() / 100 * width, 0];
+      from: function from() {
+        var slidePixels = getSlidePixels();
+        return [position.get() / 100 * slidePixels, position.get() / 100 * slidePixels];
       },
       bounds: function bounds() {
         if (loop) return {};
-        var width = getWidth();
-        return {
-          left: 0,
-          right: (count - 1) * width
+        var slidePixels = getSlidePixels();
+        var lowerBound = boundIndex(0) * slidePixels;
+        var upperBound = boundIndex(count - 1) * slidePixels;
+        return isVertical ? {
+          top: lowerBound,
+          bottom: upperBound
+        } : {
+          left: lowerBound,
+          right: upperBound
         };
       },
-      rubberband: true,
-      axis: 'x',
-      experimental_preventWindowScrollY: true
+      rubberband: props.rubberband,
+      axis: isVertical ? 'y' : 'x',
+      preventScroll: !isVertical,
+      pointer: {
+        touch: true
+      }
     });
 
-    function swipeTo(index) {
+    function swipeTo(index, immediate) {
+      if (immediate === void 0) {
+        immediate = false;
+      }
+
       var _a, _b;
 
       if (loop) {
@@ -171,7 +207,8 @@ var Swiper = /*#__PURE__*/(0, _react.forwardRef)((0, _stagedComponents.staged)(f
         setCurrent(i);
         (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, i);
         api.start({
-          x: index * 100
+          position: index * 100,
+          immediate: immediate
         });
       } else {
         var _i = (0, _bound.bound)(index, 0, count - 1);
@@ -179,17 +216,18 @@ var Swiper = /*#__PURE__*/(0, _react.forwardRef)((0, _stagedComponents.staged)(f
         setCurrent(_i);
         (_b = props.onIndexChange) === null || _b === void 0 ? void 0 : _b.call(props, _i);
         api.start({
-          x: _i * 100
+          position: boundIndex(_i) * 100,
+          immediate: immediate
         });
       }
     }
 
     function swipeNext() {
-      swipeTo(Math.round(x.get() / 100) + 1);
+      swipeTo(Math.round(position.get() / 100) + 1);
     }
 
     function swipePrev() {
-      swipeTo(Math.round(x.get() / 100) - 1);
+      swipeTo(Math.round(position.get() / 100) - 1);
     }
 
     (0, _react.useImperativeHandle)(ref, function () {
@@ -199,6 +237,13 @@ var Swiper = /*#__PURE__*/(0, _react.forwardRef)((0, _stagedComponents.staged)(f
         swipePrev: swipePrev
       };
     });
+    (0, _react.useLayoutEffect)(function () {
+      var maxIndex = validChildren.length - 1;
+
+      if (current > maxIndex) {
+        swipeTo(maxIndex, true);
+      }
+    });
     var autoplay = props.autoplay,
         autoplayInterval = props.autoplayInterval;
     (0, _react.useEffect)(function () {
@@ -210,43 +255,64 @@ var Swiper = /*#__PURE__*/(0, _react.forwardRef)((0, _stagedComponents.staged)(f
         window.clearInterval(interval);
       };
     }, [autoplay, autoplayInterval, dragging]);
+
+    function renderTrackInner() {
+      if (loop) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: 'adm-swiper-track-inner'
+        }, _react["default"].Children.map(validChildren, function (child, index) {
+          var _style;
+
+          return /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
+            className: 'adm-swiper-slide',
+            style: (_style = {}, _style[isVertical ? 'y' : 'x'] = position.to(function (position) {
+              var finalPosition = -position + index * 100;
+              var totalWidth = count * 100;
+              var flagWidth = totalWidth / 2;
+              finalPosition = modulus(finalPosition + flagWidth, totalWidth) - flagWidth;
+              return finalPosition + "%";
+            }), _style[isVertical ? 'top' : 'left'] = "-" + index * 100 + "%", _style)
+          }, child);
+        }));
+      } else {
+        var _style2;
+
+        return /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
+          className: 'adm-swiper-track-inner',
+          style: (_style2 = {}, _style2[isVertical ? 'y' : 'x'] = position.to(function (position) {
+            return -position + "%";
+          }), _style2)
+        }, _react["default"].Children.map(validChildren, function (child, index) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: 'adm-swiper-slide'
+          }, child);
+        }));
+      }
+    }
+
+    var style = {
+      '--slide-size': props.slideSize + "%",
+      '--track-offset': props.trackOffset + "%"
+    };
     return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-      className: 'adm-swiper'
+      className: (0, _classnames["default"])('adm-swiper', "adm-swiper-" + props.direction),
+      style: style
     }, /*#__PURE__*/_react["default"].createElement("div", Object.assign({
+      ref: trackRef,
       className: (0, _classnames["default"])('adm-swiper-track', {
         'adm-swiper-track-allow-touch-move': props.allowTouchMove
       }),
       onClickCapture: function onClickCapture(e) {
         if (draggingRef.current) {
           e.stopPropagation();
-          e.preventDefault();
         }
       }
-    }, props.allowTouchMove ? bind() : {}), /*#__PURE__*/_react["default"].createElement("div", {
-      className: 'adm-swiper-track-inner',
-      ref: trackRef
-    }, _react["default"].Children.map(validChildren, function (child, index) {
-      return /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
-        className: 'adm-swiper-slide',
-        style: {
-          x: x.to(function (x) {
-            var position = -x + index * 100;
-
-            if (loop) {
-              var totalWidth = count * 100;
-              position = modulus(position + 100, totalWidth) - 100;
-            }
-
-            return position + "%";
-          }),
-          left: "-" + index * 100 + "%"
-        }
-      }, child);
-    }))), props.indicator === undefined ? /*#__PURE__*/_react["default"].createElement("div", {
+    }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? /*#__PURE__*/_react["default"].createElement("div", {
       className: 'adm-swiper-indicator'
     }, /*#__PURE__*/_react["default"].createElement(_pageIndicator["default"], Object.assign({}, props.indicatorProps, {
       total: count,
-      current: current
+      current: current,
+      direction: props.direction
     }))) : props.indicator(count, current)));
   };
 }));

package/cjs/components/switch/switch.d.ts

@@ -5,6 +5,7 @@ export declare type SwitchProps = {
     disabled?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
+    beforeChange?: (val: boolean) => Promise<void>;
     onChange?: (checked: boolean) => void;
     checkedText?: ReactNode;
     uncheckedText?: ReactNode;