antd-mobile 5.2.2 → 5.4.0

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

@@ -11,7 +11,7 @@
   color: #666666;
 }
 
-.adm-form-item-label-required {
+.adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
   left: -0.6em;
   top: 0;
@@ -20,8 +20,34 @@
   user-select: none;
 }
 
+.adm-form-item-label .adm-form-item-required-text {
+  margin-left: 8px;
+  color: var(--adm-color-weak);
+}
+
 .adm-form-item-label-help {
   margin-left: 8px;
+  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 {

package/2x/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/2x/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/2x/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/2x/es/components/form/index.css

@@ -32,7 +32,7 @@
   color: #666666;
 }
 
-.adm-form-item-label-required {
+.adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
   left: -0.6em;
   top: 0;
@@ -41,8 +41,34 @@
   user-select: none;
 }
 
+.adm-form-item-label .adm-form-item-required-text {
+  margin-left: 8px;
+  color: var(--adm-color-weak);
+}
+
 .adm-form-item-label-help {
   margin-left: 8px;
+  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 {

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

package/2x/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/2x/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/2x/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/2x/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%;
@@ -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/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/2x/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/2x/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...'
   },

package/2x/es/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/es/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;
     };