antd-mobile 5.17.1 → 5.19.0

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

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { useIsomorphicLayoutEffect } from 'ahooks';
 import { bound } from '../../utils/bound';
 import { isIOS } from '../../utils/validate';
+import { useConfig } from '../config-provider';
 const classPrefix = `adm-input`;
 const defaultProps = {
   defaultValue: '',
@@ -18,6 +19,9 @@ export const Input = forwardRef((p, ref) => {
   const [hasFocus, setHasFocus] = useState(false);
   const compositionStartRef = useRef(false);
   const nativeInputRef = useRef(null);
+  const {
+    locale
+  } = useConfig();
   useImperativeHandle(ref, () => ({
     clear: () => {
       setValue('');
@@ -139,7 +143,8 @@ export const Input = forwardRef((p, ref) => {
     role: props.role,
     "aria-valuenow": props['aria-valuenow'],
     "aria-valuemax": props['aria-valuemax'],
-    "aria-valuemin": props['aria-valuemin']
+    "aria-valuemin": props['aria-valuemin'],
+    "aria-label": props['aria-label']
   }), shouldShowClear && React.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
@@ -155,6 +160,7 @@ export const Input = forwardRef((p, ref) => {
         compositionStartRef.current = false;
         (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
       }
-    }
+    },
+    "aria-label": locale.Input.clear
   }, React.createElement(CloseCircleFill, null))));
 });

package/2x/es/components/modal/show.d.ts

@@ -1,5 +1,5 @@
 import { ModalProps } from './modal';
-export declare type ModalShowProps = Omit<ModalProps, 'visible'>;
+export declare type ModalShowProps = Omit<ModalProps, 'visible' | 'destroyOnClose' | 'forceRender'>;
 export declare type ModalShowHandler = {
     close: () => void;
 };

package/2x/es/components/notice-bar/notice-bar.css

@@ -70,6 +70,15 @@
   margin-left: 24px;
 }
 
+.adm-notice-bar-close {
+  width: 48px;
+  height: 48px;
+  margin-right: -6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .adm-notice-bar-close-icon {
   font-size: var(--adm-font-size-10);
 }

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

@@ -82,13 +82,15 @@ export const NoticeBar = memo(p => {
     className: `${classPrefix}-content-inner`
   }, props.content)), (props.closeable || props.extra) && React.createElement("span", {
     className: `${classPrefix}-right`
-  }, props.extra, props.closeable && React.createElement(CloseOutline, {
-    className: `${classPrefix}-close-icon`,
+  }, props.extra, props.closeable && React.createElement("div", {
+    className: `${classPrefix}-close`,
     onClick: () => {
       var _a;
 
       setVisible(false);
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  }))));
+  }, React.createElement(CloseOutline, {
+    className: `${classPrefix}-close-icon`
+  })))));
 });

package/2x/es/components/number-keyboard/number-keyboard.css

@@ -4,7 +4,7 @@
   flex: 1;
 }
 
-.adm-number-keyboard-main.confirmed-style .sign-key {
+.adm-number-keyboard-main.adm-number-keyboard-main-confirmed-style .adm-number-keyboard-key-sign {
   background-color: var(--adm-color-white);
 }
 
@@ -40,11 +40,11 @@
   font-size: 32px;
 }
 
-.adm-number-keyboard-header.with-title {
+.adm-number-keyboard-header.adm-number-keyboard-header-with-title {
   justify-content: space-between;
 }
 
-.adm-number-keyboard-header.with-title .adm-number-keyboard-header-close-button {
+.adm-number-keyboard-header.adm-number-keyboard-header-with-title .adm-number-keyboard-header-close-button {
   padding-right: 0;
 }
 
@@ -97,37 +97,33 @@
   box-sizing: content-box;
 }
 
-.adm-number-keyboard-key.mid-key {
+.adm-number-keyboard-key.adm-number-keyboard-key-mid {
   flex-basis: 66.67%;
 }
 
-.adm-number-keyboard-key.sign-key:active::before {
+.adm-number-keyboard-key.adm-number-keyboard-key-sign:active::before {
   opacity: 0.1;
 }
 
-.adm-number-keyboard-key.extra-key {
+.adm-number-keyboard-key.adm-number-keyboard-key-extra {
   border-left: solid 2px var(--adm-color-border);
   border-right: none;
 }
 
-.adm-number-keyboard-key.extra-key,
-.adm-number-keyboard-key.number-key {
+.adm-number-keyboard-key.adm-number-keyboard-key-extra,
+.adm-number-keyboard-key.adm-number-keyboard-key-number {
   background-color: var(--adm-color-background);
 }
 
-.adm-number-keyboard-key.extra-key:active::before,
-.adm-number-keyboard-key.number-key:active::before {
+.adm-number-keyboard-key.adm-number-keyboard-key-extra:active::before,
+.adm-number-keyboard-key.adm-number-keyboard-key-number:active::before {
   opacity: 0.1;
 }
 
-.adm-number-keyboard-key.ok-key {
+.adm-number-keyboard-key.adm-number-keyboard-key-ok {
   background-color: var(--adm-color-primary);
   color: var(--adm-color-white);
   height: 288px;
   font-size: 32px;
   border: none;
-}
-
-.adm-number-keyboard-bs-key {
-  height: 40px;
 }

package/2x/es/components/number-keyboard/number-keyboard.d.ts

@@ -5,7 +5,7 @@ export declare type NumberKeyboardProps = {
     visible?: boolean;
     title?: string;
     confirmText?: string | null;
-    customKey?: '-' | '.' | 'X';
+    customKey?: string | [string, string];
     randomOrder?: boolean;
     showCloseButton?: boolean;
     onInput?: (v: string) => void;

package/2x/es/components/number-keyboard/number-keyboard.js

@@ -34,13 +34,18 @@ export const NumberKeyboard = p => {
   const keys = useMemo(() => {
     const defaultKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
     const keyList = randomOrder ? shuffle(defaultKeys) : defaultKeys;
+    const customKeys = Array.isArray(customKey) ? customKey : [customKey];
     keyList.push('0');
 
     if (confirmText) {
-      keyList.push(customKey || '');
+      if (customKeys.length === 2) {
+        keyList.splice(9, 0, customKeys.pop());
+      }
+
+      keyList.push(customKeys[0] || '');
     } else {
-      keyList.splice(9, 0, customKey || '');
-      keyList.push('BACKSPACE');
+      keyList.splice(9, 0, customKeys[0] || '');
+      keyList.push(customKeys[1] || 'BACKSPACE');
     }
 
     return keyList;
@@ -63,8 +68,7 @@ export const NumberKeyboard = p => {
   const onBackspacePressEnd = () => {
     clearTimeout(timeoutRef.current);
     clearInterval(intervalRef.current);
-  }; // 点击键盘按键
-
+  };
 
   const onKeyPress = (e, key) => {
     var _a, _b;
@@ -86,18 +90,17 @@ export const NumberKeyboard = p => {
         break;
 
       default:
-        // 当 customKey 不存在时，点击该键不应该触发 onInput
+        // onInput should't be called when customKey doesn't exist
         if (key !== '') onInput === null || onInput === void 0 ? void 0 : onInput(key);
         break;
     }
-  }; // 渲染 title 和 close button
-
+  };
 
   const renderHeader = () => {
     if (!showCloseButton && !title) return null;
     return React.createElement("div", {
       className: classNames(`${classPrefix}-header`, {
-        'with-title': !!title
+        [`${classPrefix}-header-with-title`]: !!title
       })
     }, title && React.createElement("div", {
       className: `${classPrefix}-title`
@@ -111,15 +114,14 @@ export const NumberKeyboard = p => {
       role: 'button',
       title: 'CLOSE'
     }, React.createElement(DownOutline, null)));
-  }; // 渲染基础键盘按键
-
+  };
 
   const renderKey = (key, index) => {
     const isNumberKey = /^\d$/.test(key);
     const className = classNames(`${classPrefix}-key`, {
-      'number-key': isNumberKey,
-      'sign-key': !isNumberKey && key,
-      'mid-key': index === 9 && !!confirmText
+      [`${classPrefix}-key-number`]: isNumberKey,
+      [`${classPrefix}-key-sign`]: !isNumberKey && key,
+      [`${classPrefix}-key-mid`]: index === 9 && !!confirmText && keys.length < 12
     });
     const ariaProps = key ? {
       role: 'button',
@@ -163,12 +165,12 @@ export const NumberKeyboard = p => {
     className: `${classPrefix}-wrapper`
   }, React.createElement("div", {
     className: classNames(`${classPrefix}-main`, {
-      'confirmed-style': !!confirmText
+      [`${classPrefix}-main-confirmed-style`]: !!confirmText
     })
   }, keys.map(renderKey)), !!confirmText && React.createElement("div", {
     className: `${classPrefix}-confirm`
   }, React.createElement("div", {
-    className: `${classPrefix}-key extra-key bs-key`,
+    className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-bs`,
     onTouchStart: () => {
       onBackspacePressStart();
     },
@@ -179,7 +181,7 @@ export const NumberKeyboard = p => {
     title: 'BACKSPACE',
     role: 'button'
   }, React.createElement(TextDeletionOutline, null)), React.createElement("div", {
-    className: `${classPrefix}-key extra-key ok-key`,
+    className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`,
     onTouchEnd: e => onKeyPress(e, 'OK'),
     role: 'button'
   }, confirmText))), props.safeArea && React.createElement("div", {

package/2x/es/components/passcode-input/index.d.ts

@@ -1,4 +1,4 @@
 import './passcode-input.less';
 import { PasscodeInput } from './passcode-input';
-export type { PasscodeInputProps } from './passcode-input';
+export type { PasscodeInputProps, PasscodeInputRef } from './passcode-input';
 export default PasscodeInput;

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

@@ -25,56 +25,56 @@
   background: var(--adm-color-background);
 }
 
-.adm-passcode-input:not(.seperated) {
+.adm-passcode-input:not(.adm-passcode-input-seperated) {
   border-radius: var(--border-radius);
   overflow: hidden;
   border: 2px solid var(--border-color);
 }
 
-.adm-passcode-input:not(.seperated) .adm-passcode-input-cell:not(:last-child) {
+.adm-passcode-input:not(.adm-passcode-input-seperated) .adm-passcode-input-cell:not(:last-child) {
   border-right: 2px solid var(--border-color);
 }
 
-.adm-passcode-input:not(.seperated).focused {
+.adm-passcode-input:not(.adm-passcode-input-seperated).adm-passcode-input-focused {
   border-color: var(--adm-color-primary);
   box-shadow: 0 0 4px 0 var(--adm-color-primary);
   outline: none;
 }
 
-.adm-passcode-input:not(.seperated).error {
+.adm-passcode-input:not(.adm-passcode-input-seperated).adm-passcode-input-error {
   border-color: var(--adm-color-danger);
   box-shadow: 0 0 4px 0 var(--adm-color-danger);
   animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;
 }
 
-.adm-passcode-input.seperated .adm-passcode-input-cell {
+.adm-passcode-input.adm-passcode-input-seperated .adm-passcode-input-cell {
   border-radius: var(--border-radius);
   border: 2px solid var(--border-color);
 }
 
-.adm-passcode-input.seperated .adm-passcode-input-cell:not(:last-child) {
+.adm-passcode-input.adm-passcode-input-seperated .adm-passcode-input-cell:not(:last-child) {
   margin-right: var(--cell-gap);
 }
 
-.adm-passcode-input.seperated .adm-passcode-input-cell.focused {
+.adm-passcode-input.adm-passcode-input-seperated .adm-passcode-input-cell-focused {
   border-color: var(--adm-color-primary);
   box-shadow: 0 0 4px 0 var(--adm-color-primary);
 }
 
-.adm-passcode-input.seperated.focused {
+.adm-passcode-input-seperated.adm-passcode-input-focused {
   outline: none;
 }
 
-.adm-passcode-input.seperated.error {
+.adm-passcode-input.adm-passcode-input-seperated.adm-passcode-input-error {
   animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;
 }
 
-.adm-passcode-input.seperated.error .adm-passcode-input-cell {
+.adm-passcode-input.adm-passcode-input-seperated.adm-passcode-input-error .adm-passcode-input-cell {
   border-color: var(--adm-color-danger);
   box-shadow: 0 0 4px 0 var(--adm-color-danger);
 }
 
-.adm-passcode-input-cell.dot::before {
+.adm-passcode-input-cell-dot::before {
   content: '';
   width: var(--dot-size);
   height: var(--dot-size);
@@ -82,7 +82,7 @@
   background: var(--adm-color-text);
 }
 
-.adm-passcode-input-cell.caret::after {
+.adm-passcode-input-cell-caret::after {
   content: '';
   width: 4px;
   height: 1.1em;

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/picker-view/wheel.js

@@ -40,7 +40,7 @@ export const Wheel = memo(props => {
   });
   useIsomorphicLayoutEffect(() => {
     if (draggingRef.current) return;
-    if (!value) return;
+    if (value === null) return;
     const targetIndex = column.findIndex(item => item.value === value);
     if (targetIndex < 0) return;
     const finalPosition = targetIndex * -itemHeight.current;

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

@@ -33,12 +33,17 @@ 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
+    className: classPrefix,
+    role: 'radiogroup',
+    "aria-readonly": props.readOnly
   }, starList.map((_, i) => React.createElement("div", {
     key: i,
     className: classNames(`${classPrefix}-box`)

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/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/components/text-area/text-area.js

@@ -51,6 +51,7 @@ export const TextArea = forwardRef((p, ref) => {
     if (!autoSize) return;
     const textArea = nativeTextAreaRef.current;
     if (!textArea) return;
+    textArea.style.height = 'auto';
     let height = textArea.scrollHeight;
 
     if (typeof autoSize === 'object') {

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;
     };