antd-mobile 5.0.0-rc.9 → 5.2.0

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

@@ -5,20 +5,20 @@ import { useDrag } from '@use-gesture/react';
 import Button from '../button';
 import { nearest } from '../../utils/nearest';
 import { withNativeProps } from '../../utils/native-props';
-var defaultProps = {
+const defaultProps = {
   rightActions: [],
   leftActions: [],
   closeOnTouchOutside: true,
   closeOnAction: true
 };
-export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
-  var props = mergeProps(defaultProps, p);
-  var rootRef = useRef(null);
-  var leftRef = useRef(null);
-  var rightRef = useRef(null);
+export const SwipeAction = forwardRef((p, ref) => {
+  const props = mergeProps(defaultProps, p);
+  const rootRef = useRef(null);
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
 
   function getWidth(ref) {
-    var element = ref.current;
+    const element = ref.current;
     if (!element) return 0;
     return element.offsetWidth;
   }
@@ -31,28 +31,24 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
     return getWidth(rightRef);
   }
 
-  var _useSpring = useSpring(function () {
-    return {
-      x: 0,
-      config: {
-        tension: 200,
-        friction: 30
-      }
-    };
-  }, []),
-      x = _useSpring[0].x,
-      api = _useSpring[1];
-
-  var draggingRef = useRef(false);
-  var bind = useDrag(function (state) {
+  const [{
+    x
+  }, api] = useSpring(() => ({
+    x: 0,
+    config: {
+      tension: 200,
+      friction: 30
+    }
+  }), []);
+  const draggingRef = useRef(false);
+  const bind = useDrag(state => {
     draggingRef.current = true;
-    var _state$offset = state.offset,
-        offsetX = _state$offset[0];
+    const [offsetX] = state.offset;
 
     if (state.last) {
-      var leftWidth = getLeftWidth();
-      var rightWidth = getRightWidth();
-      var position = offsetX + state.velocity[0] * state.direction[0] * 50;
+      const leftWidth = getLeftWidth();
+      const rightWidth = getRightWidth();
+      let position = offsetX + state.velocity[0] * state.direction[0] * 50;
 
       if (offsetX > 0) {
         position = Math.max(0, position);
@@ -65,7 +61,7 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
       api.start({
         x: nearest([-rightWidth, 0, leftWidth], position)
       });
-      window.setTimeout(function () {
+      window.setTimeout(() => {
         draggingRef.current = false;
       });
     } else {
@@ -75,12 +71,10 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
       });
     }
   }, {
-    from: function from() {
-      return [x.get(), 0];
-    },
-    bounds: function bounds() {
-      var leftWidth = getLeftWidth();
-      var rightWidth = getRightWidth();
+    from: () => [x.get(), 0],
+    bounds: () => {
+      const leftWidth = getLeftWidth();
+      const rightWidth = getRightWidth();
       return {
         left: -rightWidth,
         right: leftWidth
@@ -100,27 +94,21 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
     });
   }
 
-  useImperativeHandle(ref, function () {
-    return {
-      show: function show(side) {
-        if (side === void 0) {
-          side = 'right';
-        }
-
-        if (side === 'right') {
-          api.start({
-            x: -getRightWidth()
-          });
-        } else if (side === 'left') {
-          api.start({
-            x: getLeftWidth()
-          });
-        }
-      },
-      close: close
-    };
-  });
-  useEffect(function () {
+  useImperativeHandle(ref, () => ({
+    show: (side = 'right') => {
+      if (side === 'right') {
+        api.start({
+          x: -getRightWidth()
+        });
+      } else if (side === 'left') {
+        api.start({
+          x: getLeftWidth()
+        });
+      }
+    },
+    close
+  }));
+  useEffect(() => {
     if (!props.closeOnTouchOutside) return;
 
     function handle(e) {
@@ -128,7 +116,7 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
         return;
       }
 
-      var root = rootRef.current;
+      const root = rootRef.current;
 
       if (root && !root.contains(e.target)) {
         close();
@@ -136,7 +124,7 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
     }
 
     document.addEventListener('touchstart', handle);
-    return function () {
+    return () => {
       document.removeEventListener('touchstart', handle);
     };
   }, [props.closeOnTouchOutside]);
@@ -144,14 +132,14 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
   function renderAction(action) {
     var _a, _b;
 
-    var color = (_a = action.color) !== null && _a !== void 0 ? _a : 'light';
-    return /*#__PURE__*/React.createElement(Button, {
+    const color = (_a = action.color) !== null && _a !== void 0 ? _a : 'light';
+    return React.createElement(Button, {
       key: action.key,
       className: 'adm-swipe-action-action-button',
       style: {
         '--background-color': (_b = colorRecord[color]) !== null && _b !== void 0 ? _b : color
       },
-      onClick: function onClick(e) {
+      onClick: e => {
         var _a, _b;
 
         if (props.closeOnAction) {
@@ -159,32 +147,32 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
         }
 
         (_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);
+        (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, e);
       }
     }, action.text);
   }
 
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", Object.assign({
+  return withNativeProps(props, React.createElement("div", Object.assign({
     className: 'adm-swipe-action'
   }, bind(), {
     ref: rootRef,
-    onClickCapture: function onClickCapture(e) {
+    onClickCapture: e => {
       if (draggingRef.current) {
         e.stopPropagation();
         e.preventDefault();
       }
     }
-  }), /*#__PURE__*/React.createElement(animated.div, {
+  }), React.createElement(animated.div, {
     className: 'adm-swipe-action-track',
     style: {
-      x: x
+      x
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, React.createElement("div", {
     className: 'adm-swipe-action-actions adm-swipe-action-actions-left',
     ref: leftRef
-  }, props.leftActions.map(renderAction)), /*#__PURE__*/React.createElement("div", {
+  }, props.leftActions.map(renderAction)), React.createElement("div", {
     className: 'adm-swipe-action-content',
-    onClickCapture: function onClickCapture(e) {
+    onClickCapture: e => {
       if (x.goal !== 0) {
         e.preventDefault();
         e.stopPropagation();
@@ -193,18 +181,16 @@ export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
         });
       }
     }
-  }, /*#__PURE__*/React.createElement(animated.div, {
+  }, React.createElement(animated.div, {
     style: {
-      pointerEvents: x.to(function (v) {
-        return v !== 0 && x.goal !== 0 ? 'none' : 'unset';
-      })
+      pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'unset')
     }
-  }, props.children)), /*#__PURE__*/React.createElement("div", {
+  }, props.children)), React.createElement("div", {
     className: 'adm-swipe-action-actions adm-swipe-action-actions-right',
     ref: rightRef
   }, props.rightActions.map(renderAction)))));
 });
-var colorRecord = {
+const colorRecord = {
   light: 'var(--adm-color-light)',
   weak: 'var(--adm-color-weak)',
   primary: 'var(--adm-color-primary)',

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

@@ -16,7 +16,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     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" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
+} & import("../../utils/native-props").NativeProps<"--border-radius" | "--width" | "--height" | "--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/es/components/swiper/swiper-item.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
-export var SwiperItem = function SwiperItem(props) {
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+export const SwiperItem = props => {
+  return withNativeProps(props, React.createElement("div", {
     className: 'adm-swiper-item',
     onClick: props.onClick
   }, props.children));

package/es/components/swiper/swiper.d.ts

@@ -37,4 +37,4 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     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" | "--track-padding"> & React.RefAttributes<SwiperRef>>;
+} & NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & React.RefAttributes<SwiperRef>>;

package/es/components/swiper/swiper.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
@@ -10,7 +10,8 @@ import PageIndicator from '../page-indicator';
 import { staged } from 'staged-components';
 import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
-var defaultProps = {
+import { useIsomorphicLayoutEffect, useUpdateEffect } from 'ahooks';
+const defaultProps = {
   defaultIndex: 0,
   allowTouchMove: true,
   autoplay: false,
@@ -22,16 +23,18 @@ var defaultProps = {
   stuckAtBoundary: true,
   rubberband: true
 };
-export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
-  var props = mergeProps(defaultProps, p);
-  var isVertical = props.direction === 'vertical';
-  var slideRatio = props.slideSize / 100;
-  var offsetRatio = props.trackOffset / 100;
-
-  var _useMemo = useMemo(function () {
-    var count = 0;
-    var validChildren = React.Children.map(props.children, function (child) {
-      if (! /*#__PURE__*/React.isValidElement(child)) return null;
+export const Swiper = forwardRef(staged((p, ref) => {
+  const props = mergeProps(defaultProps, p);
+  const isVertical = props.direction === 'vertical';
+  const slideRatio = props.slideSize / 100;
+  const offsetRatio = props.trackOffset / 100;
+  const {
+    validChildren,
+    count
+  } = useMemo(() => {
+    let count = 0;
+    const validChildren = React.Children.map(props.children, child => {
+      if (!React.isValidElement(child)) return null;
 
       if (child.type !== SwiperItem) {
         devWarning('Swiper', 'The children of `Swiper` must be `Swiper.Item` components.');
@@ -42,46 +45,43 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
       return child;
     });
     return {
-      validChildren: validChildren,
-      count: count
+      validChildren,
+      count
     };
-  }, [props.children]),
-      validChildren = _useMemo.validChildren,
-      count = _useMemo.count;
+  }, [props.children]);
 
   if (count === 0 || !validChildren) {
     devWarning('Swiper', '`Swiper` needs at least one child.');
     return null;
   }
 
-  return function () {
-    var loop = props.loop;
+  return () => {
+    let loop = props.loop;
 
     if (slideRatio * (count - 1) < 1) {
       loop = false;
     }
 
-    var trackRef = useRef(null);
+    const trackRef = useRef(null);
 
     function getSlidePixels() {
-      var track = trackRef.current;
+      const track = trackRef.current;
       if (!track) return 0;
-      var trackPixels = isVertical ? track.offsetHeight : track.offsetWidth;
+      const trackPixels = isVertical ? track.offsetHeight : track.offsetWidth;
       return trackPixels * props.slideSize / 100;
     }
 
-    var _useState = useState(props.defaultIndex),
-        current = _useState[0],
-        setCurrent = _useState[1];
+    const [current, setCurrent] = useState(props.defaultIndex);
+    useUpdateEffect(() => {
+      var _a;
 
-    var _useRefState = useRefState(false),
-        dragging = _useRefState[0],
-        setDragging = _useRefState[1],
-        draggingRef = _useRefState[2];
+      (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, current);
+    }, [current]);
+    const [dragging, setDragging, draggingRef] = useRefState(false);
 
     function boundIndex(current) {
-      var min = 0;
-      var max = count - 1;
+      let min = 0;
+      let max = count - 1;
 
       if (props.stuckAtBoundary) {
         min += offsetRatio / slideRatio;
@@ -91,36 +91,33 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
       return bound(current, min, max);
     }
 
-    var _useSpring = useSpring(function () {
-      return {
-        position: boundIndex(current) * 100,
-        config: {
-          tension: 200,
-          friction: 30
-        },
-        onRest: function onRest() {
-          if (draggingRef.current) return;
-          var rawX = position.get();
-          var totalWidth = 100 * count;
-          var standardPosition = modulus(rawX, totalWidth);
-          if (standardPosition === rawX) return;
-          api.start({
-            position: standardPosition,
-            immediate: true
-          });
-        }
-      };
-    }, [count]),
-        position = _useSpring[0].position,
-        api = _useSpring[1];
-
-    var bind = useDrag(function (state) {
-      var slidePixels = getSlidePixels();
+    const [{
+      position
+    }, api] = useSpring(() => ({
+      position: boundIndex(current) * 100,
+      config: {
+        tension: 200,
+        friction: 30
+      },
+      onRest: () => {
+        if (draggingRef.current) return;
+        const rawX = position.get();
+        const totalWidth = 100 * count;
+        const standardPosition = modulus(rawX, totalWidth);
+        if (standardPosition === rawX) return;
+        api.start({
+          position: standardPosition,
+          immediate: true
+        });
+      }
+    }), [count]);
+    const bind = useDrag(state => {
+      const 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];
+      const paramIndex = isVertical ? 1 : 0;
+      const offset = state.offset[paramIndex];
+      const direction = state.direction[paramIndex];
+      const velocity = state.velocity[paramIndex];
       setDragging(true);
 
       if (!state.last) {
@@ -129,29 +126,25 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
           immediate: true
         });
       } else {
-        var minIndex = Math.floor(offset / slidePixels);
-        var maxIndex = minIndex + 1;
-        var index = Math.round((offset + velocity * 2000 * direction) / slidePixels);
+        const minIndex = Math.floor(offset / slidePixels);
+        const maxIndex = minIndex + 1;
+        const index = Math.round((offset + velocity * 2000 * direction) / slidePixels);
         swipeTo(bound(index, minIndex, maxIndex));
-        window.setTimeout(function () {
+        window.setTimeout(() => {
           setDragging(false);
         });
       }
     }, {
-      transform: function transform(_ref) {
-        var x = _ref[0],
-            y = _ref[1];
-        return [-x, -y];
-      },
-      from: function from() {
-        var slidePixels = getSlidePixels();
+      transform: ([x, y]) => [-x, -y],
+      from: () => {
+        const slidePixels = getSlidePixels();
         return [position.get() / 100 * slidePixels, position.get() / 100 * slidePixels];
       },
-      bounds: function bounds() {
+      bounds: () => {
         if (loop) return {};
-        var slidePixels = getSlidePixels();
-        var lowerBound = boundIndex(0) * slidePixels;
-        var upperBound = boundIndex(count - 1) * slidePixels;
+        const slidePixels = getSlidePixels();
+        const lowerBound = boundIndex(0) * slidePixels;
+        const upperBound = boundIndex(count - 1) * slidePixels;
         return isVertical ? {
           top: lowerBound,
           bottom: upperBound
@@ -168,31 +161,14 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
       }
     });
 
-    function swipeTo(index, immediate) {
-      if (immediate === void 0) {
-        immediate = false;
-      }
-
-      var _a, _b;
-
-      if (loop) {
-        var i = modulus(index, count);
-        setCurrent(i);
-        (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, i);
-        api.start({
-          position: index * 100,
-          immediate: immediate
-        });
-      } else {
-        var _i = bound(index, 0, count - 1);
-
-        setCurrent(_i);
-        (_b = props.onIndexChange) === null || _b === void 0 ? void 0 : _b.call(props, _i);
-        api.start({
-          position: boundIndex(_i) * 100,
-          immediate: immediate
-        });
-      }
+    function swipeTo(index, immediate = false) {
+      const roundedIndex = Math.round(index);
+      const targetIndex = loop ? modulus(roundedIndex, count) : bound(roundedIndex, 0, count - 1);
+      setCurrent(targetIndex);
+      api.start({
+        position: (loop ? roundedIndex : boundIndex(roundedIndex)) * 100,
+        immediate
+      });
     }
 
     function swipeNext() {
@@ -203,86 +179,85 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
       swipeTo(Math.round(position.get() / 100) - 1);
     }
 
-    useImperativeHandle(ref, function () {
-      return {
-        swipeTo: swipeTo,
-        swipeNext: swipeNext,
-        swipePrev: swipePrev
-      };
-    });
-    useLayoutEffect(function () {
-      var maxIndex = validChildren.length - 1;
+    useImperativeHandle(ref, () => ({
+      swipeTo,
+      swipeNext,
+      swipePrev
+    }));
+    useIsomorphicLayoutEffect(() => {
+      const maxIndex = validChildren.length - 1;
 
       if (current > maxIndex) {
         swipeTo(maxIndex, true);
       }
     });
-    var autoplay = props.autoplay,
-        autoplayInterval = props.autoplayInterval;
-    useEffect(function () {
+    const {
+      autoplay,
+      autoplayInterval
+    } = props;
+    useEffect(() => {
       if (!autoplay || dragging) return;
-      var interval = window.setInterval(function () {
+      const interval = window.setInterval(() => {
         swipeNext();
       }, autoplayInterval);
-      return function () {
+      return () => {
         window.clearInterval(interval);
       };
     }, [autoplay, autoplayInterval, dragging]);
 
     function renderTrackInner() {
       if (loop) {
-        return /*#__PURE__*/React.createElement("div", {
+        return React.createElement("div", {
           className: 'adm-swiper-track-inner'
-        }, React.Children.map(validChildren, function (child, index) {
-          var _style;
-
-          return /*#__PURE__*/React.createElement(animated.div, {
+        }, React.Children.map(validChildren, (child, index) => {
+          return React.createElement(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)
+            style: {
+              [isVertical ? 'y' : 'x']: position.to(position => {
+                let finalPosition = -position + index * 100;
+                const totalWidth = count * 100;
+                const flagWidth = totalWidth / 2;
+                finalPosition = modulus(finalPosition + flagWidth, totalWidth) - flagWidth;
+                return `${finalPosition}%`;
+              }),
+              [isVertical ? 'top' : 'left']: `-${index * 100}%`
+            }
           }, child);
         }));
       } else {
-        var _style2;
-
-        return /*#__PURE__*/React.createElement(animated.div, {
+        return React.createElement(animated.div, {
           className: 'adm-swiper-track-inner',
-          style: (_style2 = {}, _style2[isVertical ? 'y' : 'x'] = position.to(function (position) {
-            return -position + "%";
-          }), _style2)
-        }, React.Children.map(validChildren, function (child, index) {
-          return /*#__PURE__*/React.createElement("div", {
+          style: {
+            [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
+          }
+        }, React.Children.map(validChildren, (child, index) => {
+          return React.createElement("div", {
             className: 'adm-swiper-slide'
           }, child);
         }));
       }
     }
 
-    var style = {
-      '--slide-size': props.slideSize + "%",
-      '--track-offset': props.trackOffset + "%"
+    const style = {
+      '--slide-size': `${props.slideSize}%`,
+      '--track-offset': `${props.trackOffset}%`
     };
-    return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-      className: classNames('adm-swiper', "adm-swiper-" + props.direction),
+    return withNativeProps(props, React.createElement("div", {
+      className: classNames('adm-swiper', `adm-swiper-${props.direction}`),
       style: style
-    }, /*#__PURE__*/React.createElement("div", Object.assign({
+    }, React.createElement("div", Object.assign({
       ref: trackRef,
       className: classNames('adm-swiper-track', {
         'adm-swiper-track-allow-touch-move': props.allowTouchMove
       }),
-      onClickCapture: function onClickCapture(e) {
+      onClickCapture: e => {
         if (draggingRef.current) {
           e.stopPropagation();
         }
       }
-    }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? /*#__PURE__*/React.createElement("div", {
+    }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? React.createElement("div", {
       className: 'adm-swiper-indicator'
-    }, /*#__PURE__*/React.createElement(PageIndicator, Object.assign({}, props.indicatorProps, {
+    }, React.createElement(PageIndicator, Object.assign({}, props.indicatorProps, {
       total: count,
       current: current,
       direction: props.direction
@@ -291,6 +266,6 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
 }));
 
 function modulus(value, division) {
-  var remainder = value % division;
+  const remainder = value % division;
   return remainder < 0 ? remainder + division : remainder;
 }