antd-mobile 5.29.1 → 5.31.0

package/es/components/popup/popup.js

@@ -13,8 +13,10 @@ import { CloseOutline } from 'antd-mobile-icons';
 import { defaultPopupBaseProps } from './popup-base-props';
 import { useInnerVisible } from '../../utils/use-inner-visible';
 import { useConfig } from '../config-provider';
+import { useDrag } from '@use-gesture/react';
 const classPrefix = `adm-popup`;
 const defaultProps = Object.assign(Object.assign({}, defaultPopupBaseProps), {
+  closeOnSwipe: false,
   position: 'bottom'
 });
 export const Popup = p => {
@@ -53,14 +55,27 @@ export const Popup = p => {
       }
     }
   });
+  const bind = useDrag(({
+    swipe: [, swipeY]
+  }) => {
+    var _a;
+    if (!props.closeOnSwipe) return;
+    if (swipeY === 1 && props.position === 'bottom' || swipeY === -1 && props.position === 'top') {
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, {
+    axis: 'y',
+    enabled: ['top', 'bottom'].includes(props.position)
+  });
   const maskVisible = useInnerVisible(active && props.visible);
-  const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
+  const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", Object.assign({
     className: classPrefix,
     onClick: props.onClick,
     style: {
-      display: active ? undefined : 'none'
+      display: active ? undefined : 'none',
+      touchAction: ['top', 'bottom'].includes(props.position) ? 'none' : 'auto'
     }
-  }, props.mask && React.createElement(Mask, {
+  }, bind()), props.mask && React.createElement(Mask, {
     visible: maskVisible,
     forceRender: props.forceRender,
     destroyOnClose: props.destroyOnClose,
@@ -79,19 +94,17 @@ export const Popup = p => {
     className: bodyCls,
     style: Object.assign(Object.assign({}, props.bodyStyle), {
       transform: percent.to(v => {
-        if (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)`;
-          }
+        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';
       })

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

@@ -40,6 +40,7 @@ export const PullToRefresh = p => {
     config: {
       tension: 300,
       friction: 30,
+      round: true,
       clamp: true
     }
   }));
@@ -99,7 +100,8 @@ export const PullToRefresh = p => {
       return;
     }
     const [, y] = state.movement;
-    if (state.first && y > 0) {
+    const parsedY = Math.ceil(y);
+    if (state.first && parsedY > 0) {
       const target = state.event.target;
       if (!target || !(target instanceof Element)) return;
       let scrollParent = getScrollParent(target);
@@ -124,7 +126,7 @@ export const PullToRefresh = p => {
       event.preventDefault();
     }
     event.stopPropagation();
-    const height = Math.max(rubberbandIfOutOfBounds(y, 0, 0, headHeight * 5, 0.5), 0);
+    const height = Math.max(rubberbandIfOutOfBounds(parsedY, 0, 0, headHeight * 5, 0.5), 0);
     api.start({
       height
     });

package/es/components/search-bar/search-bar.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { InputRef, InputProps } from '../input';
 import { NativeProps } from '../../utils/native-props';
 export declare type SearchBarRef = InputRef;
-export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear'> & {
+export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear' | 'onCompositionStart' | 'onCompositionEnd'> & {
     value?: string;
     defaultValue?: string;
     maxLength?: number;
@@ -17,7 +17,7 @@ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'on
     onChange?: (val: string) => void;
     onCancel?: () => void;
 } & NativeProps<'--background' | '--border-radius' | '--placeholder-color' | '--height' | '--padding-left'>;
-export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onFocus" | "onBlur" | "onClear"> & {
+export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onClear"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     maxLength?: number | undefined;

package/es/components/search-bar/search-bar.js

@@ -110,11 +110,15 @@ export const SearchBar = forwardRef((p, ref) => {
       }
     },
     "aria-label": locale.SearchBar.name,
-    onCompositionStart: () => {
+    onCompositionStart: e => {
+      var _a;
       composingRef.current = true;
+      (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onCompositionEnd: () => {
+    onCompositionEnd: e => {
+      var _a;
       composingRef.current = false;
+      (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }
   })), renderCancelButton()));
 });

package/es/components/slider/slider.js

@@ -78,13 +78,14 @@ export const Slider = p => {
   const pointList = useMemo(() => {
     if (marks) {
       return Object.keys(marks).map(parseFloat).sort((a, b) => a - b);
-    } else {
+    } else if (ticks) {
       const points = [];
       for (let i = getMiniDecimal(min); i.lessEquals(getMiniDecimal(max)); i = i.add(step)) {
         points.push(i.toNumber());
       }
       return points;
     }
+    return [];
   }, [marks, ticks, step, min, max]);
   function getValueByPosition(position) {
     const newPosition = position < min ? min : position > max ? max : position;
@@ -93,9 +94,10 @@ export const Slider = p => {
     if (pointList.length) {
       value = nearest(pointList, newPosition);
     } else {
-      const lengthPerStep = 100 / ((max - min) / step);
-      const steps = Math.round(newPosition / lengthPerStep);
-      value = steps * lengthPerStep * (max - min) * 0.01 + min;
+      // 使用 MiniDecimal 避免精度问题
+      const cell = Math.round((newPosition - min) / step);
+      const nextVal = getMiniDecimal(cell).multi(step);
+      value = getMiniDecimal(min).add(nextVal.toString()).toNumber();
     }
     return value;
   }

package/es/components/steps/steps.css

@@ -1,6 +1,8 @@
 .adm-step {
   --line-to-next-color: #e5e5e5;
   --icon-color: #e5e5e5;
+  position: relative;
+  z-index: 0;
 }
 .adm-step .adm-step-indicator {
   position: relative;

package/es/components/swiper/swiper.js

@@ -10,7 +10,7 @@ import PageIndicator from '../page-indicator';
 import { staged } from 'staged-components';
 import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
-import { useIsomorphicLayoutEffect, useUpdateEffect } from 'ahooks';
+import { useIsomorphicLayoutEffect, useGetState } from 'ahooks';
 import { mergeFuncProps } from '../../utils/with-func-props';
 const classPrefix = `adm-swiper`;
 const eventToPropRecord = {
@@ -35,6 +35,7 @@ let currentUid;
 export const Swiper = forwardRef(staged((p, ref) => {
   const props = mergeProps(defaultProps, p);
   const [uid] = useState({});
+  const timeoutRef = useRef(null);
   const isVertical = props.direction === 'vertical';
   const slideRatio = props.slideSize / 100;
   const offsetRatio = props.trackOffset / 100;
@@ -73,11 +74,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
       const trackPixels = isVertical ? track.offsetHeight : track.offsetWidth;
       return trackPixels * props.slideSize / 100;
     }
-    const [current, setCurrent] = useState(props.defaultIndex);
-    useUpdateEffect(() => {
-      var _a;
-      (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, current);
-    }, [current]);
+    const [current, setCurrent, getCurrent] = useGetState(props.defaultIndex);
     const [dragging, setDragging, draggingRef] = useRefState(false);
     function boundIndex(current) {
       let min = 0;
@@ -172,9 +169,13 @@ export const Swiper = forwardRef(staged((p, ref) => {
       }
     });
     function swipeTo(index, immediate = false) {
+      var _a;
       const roundedIndex = Math.round(index);
       const targetIndex = loop ? modulus(roundedIndex, count) : bound(roundedIndex, 0, count - 1);
       setCurrent(targetIndex);
+      if (targetIndex !== getCurrent()) {
+        (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, targetIndex);
+      }
       api.start({
         position: (loop ? roundedIndex : boundIndex(roundedIndex)) * 100,
         immediate
@@ -201,16 +202,17 @@ export const Swiper = forwardRef(staged((p, ref) => {
       autoplay,
       autoplayInterval
     } = props;
+    const runTimeSwiper = () => {
+      timeoutRef.current = window.setTimeout(() => {
+        swipeNext();
+        runTimeSwiper();
+      }, autoplayInterval);
+    };
     useEffect(() => {
       if (!autoplay || dragging) return;
-      let interval;
-      function tick() {
-        interval = window.setTimeout(tick, autoplayInterval);
-        swipeNext();
-      }
-      interval = window.setTimeout(tick, autoplayInterval);
+      runTimeSwiper();
       return () => {
-        if (interval) window.clearTimeout(interval);
+        if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
       };
     }, [autoplay, autoplayInterval, dragging, count]);
     function renderTrackInner() {
@@ -219,7 +221,9 @@ export const Swiper = forwardRef(staged((p, ref) => {
           className: `${classPrefix}-track-inner`
         }, React.Children.map(validChildren, (child, index) => {
           return React.createElement(animated.div, {
-            className: `${classPrefix}-slide`,
+            className: classNames(`${classPrefix}-slide`, {
+              [`${classPrefix}-slide-active`]: current === index
+            }),
             style: {
               [isVertical ? 'y' : 'x']: position.to(position => {
                 let finalPosition = -position + index * 100;
@@ -238,9 +242,11 @@ export const Swiper = forwardRef(staged((p, ref) => {
           style: {
             [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
           }
-        }, React.Children.map(validChildren, child => {
+        }, React.Children.map(validChildren, (child, index) => {
           return React.createElement("div", {
-            className: `${classPrefix}-slide`
+            className: classNames(`${classPrefix}-slide`, {
+              [`${classPrefix}-slide-active`]: current === index
+            })
           }, child);
         }));
       }

package/es/components/text-area/text-area.d.ts

@@ -21,7 +21,7 @@ export declare type TextAreaRef = {
     blur: () => void;
     nativeElement: HTMLTextAreaElement | null;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoFocus" | "autoComplete" | "readOnly"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoFocus" | "name" | "readOnly" | "autoComplete"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;

package/es/components/text-area/text-area.js

@@ -1,5 +1,6 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useIsomorphicLayoutEffect } from 'ahooks';
+import runes from 'runes2';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
@@ -68,7 +69,7 @@ export const TextArea = forwardRef((p, ref) => {
   }, [value, autoSize]);
   const compositingRef = useRef(false);
   let count;
-  const valueLength = [...value].length;
+  const valueLength = runes(value).length;
   if (typeof showCount === 'function') {
     count = showCount(valueLength, maxLength);
   } else if (showCount) {
@@ -87,7 +88,7 @@ export const TextArea = forwardRef((p, ref) => {
     onChange: e => {
       let v = e.target.value;
       if (maxLength && !compositingRef.current) {
-        v = [...v].slice(0, maxLength).join('');
+        v = runes(v).slice(0, maxLength).join('');
       }
       setValue(v);
     },
@@ -102,7 +103,7 @@ export const TextArea = forwardRef((p, ref) => {
       compositingRef.current = false;
       if (maxLength) {
         const v = e.target.value;
-        setValue([...v].slice(0, maxLength).join(''));
+        setValue(runes(v).slice(0, maxLength).join(''));
       }
       (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },

package/es/utils/reduce-and-restore-motion.js

@@ -31,5 +31,5 @@ function subscribe(onStoreChange) {
   };
 }
 export function useMotionReduced() {
-  return useSyncExternalStore(subscribe, isMotionReduced);
+  return useSyncExternalStore(subscribe, isMotionReduced, isMotionReduced);
 }

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "antd-mobile",
-  "version": "5.29.1",
+  "version": "5.31.0",
   "dependencies": {
-    "@floating-ui/dom": "^1.0.6",
-    "@rc-component/mini-decimal": "^1.0.1",
-    "@react-spring/web": "~9.6.0",
+    "@floating-ui/dom": "^1.2.6",
+    "@rc-component/mini-decimal": "^1.1.0",
+    "@react-spring/web": "~9.6.1",
     "@use-gesture/react": "10.2.20",
-    "ahooks": "^3.7.2",
+    "ahooks": "^3.7.6",
     "antd-mobile-icons": "^0.3.0",
     "antd-mobile-v5-count": "^1.0.1",
     "classnames": "^2.3.2",
-    "dayjs": "^1.11.6",
+    "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
-    "rc-field-form": "~1.27.3",
-    "rc-util": "^5.24.8",
+    "rc-field-form": "~1.27.4",
+    "rc-util": "^5.30.0",
     "react-is": "^18.2.0",
-    "runes": "^0.4.3",
+    "runes2": "^1.1.2",
     "staged-components": "^1.1.3",
-    "tslib": "^2.4.1",
+    "tslib": "^2.5.0",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {