antd-mobile 5.2.2 → 5.4.0

package/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/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/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);

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

@@ -9,7 +9,7 @@
   position: relative;
   color: #666666;
 }
-.adm-form-item-label-required {
+.adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
   left: -0.6em;
   top: 0;
@@ -17,8 +17,28 @@
   color: var(--adm-color-danger);
   user-select: none;
 }
+.adm-form-item-label .adm-form-item-required-text {
+  margin-left: 4px;
+  color: var(--adm-color-weak);
+}
 .adm-form-item-label-help {
   margin-left: 4px;
+  cursor: pointer;
+}
+.adm-form-item-child {
+  display: flex;
+}
+.adm-form-item-child-position-normal {
+  justify-content: normal;
+}
+.adm-form-item-child-position-normal > * {
+  flex: auto;
+}
+.adm-form-item-child-position-right {
+  justify-content: right;
+}
+.adm-form-item-child-position-right > * {
+  flex: none;
 }
 .adm-form-item-footer {
   color: var(--adm-color-danger);

package/es/components/form/form-item.d.ts

@@ -16,6 +16,7 @@ export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePr
     disabled?: boolean;
     hidden?: boolean;
     layout?: FormLayout;
+    childElementPosition?: 'normal' | 'right';
     children: ChildrenType;
 } & NativeProps;
 export declare const FormItem: FC<FormItemProps>;

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

@@ -9,6 +9,7 @@ import { toArray } from './utils';
 import List from '../list';
 import Popover from '../popover';
 import { QuestionCircleOutline } from 'antd-mobile-icons';
+import { useConfig } from '../config-provider';
 const NAME_SPLIT = '__SPLIT__';
 const classPrefix = `adm-form-item`;
 const MemoInput = React.memo(({
@@ -29,18 +30,47 @@ const FormItemLayout = props => {
     hidden,
     errors,
     arrow,
-    description
+    description,
+    childElementPosition = 'normal'
   } = props;
   const context = useContext(FormContext);
+  const {
+    locale
+  } = 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 {
+      requiredMarkStyle
+    } = context;
+
+    switch (requiredMarkStyle) {
+      case 'asterisk':
+        return required && React.createElement("span", {
+          className: `${classPrefix}-required-asterisk`
+        }, "*");
+
+      case 'text-required':
+        return required && React.createElement("span", {
+          className: `${classPrefix}-required-text`
+        }, "(", locale.Form.required, ")");
+
+      case 'text-optional':
+        return !required && React.createElement("span", {
+          className: `${classPrefix}-required-text`
+        }, "(", locale.Form.optional, ")");
+
+      default:
+        return null;
+    }
+  })();
+
   const labelElement = label ? React.createElement("label", {
     className: `${classPrefix}-label`,
     htmlFor: htmlFor
-  }, label, required && React.createElement("span", {
-    className: `${classPrefix}-label-required`
-  }, "*"), help && React.createElement("span", {
+  }, label, requiredMark, help && React.createElement("span", {
     className: `${classPrefix}-label-help`
   }, React.createElement(Popover, {
     content: help,
@@ -62,7 +92,11 @@ const FormItemLayout = props => {
     disabled: disabled,
     onClick: props.onClick,
     arrow: arrow
-  }, children);
+  }, React.createElement("div", {
+    className: classNames(`${classPrefix}-child`, `${classPrefix}-child-position-${childElementPosition}`)
+  }, React.createElement("div", {
+    className: classNames(`${classPrefix}-child-inner`)
+  }, children)));
 };
 
 export const FormItem = props => {
@@ -80,6 +114,7 @@ export const FormItem = props => {
     noStyle,
     hidden,
     layout,
+    childElementPosition,
     description,
     // Field 相关
     disabled,
@@ -93,7 +128,7 @@ export const FormItem = props => {
     dependencies,
     arrow
   } = props,
-        fieldProps = __rest(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
+        fieldProps = __rest(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "childElementPosition", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
 
   const {
     validateTrigger: contextValidateTrigger
@@ -151,6 +186,7 @@ export const FormItem = props => {
       onClick: onClick,
       hidden: hidden,
       layout: layout,
+      childElementPosition: childElementPosition,
       arrow: arrow
     }, React.createElement(NoStyleItemContext.Provider, {
       value: onSubMetaChange
@@ -193,13 +229,7 @@ export const FormItem = props => {
     messageVariables: Variables
   }), (control, meta, context) => {
     let childNode = null;
-    const isRequired = required !== undefined ? required : !!(rules && rules.some(rule => {
-      if (rule && typeof rule === 'object' && rule.required) {
-        return true;
-      }
-
-      return false;
-    }));
+    const isRequired = required !== undefined ? required : rules && rules.some(rule => !!(rule && typeof rule === 'object' && rule.required));
     const fieldId = (toArray(name).length && meta ? meta.name : []).join('_');
 
     if (shouldUpdate && dependencies) {

package/es/components/form/form.js

@@ -1,16 +1,15 @@
 import { __rest } from "tslib";
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import classNames from 'classnames';
 import List from '../list';
 import RcForm from 'rc-field-form';
-import { FormContext } from './context';
+import { defaultFormContext, FormContext } from './context';
 import { mergeProps } from '../../utils/with-default-props';
 import { Header } from './header';
+import { useConfig } from '../config-provider';
+import merge from 'lodash/merge';
 const classPrefix = 'adm-form';
-const defaultProps = {
-  hasFeedback: true,
-  layout: 'vertical'
-};
+const defaultProps = defaultFormContext;
 export const Form = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
 
@@ -21,10 +20,15 @@ export const Form = forwardRef((p, ref) => {
     children,
     layout,
     footer,
-    mode
+    mode,
+    requiredMarkStyle
   } = props,
-        formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode"]);
+        formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "requiredMarkStyle"]);
 
+  const {
+    locale
+  } = useConfig();
+  const validateMessages = useMemo(() => merge({}, locale.Form.defaultValidateMessages, formProps.validateMessages), [locale.Form.defaultValidateMessages, formProps.validateMessages]);
   const lists = [];
   let currentHeader = null;
   let items = [];
@@ -41,7 +45,7 @@ export const Form = forwardRef((p, ref) => {
     items = [];
   }
 
-  React.Children.forEach(props.children, (child, index) => {
+  React.Children.forEach(props.children, child => {
     if (React.isValidElement(child) && child.type === Header) {
       collect();
       currentHeader = child.props.children;
@@ -54,10 +58,13 @@ export const Form = forwardRef((p, ref) => {
     className: classNames(classPrefix, className),
     style: style,
     ref: ref
-  }, formProps), React.createElement(FormContext.Provider, {
+  }, formProps, {
+    validateMessages: validateMessages
+  }), React.createElement(FormContext.Provider, {
     value: {
-      hasFeedback: hasFeedback,
-      layout
+      hasFeedback,
+      layout,
+      requiredMarkStyle
     }
   }, lists), footer && React.createElement("div", {
     className: `${classPrefix}-footer`

package/es/components/form/index.css

@@ -27,7 +27,7 @@
   position: relative;
   color: #666666;
 }
-.adm-form-item-label-required {
+.adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
   left: -0.6em;
   top: 0;
@@ -35,8 +35,28 @@
   color: var(--adm-color-danger);
   user-select: none;
 }
+.adm-form-item-label .adm-form-item-required-text {
+  margin-left: 4px;
+  color: var(--adm-color-weak);
+}
 .adm-form-item-label-help {
   margin-left: 4px;
+  cursor: pointer;
+}
+.adm-form-item-child {
+  display: flex;
+}
+.adm-form-item-child-position-normal {
+  justify-content: normal;
+}
+.adm-form-item-child-position-normal > * {
+  flex: auto;
+}
+.adm-form-item-child-position-right {
+  justify-content: right;
+}
+.adm-form-item-child-position-right > * {
+  flex: none;
 }
 .adm-form-item-footer {
   color: var(--adm-color-danger);

package/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/es/components/input/input.js

@@ -57,7 +57,7 @@ export const Input = forwardRef((p, ref) => {
     let nextValue = value;
 
     if (props.type === 'number') {
-      nextValue = bound(parseFloat(nextValue), props.min, props.max).toString();
+      nextValue = nextValue && bound(parseFloat(nextValue), props.min, props.max).toString();
     }
 
     if (nextValue !== value) {
@@ -105,7 +105,7 @@ export const Input = forwardRef((p, ref) => {
     onKeyUp: props.onKeyUp,
     onCompositionStart: props.onCompositionStart,
     onCompositionEnd: props.onCompositionEnd
-  }), props.clearable && !!value && !props.readOnly && React.createElement("div", {
+  }), props.clearable && !!value && !props.readOnly && hasFocus && React.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

package/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/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(() => {

package/es/components/pull-to-refresh/pull-to-refresh.js

@@ -108,7 +108,7 @@ export const PullToRefresh = p => {
       if (!element) return;
       const scrollParent = 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/es/components/search-bar/search-bar.js

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

package/es/components/swiper/swiper.js

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

package/es/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%;
@@ -26,6 +28,7 @@
   outline: none;
   appearance: none;
   min-height: 1.5em;
+  text-align: var(--text-align);
 }
 .adm-text-area-element::placeholder {
   color: var(--placeholder-color);
@@ -53,7 +56,7 @@
   pointer-events: none;
 }
 .adm-text-area-count {
-  text-align: right;
+  text-align: var(--count-text-align);
   color: var(--adm-color-weak);
   font-size: 17px;
   padding-top: 8px;

package/es/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/es/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/es/locales/base.js

@@ -1,3 +1,4 @@
+const typeTemplate = '${label} is not a valid ${type}';
 export const base = {
   common: {
     confirm: 'Confirm',
@@ -31,6 +32,57 @@ export 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...'
   },