antd-mobile 5.3.0 → 5.5.0

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

@@ -26,7 +26,29 @@ export const Calendar = forwardRef((p, ref) => {
     if (item) markItems.unshift(item);
   }
 
-  const [current, setCurrent] = useState(() => dayjs().date(1));
+  const dateRange = useMemo(() => {
+    var _a, _b, _c, _d;
+
+    if (props.selectionMode === 'single') {
+      const value = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : null;
+      return [value, value];
+    } else if (props.selectionMode === 'range') {
+      return (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : [null, null];
+    } else {
+      return [null, null];
+    }
+  }, [props.selectionMode, props.value, props.defaultValue]);
+  const [begin, setBegin] = useState(null);
+  const [end, setEnd] = useState(null);
+  useIsomorphicLayoutEffect(() => {
+    setBegin(dateRange[0] ? dayjs(dateRange[0]) : null);
+    setEnd(dateRange[1] ? dayjs(dateRange[1]) : null);
+  }, [dateRange[0], dateRange[1]]);
+  const [current, setCurrent] = useState(() => {
+    var _a;
+
+    return dayjs((_a = dateRange[0]) !== null && _a !== void 0 ? _a : today).date(1);
+  });
   useUpdateEffect(() => {
     var _a;
 
@@ -76,24 +98,6 @@ export const Calendar = forwardRef((p, ref) => {
       setCurrent(current.add(1, 'year'));
     }
   }, React.createElement(ArrowLeftDouble, null)));
-  const dateRange = useMemo(() => {
-    var _a, _b, _c, _d;
-
-    if (props.selectionMode === 'single') {
-      const value = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : null;
-      return [value, value];
-    } else if (props.selectionMode === 'range') {
-      return (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : [null, null];
-    } else {
-      return [null, null];
-    }
-  }, [props.selectionMode, props.value, props.defaultValue]);
-  const [begin, setBegin] = useState(null);
-  const [end, setEnd] = useState(null);
-  useIsomorphicLayoutEffect(() => {
-    setBegin(dateRange[0] ? dayjs(dateRange[0]) : null);
-    setEnd(dateRange[1] ? dayjs(dateRange[1]) : null);
-  }, [dateRange[0], dateRange[1]]);
 
   function renderCells() {
     var _a;

package/2x/es/components/cascader-view/cascader-view.d.ts

@@ -9,6 +9,7 @@ export declare type CascaderOption = {
 };
 export declare type CascaderValueExtend = {
     items: (CascaderOption | null)[];
+    isLeaf: boolean;
 };
 export declare type CascaderViewProps = {
     options: CascaderOption[];

package/2x/es/components/cascader-view/use-cascader-value-extend.js

@@ -21,11 +21,34 @@ export function useCascaderValueExtend(options) {
       return ret;
     }, val => JSON.stringify(val));
   }, [options]);
+  const generateIsLeaf = useMemo(() => {
+    return memoize(val => {
+      var _a;
+
+      let isLeaf = false;
+
+      for (const v of val) {
+        const target = options.find(option => option.value === v);
+
+        if (!target) {
+          break;
+        }
+
+        isLeaf = ((_a = target.children) === null || _a === void 0 ? void 0 : _a.length) === val.length;
+      }
+
+      return isLeaf;
+    }, val => JSON.stringify(val));
+  }, [options]);
 
   function generateValueExtend(val) {
     return {
       get items() {
         return generateItems(val);
+      },
+
+      get isLeaf() {
+        return generateIsLeaf(val);
       }
 
     };

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

@@ -20,7 +20,7 @@ export const CheckListItem = props => {
   }, active ? context.activeIcon : null);
   return withNativeProps(props, React.createElement(List.Item, {
     title: props.title,
-    className: classNames(classPrefix, readOnly && `${classPrefix}-readonly`),
+    className: classNames(classPrefix, readOnly && `${classPrefix}-readonly`, active && `${classPrefix}-active`),
     description: props.description,
     prefix: props.prefix,
     onClick: e => {

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import classNames from 'classnames';
 import { CheckboxGroupContext } from './group-context';
@@ -66,7 +66,22 @@ export const Checkbox = p => {
     }, props.indeterminate ? React.createElement(IndeterminateIcon, null) : checked && React.createElement(CheckIcon, null));
   };
 
+  const inputRef = useRef(null);
+  const labelRef = useRef(null);
+  useEffect(() => {
+    var _a;
+
+    (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', e => {
+      if (e.target !== inputRef.current) {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+      }
+    }, {
+      capture: false
+    });
+  }, []);
   return withNativeProps(props, React.createElement("label", {
+    ref: labelRef,
     className: classNames(classPrefix, {
       [`${classPrefix}-checked`]: checked && !props.indeterminate,
       [`${classPrefix}-indeterminate`]: props.indeterminate,
@@ -74,15 +89,12 @@ export const Checkbox = p => {
       [`${classPrefix}-block`]: props.block
     })
   }, React.createElement("input", {
+    ref: inputRef,
     type: 'checkbox',
     checked: checked,
     onChange: e => {
       setChecked(e.target.checked);
     },
-    onClick: e => {
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-    },
     disabled: disabled,
     id: props.id
   }), renderIcon(), props.children && React.createElement("div", {

package/2x/es/components/floating-bubble/floating-bubble.d.ts

@@ -2,5 +2,7 @@ import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type FloatingBubbleProps = {
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    axis?: 'x' | 'y' | 'xy' | 'lock';
+    magnetic?: 'x' | 'y';
 } & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius'>;
 export declare const FloatingBubble: FC<FloatingBubbleProps>;

package/2x/es/components/floating-bubble/floating-bubble.js

@@ -1,47 +1,83 @@
 import React, { useRef } from 'react';
-import { useSpring, animated } from '@react-spring/web';
+import { useSpring, animated, to } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 const classPrefix = `adm-floating-bubble`;
-const defaultProps = {};
+const defaultProps = {
+  axis: 'y'
+};
 export const FloatingBubble = p => {
   const props = mergeProps(defaultProps, p);
   const boundaryRef = useRef(null);
+  const buttonRef = useRef(null);
   /**
    * memoize the `to` function
    * inside a component that renders frequently
    * to prevent an unintended restart
    */
 
-  const [animationStyles, animation] = useSpring(() => ({
+  const [{
+    x,
+    y,
+    opacity
+  }, api] = useSpring(() => ({
+    x: 0,
     y: 0,
-    scale: 1,
     opacity: 1
   }));
   const bind = useDrag(state => {
-    if (state.down) {
-      // be movable in y axis
-      animation.start({
-        y: state.offset[1]
-      });
-    } // active status
+    let nextX = state.offset[0];
+    let nextY = state.offset[1];
 
+    if (state.last && props.magnetic) {
+      const boundary = boundaryRef.current;
+      const button = buttonRef.current;
+      if (!boundary || !button) return;
+      const boundaryRect = boundary.getBoundingClientRect();
+      const buttonRect = button.getBoundingClientRect();
 
-    animation.start({
-      scale: state.active ? 1.1 : 1,
+      if (props.magnetic === 'x') {
+        const compensation = x.goal - x.get();
+        const leftDistance = buttonRect.left + compensation - boundaryRect.left;
+        const rightDistance = boundaryRect.right - (buttonRect.right + compensation);
+
+        if (rightDistance <= leftDistance) {
+          nextX += rightDistance;
+        } else {
+          nextX -= leftDistance;
+        }
+      } else if (props.magnetic === 'y') {
+        const compensation = y.goal - y.get();
+        const topDistance = buttonRect.top + compensation - boundaryRect.top;
+        const bottomDistance = boundaryRect.bottom - (buttonRect.bottom + compensation);
+
+        if (bottomDistance <= topDistance) {
+          nextY += bottomDistance;
+        } else {
+          nextY -= topDistance;
+        }
+      }
+    }
+
+    api.start({
+      x: nextX,
+      y: nextY
+    }); // active status
+
+    api.start({
       opacity: state.active ? 0.8 : 1
     });
   }, {
-    // only trigger if a movement is detected on the specified axis.
-    axis: 'y',
+    axis: props.axis === 'xy' ? undefined : props.axis,
     pointer: {
       touch: true
     },
     // the component won't trigger drag logic if the user just clicked on the component.
     filterTaps: true,
     // set constraints to the user gesture
-    bounds: boundaryRef
+    bounds: boundaryRef,
+    from: () => [x.get(), y.get()]
   });
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix
@@ -51,8 +87,12 @@ export const FloatingBubble = p => {
     className: `${classPrefix}-boundary`,
     ref: boundaryRef
   })), React.createElement(animated.div, Object.assign({}, bind(), {
-    style: Object.assign({}, animationStyles),
+    style: {
+      opacity,
+      transform: to([x, y], (x, y) => `translate(${x}px, ${y}px)`)
+    },
     onClick: props.onClick,
-    className: `${classPrefix}-button`
+    className: `${classPrefix}-button`,
+    ref: buttonRef
   }), props.children)));
 };

package/2x/es/components/form/form-array.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactElement, ReactNode } from 'react';
+import type { StoreValue } from 'rc-field-form/es/interface';
+export interface FormArrayField {
+    index: number;
+    key: number;
+}
+export interface FormArrayOperation {
+    add: (defaultValue?: StoreValue, insertIndex?: number) => void;
+    remove: (index: number | number[]) => void;
+    move: (from: number, to: number) => void;
+}
+export interface FormArrayProps {
+    name: string | number | (string | number)[];
+    initialValue?: any[];
+    renderHeader?: (field: FormArrayField, operation: FormArrayOperation) => ReactNode;
+    renderAdd?: () => ReactNode;
+    children: (fields: FormArrayField[], operation: FormArrayOperation) => ReactElement[];
+}
+export declare const FormArray: React.FC<FormArrayProps>;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { List as RCList } from 'rc-field-form';
+import List from '../list';
+export const FormArray = props => {
+  return React.createElement(RCList, {
+    name: props.name,
+    initialValue: props.initialValue
+  }, (rcFields, operation) => {
+    const fields = rcFields.map(field => ({
+      index: field.name,
+      key: field.key
+    }));
+    const children = props.children(fields, operation).map((child, index) => {
+      var _a;
+
+      return React.createElement(List, {
+        key: fields[index].key,
+        mode: 'card',
+        header: (_a = props.renderHeader) === null || _a === void 0 ? void 0 : _a.call(props, fields[index], operation)
+      }, child);
+    });
+
+    if (props.renderAdd) {
+      children.push(React.createElement(List, {
+        key: 'add',
+        mode: 'card'
+      }, React.createElement(List.Item, {
+        className: 'adm-form-list-operation',
+        onClick: () => {
+          operation.add();
+        },
+        arrow: false
+      }, props.renderAdd())));
+    }
+
+    return React.createElement(React.Fragment, null, children);
+  });
+};

package/2x/es/components/form/form-item.css

@@ -50,11 +50,16 @@
   flex: none;
 }
 
-.adm-form-item-footer {
+.adm-form-item-feedback-error {
   color: var(--adm-color-danger);
   margin-top: 8px;
 }
 
+.adm-form-item-feedback-warning {
+  color: var(--adm-color-warning);
+  margin-top: 8px;
+}
+
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }

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

@@ -28,9 +28,7 @@ const FormItemLayout = props => {
     children,
     htmlFor,
     hidden,
-    errors,
     arrow,
-    description,
     childElementPosition = 'normal'
   } = props;
   const context = useContext(FormContext);
@@ -39,7 +37,6 @@ const FormItemLayout = props => {
   } = useConfig();
   const hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
   const layout = props.layout || context.layout;
-  const feedback = hasFeedback && errors && errors.length > 0 ? errors[0] : null;
 
   const requiredMark = (() => {
     const {
@@ -77,15 +74,19 @@ const FormItemLayout = props => {
     mode: 'dark',
     trigger: 'click'
   }, React.createElement(QuestionCircleOutline, null)))) : null;
-  const descriptionElement = feedback || description ? React.createElement(React.Fragment, null, description, React.createElement("div", {
-    className: `${classPrefix}-footer`
-  }, feedback)) : null;
+  const description = React.createElement(React.Fragment, null, props.description, hasFeedback && React.createElement(React.Fragment, null, props.errors.map((error, index) => React.createElement("div", {
+    key: `error-${index}`,
+    className: `${classPrefix}-feedback-error`
+  }, error)), props.warnings.map((warning, index) => React.createElement("div", {
+    key: `warning-${index}`,
+    className: `${classPrefix}-feedback-warning`
+  }, warning))));
   return React.createElement(List.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
     extra: extra,
-    description: descriptionElement,
+    description: description,
     className: classNames(classPrefix, className, `${classPrefix}-${layout}`, {
       [`${classPrefix}-hidden`]: hidden
     }),
@@ -153,7 +154,7 @@ export const FormItem = props => {
   }, [setSubMetas]);
 
   function renderLayout(baseChildren, fieldId, meta, isRequired) {
-    var _a;
+    var _a, _b;
 
     if (noStyle && !hidden) {
       return baseChildren;
@@ -171,6 +172,18 @@ export const FormItem = props => {
 
       return subErrors;
     }, curErrors);
+    const curWarnings = (_b = meta === null || meta === void 0 ? void 0 : meta.warnings) !== null && _b !== void 0 ? _b : [];
+    const warnings = Object.keys(subMetas).reduce((subWarnings, key) => {
+      var _a, _b;
+
+      const warnings = (_b = (_a = subMetas[key]) === null || _a === void 0 ? void 0 : _a.warnings) !== null && _b !== void 0 ? _b : [];
+
+      if (warnings.length) {
+        subWarnings = [...subWarnings, ...warnings];
+      }
+
+      return subWarnings;
+    }, curWarnings);
     return React.createElement(FormItemLayout, {
       className: className,
       style: style,
@@ -183,6 +196,7 @@ export const FormItem = props => {
       hasFeedback: hasFeedback,
       htmlFor: fieldId,
       errors: errors,
+      warnings: warnings,
       onClick: onClick,
       hidden: hidden,
       layout: layout,

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

@@ -17,4 +17,9 @@
 
 .adm-form .adm-form-footer {
   padding: 40px 24px;
+}
+
+.adm-form-list-operation {
+  text-align: center;
+  color: #1677ff;
 }

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

@@ -8,6 +8,7 @@ import { mergeProps } from '../../utils/with-default-props';
 import { Header } from './header';
 import { useConfig } from '../config-provider';
 import merge from 'lodash/merge';
+import { FormArray } from './form-array';
 const classPrefix = 'adm-form';
 const defaultProps = defaultFormContext;
 export const Form = forwardRef((p, ref) => {
@@ -45,13 +46,22 @@ export const Form = forwardRef((p, ref) => {
     items = [];
   }
 
-  React.Children.forEach(props.children, (child, index) => {
-    if (React.isValidElement(child) && child.type === Header) {
-      collect();
-      currentHeader = child.props.children;
-    } else {
-      items.push(child);
+  React.Children.forEach(props.children, child => {
+    if (React.isValidElement(child)) {
+      if (child.type === Header) {
+        collect();
+        currentHeader = child.props.children;
+        return;
+      }
+
+      if (child.type === FormArray) {
+        collect();
+        lists.push(child);
+        return;
+      }
     }
+
+    items.push(child);
   });
   collect();
   return React.createElement(RcForm, Object.assign({

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

@@ -19,6 +19,11 @@
   padding: 40px 24px;
 }
 
+.adm-form-list-operation {
+  text-align: center;
+  color: #1677ff;
+}
+
 .adm-form-item + .adm-form-item {
   border-top: none;
 }
@@ -71,11 +76,16 @@
   flex: none;
 }
 
-.adm-form-item-footer {
+.adm-form-item-feedback-error {
   color: var(--adm-color-danger);
   margin-top: 8px;
 }
 
+.adm-form-item-feedback-warning {
+  color: var(--adm-color-warning);
+  margin-top: 8px;
+}
+
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }

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

@@ -6,6 +6,7 @@ export type { FormProps, FormInstance } from './form';
 export type { FormItemProps } from './form-item';
 export type { FormSubscribeProps } from './form-subscribe';
 export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/interface';
+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;
@@ -14,6 +15,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<import("r
     Item: import("react").FC<import("./form-item").FormItemProps>;
     Subscribe: import("react").VFC<import("./form-subscribe").FormSubscribeProps>;
     Header: import("react").FC<{}>;
+    Array: import("react").FC<import("./form-array").FormArrayProps>;
     useForm: typeof useForm;
 };
 export default _default;

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

@@ -5,9 +5,11 @@ import { FormItem } from './form-item';
 import { Header } from './header';
 import { useForm } from 'rc-field-form';
 import { FormSubscribe } from './form-subscribe';
+import { FormArray } from './form-array';
 export default attachPropertiesToComponent(Form, {
   Item: FormItem,
   Subscribe: FormSubscribe,
   Header,
+  Array: FormArray,
   useForm
 });

package/2x/es/components/image-uploader/image-uploader.d.ts

@@ -20,7 +20,7 @@ export declare type ImageUploaderProps = {
     deletable?: boolean;
     capture?: InputHTMLAttributes<unknown>['capture'];
     onPreview?: (index: number, item: ImageUploadItem) => void;
-    beforeUpload?: (file: File[]) => Promise<File[]> | File[];
+    beforeUpload?: (file: File, files: File[]) => Promise<File | null> | File | null;
     upload: (file: File) => Promise<ImageUploadItem>;
     onDelete?: (item: ImageUploadItem) => boolean | Promise<boolean> | void;
     preview?: boolean;

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

@@ -39,6 +39,17 @@ export const ImageUploader = p => {
     onPreview
   } = props;
 
+  function processFile(file, fileList) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const {
+        beforeUpload
+      } = props;
+      let transformedFile = file;
+      transformedFile = yield beforeUpload === null || beforeUpload === void 0 ? void 0 : beforeUpload(file, fileList);
+      return transformedFile;
+    });
+  }
+
   function onChange(e) {
     var _a;
 
@@ -51,7 +62,12 @@ export const ImageUploader = p => {
       let files = [].slice.call(rawFiles);
 
       if (props.beforeUpload) {
-        files = yield props.beforeUpload(files);
+        const postFiles = files.map(file => {
+          return processFile(file, files);
+        });
+        yield Promise.all(postFiles).then(filesList => {
+          files = filesList.filter(Boolean);
+        });
       }
 
       if (files.length === 0) {

package/2x/es/components/infinite-scroll/infinite-scroll.js

@@ -1,5 +1,6 @@
+import { __awaiter } from "tslib";
 import { mergeProps } from '../../utils/with-default-props';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useLockFn, useMemoizedFn } from 'ahooks';
 import { withNativeProps } from '../../utils/native-props';
 import { getScrollParent } from '../../utils/get-scroll-parent';
@@ -23,25 +24,27 @@ export const InfiniteScroll = p => {
   }, p);
   const doLoadMore = useLockFn(() => props.loadMore());
   const elementRef = useRef(null);
-  const checkTimeoutRef = useRef();
-  const check = useMemoizedFn(() => {
-    window.clearTimeout(checkTimeoutRef.current);
-    checkTimeoutRef.current = window.setTimeout(() => {
-      if (!props.hasMore) return;
-      const element = elementRef.current;
-      if (!element) return;
-      if (!element.offsetParent) return;
-      const parent = getScrollParent(element);
-      if (!parent) return;
-      const rect = element.getBoundingClientRect();
-      const elementTop = rect.top;
-      const current = isWindow(parent) ? window.innerHeight : parent.getBoundingClientRect().bottom;
+  const [flag, setFlag] = useState({});
+  const nextFlagRef = useRef(flag);
+  const check = useMemoizedFn(() => __awaiter(void 0, void 0, void 0, function* () {
+    if (nextFlagRef.current !== flag) return;
+    if (!props.hasMore) return;
+    const element = elementRef.current;
+    if (!element) return;
+    if (!element.offsetParent) return;
+    const parent = getScrollParent(element);
+    if (!parent) return;
+    const rect = element.getBoundingClientRect();
+    const elementTop = rect.top;
+    const current = isWindow(parent) ? window.innerHeight : parent.getBoundingClientRect().bottom;
 
-      if (current >= elementTop - props.threshold) {
-        doLoadMore();
-      }
-    });
-  }); // 确保在内容不足时会自动触发加载事件
+    if (current >= elementTop - props.threshold) {
+      const nextFlag = {};
+      nextFlagRef.current = nextFlag;
+      yield doLoadMore();
+      setFlag(nextFlag);
+    }
+  })); // 确保在内容不足时会自动触发加载事件
 
   useEffect(() => {
     check();

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

@@ -13,7 +13,6 @@ import AutoCenter from '../auto-center';
 import { useSpring, animated } from '@react-spring/web';
 import { withNativeProps } from '../../utils/native-props';
 import { CloseOutline } from 'antd-mobile-icons';
-const classPrefix = `adm-modal`;
 const defaultProps = {
   visible: false,
   actions: [],

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

@@ -55,7 +55,7 @@ export const NoticeBar = memo(p => {
     delayLockRef.current = false;
     start();
   }, props.delay);
-  useResizeEffect(text => {
+  useResizeEffect(() => {
     start();
   }, containerRef);
   useMutationEffect(() => {