antd-mobile 5.25.1 → 5.27.0

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

@@ -1,5 +1,6 @@
 import * as dateUtils from './date-picker-date-utils';
 import * as weekUtils from './date-picker-week-utils';
+import { TILL_NOW } from './util';
 const precisionLengthRecord = {
   year: 1,
   month: 2,
@@ -18,23 +19,22 @@ export const convertDateToStringArray = (date, precision) => {
   }
 };
 export const convertStringArrayToDate = (value, precision) => {
+  // Special case for DATE_NOW
+  if ((value === null || value === void 0 ? void 0 : value[0]) === TILL_NOW) {
+    const now = new Date();
+    now.tillNow = true;
+    return now;
+  }
   if (precision.includes('week')) {
     return weekUtils.convertStringArrayToDate(value);
   } else {
     return dateUtils.convertStringArrayToDate(value);
   }
 };
-export const generateDatePickerColumns = (selected, min, max, precision, renderLabel, filter) => {
+export const generateDatePickerColumns = (selected, min, max, precision, renderLabel, filter, tillNow) => {
   if (precision.startsWith('week')) {
     return weekUtils.generateDatePickerColumns(selected, min, max, precision, renderLabel, filter);
   } else {
-    return dateUtils.generateDatePickerColumns(selected, min, max, precision, renderLabel, filter);
-  }
-};
-export const defaultRenderLabel = (precision, data) => {
-  if (precision.includes('week')) {
-    return weekUtils.defaultRenderLabel(precision, data);
-  } else {
-    return dateUtils.defaultRenderLabel(precision, data);
+    return dateUtils.generateDatePickerColumns(selected, min, max, precision, renderLabel, filter, tillNow);
   }
 };

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

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 import { PickerColumn } from '../picker';
 import type { DatePickerFilter } from './date-picker-utils';
 export declare type WeekPrecision = 'year' | 'week' | 'week-day';
-export declare function defaultRenderLabel(type: WeekPrecision, data: number): string;
 export declare function generateDatePickerColumns(selected: string[], min: Date, max: Date, precision: WeekPrecision, renderLabel: (type: WeekPrecision, data: number) => ReactNode, filter: DatePickerFilter | undefined): PickerColumn[];
 export declare function convertDateToStringArray(date: Date | undefined | null): string[];
 export declare function convertStringArrayToDate(value: (string | null | undefined)[]): Date;

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

@@ -10,9 +10,6 @@ const precisionRankRecord = {
   week: 1,
   'week-day': 2
 };
-export function defaultRenderLabel(type, data) {
-  return data.toString();
-}
 export function generateDatePickerColumns(selected, min, max, precision, renderLabel, filter) {
   const ret = [];
   const minYear = min.getFullYear();

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

@@ -2,32 +2,36 @@ import React, { ReactNode } from 'react';
 import type { PickerProps, PickerRef, PickerActions } from '../picker';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from './date-picker-utils';
+import type { RenderLabel } from '../date-picker-view/date-picker-view';
+import type { PickerDate } from './util';
 export declare type DatePickerRef = PickerRef;
 export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'loading' | 'loadingContent' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style' | 'mouseWheel' | 'forceRender' | 'destroyOnClose'> & {
-    value?: Date | null;
-    defaultValue?: Date | null;
-    onSelect?: (value: Date) => void;
-    onConfirm?: (value: Date) => void;
-    min?: Date;
-    max?: Date;
+    value?: PickerDate | null;
+    defaultValue?: PickerDate | null;
+    onSelect?: (value: PickerDate) => void;
+    onConfirm?: (value: PickerDate) => void;
+    min?: PickerDate;
+    max?: PickerDate;
     precision?: Precision;
-    children?: (value: Date | null, actions: PickerActions) => ReactNode;
-    renderLabel?: (type: Precision, data: number) => ReactNode;
+    children?: (value: PickerDate | null, actions: PickerActions) => ReactNode;
+    renderLabel?: RenderLabel;
     filter?: DatePickerFilter;
+    tillNow?: boolean;
 } & NativeProps;
 export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "loadingContent" | "confirmText"> & {
-    value?: Date | null | undefined;
-    defaultValue?: Date | null | undefined;
-    onSelect?: ((value: Date) => void) | undefined;
-    onConfirm?: ((value: Date) => void) | undefined;
-    min?: Date | undefined;
-    max?: Date | undefined;
+    value?: PickerDate | null | undefined;
+    defaultValue?: PickerDate | null | undefined;
+    onSelect?: ((value: PickerDate) => void) | undefined;
+    onConfirm?: ((value: PickerDate) => void) | undefined;
+    min?: PickerDate | undefined;
+    max?: PickerDate | undefined;
     precision?: Precision | undefined;
-    children?: ((value: Date | null, actions: PickerActions) => ReactNode) | undefined;
-    renderLabel?: ((type: Precision, data: number) => ReactNode) | undefined;
+    children?: ((value: PickerDate | null, actions: PickerActions) => ReactNode) | undefined;
+    renderLabel?: RenderLabel | undefined;
     filter?: Partial<Record<Precision, (val: number, extend: {
         date: Date;
     }) => boolean>> | undefined;
+    tillNow?: boolean | undefined;
 } & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;

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

@@ -4,18 +4,22 @@ import Picker from '../picker';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
-import { convertDateToStringArray, convertStringArrayToDate, generateDatePickerColumns, defaultRenderLabel } from './date-picker-utils';
+import { convertDateToStringArray, convertStringArrayToDate, generateDatePickerColumns } from './date-picker-utils';
 import { bound } from '../../utils/bound';
+import useRenderLabel from '../date-picker-view/useRenderLabel';
+import { TILL_NOW } from './util';
 const thisYear = new Date().getFullYear();
 const defaultProps = {
   min: new Date(new Date().setFullYear(thisYear - 10)),
   max: new Date(new Date().setFullYear(thisYear + 10)),
   precision: 'day',
-  renderLabel: defaultRenderLabel,
   defaultValue: null
 };
 export const DatePicker = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
+  const {
+    renderLabel
+  } = props;
   const [value, setValue] = usePropsValue({
     value: props.value,
     defaultValue: props.defaultValue,
@@ -26,20 +30,25 @@ export const DatePicker = forwardRef((p, ref) => {
     }
   });
   const now = useMemo(() => new Date(), []);
+  const mergedRenderLabel = useRenderLabel(renderLabel);
   const pickerValue = useMemo(() => {
     let date = value !== null && value !== void 0 ? value : now;
+    if (date.tillNow) {
+      return [TILL_NOW];
+    }
     date = new Date(bound(date.getTime(), props.min.getTime(), props.max.getTime()));
     return convertDateToStringArray(date, props.precision);
   }, [value, props.precision, props.min, props.max]);
   const onConfirm = useCallback(val => {
-    setValue(convertStringArrayToDate(val, props.precision), true);
+    const date = convertStringArrayToDate(val, props.precision);
+    setValue(date, true);
   }, [setValue, props.precision]);
   const onSelect = useMemoizedFn(val => {
     var _a;
     const date = convertStringArrayToDate(val, props.precision);
     (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, date);
   });
-  const columns = useCallback(selected => generateDatePickerColumns(selected, props.min, props.max, props.precision, props.renderLabel, props.filter), [props.min, props.max, props.precision, props.renderLabel]);
+  const columns = useCallback(selected => generateDatePickerColumns(selected, props.min, props.max, props.precision, mergedRenderLabel, props.filter, props.tillNow), [props.min, props.max, props.precision, mergedRenderLabel, props.tillNow]);
   return withNativeProps(props, React.createElement(Picker, {
     ref: ref,
     columns: columns,

package/es/components/date-picker/index.d.ts

@@ -1,26 +1,27 @@
-/// <reference types="react" />
 import './date-picker.less';
 import { prompt } from './prompt';
 export type { DatePickerProps, DatePickerRef } from './date-picker';
 export type { DatePickerFilter } from './date-picker-utils';
 declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "loadingContent" | "confirmText"> & {
-    value?: Date | null | undefined;
-    defaultValue?: Date | null | undefined;
-    onSelect?: ((value: Date) => void) | undefined;
-    onConfirm?: ((value: Date) => void) | undefined;
-    min?: Date | undefined;
-    max?: Date | undefined;
+    value?: import("./util").PickerDate | null | undefined;
+    defaultValue?: import("./util").PickerDate | null | undefined;
+    onSelect?: ((value: import("./util").PickerDate) => void) | undefined;
+    onConfirm?: ((value: import("./util").PickerDate) => void) | undefined;
+    min?: import("./util").PickerDate | undefined;
+    max?: import("./util").PickerDate | undefined;
     precision?: import("./date-picker-utils").Precision | undefined;
-    children?: ((value: Date | null, actions: import("../picker").PickerActions) => import("react").ReactNode) | undefined;
-    renderLabel?: ((type: import("./date-picker-utils").Precision, data: number) => import("react").ReactNode) | undefined;
+    children?: ((value: import("./util").PickerDate | null, actions: import("../picker").PickerActions) => import("react").ReactNode) | undefined;
+    renderLabel?: import("../date-picker-view/date-picker-view").RenderLabel | undefined;
     filter?: Partial<Record<import("./date-picker-utils").Precision, (val: number, extend: {
         date: Date;
     }) => boolean>> | undefined;
+    tillNow?: boolean | undefined;
 } & {
     className?: string | undefined;
     style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
     tabIndex?: number | undefined;
 } & import("react").AriaAttributes & import("react").RefAttributes<import("../picker").PickerActions>> & {
     prompt: typeof prompt;
+    DATE_NOW: string;
 };
 export default _default;

package/es/components/date-picker/index.js

@@ -1,7 +1,9 @@
 import "./date-picker.css";
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
 import { DatePicker } from './date-picker';
+import { TILL_NOW } from './util';
 import { prompt } from './prompt';
 export default attachPropertiesToComponent(DatePicker, {
-  prompt
+  prompt,
+  DATE_NOW: TILL_NOW
 });

package/es/components/date-picker/prompt.d.ts

@@ -1,2 +1,3 @@
 import { DatePickerProps } from './date-picker';
-export declare function prompt(props: Omit<DatePickerProps, 'value' | 'visible' | 'children'>): Promise<Date | null>;
+import type { PickerDate } from './util';
+export declare function prompt(props: Omit<DatePickerProps, 'value' | 'visible' | 'children'>): Promise<PickerDate | null>;

package/es/components/date-picker/util.d.ts

@@ -0,0 +1,4 @@
+export declare const TILL_NOW = "TILL_NOW";
+export declare type PickerDate = Date & {
+    tillNow?: boolean;
+};

package/es/components/date-picker/util.js

@@ -0,0 +1 @@
+export const TILL_NOW = 'TILL_NOW';

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

@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react';
 import type { PickerViewProps } from '../picker-view';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from '../date-picker/date-picker-utils';
+export declare type RenderLabel = (type: Precision | 'now', data: number) => ReactNode;
 export declare type DatePickerViewProps = Pick<PickerViewProps, 'style' | 'mouseWheel' | 'loading' | 'loadingContent'> & {
     value?: Date;
     defaultValue?: Date;
@@ -9,7 +10,7 @@ export declare type DatePickerViewProps = Pick<PickerViewProps, 'style' | 'mouse
     min?: Date;
     max?: Date;
     precision?: Precision;
-    renderLabel?: (type: Precision, data: number) => ReactNode;
+    renderLabel?: RenderLabel;
     filter?: DatePickerFilter;
 } & NativeProps;
 export declare const DatePickerView: FC<DatePickerViewProps>;

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

@@ -3,21 +3,25 @@ import PickerView from '../picker-view';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
-import { generateDatePickerColumns, convertDateToStringArray, convertStringArrayToDate, defaultRenderLabel } from '../date-picker/date-picker-utils';
+import { generateDatePickerColumns, convertDateToStringArray, convertStringArrayToDate } from '../date-picker/date-picker-utils';
+import useRenderLabel from './useRenderLabel';
 const thisYear = new Date().getFullYear();
 const defaultProps = {
   min: new Date(new Date().setFullYear(thisYear - 10)),
   max: new Date(new Date().setFullYear(thisYear + 10)),
-  precision: 'day',
-  renderLabel: defaultRenderLabel
+  precision: 'day'
 };
 export const DatePickerView = p => {
   var _a;
   const props = mergeProps(defaultProps, p);
+  const {
+    renderLabel
+  } = props;
   const [value, setValue] = usePropsValue({
     value: props.value,
     defaultValue: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null
   });
+  const mergedRenderLabel = useRenderLabel(renderLabel);
   const pickerValue = useMemo(() => convertDateToStringArray(value, props.precision), [value, props.precision]);
   const onChange = useCallback(val => {
     var _a;
@@ -28,7 +32,7 @@ export const DatePickerView = p => {
     }
   }, [props.onChange, props.precision]);
   return withNativeProps(props, React.createElement(PickerView, {
-    columns: selected => generateDatePickerColumns(selected, props.min, props.max, props.precision, props.renderLabel, props.filter),
+    columns: selected => generateDatePickerColumns(selected, props.min, props.max, props.precision, mergedRenderLabel, props.filter),
     loading: props.loading,
     loadingContent: props.loadingContent,
     value: pickerValue,

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

@@ -0,0 +1,2 @@
+import type { RenderLabel } from './date-picker-view';
+export default function useRenderLabel(renderLabel?: RenderLabel): RenderLabel;

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

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { useConfig } from '../config-provider';
+export default function useRenderLabel(renderLabel) {
+  const {
+    locale
+  } = useConfig();
+  return useCallback((type, data) => {
+    if (renderLabel) {
+      return renderLabel(type, data);
+    }
+    // Default render
+    switch (type) {
+      case 'minute':
+      case 'second':
+      case 'hour':
+        return ('0' + data.toString()).slice(-2);
+      case 'now':
+        return locale.DatePicker.tillNow;
+      default:
+        return data.toString();
+    }
+  }, [renderLabel]);
+}

package/es/components/dialog/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './dialog.less';
 import { show } from './show';
 import { alert } from './alert';

package/es/components/dropdown/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './dropdown.less';
 export type { DropdownProps, DropdownRef } from './dropdown';
 export type { DropdownItemProps } from './item';

package/es/components/error-block/error-block.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ErrorBlock: import("react").FC<import("./create-error-block").ErrorBlockProps>;

package/es/components/error-block/images/busy.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const busyImage: JSX.Element;

package/es/components/error-block/images/default.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const defaultImage: JSX.Element;

package/es/components/error-block/images/disconnected.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const disconnectedImage: JSX.Element;

package/es/components/error-block/images/empty.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const emptyImage: JSX.Element;

package/es/components/floating-bubble/floating-bubble.d.ts

@@ -1,9 +1,17 @@
 import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
+declare type Offset = {
+    x: number;
+    y: number;
+};
 export declare type FloatingBubbleProps = {
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     axis?: 'x' | 'y' | 'xy' | 'lock';
     magnetic?: 'x' | 'y';
     children?: React.ReactNode;
+    offset?: Offset;
+    defaultOffset?: Offset;
+    onOffsetChange?: (offset: Offset) => void;
 } & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius' | '--background'>;
 export declare const FloatingBubble: FC<FloatingBubbleProps>;
+export {};

package/es/components/floating-bubble/floating-bubble.js

@@ -1,16 +1,28 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 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 = {
-  axis: 'y'
+  axis: 'y',
+  defaultOffset: {
+    x: 0,
+    y: 0
+  }
 };
 export const FloatingBubble = p => {
   const props = mergeProps(defaultProps, p);
   const boundaryRef = useRef(null);
   const buttonRef = useRef(null);
+  const [innerValue, setInnerValue] = useState(props.offset === undefined ? props.defaultOffset : props.offset);
+  useEffect(() => {
+    if (props.offset === undefined) return;
+    api.start({
+      x: props.offset.x,
+      y: props.offset.y
+    });
+  }, [props.offset]);
   /**
    * memoize the `to` function
    * inside a component that renders frequently
@@ -21,11 +33,12 @@ export const FloatingBubble = p => {
     y,
     opacity
   }, api] = useSpring(() => ({
-    x: 0,
-    y: 0,
+    x: innerValue.x,
+    y: innerValue.y,
     opacity: 1
   }));
   const bind = useDrag(state => {
+    var _a;
     let nextX = state.offset[0];
     let nextY = state.offset[1];
     if (state.last && props.magnetic) {
@@ -54,10 +67,17 @@ export const FloatingBubble = p => {
         }
       }
     }
-    api.start({
+    const nextOffest = {
       x: nextX,
       y: nextY
-    });
+    };
+    if (props.offset === undefined) {
+      // Uncontrolled mode
+      api.start(nextOffest);
+    } else {
+      setInnerValue(nextOffest);
+    }
+    (_a = props.onOffsetChange) === null || _a === void 0 ? void 0 : _a.call(props, nextOffest);
     // active status
     api.start({
       opacity: state.active ? 0.8 : 1

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

@@ -3,7 +3,7 @@ import { NativeProps } from '../../utils/native-props';
 import { ListProps } from '../list';
 import type { FormProps as RcFormProps, FormInstance as RCFormInstance } from 'rc-field-form';
 import { FormContextType } from './context';
-export declare type FormInstance = Pick<RCFormInstance, 'getFieldValue' | 'getFieldsValue' | 'getFieldError' | 'getFieldsError' | 'isFieldTouched' | 'isFieldsTouched' | 'resetFields' | 'setFields' | 'setFieldsValue' | 'submit' | 'validateFields'>;
+export declare type FormInstance = Pick<RCFormInstance, 'getFieldValue' | 'getFieldsValue' | 'getFieldError' | 'getFieldsError' | 'isFieldTouched' | 'isFieldsTouched' | 'resetFields' | 'setFields' | 'setFieldValue' | 'setFieldsValue' | 'submit' | 'validateFields'>;
 export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps<'--border-inner' | '--border-top' | '--border-bottom' | '--prefix-width'> & Partial<FormContextType> & {
     footer?: ReactNode;
     mode?: ListProps['mode'];

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 import { useWatch, useForm } from 'rc-field-form';
 export declare type FormLayout = 'vertical' | 'horizontal';

package/es/components/grid/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './grid.less';
 export type { GridProps, GridItemProps } from './grid';
 declare const _default: import("react").FC<import("./grid").GridProps> & {

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

@@ -1,8 +1,15 @@
 .adm-image-uploader {
   --cell-size: 80px;
+  --gap: 12px;
+  ---gap: var(--gap);
+  ---gap-horizontal: var(--gap-horizontal, var(--gap));
+  ---gap-vertical: var(--gap-vertical, var(--gap));
 }
+.adm-image-uploader-grid,
 .adm-image-uploader-space {
-  --gap: 12px;
+  --gap: var(---gap);
+  --gap-horizontal: var(---gap-horizontal);
+  --gap-vertical: var(---gap-vertical);
 }
 .adm-image-uploader-cell {
   position: relative;
@@ -82,3 +89,10 @@
   height: 100%;
   border-radius: 4px;
 }
+.adm-image-uploader .adm-image-uploader-gap-measure {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: var(--gap-horizontal);
+  width: 0;
+}

package/es/components/image-uploader/image-uploader.d.ts

@@ -1,6 +1,7 @@
 import React, { FC, InputHTMLAttributes } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import type { ImageProps } from '../image';
+import { GridProps } from '../grid';
 export declare type TaskStatus = 'pending' | 'fail' | 'success';
 export interface ImageUploadItem {
     key?: string | number;
@@ -18,6 +19,7 @@ export declare type UploadTask = Pick<Task, 'id' | 'status'>;
 export declare type ImageUploaderProps = {
     defaultValue?: ImageUploadItem[];
     value?: ImageUploadItem[];
+    columns?: GridProps['columns'];
     onChange?: (items: ImageUploadItem[]) => void;
     onUploadQueueChange?: (tasks: UploadTask[]) => void;
     accept?: string;
@@ -27,6 +29,7 @@ export declare type ImageUploaderProps = {
     disableUpload?: boolean;
     showUpload?: boolean;
     deletable?: boolean;
+    deleteIcon?: React.ReactNode;
     capture?: InputHTMLAttributes<unknown>['capture'];
     onPreview?: (index: number, item: ImageUploadItem) => void;
     beforeUpload?: (file: File, files: File[]) => Promise<File | null> | File | null;
@@ -37,6 +40,6 @@ export declare type ImageUploaderProps = {
     imageFit?: ImageProps['fit'];
     children?: React.ReactNode;
     renderItem?: (originNode: React.ReactElement, file: ImageUploadItem, fileList: ImageUploadItem[]) => React.ReactNode;
-} & NativeProps<'--cell-size'>;
+} & NativeProps<'--cell-size' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const ImageUploader: FC<ImageUploaderProps>;
 export {};

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

@@ -1,18 +1,23 @@
 import { __awaiter } from "tslib";
 import React, { useRef, useState } from 'react';
-import { AddOutline } from 'antd-mobile-icons';
+import { AddOutline, CloseOutline } from 'antd-mobile-icons';
 import { mergeProps } from '../../utils/with-default-props';
 import ImageViewer from '../image-viewer';
 import PreviewItem from './preview-item';
 import { usePropsValue } from '../../utils/use-props-value';
-import { useIsomorphicLayoutEffect, useUnmount } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUnmount, useSize } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
+import { measureCSSLength } from '../../utils/measure-css-length';
 import { useConfig } from '../config-provider';
+import Grid from '../grid';
 const classPrefix = `adm-image-uploader`;
 const defaultProps = {
   disableUpload: false,
   deletable: true,
+  deleteIcon: React.createElement(CloseOutline, {
+    className: `${classPrefix}-cell-delete-icon`
+  }),
   showUpload: true,
   multiple: false,
   maxCount: 0,
@@ -27,8 +32,26 @@ export const ImageUploader = p => {
     locale
   } = useConfig();
   const props = mergeProps(defaultProps, p);
+  const {
+    columns
+  } = props;
   const [value, setValue] = usePropsValue(props);
   const [tasks, setTasks] = useState([]);
+  const containerRef = useRef(null);
+  const containerSize = useSize(containerRef);
+  const gapMeasureRef = useRef(null);
+  const [cellSize, setCellSize] = useState(80);
+  useIsomorphicLayoutEffect(() => {
+    const gapMeasure = gapMeasureRef.current;
+    if (columns && containerSize && gapMeasure) {
+      const width = containerSize.width;
+      const gap = measureCSSLength(window.getComputedStyle(gapMeasure).getPropertyValue('height'));
+      setCellSize((width - gap * (columns - 1)) / columns);
+    }
+  }, [containerSize === null || containerSize === void 0 ? void 0 : containerSize.width]);
+  const style = {
+    '--cell-size': cellSize + 'px'
+  };
   useIsomorphicLayoutEffect(() => {
     setTasks(prev => prev.filter(task => {
       if (task.url === undefined) return true;
@@ -152,6 +175,7 @@ export const ImageUploader = p => {
         key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
         url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
         deletable: props.deletable,
+        deleteIcon: props.deleteIcon,
         imageFit: props.imageFit,
         onClick: () => {
           if (props.preview) {
@@ -169,26 +193,27 @@ export const ImageUploader = p => {
       return renderItem ? renderItem(originNode, fileItem, value) : originNode;
     });
   };
-  return withNativeProps(props, React.createElement("div", {
-    className: classPrefix
-  }, React.createElement(Space, {
-    className: `${classPrefix}-space`,
-    wrap: true,
-    block: true
-  }, renderImages(), finalTasks.map(task => {
+  const contentNode = React.createElement(React.Fragment, null, renderImages(), tasks.map(task => {
+    if (!props.showFailed && task.status === 'fail') {
+      return null;
+    }
     return React.createElement(PreviewItem, {
       key: task.id,
       file: task.file,
       deletable: task.status !== 'pending',
+      deleteIcon: props.deleteIcon,
       status: task.status,
       imageFit: props.imageFit,
       onDelete: () => {
-        setTasks(prev => prev.filter(x => x.id !== task.id));
+        setTasks(tasks.filter(x => x.id !== task.id));
       }
     });
-  }), showUpload && React.createElement("div", {
-    className: `${classPrefix}-upload-button-wrap`
-  }, props.children ? props.children : React.createElement("span", {
+  }), React.createElement("div", {
+    className: `${classPrefix}-upload-button-wrap`,
+    style: showUpload ? undefined : {
+      display: 'none'
+    }
+  }, props.children || React.createElement("span", {
     className: `${classPrefix}-cell ${classPrefix}-upload-button`,
     role: 'button',
     "aria-label": locale.ImageUploader.upload
@@ -202,5 +227,20 @@ export const ImageUploader = p => {
     className: `${classPrefix}-input`,
     onChange: onChange,
     "aria-hidden": true
-  })))));
+  })));
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix,
+    ref: containerRef
+  }, columns ? React.createElement(Grid, {
+    className: `${classPrefix}-grid`,
+    columns: columns,
+    style: style
+  }, React.createElement("div", {
+    className: `${classPrefix}-gap-measure`,
+    ref: gapMeasureRef
+  }), contentNode.props.children) : React.createElement(Space, {
+    className: `${classPrefix}-space`,
+    wrap: true,
+    block: true
+  }, contentNode.props.children)));
 };