antd-mobile 5.2.2 → 5.3.0

package/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/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/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/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/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/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/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 = [];
@@ -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/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/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/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...'
   },