antd-mobile 5.2.2 → 5.4.0

package/2x/cjs/components/pull-to-refresh/pull-to-refresh.js

@@ -131,7 +131,7 @@ const PullToRefresh = p => {
       if (!element) return;
       const scrollParent = (0, _getScrollParent.getScrollParent)(element);
       if (!scrollParent) return;
-      const top = 'scrollTop' in scrollParent ? scrollParent.scrollTop : scrollParent.pageYOffset;
+      const top = 'scrollTop' in scrollParent ? scrollParent.scrollTop : scrollParent.scrollY;
 
       if (top <= 0 && y > 0) {
         pullingRef.current = true;

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

@@ -67,7 +67,6 @@ const SearchBar = (0, _react.forwardRef)((p, ref) => {
 
   const renderCancelButton = () => {
     let isShowCancel = false;
-    const showCancelButton = props.showCancelButton;
 
     if (typeof props.showCancelButton === 'function') {
       isShowCancel = props.showCancelButton(hasFocus, value);

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

@@ -258,7 +258,7 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
           style: {
             [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
           }
-        }, _react.default.Children.map(validChildren, (child, index) => {
+        }, _react.default.Children.map(validChildren, child => {
           return _react.default.createElement("div", {
             className: 'adm-swiper-slide'
           }, child);

package/2x/cjs/components/text-area/text-area.css

@@ -3,6 +3,8 @@
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
+  --text-align: left;
+  --count-text-align: right;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
@@ -27,6 +29,7 @@
   outline: none;
   appearance: none;
   min-height: 1.5em;
+  text-align: var(--text-align);
 }
 
 .adm-text-area-element::placeholder {
@@ -62,7 +65,7 @@
 }
 
 .adm-text-area-count {
-  text-align: right;
+  text-align: var(--count-text-align);
   color: var(--adm-color-weak);
   font-size: 34px;
   padding-top: 16px;

package/2x/cjs/components/text-area/text-area.d.ts

@@ -14,7 +14,7 @@ export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaH
         maxRows?: number;
     };
     id?: string;
-} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color'>;
+} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--count-text-align'>;
 export declare type TextAreaRef = {
     clear: () => void;
     focus: () => void;
@@ -33,4 +33,4 @@ export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.Detail
         maxRows?: number | undefined;
     } | undefined;
     id?: string | undefined;
-} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--disabled-color"> & React.RefAttributes<TextAreaRef>>;
+} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align"> & React.RefAttributes<TextAreaRef>>;

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

@@ -31,6 +31,57 @@ export declare const base: {
             description: string;
         };
     };
+    Form: {
+        required: string;
+        optional: string;
+        defaultValidateMessages: {
+            default: string;
+            required: string;
+            enum: string;
+            whitespace: string;
+            date: {
+                format: string;
+                parse: string;
+                invalid: string;
+            };
+            types: {
+                string: string;
+                method: string;
+                array: string;
+                object: string;
+                number: string;
+                date: string;
+                boolean: string;
+                integer: string;
+                float: string;
+                regexp: string;
+                email: string;
+                url: string;
+                hex: string;
+            };
+            string: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            number: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            array: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            pattern: {
+                mismatch: string;
+            };
+        };
+    };
     ImageUploader: {
         uploading: string;
     };

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.base = void 0;
+const typeTemplate = '${label} is not a valid ${type}';
 const base = {
   common: {
     confirm: 'Confirm',
@@ -37,6 +38,57 @@ const base = {
       description: 'Want to try a new search?'
     }
   },
+  Form: {
+    required: 'Required',
+    optional: 'Optional',
+    defaultValidateMessages: {
+      default: 'Field validation error for ${label}',
+      required: 'Please enter ${label}',
+      enum: '${label} must be one of [${enum}]',
+      whitespace: '${label} cannot be a blank character',
+      date: {
+        format: '${label} date format is invalid',
+        parse: '${label} cannot be converted to a date',
+        invalid: '${label} is an invalid date'
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate
+      },
+      string: {
+        len: '${label} must be ${len} characters',
+        min: '${label} must be at least ${min} characters',
+        max: '${label} must be up to ${max} characters',
+        range: '${label} must be between ${min}-${max} characters'
+      },
+      number: {
+        len: '${label} must be equal to ${len}',
+        min: '${label} must be minimum ${min}',
+        max: '${label} must be maximum ${max}',
+        range: '${label} must be between ${min}-${max}'
+      },
+      array: {
+        len: 'Must be ${len} ${label}',
+        min: 'At least ${min} ${label}',
+        max: 'At most ${max} ${label}',
+        range: 'The amount of ${label} must be between ${min}-${max}'
+      },
+      pattern: {
+        mismatch: '${label} does not match the pattern ${pattern}'
+      }
+    }
+  },
   ImageUploader: {
     uploading: 'Uploading...'
   },

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

@@ -31,6 +31,57 @@ declare const enUS: {
             description: string;
         };
     };
+    Form: {
+        required: string;
+        optional: string;
+        defaultValidateMessages: {
+            default: string;
+            required: string;
+            enum: string;
+            whitespace: string;
+            date: {
+                format: string;
+                parse: string;
+                invalid: string;
+            };
+            types: {
+                string: string;
+                method: string;
+                array: string;
+                object: string;
+                number: string;
+                date: string;
+                boolean: string;
+                integer: string;
+                float: string;
+                regexp: string;
+                email: string;
+                url: string;
+                hex: string;
+            };
+            string: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            number: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            array: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            pattern: {
+                mismatch: string;
+            };
+        };
+    };
     ImageUploader: {
         uploading: string;
     };

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

@@ -31,6 +31,57 @@ declare const zhCN: {
             description: string;
         };
     };
+    Form: {
+        required: string;
+        optional: string;
+        defaultValidateMessages: {
+            default: string;
+            required: string;
+            enum: string;
+            whitespace: string;
+            date: {
+                format: string;
+                parse: string;
+                invalid: string;
+            };
+            types: {
+                string: string;
+                method: string;
+                array: string;
+                object: string;
+                number: string;
+                date: string;
+                boolean: string;
+                integer: string;
+                float: string;
+                regexp: string;
+                email: string;
+                url: string;
+                hex: string;
+            };
+            string: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            number: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            array: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            pattern: {
+                mismatch: string;
+            };
+        };
+    };
     ImageUploader: {
         uploading: string;
     };

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

@@ -9,6 +9,7 @@ var _mergeLocale = require("../utils/merge-locale");
 
 var _base = require("./base");
 
+const typeTemplate = '${label}不是一个有效的${type}';
 const zhCN = (0, _mergeLocale.mergeLocale)(_base.base, {
   common: {
     confirm: '确定',
@@ -42,6 +43,57 @@ const zhCN = (0, _mergeLocale.mergeLocale)(_base.base, {
       description: '找找其他的吧'
     }
   },
+  Form: {
+    required: '必填',
+    optional: '选填',
+    defaultValidateMessages: {
+      default: '字段验证错误${label}',
+      required: '请输入${label}',
+      enum: '${label}必须是其中一个[${enum}]',
+      whitespace: '${label}不能为空字符',
+      date: {
+        format: '${label}日期格式无效',
+        parse: '${label}不能转换为日期',
+        invalid: '${label}是一个无效日期'
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate
+      },
+      string: {
+        len: '${label}须为${len}个字符',
+        min: '${label}最少${min}个字符',
+        max: '${label}最多${max}个字符',
+        range: '${label}须在${min}-${max}字符之间'
+      },
+      number: {
+        len: '${label}必须等于${len}',
+        min: '${label}最小值为${min}',
+        max: '${label}最大值为${max}',
+        range: '${label}须在${min}-${max}之间'
+      },
+      array: {
+        len: '须为${len}个${label}',
+        min: '最少${min}个${label}',
+        max: '最多${max}个${label}',
+        range: '${label}数量须在${min}-${max}之间'
+      },
+      pattern: {
+        mismatch: '${label}与模式不匹配${pattern}'
+      }
+    }
+  },
   ImageUploader: {
     uploading: '上传中...'
   },

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

@@ -17,6 +17,7 @@ export const Avatar = p => {
     placeholder: props.fallback,
     alt: props.alt,
     lazy: props.lazy,
+    fit: props.fit,
     onClick: props.onClick,
     onError: props.onError
   }));

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

@@ -28,14 +28,10 @@ export const DatePicker = p => {
   });
   const now = useMemo(() => new Date(), []);
   const pickerValue = useMemo(() => {
-    let date = value;
-
-    if (date === null) {
-      date = new Date(bound(now.getTime(), props.min.getTime(), props.max.getTime()));
-    }
-
+    let date = value !== null && value !== void 0 ? value : now;
+    date = new Date(bound(date.getTime(), props.min.getTime(), props.max.getTime()));
     return convertDateToStringArray(date, props.precision);
-  }, [value, props.precision]);
+  }, [value, props.precision, props.min, props.max]);
   const onConfirm = useCallback(val => {
     setValue(convertStringArrayToDate(val, props.precision));
   }, [setValue, props.precision]);

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

@@ -1,10 +1,12 @@
 import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type EllipsisProps = {
     content: string;
     direction?: 'start' | 'end' | 'middle';
     rows?: number;
     expandText?: string;
     collapseText?: string;
+    stopPropagationForActionButtons?: PropagationEvent[];
 } & NativeProps;
 export declare const Ellipsis: FC<EllipsisProps>;

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

@@ -3,12 +3,14 @@ import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 import { useResizeEffect } from '../../utils/use-resize-effect';
 import { useIsomorphicLayoutEffect } from 'ahooks';
+import { withStopPropagation } from '../../utils/with-stop-propagation';
 const classPrefix = `adm-ellipsis`;
 const defaultProps = {
   direction: 'end',
   rows: 1,
   expandText: '',
-  collapseText: ''
+  collapseText: '',
+  stopPropagationForActionButtons: []
 };
 export const Ellipsis = p => {
   const props = mergeProps(defaultProps, p);
@@ -117,16 +119,16 @@ export const Ellipsis = p => {
   useIsomorphicLayoutEffect(() => {
     calcEllipsised();
   }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
-  const expandActionElement = exceeded && props.expandText ? React.createElement("a", {
+  const expandActionElement = exceeded && props.expandText ? withStopPropagation(props.stopPropagationForActionButtons, React.createElement("a", {
     onClick: () => {
       setExpanded(true);
     }
-  }, props.expandText) : null;
-  const collapseActionElement = exceeded && props.expandText ? React.createElement("a", {
+  }, props.expandText)) : null;
+  const collapseActionElement = exceeded && props.expandText ? withStopPropagation(props.stopPropagationForActionButtons, React.createElement("a", {
     onClick: () => {
       setExpanded(false);
     }
-  }, props.collapseText) : null;
+  }, props.collapseText)) : null;
 
   const renderContent = () => {
     if (!exceeded) {

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,74 @@
 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) {
+      const boundary = boundaryRef.current;
+      const button = buttonRef.current;
+      if (!boundary || !button) return;
 
-    animation.start({
-      scale: state.active ? 1.1 : 1,
+      if (props.magnetic === 'x') {
+        const compensation = x.goal - x.get();
+        const boundaryRect = boundary.getBoundingClientRect();
+        const buttonRect = button.getBoundingClientRect();
+        const leftDistance = buttonRect.left + compensation - boundaryRect.left;
+        const rightDistance = boundaryRect.right - (buttonRect.right + compensation);
+
+        if (rightDistance <= leftDistance) {
+          nextX += rightDistance;
+        } else {
+          nextX -= leftDistance;
+        }
+      }
+    }
+
+    api.start({
+      x: nextX,
+      y: nextY // immediate: !state.last,
+
+    }); // 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 +78,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/context.d.ts

@@ -4,8 +4,9 @@ import type { Meta, InternalNamePath } from 'rc-field-form/lib/interface';
 export declare type FormContextType = {
     hasFeedback: boolean;
     layout: FormLayout;
+    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';
 };
-export declare const DEFAULT_FORM_CONTEXT: FormContextType;
+export declare const defaultFormContext: FormContextType;
 export declare const FormContext: React.Context<FormContextType>;
 export declare type OnSubMetaChange = (meta: Meta & {
     destroy?: boolean;

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

@@ -1,7 +1,8 @@
 import React from 'react';
-export const DEFAULT_FORM_CONTEXT = {
+export const defaultFormContext = {
   hasFeedback: true,
-  layout: 'vertical'
+  layout: 'vertical',
+  requiredMarkStyle: 'asterisk'
 };
-export const FormContext = React.createContext(DEFAULT_FORM_CONTEXT);
+export const FormContext = React.createContext(defaultFormContext);
 export const NoStyleItemContext = React.createContext(null);