antd-mobile 5.8.1 → 5.9.1

package/es/components/form/context.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormLayout } from '.';
 import type { Meta, InternalNamePath } from 'rc-field-form/lib/interface';
 export declare type FormContextType = {
+    name?: string;
     hasFeedback: boolean;
     layout: FormLayout;
     requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';

package/es/components/form/context.js

@@ -1,5 +1,6 @@
 import React from 'react';
 export const defaultFormContext = {
+  name: undefined,
   hasFeedback: true,
   layout: 'vertical',
   requiredMarkStyle: 'asterisk'

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

@@ -136,9 +136,12 @@ export const FormItem = props => {
   } = props,
         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", "clickable", "arrow"]);
 
+  const {
+    name: formName
+  } = useContext(FormContext);
   const {
     validateTrigger: contextValidateTrigger
-  } = React.useContext(FieldContext);
+  } = useContext(FieldContext);
   const mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
   const updateRef = React.useRef(0);
   updateRef.current += 1;
@@ -250,7 +253,8 @@ export const FormItem = props => {
   }), (control, meta, context) => {
     let childNode = null;
     const isRequired = required !== undefined ? required : rules && rules.some(rule => !!(rule && typeof rule === 'object' && rule.required));
-    const fieldId = (toArray(name).length && meta ? meta.name : []).join('_');
+    const nameList = toArray(name).length && meta ? meta.name : [];
+    const fieldId = (nameList.length > 0 && formName ? [formName, ...nameList] : nameList).join('_');
 
     if (shouldUpdate && dependencies) {
       devWarning('Form.Item', "`shouldUpdate` and `dependencies` shouldn't be used together.");

package/es/components/form/form.js

@@ -72,6 +72,7 @@ export const Form = forwardRef((p, ref) => {
     validateMessages: validateMessages
   }), React.createElement(FormContext.Provider, {
     value: {
+      name: formProps.name,
       hasFeedback,
       layout,
       requiredMarkStyle

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

@@ -148,7 +148,8 @@ export const ImageUploader = p => {
     className: classPrefix
   }, React.createElement(Space, {
     className: `${classPrefix}-space`,
-    wrap: true
+    wrap: true,
+    block: true
   }, value.map((fileItem, index) => {
     var _a, _b;
 

package/es/components/picker/picker-utils.d.ts

@@ -0,0 +1,2 @@
+import { PickerColumnItem } from '../picker-view';
+export declare const defaultRenderLabel: (item: PickerColumnItem) => import("react").ReactNode;

package/es/components/picker/picker-utils.js

@@ -0,0 +1 @@
+export const defaultRenderLabel = item => item.label;

package/es/components/picker/picker.d.ts

@@ -16,5 +16,6 @@ export declare type PickerProps = {
     confirmText?: ReactNode;
     cancelText?: ReactNode;
     children?: (items: (PickerColumnItem | null)[]) => ReactNode;
+    renderLabel?: (item: PickerColumnItem) => ReactNode;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
 export declare const Picker: React.NamedExoticComponent<PickerProps>;

package/es/components/picker/picker.js

@@ -8,10 +8,12 @@ import { generateColumnsExtend, useColumnsExtend } from '../picker-view/columns-
 import { useConfig } from '../config-provider';
 import { useMemoizedFn } from 'ahooks';
 import SafeArea from '../safe-area';
+import { defaultRenderLabel } from './picker-utils';
 const classPrefix = `adm-picker`;
 const defaultProps = {
   defaultValue: [],
-  closeOnMaskClick: true
+  closeOnMaskClick: true,
+  renderLabel: defaultRenderLabel
 };
 export const Picker = memo(p => {
   var _a;
@@ -78,6 +80,7 @@ export const Picker = memo(p => {
     className: `${classPrefix}-body`
   }, React.createElement(PickerView, {
     columns: props.columns,
+    renderLabel: props.renderLabel,
     value: innerValue,
     onChange: onChange
   }))));

package/es/components/picker-view/picker-view.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { PickerProps } from '../picker';
 export declare type PickerValue = string | null;
 export declare type PickerValueExtend = {
     columns: PickerColumnItem[][];
@@ -15,5 +16,5 @@ export declare type PickerViewProps = {
     value?: PickerValue[];
     defaultValue?: PickerValue[];
     onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
-} & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
+} & Pick<PickerProps, 'renderLabel'> & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
 export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

package/es/components/picker-view/picker-view.js

@@ -4,9 +4,11 @@ import { Wheel } from './wheel';
 import { useColumnsExtend } from './columns-extend';
 import { withNativeProps } from '../../utils/native-props';
 import { useDebounceEffect } from 'ahooks';
+import { defaultRenderLabel } from '../picker/picker-utils';
 const classPrefix = `adm-picker-view`;
 const defaultProps = {
-  defaultValue: []
+  defaultValue: [],
+  renderLabel: defaultRenderLabel
 };
 export const PickerView = memo(p => {
   const props = mergeProps(defaultProps, p);
@@ -55,7 +57,8 @@ export const PickerView = memo(p => {
     index: index,
     column: column,
     value: innerValue[index],
-    onSelect: handleSelect
+    onSelect: handleSelect,
+    renderLabel: props.renderLabel
   })), React.createElement("div", {
     className: `${classPrefix}-mask`
   }, React.createElement("div", {

package/es/components/picker-view/wheel.d.ts

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { PickerColumnItem, PickerValue } from './index';
-interface Props {
+declare type Props = {
     index: number;
     column: PickerColumnItem[];
     value: PickerValue;
     onSelect: (value: PickerValue, index: number) => void;
-}
+    renderLabel: (item: PickerColumnItem) => ReactNode;
+};
 export declare const Wheel: React.NamedExoticComponent<Props>;
 export {};

package/es/components/picker-view/wheel.js

@@ -10,7 +10,8 @@ const classPrefix = `adm-picker-view`;
 export const Wheel = memo(props => {
   const {
     value,
-    column
+    column,
+    renderLabel
   } = props;
 
   function onSelect(val) {
@@ -156,7 +157,7 @@ export const Wheel = memo(props => {
       "aria-label": selected ? 'active' : ''
     }, React.createElement("div", {
       className: `${classPrefix}-column-item-label`
-    }, item.label));
+    }, renderLabel(item)));
   })), renderAccessible());
 }, (prev, next) => {
   if (prev.index !== next.index) return false;

package/es/components/popover/popover.js

@@ -121,7 +121,6 @@ export const Popover = forwardRef((p, ref) => {
     if (!props.trigger) return;
 
     function handleClick() {
-      console.log('handleClick');
       setVisible(v => !v);
     }
 

package/es/components/swipe-action/swipe-action.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type SwipeActionRef = {
     close: () => void;
     show: (side?: 'left' | 'right') => void;
@@ -18,6 +19,7 @@ export declare type SwipeActionProps = {
     closeOnTouchOutside?: boolean;
     closeOnAction?: boolean;
     children: ReactNode;
+    stopPropagation?: PropagationEvent[];
 } & NativeProps<'--background'>;
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
@@ -26,5 +28,6 @@ export declare const SwipeAction: React.ForwardRefExoticComponent<{
     closeOnTouchOutside?: boolean | undefined;
     closeOnAction?: boolean | undefined;
     children: ReactNode;
+    stopPropagation?: "click"[] | undefined;
 } & NativeProps<"--background"> & React.RefAttributes<SwipeActionRef>>;
 export {};

package/es/components/swipe-action/swipe-action.js

@@ -5,11 +5,13 @@ import { useDrag } from '@use-gesture/react';
 import Button from '../button';
 import { nearest } from '../../utils/nearest';
 import { withNativeProps } from '../../utils/native-props';
+import { withStopPropagation } from '../../utils/with-stop-propagation';
 const defaultProps = {
   rightActions: [],
   leftActions: [],
   closeOnTouchOutside: true,
-  closeOnAction: true
+  closeOnAction: true,
+  stopPropagation: []
 };
 export const SwipeAction = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
@@ -167,10 +169,10 @@ export const SwipeAction = forwardRef((p, ref) => {
     style: {
       x
     }
-  }, React.createElement("div", {
+  }, withStopPropagation(props.stopPropagation, React.createElement("div", {
     className: 'adm-swipe-action-actions adm-swipe-action-actions-left',
     ref: leftRef
-  }, props.leftActions.map(renderAction)), React.createElement("div", {
+  }, props.leftActions.map(renderAction))), React.createElement("div", {
     className: 'adm-swipe-action-content',
     onClickCapture: e => {
       if (x.goal !== 0) {
@@ -185,10 +187,10 @@ export const SwipeAction = forwardRef((p, ref) => {
     style: {
       pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'unset')
     }
-  }, props.children)), React.createElement("div", {
+  }, props.children)), withStopPropagation(props.stopPropagation, React.createElement("div", {
     className: 'adm-swipe-action-actions adm-swipe-action-actions-right',
     ref: rightRef
-  }, props.rightActions.map(renderAction)))));
+  }, props.rightActions.map(renderAction))))));
 });
 const colorRecord = {
   light: 'var(--adm-color-light)',

package/es/locales/es-ES.d.ts

@@ -0,0 +1,102 @@
+declare const esES: {
+    locale: string;
+    common: {
+        confirm: string;
+        cancel: string;
+        loading: string;
+    };
+    Calendar: {
+        markItems: string[];
+        renderYearAndMonth: (year: number, month: number) => string;
+    };
+    Cascader: {
+        placeholder: string;
+    };
+    Dialog: {
+        ok: string;
+    };
+    ErrorBlock: {
+        default: {
+            title: string;
+            description: string;
+        };
+        busy: {
+            title: string;
+            description: string;
+        };
+        disconnected: {
+            title: string;
+            description: string;
+        };
+        empty: {
+            title: string;
+            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;
+    };
+    Mask: {
+        name: string;
+    };
+    Modal: {
+        ok: string;
+    };
+    PullToRefresh: {
+        pulling: string;
+        canRelease: string;
+        complete: string;
+    };
+};
+export default esES;

package/es/locales/es-ES.js

@@ -0,0 +1,105 @@
+import { mergeLocale } from '../utils/merge-locale';
+import { base } from './base';
+const typeTemplate = '${label} no es un ${type} válido';
+const esES = mergeLocale(base, {
+  locale: 'es',
+  common: {
+    confirm: 'Confirmar',
+    cancel: 'Cancelar',
+    loading: 'Cargando...'
+  },
+  Calendar: {
+    markItems: ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'],
+    renderYearAndMonth: (year, month) => `${year}/${month}`
+  },
+  Cascader: {
+    placeholder: 'Seleccionando'
+  },
+  Dialog: {
+    ok: 'OK'
+  },
+  ErrorBlock: {
+    default: {
+      title: 'Oops, algo salió mal',
+      description: 'Por favor espere un minuto e intente nuevamente'
+    },
+    busy: {
+      title: 'Oops, no está cargando',
+      description: 'Intente refrescar la página'
+    },
+    disconnected: {
+      title: 'La red se encuentra ocupada',
+      description: 'Intente refrescar la página'
+    },
+    empty: {
+      title: 'Hmm, no pudimos encontrar eso...',
+      description: 'Quieres intentar una nueva búsqueda?'
+    }
+  },
+  Form: {
+    required: 'Requerido',
+    optional: 'Opcional',
+    defaultValidateMessages: {
+      default: 'Error de validación para el campo ${label}',
+      required: 'Por favor ingrese ${label}',
+      enum: '${label} debe ser uno de los siguientes [${enum}]',
+      whitespace: '${label} no puede ser un caracter en blanco',
+      date: {
+        format: '${label} el formato de fecha es inválido',
+        parse: '${label} no puede ser convertido a fecha',
+        invalid: '${label} no es una fecha válida'
+      },
+      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} debe tener ${len} caracteres',
+        min: '${label} debe tener al menos ${min} caracteres',
+        max: '${label} debe tener como mucho ${max} caracteres',
+        range: '${label} debe tener entre ${min}-${max} caracteres'
+      },
+      number: {
+        len: '${label} debe ser igual a ${len}',
+        min: '${label} debe ser mínimo ${min}',
+        max: '${label} debe ser máximo ${max}',
+        range: '${label} debe ser entre ${min}-${max}'
+      },
+      array: {
+        len: 'Debe ser ${len} ${label}',
+        min: 'Al menos ${min} ${label}',
+        max: 'Como mucho ${max} ${label}',
+        range: 'La cantidad de ${label} debe ser entre ${min}-${max}'
+      },
+      pattern: {
+        mismatch: '${label} no coincide con el patrón ${pattern}'
+      }
+    }
+  },
+  ImageUploader: {
+    uploading: 'Subiendo...'
+  },
+  Mask: {
+    name: 'Máscara'
+  },
+  Modal: {
+    ok: 'OK'
+  },
+  PullToRefresh: {
+    pulling: 'Desplácese hacia abajo para refrescar',
+    canRelease: 'Suelte para refrescar inmediatamente',
+    complete: 'Refrescó exitosamente'
+  }
+});
+export default esES;

package/es/utils/measure-css-length.d.ts

@@ -1 +1 @@
-export declare function measureCSSLength(raw: string): number;
+export declare function measureCSSLength(raw: string | undefined | null): number;

package/es/utils/measure-css-length.js

@@ -1,6 +1,14 @@
 import { isDev } from './is-dev';
 import { devError } from './dev-log';
 export function measureCSSLength(raw) {
+  if (raw === null || raw === undefined) {
+    if (isDev) {
+      devError('Global', 'Seems like the you will encounter a style messed problem. Please check the browser environment to make sure it supports CSS variables.');
+    }
+
+    return 0;
+  }
+
   const withUnit = raw.trim();
 
   if (withUnit.endsWith('px')) {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "antd-mobile",
-  "version": "5.8.1",
+  "version": "5.9.1",
   "dependencies": {
-    "@floating-ui/dom": "^0.4.1",
+    "@floating-ui/dom": "^0.4.2",
     "@react-spring/web": "^9.4.4",
     "@types/resize-observer-browser": "^0.1.7",
     "@use-gesture/react": "^10.2.10",
@@ -25,6 +25,25 @@
   "typings": "./es/index.d.ts",
   "unpkg": "./umd/antd-mobile.js",
   "GravityCDN": "./umd/antd-mobile.js",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./bundle/antd-mobile.es.js",
+        "require": "./bundle/antd-mobile.cjs.js"
+      },
+      "import": "./es/index.js",
+      "require": "./cjs/index.js",
+      "types": "./es/index.d.ts"
+    },
+    "./es": "./es/index.js",
+    "./cjs": "./cjs/index.js",
+    "./es/": "./es/",
+    "./cjs/": "./cjs/",
+    "./bundle/": "./bundle/",
+    "./package.json": "./package.json",
+    "./package": "./package.json",
+    "./2x": "./2x"
+  },
   "sideEffects": [
     "**/*.css",
     "**/*.less",