antd-mobile 5.17.2 → 5.20.0

package/2x/es/components/passcode-input/passcode-input.js

@@ -4,6 +4,7 @@ import { withNativeProps } from '../../utils/native-props';
 import classNames from 'classnames';
 import { bound } from '../../utils/bound';
 import { usePropsValue } from '../../utils/use-props-value';
+import { useConfig } from '../config-provider';
 const classPrefix = 'adm-passcode-input';
 const defaultProps = {
   defaultValue: '',
@@ -17,6 +18,9 @@ export const PasscodeInput = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p); // 防止 length 值不合法
 
   const cellLength = props.length > 0 && props.length < Infinity ? Math.floor(props.length) : defaultProps.length;
+  const {
+    locale
+  } = useConfig();
   const [focused, setFocused] = useState(false);
   const [value, setValue] = usePropsValue(props);
   const rootRef = useRef(null);
@@ -87,9 +91,9 @@ export const PasscodeInput = forwardRef((p, ref) => {
     for (let i = 0; i < cellLength; i++) {
       cells.push(React.createElement("div", {
         className: classNames(`${classPrefix}-cell`, {
-          caret: props.caret && caretIndex === i && focused,
-          focused: focusedIndex === i && focused,
-          dot: !props.plain && chars[i]
+          [`${classPrefix}-cell-caret`]: props.caret && caretIndex === i && focused,
+          [`${classPrefix}-cell-focused`]: focusedIndex === i && focused,
+          [`${classPrefix}-cell-dot`]: !props.plain && chars[i]
         }),
         key: i
       }, chars[i] && props.plain ? chars[i] : ''));
@@ -99,16 +103,18 @@ export const PasscodeInput = forwardRef((p, ref) => {
   };
 
   const cls = classNames(classPrefix, {
-    focused: focused,
-    error: props.error,
-    seperated: props.seperated
+    [`${classPrefix}-focused`]: focused,
+    [`${classPrefix}-error`]: props.error,
+    [`${classPrefix}-seperated`]: props.seperated
   });
   return React.createElement(React.Fragment, null, withNativeProps(props, React.createElement("div", {
     ref: rootRef,
     tabIndex: 0,
     className: cls,
     onFocus: onFocus,
-    onBlur: onBlur
+    onBlur: onBlur,
+    role: 'button',
+    "aria-label": locale.PasscodeInput.name
   }, React.createElement("div", {
     className: `${classPrefix}-cell-container`
   }, renderCells()), React.createElement("input", {
@@ -120,7 +126,8 @@ export const PasscodeInput = forwardRef((p, ref) => {
     inputMode: 'numeric',
     onChange: e => {
       setValue(e.target.value.slice(0, props.length));
-    }
+    },
+    "aria-hidden": true
   }))), props.keyboard && React.cloneElement(props.keyboard, {
     visible: focused,
     onInput: v => {

package/2x/es/components/rate/rate.css

@@ -3,6 +3,7 @@
   --active-color: #ffd21e;
   --inactive-color: var(--adm-color-border);
   display: inline-flex;
+  touch-action: pan-y;
 }
 
 .adm-rate-box {

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

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { Star } from './star';
+import { useDrag } from '@use-gesture/react';
+import { bound } from '../../utils/bound';
 const classPrefix = `adm-rate`;
 const defaultProps = {
   count: 5,
@@ -16,6 +18,7 @@ const defaultProps = {
 export const Rate = p => {
   const props = mergeProps(defaultProps, p);
   const [value, setValue] = usePropsValue(props);
+  const containerRef = useRef(null);
   const starList = Array(props.count).fill(null);
 
   function renderStar(v, half) {
@@ -33,13 +36,37 @@ export const Rate = p => {
         } else {
           setValue(v);
         }
-      }
+      },
+      role: 'radio',
+      "aria-checked": value >= v,
+      "aria-label": '' + v
     }, props.character);
   }
 
-  return withNativeProps(props, React.createElement("div", {
-    className: classPrefix
-  }, starList.map((_, i) => React.createElement("div", {
+  const bind = useDrag(state => {
+    if (props.readOnly) return;
+    const {
+      xy: [clientX]
+    } = state;
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const rawValue = (clientX - rect.left) / rect.width * props.count;
+    const roundedValue = props.allowHalf ? Math.round(rawValue * 2) / 2 : Math.round(rawValue);
+    setValue(bound(roundedValue, 0, props.count));
+  }, {
+    axis: 'x',
+    preventScroll: true,
+    pointer: {
+      touch: true
+    }
+  });
+  return withNativeProps(props, React.createElement("div", Object.assign({
+    className: classPrefix,
+    role: 'radiogroup',
+    "aria-readonly": props.readOnly,
+    ref: containerRef
+  }, bind()), starList.map((_, i) => React.createElement("div", {
     key: i,
     className: classNames(`${classPrefix}-box`)
   }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false)))));

package/2x/es/components/rate/star.js

@@ -1,15 +1,5 @@
 import React from 'react';
 export const Star = () => {
-  // return (
-  //   <svg height='1em' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'>
-  //     <title>{'star-fill\u5907\u4EFD 71'}</title>
-  //     <path
-  //       d='m24 36-10.52 5.53a2 2 0 0 1-2.902-2.108l2.01-11.714-8.511-8.296a2 2 0 0 1 1.108-3.411l11.762-1.71 5.26-10.657a2 2 0 0 1 3.586 0l5.26 10.658L42.815 16a2 2 0 0 1 1.108 3.411l-8.51 8.296 2.009 11.714a2 2 0 0 1-2.902 2.109L24 36Z'
-  //       fill='#E5E5E5'
-  //       fillRule='evenodd'
-  //     />
-  //   </svg>
-  // )
   return React.createElement("svg", {
     viewBox: '0 0 42 40',
     height: '1em',

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

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ResultProps = {
-    status: 'success' | 'error' | 'info' | 'waiting' | 'warning';
+    status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
     title: ReactNode;
     description?: ReactNode;
     icon?: ReactNode;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { CheckCircleFill, CloseCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill } from 'antd-mobile-icons';
 import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
 const classPrefix = `adm-result`;
 const iconRecord = {
   success: CheckCircleFill,
@@ -10,7 +11,11 @@ const iconRecord = {
   waiting: ClockCircleFill,
   warning: ExclamationCircleFill
 };
-export const Result = props => {
+const defaultProps = {
+  status: 'info'
+};
+export const Result = p => {
+  const props = mergeProps(defaultProps, p);
   const {
     status,
     title,

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

@@ -26,6 +26,7 @@ export const SearchBar = forwardRef((p, ref) => {
   const [value, setValue] = usePropsValue(props);
   const [hasFocus, setHasFocus] = useState(false);
   const inputRef = useRef(null);
+  const composingRef = useRef(false);
   useImperativeHandle(ref, () => ({
     clear: () => {
       var _a;
@@ -118,8 +119,17 @@ export const SearchBar = forwardRef((p, ref) => {
     onEnterPress: () => {
       var _a, _b;
 
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
+      if (!composingRef.current) {
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
+      }
+    },
+    "aria-label": locale.SearchBar.name,
+    onCompositionStart: () => {
+      composingRef.current = true;
+    },
+    onCompositionEnd: () => {
+      composingRef.current = false;
     }
   })), renderCancelButton()));
 });

package/2x/es/components/swipe-action/swipe-action.d.ts

@@ -20,6 +20,7 @@ export declare type SwipeActionProps = {
     closeOnAction?: boolean;
     children: ReactNode;
     stopPropagation?: PropagationEvent[];
+    onActionsReveal?: (side: 'left' | 'right') => void;
 } & NativeProps<'--background'>;
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
@@ -29,6 +30,7 @@ export declare const SwipeAction: React.ForwardRefExoticComponent<{
     closeOnAction?: boolean | undefined;
     children: ReactNode;
     stopPropagation?: "click"[] | undefined;
+    onActionsReveal?: ((side: 'left' | 'right') => void) | undefined;
 } & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<"--background", string>>) | undefined;

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

@@ -44,8 +44,26 @@ export const SwipeAction = forwardRef((p, ref) => {
     }
   }), []);
   const draggingRef = useRef(false);
+  const dragCancelRef = useRef(null);
+
+  function forceCancelDrag() {
+    var _a;
+
+    (_a = dragCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(dragCancelRef);
+    draggingRef.current = false;
+  }
+
   const bind = useDrag(state => {
-    draggingRef.current = true;
+    var _a;
+
+    dragCancelRef.current = state.cancel;
+    if (!state.intentional) return;
+
+    if (state.down) {
+      draggingRef.current = true;
+    }
+
+    if (!draggingRef.current) return;
     const [offsetX] = state.offset;
 
     if (state.last) {
@@ -61,9 +79,15 @@ export const SwipeAction = forwardRef((p, ref) => {
         position = 0;
       }
 
+      const targetX = nearest([-rightWidth, 0, leftWidth], position);
       api.start({
-        x: nearest([-rightWidth, 0, leftWidth], position)
+        x: targetX
       });
+
+      if (targetX !== 0) {
+        (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, targetX > 0 ? 'left' : 'right');
+      }
+
       window.setTimeout(() => {
         draggingRef.current = false;
       });
@@ -88,17 +112,21 @@ export const SwipeAction = forwardRef((p, ref) => {
     preventScroll: true,
     pointer: {
       touch: true
-    }
+    },
+    triggerAllEvents: true
   });
 
   function close() {
     api.start({
       x: 0
     });
+    forceCancelDrag();
   }
 
   useImperativeHandle(ref, () => ({
     show: (side = 'right') => {
+      var _a;
+
       if (side === 'right') {
         api.start({
           x: -getRightWidth()
@@ -108,6 +136,8 @@ export const SwipeAction = forwardRef((p, ref) => {
           x: getLeftWidth()
         });
       }
+
+      (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, side);
     },
     close
   }));
@@ -179,9 +209,7 @@ export const SwipeAction = forwardRef((p, ref) => {
       if (x.goal !== 0) {
         e.preventDefault();
         e.stopPropagation();
-        api.start({
-          x: 0
-        });
+        close();
       }
     }
   }, React.createElement(animated.div, {

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

@@ -113,7 +113,18 @@ export const Swiper = forwardRef(staged((p, ref) => {
         });
       }
     }), [count]);
+    const dragCancelRef = useRef(null);
+
+    function forceCancelDrag() {
+      var _a;
+
+      (_a = dragCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(dragCancelRef);
+      draggingRef.current = false;
+    }
+
     const bind = useDrag(state => {
+      dragCancelRef.current = state.cancel;
+      if (!state.intentional) return;
       const slidePixels = getSlidePixels();
       if (!slidePixels) return;
       const paramIndex = isVertical ? 1 : 0;
@@ -142,6 +153,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
         const slidePixels = getSlidePixels();
         return [position.get() / 100 * slidePixels, position.get() / 100 * slidePixels];
       },
+      triggerAllEvents: true,
       bounds: () => {
         if (loop) return {};
         const slidePixels = getSlidePixels();
@@ -256,6 +268,8 @@ export const Swiper = forwardRef(staged((p, ref) => {
         if (draggingRef.current) {
           e.stopPropagation();
         }
+
+        forceCancelDrag();
       }
     }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? React.createElement("div", {
       className: `${classPrefix}-indicator`

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

@@ -5,8 +5,9 @@ export declare type SwitchProps = {
     disabled?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
+    /** @deprecated use `onChange` instead */
     beforeChange?: (val: boolean) => Promise<void>;
-    onChange?: (checked: boolean) => void;
+    onChange?: (checked: boolean) => void | Promise<void>;
     checkedText?: ReactNode;
     uncheckedText?: ReactNode;
 } & NativeProps<'--checked-color' | '--width' | '--height' | '--border-width'>;

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

@@ -6,6 +6,7 @@ import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 import { SpinIcon } from './spin-icon';
 import { useConfig } from '../config-provider';
+import { isPromise } from '../../utils/validate';
 const classPrefix = `adm-switch`;
 const defaultProps = {
   defaultChecked: false
@@ -36,14 +37,25 @@ export const Switch = p => {
 
         try {
           yield props.beforeChange(nextChecked);
-          setChecked(nextChecked);
           setChanging(false);
         } catch (e) {
           setChanging(false);
           throw e;
         }
-      } else {
-        setChecked(nextChecked);
+      }
+
+      const result = setChecked(nextChecked);
+
+      if (isPromise(result)) {
+        setChanging(true);
+
+        try {
+          yield result;
+          setChanging(false);
+        } catch (e) {
+          setChanging(false);
+          throw e;
+        }
       }
     });
   }

package/2x/es/locales/base.d.ts

@@ -93,17 +93,26 @@ export declare const base: {
         failedToLoad: string;
         retry: string;
     };
+    Input: {
+        clear: string;
+    };
     Mask: {
         name: string;
     };
     Modal: {
         ok: string;
     };
+    PasscodeInput: {
+        name: string;
+    };
     PullToRefresh: {
         pulling: string;
         canRelease: string;
         complete: string;
     };
+    SearchBar: {
+        name: string;
+    };
     Slider: {
         name: string;
     };

package/2x/es/locales/base.js

@@ -94,17 +94,26 @@ export const base = {
     failedToLoad: 'Failed to load',
     retry: 'Retry'
   },
+  Input: {
+    clear: 'clear'
+  },
   Mask: {
     name: 'Mask'
   },
   Modal: {
     ok: 'OK'
   },
+  PasscodeInput: {
+    name: 'Passcode Input'
+  },
   PullToRefresh: {
     pulling: 'Scroll down to refresh',
     canRelease: 'Release to refresh immediately',
     complete: 'Refresh successful'
   },
+  SearchBar: {
+    name: 'Search Bar'
+  },
   Slider: {
     name: 'Slider'
   },

package/2x/es/locales/en-US.d.ts

@@ -93,17 +93,26 @@ declare const enUS: {
         failedToLoad: string;
         retry: string;
     };
+    Input: {
+        clear: string;
+    };
     Mask: {
         name: string;
     };
     Modal: {
         ok: string;
     };
+    PasscodeInput: {
+        name: string;
+    };
     PullToRefresh: {
         pulling: string;
         canRelease: string;
         complete: string;
     };
+    SearchBar: {
+        name: string;
+    };
     Slider: {
         name: string;
     };

package/2x/es/locales/es-ES.d.ts

@@ -93,17 +93,26 @@ declare const esES: {
         failedToLoad: string;
         retry: string;
     };
+    Input: {
+        clear: string;
+    };
     Mask: {
         name: string;
     };
     Modal: {
         ok: string;
     };
+    PasscodeInput: {
+        name: string;
+    };
     PullToRefresh: {
         pulling: string;
         canRelease: string;
         complete: string;
     };
+    SearchBar: {
+        name: string;
+    };
     Slider: {
         name: string;
     };

package/2x/es/locales/fa-IR.d.ts

@@ -93,17 +93,26 @@ declare const faIR: {
         failedToLoad: string;
         retry: string;
     };
+    Input: {
+        clear: string;
+    };
     Mask: {
         name: string;
     };
     Modal: {
         ok: string;
     };
+    PasscodeInput: {
+        name: string;
+    };
     PullToRefresh: {
         pulling: string;
         canRelease: string;
         complete: string;
     };
+    SearchBar: {
+        name: string;
+    };
     Slider: {
         name: string;
     };

package/2x/es/locales/fr-FR.d.ts

@@ -93,17 +93,26 @@ declare const frFR: {
         failedToLoad: string;
         retry: string;
     };
+    Input: {
+        clear: string;
+    };
     Mask: {
         name: string;
     };
     Modal: {
         ok: string;
     };
+    PasscodeInput: {
+        name: string;
+    };
     PullToRefresh: {
         pulling: string;
         canRelease: string;
         complete: string;
     };
+    SearchBar: {
+        name: string;
+    };
     Slider: {
         name: string;
     };

package/2x/es/locales/id-ID.d.ts

@@ -93,17 +93,26 @@ declare const idID: {
         failedToLoad: string;
         retry: string;
     };
+    Input: {
+        clear: string;
+    };
     Mask: {
         name: string;
     };
     Modal: {
         ok: string;
     };
+    PasscodeInput: {
+        name: string;
+    };
     PullToRefresh: {
         pulling: string;
         canRelease: string;
         complete: string;
     };
+    SearchBar: {
+        name: string;
+    };
     Slider: {
         name: string;
     };

package/2x/es/locales/id-ID.js

@@ -106,6 +106,19 @@ const idID = mergeLocale(base, {
     pulling: 'Tarik ke bawah untuk menyegarkan',
     canRelease: 'Lepaskan untuk menyegarkan segera',
     complete: 'Segarkan berhasil'
+  },
+  SearchBar: {
+    name: 'Bilah Pencarian'
+  },
+  Slider: {
+    name: 'Penggeser'
+  },
+  Stepper: {
+    decrease: 'mengurangi',
+    increase: 'meningkat'
+  },
+  Switch: {
+    name: 'Mengalihkan'
   }
 });
 export default idID;

package/2x/es/locales/kk-KZ.d.ts

@@ -93,17 +93,26 @@ declare const kkKZ: {
         failedToLoad: string;
         retry: string;
     };
+    Input: {
+        clear: string;
+    };
     Mask: {
         name: string;
     };
     Modal: {
         ok: string;
     };
+    PasscodeInput: {
+        name: string;
+    };
     PullToRefresh: {
         pulling: string;
         canRelease: string;
         complete: string;
     };
+    SearchBar: {
+        name: string;
+    };
     Slider: {
         name: string;
     };

package/2x/es/locales/ko-KR.d.ts

@@ -93,17 +93,26 @@ declare const koKR: {
         failedToLoad: string;
         retry: string;
     };
+    Input: {
+        clear: string;
+    };
     Mask: {
         name: string;
     };
     Modal: {
         ok: string;
     };
+    PasscodeInput: {
+        name: string;
+    };
     PullToRefresh: {
         pulling: string;
         canRelease: string;
         complete: string;
     };
+    SearchBar: {
+        name: string;
+    };
     Slider: {
         name: string;
     };