antd-mobile 5.10.3 → 5.11.1

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/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/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/utils/get-scroll-parent.js

@@ -1,22 +1,25 @@
 import { canUseDom } from './can-use-dom';
-const overflowScrollReg = /scroll|auto|overlay/i;
 const defaultRoot = canUseDom ? window : undefined;
+const overflowStylePatterns = ['scroll', 'auto', 'overlay'];
 
 function isElement(node) {
   const ELEMENT_NODE_TYPE = 1;
   return node.nodeType === ELEMENT_NODE_TYPE;
-} // https://github.com/youzan/vant/issues/3823
-
+}
 
 export function getScrollParent(el, root = defaultRoot) {
   let node = el;
 
   while (node && node !== root && isElement(node)) {
+    if (node === document.body) {
+      return root;
+    }
+
     const {
       overflowY
     } = window.getComputedStyle(node);
 
-    if (overflowScrollReg.test(overflowY)) {
+    if (overflowStylePatterns.includes(overflowY)) {
       return node;
     }
 

package/2x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.10.3",
+  "version": "5.11.1",
   "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"

package/bundle/antd-mobile.cjs.js

@@ -1593,8 +1593,8 @@ function useTouch() {
     isHorizontal
   };
 }
-const overflowScrollReg = /scroll|auto|overlay/i;
 const defaultRoot = canUseDom ? window : void 0;
+const overflowStylePatterns = ["scroll", "auto", "overlay"];
 function isElement(node) {
   const ELEMENT_NODE_TYPE = 1;
   return node.nodeType === ELEMENT_NODE_TYPE;
@@ -1602,10 +1602,13 @@ function isElement(node) {
 function getScrollParent(el, root2 = defaultRoot) {
   let node = el;
   while (node && node !== root2 && isElement(node)) {
+    if (node === document.body) {
+      return root2;
+    }
     const {
       overflowY
     } = window.getComputedStyle(node);
-    if (overflowScrollReg.test(overflowY)) {
+    if (overflowStylePatterns.includes(overflowY)) {
       return node;
     }
     node = node.parentNode;
@@ -8442,29 +8445,52 @@ const DotLoading = React$1.memo((p) => {
     keyTimes: "0; 0.1; 0.3; 0.4; 1"
   }))))))))));
 });
+function isPromise(obj) {
+  return !!obj && typeof obj === "object" && typeof obj.then === "function";
+}
 const classPrefix$1d = `adm-button`;
 const defaultProps$W = {
   color: "default",
   fill: "solid",
   block: false,
   loading: false,
+  loadingIcon: React__default["default"].createElement(DotLoading, {
+    color: "currentColor"
+  }),
   type: "button",
   shape: "default",
   size: "middle"
 };
 const Button = React$1.forwardRef((p, ref) => {
   const props = mergeProps(defaultProps$W, p);
-  const disabled = props.disabled || props.loading;
+  const [innerLoading, setInnerLoading] = React$1.useState(false);
   const nativeButtonRef = React$1.useRef(null);
+  const loading = props.loading === "auto" ? innerLoading : props.loading;
+  const disabled = props.disabled || loading;
   React$1.useImperativeHandle(ref, () => ({
     get nativeElement() {
       return nativeButtonRef.current;
     }
   }));
+  const handleClick = (e) => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    if (!props.onClick)
+      return;
+    const promise = props.onClick(e);
+    if (isPromise(promise)) {
+      try {
+        setInnerLoading(true);
+        yield promise;
+        setInnerLoading(false);
+      } catch (e2) {
+        setInnerLoading(false);
+        throw e2;
+      }
+    }
+  });
   return withNativeProps(props, React__default["default"].createElement("button", {
     ref: nativeButtonRef,
     type: props.type,
-    onClick: props.onClick,
+    onClick: handleClick,
     className: classNames__default["default"](classPrefix$1d, props.color ? `${classPrefix$1d}-${props.color}` : null, {
       [`${classPrefix$1d}-block`]: props.block,
       [`${classPrefix$1d}-disabled`]: disabled,
@@ -8473,14 +8499,12 @@ const Button = React$1.forwardRef((p, ref) => {
       [`${classPrefix$1d}-mini`]: props.size === "mini",
       [`${classPrefix$1d}-small`]: props.size === "small",
       [`${classPrefix$1d}-large`]: props.size === "large",
-      [`${classPrefix$1d}-loading`]: props.loading
+      [`${classPrefix$1d}-loading`]: loading
     }, `${classPrefix$1d}-shape-${props.shape}`),
     disabled
-  }, props.loading ? React__default["default"].createElement("div", {
+  }, loading ? React__default["default"].createElement("div", {
     className: `${classPrefix$1d}-loading-wrapper`
-  }, React__default["default"].createElement(DotLoading, {
-    color: "currentColor"
-  }), props.loadingText) : props.children));
+  }, props.loadingIcon, props.loadingText) : props.children));
 });
 var safeArea = "";
 const classPrefix$1c = "adm-safe-area";
@@ -8911,6 +8935,8 @@ const Calendar = React$1.forwardRef((p, ref) => {
       setCurrent(current.add(1, "year"));
     }
   }, React__default["default"].createElement(ArrowLeftDouble, null)));
+  const maxDay = React$1.useMemo(() => props.max && dayjs__default["default"](props.max), [props.max]);
+  const minDay = React$1.useMemo(() => props.min && dayjs__default["default"](props.min), [props.min]);
   function renderCells() {
     var _a;
     const cells = [];
@@ -8930,9 +8956,10 @@ const Calendar = React$1.forwardRef((p, ref) => {
         isSelect = isBegin || isEnd || d.isAfter(begin, "day") && d.isBefore(end, "day");
       }
       const inThisMonth = d.month() === current.month();
+      const disabled = !inThisMonth || maxDay && d.isAfter(maxDay, "day") || minDay && d.isBefore(minDay, "day");
       cells.push(React__default["default"].createElement("div", {
         key: d.valueOf(),
-        className: classNames__default["default"](`${classPrefix$17}-cell`, inThisMonth ? `${classPrefix$17}-cell-in` : `${classPrefix$17}-cell-out`, inThisMonth && {
+        className: classNames__default["default"](`${classPrefix$17}-cell`, disabled && `${classPrefix$17}-cell-disabled`, inThisMonth && {
           [`${classPrefix$17}-cell-today`]: d.isSame(today, "day"),
           [`${classPrefix$17}-cell-selected`]: isSelect,
           [`${classPrefix$17}-cell-selected-begin`]: isBegin,
@@ -8941,6 +8968,8 @@ const Calendar = React$1.forwardRef((p, ref) => {
         onClick: () => {
           if (!props.selectionMode)
             return;
+          if (disabled)
+            return;
           const date = d.toDate();
           if (!inThisMonth) {
             setCurrent(d.clone().date(1));
@@ -9987,62 +10016,52 @@ function prompt$3(props) {
 var Picker = attachPropertiesToComponent(Picker$1, {
   prompt: prompt$3
 });
-function useCascadePickerOptions(options) {
-  return React$1.useMemo(() => {
-    let depth = 1;
-    const subOptionsRecord = {};
-    function traverse(option, currentDepth) {
-      if (!option.children) {
-        return;
-      }
-      subOptionsRecord[option.value] = option.children;
+function useColumnsFn(options) {
+  const depth = React$1.useMemo(() => {
+    let depth2 = 0;
+    function traverse(options2, currentDepth) {
+      if (currentDepth > depth2)
+        depth2 = currentDepth;
       const nextDepth = currentDepth + 1;
-      if (nextDepth > depth) {
-        depth = nextDepth;
-      }
-      option.children.forEach((option2) => {
-        traverse(option2, nextDepth);
+      options2.forEach((option) => {
+        if (option.children) {
+          traverse(option.children, nextDepth);
+        }
       });
     }
-    options.forEach((option) => {
-      traverse(option, 1);
-    });
-    return {
-      depth,
-      subOptionsRecord
-    };
+    traverse(options, 1);
+    return depth2;
   }, [options]);
-}
-function generateCascadePickerColumns(value, options, depth, subOptionsRecord) {
-  const columns = [];
-  columns.push(options.map((option) => ({
-    label: option.label,
-    value: option.value
-  })));
-  for (let i = 0; i < depth - 1; i++) {
-    const x = value[i];
-    const subOptions = subOptionsRecord[x];
-    if (!subOptions) {
-      columns.push([]);
-    } else {
-      columns.push(subOptions.map((option) => ({
+  return (selected) => {
+    const columns = [];
+    let currentOptions = options;
+    let i = 0;
+    while (true) {
+      columns.push(currentOptions.map((option) => ({
         label: option.label,
         value: option.value
       })));
+      const x = selected[i];
+      const targetOptions = currentOptions.find((option) => option.value === x);
+      if (!targetOptions || !targetOptions.children)
+        break;
+      currentOptions = targetOptions.children;
+      i++;
     }
-  }
-  return columns;
+    while (i < depth - 1) {
+      columns.push([]);
+      i++;
+    }
+    return columns;
+  };
 }
 const CascadePicker = (props) => {
   const {
     options
   } = props, pickerProps = tslib.__rest(props, ["options"]);
-  const {
-    depth,
-    subOptionsRecord
-  } = useCascadePickerOptions(options);
+  const columnsFn = useColumnsFn(options);
   return React__default["default"].createElement(Picker, Object.assign({}, pickerProps, {
-    columns: (selected) => generateCascadePickerColumns(selected, options, depth, subOptionsRecord)
+    columns: columnsFn
   }));
 };
 function prompt$2(props) {
@@ -10082,12 +10101,9 @@ const CascadePickerView = (props) => {
   const {
     options
   } = props, pickerProps = tslib.__rest(props, ["options"]);
-  const {
-    depth,
-    subOptionsRecord
-  } = useCascadePickerOptions(options);
+  const columnsFn = useColumnsFn(options);
   return React__default["default"].createElement(PickerView, Object.assign({}, pickerProps, {
-    columns: (selected) => generateCascadePickerColumns(selected, options, depth, subOptionsRecord)
+    columns: columnsFn
   }));
 };
 var cascaderView = "";
@@ -11398,6 +11414,7 @@ const DatePicker = (p) => {
     value: pickerValue,
     onCancel: props.onCancel,
     onClose: props.onClose,
+    closeOnMaskClick: props.closeOnMaskClick,
     visible: props.visible,
     confirmText: props.confirmText,
     cancelText: props.cancelText,
@@ -11483,23 +11500,9 @@ const DialogActionButton = (props) => {
   const {
     action
   } = props;
-  const [loading, setLoading] = React$1.useState(false);
-  function handleClick() {
-    return tslib.__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__default["default"].createElement(Button, {
     key: action.key,
-    onClick: handleClick,
+    onClick: props.onAction,
     className: classNames__default["default"]("adm-dialog-button", {
       "adm-dialog-button-bold": action.bold
     }),
@@ -11507,7 +11510,7 @@ const DialogActionButton = (props) => {
     shape: "rectangular",
     block: true,
     color: action.danger ? "danger" : "primary",
-    loading,
+    loading: "auto",
     disabled: action.disabled
   }, action.text));
 };
@@ -12780,7 +12783,7 @@ const FloatingPanel = React$1.forwardRef((p, ref) => {
       tension: 300
     },
     onChange: (result2) => {
-      onHeightChange(result2.value.y, y2.isAnimating);
+      onHeightChange(-result2.value.y, y2.isAnimating);
     }
   }));
   react.useDrag((state) => {
@@ -12874,7 +12877,8 @@ const defaultFormContext = {
   name: void 0,
   hasFeedback: true,
   layout: "vertical",
-  requiredMarkStyle: "asterisk"
+  requiredMarkStyle: "asterisk",
+  disabled: false
 };
 const FormContext = React__default["default"].createContext(defaultFormContext);
 const NoStyleItemContext = React__default["default"].createContext(null);
@@ -12923,8 +12927,9 @@ const Form$1 = React$1.forwardRef((p, ref) => {
     layout,
     footer,
     mode,
+    disabled,
     requiredMarkStyle
-  } = props, formProps = tslib.__rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "requiredMarkStyle"]);
+  } = props, formProps = tslib.__rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "disabled", "requiredMarkStyle"]);
   const {
     locale
   } = useConfig();
@@ -12971,7 +12976,8 @@ const Form$1 = React$1.forwardRef((p, ref) => {
       name: formProps.name,
       hasFeedback,
       layout,
-      requiredMarkStyle
+      requiredMarkStyle,
+      disabled
     }
   }, lists), footer && React__default["default"].createElement("div", {
     className: `${classPrefix$K}-footer`
@@ -13123,7 +13129,9 @@ var Context = /* @__PURE__ */ React.createContext({
       registerField: warningFunc,
       useSubscribe: warningFunc,
       setInitialValues: warningFunc,
+      destroyForm: warningFunc,
       setCallbacks: warningFunc,
+      registerWatch: warningFunc,
       getFields: warningFunc,
       setValidateMessages: warningFunc,
       setPreserve: warningFunc,
@@ -13398,6 +13406,7 @@ const MemoInput = React__default["default"].memo(({
   children
 }) => children, (prev, next) => prev.value === next.value && prev.update === next.update);
 const FormItemLayout = (props) => {
+  var _a;
   const {
     className,
     style,
@@ -13405,7 +13414,6 @@ const FormItemLayout = (props) => {
     label,
     help,
     required,
-    disabled,
     children,
     htmlFor,
     hidden,
@@ -13418,6 +13426,7 @@ const FormItemLayout = (props) => {
   } = useConfig();
   const hasFeedback = props.hasFeedback !== void 0 ? props.hasFeedback : context.hasFeedback;
   const layout = props.layout || context.layout;
+  const disabled = (_a = props.disabled) !== null && _a !== void 0 ? _a : context.disabled;
   const requiredMark = (() => {
     const {
       requiredMarkStyle
@@ -13466,7 +13475,8 @@ const FormItemLayout = (props) => {
     extra,
     description,
     className: classNames__default["default"](classPrefix$H, className, `${classPrefix$H}-${layout}`, {
-      [`${classPrefix$H}-hidden`]: hidden
+      [`${classPrefix$H}-hidden`]: hidden,
+      [`${classPrefix$H}-has-error`]: props.errors.length
     }),
     disabled,
     onClick: props.onClick,
@@ -13653,7 +13663,8 @@ var Form = attachPropertiesToComponent(Form$1, {
   Subscribe: FormSubscribe,
   Header,
   Array: FormArray,
-  useForm: RcForm.useForm
+  useForm: RcForm.useForm,
+  useWatch: RcForm.useWatch
 });
 var grid = "";
 const classPrefix$G = `adm-grid`;
@@ -14559,7 +14570,8 @@ const InfiniteScroll = (p) => {
 var input = "";
 const classPrefix$v = `adm-input`;
 const defaultProps$r = {
-  defaultValue: ""
+  defaultValue: "",
+  onlyShowClearWhenFocus: true
 };
 const Input = React$1.forwardRef((p, ref) => {
   const props = mergeProps(defaultProps$r, p);
@@ -14608,6 +14620,15 @@ const Input = React$1.forwardRef((p, ref) => {
       setValue(nextValue);
     }
   }
+  const shouldShowClear = (() => {
+    if (!props.clearable || !value || props.readOnly)
+      return false;
+    if (props.onlyShowClearWhenFocus) {
+      return hasFocus;
+    } else {
+      return true;
+    }
+  })();
   return withNativeProps(props, React__default["default"].createElement("div", {
     className: classNames__default["default"](`${classPrefix$v}`, props.disabled && `${classPrefix$v}-disabled`)
   }, React__default["default"].createElement("input", {
@@ -14648,7 +14669,7 @@ const Input = React$1.forwardRef((p, ref) => {
     onCompositionStart: props.onCompositionStart,
     onCompositionEnd: props.onCompositionEnd,
     onClick: props.onClick
-  }), props.clearable && !!value && !props.readOnly && hasFocus && React__default["default"].createElement("div", {
+  }), shouldShowClear && React__default["default"].createElement("div", {
     className: `${classPrefix$v}-clear`,
     onMouseDown: (e) => {
       e.preventDefault();
@@ -14761,23 +14782,9 @@ const ModalActionButton = (props) => {
   const {
     action
   } = props;
-  const [loading, setLoading] = React$1.useState(false);
-  function handleClick() {
-    return tslib.__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__default["default"].createElement(Button, {
     key: action.key,
-    onClick: handleClick,
+    onClick: props.onAction,
     className: classNames__default["default"]("adm-modal-button", {
       "adm-modal-button-primary": props.action.primary
     }),
@@ -14785,7 +14792,7 @@ const ModalActionButton = (props) => {
     size: props.action.primary ? "large" : "middle",
     block: true,
     color: action.danger ? "danger" : "primary",
-    loading,
+    loading: "auto",
     disabled: action.disabled
   }, action.text));
 };
@@ -15762,6 +15769,7 @@ var searchBar = "";
 const classPrefix$i = `adm-search-bar`;
 const defaultProps$f = {
   clearable: true,
+  onlyShowClearWhenFocus: false,
   showCancelButton: false,
   defaultValue: "",
   clearOnCancel: true,
@@ -15841,6 +15849,7 @@ const SearchBar = React$1.forwardRef((p, ref) => {
     maxLength: props.maxLength,
     placeholder: props.placeholder,
     clearable: props.clearable,
+    onlyShowClearWhenFocus: props.onlyShowClearWhenFocus,
     onFocus: (e) => {
       var _a;
       setHasFocus(true);