antd-mobile 5.10.4 → 5.11.2

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

@@ -23,9 +23,10 @@ export const Form = forwardRef((p, ref) => {
     layout,
     footer,
     mode,
+    disabled,
     requiredMarkStyle
   } = props,
-        formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "requiredMarkStyle"]);
+        formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "disabled", "requiredMarkStyle"]);
 
   const {
     locale
@@ -76,7 +77,8 @@ export const Form = forwardRef((p, ref) => {
       name: formProps.name,
       hasFeedback,
       layout,
-      requiredMarkStyle
+      requiredMarkStyle,
+      disabled: disabled
     }
   }, lists), footer && React.createElement("div", {
     className: `${classPrefix}-footer`

package/2x/es/components/form/index.css

@@ -92,7 +92,7 @@
 
 .adm-form-item.adm-form-item-horizontal.adm-list-item {
   --align-items: stretch;
-  --prefix-width: 6em;
+  --prefix-width: 6.8em;
 }
 
 .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {

package/2x/es/components/form/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './index.less';
-import { useForm } from 'rc-field-form';
+import { useWatch, useForm } from 'rc-field-form';
 export declare type FormLayout = 'vertical' | 'horizontal';
 export type { FormProps, FormInstance } from './form';
 export type { FormItemProps } from './form-item';
@@ -9,7 +9,6 @@ export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/in
 export type { FormArrayField, FormArrayOperation, FormArrayProps, } from './form-array';
 declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
-    layout?: FormLayout | undefined;
     mode?: "default" | "card" | undefined;
 } & import("react").RefAttributes<import("./form").FormInstance>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
@@ -19,5 +18,6 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<import("r
     }>;
     Array: import("react").FC<import("./form-array").FormArrayProps>;
     useForm: typeof useForm;
+    useWatch: typeof useWatch;
 };
 export default _default;

package/2x/es/components/form/index.js

@@ -3,7 +3,7 @@ import { Form } from './form';
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
 import { FormItem } from './form-item';
 import { Header } from './header';
-import { useForm } from 'rc-field-form';
+import { useWatch, useForm } from 'rc-field-form';
 import { FormSubscribe } from './form-subscribe';
 import { FormArray } from './form-array';
 export default attachPropertiesToComponent(Form, {
@@ -11,5 +11,6 @@ export default attachPropertiesToComponent(Form, {
   Subscribe: FormSubscribe,
   Header,
   Array: FormArray,
-  useForm
+  useForm,
+  useWatch
 });

package/2x/es/components/image-uploader/image-uploader.js

@@ -8,6 +8,7 @@ import { usePropsValue } from '../../utils/use-props-value';
 import { useIsomorphicLayoutEffect, useMemoizedFn, useUnmount } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
+import { useConfig } from '../config-provider';
 const classPrefix = `adm-image-uploader`;
 const defaultProps = {
   disableUpload: false,
@@ -22,6 +23,9 @@ const defaultProps = {
   imageFit: 'cover'
 };
 export const ImageUploader = p => {
+  const {
+    locale
+  } = useConfig();
   const props = mergeProps(defaultProps, p);
   const [value, setValue] = usePropsValue(props);
   const updateValue = useMemoizedFn(updater => {
@@ -194,7 +198,8 @@ export const ImageUploader = p => {
     className: `${classPrefix}-upload-button-wrap`
   }, props.children ? props.children : React.createElement("span", {
     className: `${classPrefix}-cell ${classPrefix}-upload-button`,
-    role: 'button'
+    role: 'button',
+    "aria-label": locale.ImageUploader.upload
   }, React.createElement("span", {
     className: `${classPrefix}-upload-button-icon`
   }, React.createElement(AddOutline, null))), !props.disableUpload && React.createElement("input", {
@@ -203,6 +208,7 @@ export const ImageUploader = p => {
     multiple: props.multiple,
     type: 'file',
     className: `${classPrefix}-input`,
-    onChange: onChange
+    onChange: onChange,
+    "aria-hidden": true
   })))));
 };

package/2x/es/components/index-bar/panel.d.ts

@@ -4,5 +4,6 @@ export declare type IndexBarPanelProps = {
     index: string;
     title?: ReactNode;
     brief?: ReactNode;
+    children?: ReactNode;
 } & NativeProps;
 export declare const Panel: FC<IndexBarPanelProps>;

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

@@ -68,6 +68,10 @@
   display: none;
 }
 
+.adm-input-element:disabled {
+  opacity: 1;
+}
+
 .adm-input-element[type='date'],
 .adm-input-element[type='time'],
 .adm-input-element[type='datetime-local'] {

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

@@ -9,6 +9,7 @@ export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength
     disabled?: boolean;
     readOnly?: boolean;
     clearable?: boolean;
+    onlyShowClearWhenFocus?: boolean;
     onClear?: () => void;
     id?: string;
     onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
@@ -30,6 +31,7 @@ export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProp
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
     clearable?: boolean | undefined;
+    onlyShowClearWhenFocus?: boolean | undefined;
     onClear?: (() => void) | undefined;
     id?: string | undefined;
     onEnterPress?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;

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

@@ -8,7 +8,8 @@ import { useIsomorphicLayoutEffect } from 'ahooks';
 import { bound } from '../../utils/bound';
 const classPrefix = `adm-input`;
 const defaultProps = {
-  defaultValue: ''
+  defaultValue: '',
+  onlyShowClearWhenFocus: true
 };
 export const Input = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
@@ -70,6 +71,16 @@ export const Input = forwardRef((p, ref) => {
     }
   }
 
+  const shouldShowClear = (() => {
+    if (!props.clearable || !value || props.readOnly) return false;
+
+    if (props.onlyShowClearWhenFocus) {
+      return hasFocus;
+    } else {
+      return true;
+    }
+  })();
+
   return withNativeProps(props, React.createElement("div", {
     className: classNames(`${classPrefix}`, props.disabled && `${classPrefix}-disabled`)
   }, React.createElement("input", {
@@ -112,7 +123,7 @@ export const Input = forwardRef((p, ref) => {
     onCompositionStart: props.onCompositionStart,
     onCompositionEnd: props.onCompositionEnd,
     onClick: props.onClick
-  }), props.clearable && !!value && !props.readOnly && hasFocus && React.createElement("div", {
+  }), shouldShowClear && React.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

package/2x/es/components/list/list-item.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { RightOutline } from 'antd-mobile-icons';
 import classNames from 'classnames';
+import { isNodeWithContent } from '../../utils/is-node-with-content';
 const classPrefix = `adm-list-item`;
 export const ListItem = props => {
   var _a;
@@ -10,17 +11,17 @@ export const ListItem = props => {
   const arrow = props.arrow === undefined ? clickable : props.arrow;
   const content = React.createElement("div", {
     className: `${classPrefix}-content`
-  }, props.prefix && React.createElement("div", {
+  }, isNodeWithContent(props.prefix) && React.createElement("div", {
     className: `${classPrefix}-content-prefix`
   }, props.prefix), React.createElement("div", {
     className: `${classPrefix}-content-main`
-  }, props.title && React.createElement("div", {
+  }, isNodeWithContent(props.title) && React.createElement("div", {
     className: `${classPrefix}-title`
-  }, props.title), props.children, props.description && React.createElement("div", {
+  }, props.title), props.children, isNodeWithContent(props.description) && React.createElement("div", {
     className: `${classPrefix}-description`
-  }, props.description)), props.extra && React.createElement("div", {
+  }, props.description)), isNodeWithContent(props.extra) && React.createElement("div", {
     className: `${classPrefix}-content-extra`
-  }, props.extra), arrow && React.createElement("div", {
+  }, props.extra), isNodeWithContent(arrow) && React.createElement("div", {
     className: `${classPrefix}-content-arrow`
   }, arrow === true ? React.createElement(RightOutline, null) : arrow));
   return withNativeProps(props, React.createElement(clickable ? 'a' : 'div', {

package/2x/es/components/modal/modal-action-button.js

@@ -1,5 +1,4 @@
-import { __awaiter } from "tslib";
-import React, { useState } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import Button from '../button';
 import { withNativeProps } from '../../utils/native-props';
@@ -7,26 +6,9 @@ export const ModalActionButton = props => {
   const {
     action
   } = props;
-  const [loading, setLoading] = useState(false);
-
-  function handleClick() {
-    return __awaiter(this, void 0, void 0, function* () {
-      setLoading(true);
-
-      try {
-        const promise = props.onAction();
-        yield promise;
-        setLoading(false);
-      } catch (e) {
-        setLoading(false);
-        throw e;
-      }
-    });
-  }
-
   return withNativeProps(props.action, React.createElement(Button, {
     key: action.key,
-    onClick: handleClick,
+    onClick: props.onAction,
     className: classNames('adm-modal-button', {
       'adm-modal-button-primary': props.action.primary
     }),
@@ -34,7 +16,7 @@ export const ModalActionButton = props => {
     size: props.action.primary ? 'large' : 'middle',
     block: true,
     color: action.danger ? 'danger' : 'primary',
-    loading: loading,
+    loading: 'auto',
     disabled: action.disabled
   }, action.text));
 };

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

@@ -8,6 +8,7 @@ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'on
     maxLength?: number;
     placeholder?: string;
     clearable?: boolean;
+    onlyShowClearWhenFocus?: boolean;
     showCancelButton?: boolean | ((focus: boolean, value: string) => boolean);
     cancelText?: string;
     icon?: ReactNode;
@@ -22,6 +23,7 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
     maxLength?: number | undefined;
     placeholder?: string | undefined;
     clearable?: boolean | undefined;
+    onlyShowClearWhenFocus?: boolean | undefined;
     showCancelButton?: boolean | ((focus: boolean, value: string) => boolean) | undefined;
     cancelText?: string | undefined;
     icon?: ReactNode;

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

@@ -10,6 +10,7 @@ import { useConfig } from '../config-provider';
 const classPrefix = `adm-search-bar`;
 const defaultProps = {
   clearable: true,
+  onlyShowClearWhenFocus: false,
   showCancelButton: false,
   defaultValue: '',
   clearOnCancel: true,
@@ -101,6 +102,7 @@ export const SearchBar = forwardRef((p, ref) => {
     maxLength: props.maxLength,
     placeholder: props.placeholder,
     clearable: props.clearable,
+    onlyShowClearWhenFocus: props.onlyShowClearWhenFocus,
     onFocus: e => {
       var _a;
 

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useLayoutEffect, useImperativeHandle, useRef } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
@@ -41,7 +41,7 @@ export const TextArea = forwardRef((p, ref) => {
       (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
     }
   }));
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!autoSize) return;
     const textArea = nativeTextAreaRef.current;
     if (!textArea) return;

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

@@ -84,7 +84,8 @@ export const VirtualInput = forwardRef((p, ref) => {
 
       (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
       (_c = (_b = keyboard.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
-    }
+    },
+    getContainer: null
   });
   return withNativeProps(props, React.createElement("div", {
     ref: rootRef,

package/2x/es/global/index.js

@@ -2,5 +2,7 @@ import "./global.css";
 import { canUseDom } from '../utils/can-use-dom';
 
 if (canUseDom) {
+  // Make sure the `:active` CSS selector of `button` and `a` take effect
+  // See: https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
   document.addEventListener('touchstart', () => {}, true);
 }

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

@@ -86,6 +86,7 @@ export declare const base: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

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

@@ -86,7 +86,8 @@ export const base = {
     }
   },
   ImageUploader: {
-    uploading: 'Uploading...'
+    uploading: 'Uploading...',
+    upload: 'Upload'
   },
   InfiniteScroll: {
     noMore: 'No more'

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

@@ -86,6 +86,7 @@ declare const enUS: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

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

@@ -86,6 +86,7 @@ declare const esES: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

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

@@ -86,6 +86,7 @@ declare const faIR: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

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

@@ -86,6 +86,7 @@ declare const koKR: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/2x/es/locales/zh-CN.d.ts

@@ -86,6 +86,7 @@ declare const zhCN: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/2x/es/locales/zh-CN.js

@@ -88,7 +88,8 @@ const zhCN = mergeLocale(base, {
     }
   },
   ImageUploader: {
-    uploading: '上传中...'
+    uploading: '上传中...',
+    upload: '上传'
   },
   InfiniteScroll: {
     noMore: '没有更多了'

package/2x/es/locales/zh-HK.d.ts

@@ -86,6 +86,7 @@ declare const zhHK: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/2x/es/locales/zh-TW.d.ts

@@ -86,6 +86,7 @@ declare const zhTW: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/2x/es/utils/is-node-with-content.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+declare type Regulated<T> = T extends null | undefined | false ? never : T;
+export declare function isNodeWithContent(node: ReactNode): node is Regulated<ReactNode>;
+export {};

package/2x/es/utils/is-node-with-content.js

@@ -0,0 +1,3 @@
+export function isNodeWithContent(node) {
+  return node !== undefined && node !== null && node !== false;
+}

package/2x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.10.4",
+  "version": "5.11.2",
   "dependencies": {
     "@floating-ui/dom": "^0.4.2",
     "@react-spring/web": "^9.4.4",
@@ -16,7 +16,7 @@
     "classnames": "^2.3.1",
     "dayjs": "^1.11.0",
     "lodash": "^4.17.21",
-    "rc-field-form": "^1.24.0",
+    "rc-field-form": "^1.26.2",
     "react-is": "^17.0.2",
     "staged-components": "^1.1.2",
     "tslib": "^2.3.1"