antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.92d6290f7

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

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import React, { useContext, useCallback, useState, useRef } from 'react';
 import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
 import { Field } from 'rc-field-form';
 import FieldContext from 'rc-field-form/lib/FieldContext';
 import { devWarning } from '../../utils/dev-log';
@@ -62,6 +63,9 @@ const FormItemLayout = props => {
           className: `${classPrefix}-required-text`
         }, "(", locale.Form.optional, ")");
 
+      case 'none':
+        return null;
+
       default:
         return null;
     }
@@ -80,14 +84,14 @@ const FormItemLayout = props => {
       e.preventDefault();
     }
   }, React.createElement(QuestionCircleOutline, null)))) : null;
-  const description = React.createElement(React.Fragment, null, props.description, hasFeedback && React.createElement(React.Fragment, null, props.errors.map((error, index) => React.createElement("div", {
+  const description = props.description || hasFeedback ? React.createElement(React.Fragment, null, props.description, hasFeedback && React.createElement(React.Fragment, null, props.errors.map((error, index) => React.createElement("div", {
     key: `error-${index}`,
     className: `${classPrefix}-feedback-error`
   }, error)), props.warnings.map((warning, index) => React.createElement("div", {
     key: `warning-${index}`,
     className: `${classPrefix}-feedback-warning`
-  }, warning))));
-  return React.createElement(List.Item, {
+  }, warning)))) : null;
+  return withNativeProps(props, React.createElement(List.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
@@ -105,7 +109,7 @@ const FormItemLayout = props => {
     className: classNames(`${classPrefix}-child`, `${classPrefix}-child-position-${childElementPosition}`)
   }, React.createElement("div", {
     className: classNames(`${classPrefix}-child-inner`)
-  }, children)));
+  }, children))));
 };
 
 export const FormItem = props => {
@@ -197,7 +201,7 @@ export const FormItem = props => {
 
       return subWarnings;
     }, curWarnings);
-    return React.createElement(FormItemLayout, {
+    return withNativeProps(props, React.createElement(FormItemLayout, {
       className: className,
       style: style,
       label: label,
@@ -218,7 +222,7 @@ export const FormItem = props => {
       arrow: arrow
     }, React.createElement(NoStyleItemContext.Provider, {
       value: onSubMetaChange
-    }, baseChildren));
+    }, baseChildren)));
   }
 
   const isRenderProps = typeof children === 'function';
@@ -228,10 +232,7 @@ export const FormItem = props => {
   }
 
   let Variables = {};
-
-  if (typeof label === 'string') {
-    Variables.label = label;
-  }
+  Variables.label = typeof label === 'string' ? label : '';
 
   if (messageVariables) {
     Variables = Object.assign(Object.assign({}, Variables), messageVariables);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import type { FormInstance } from 'rc-field-form';
 import type { NamePath } from 'rc-field-form/es/interface';
 declare type RenderChildren<Values = any> = (changedValues: Record<string, any>, form: FormInstance<Values>) => React.ReactNode;
@@ -7,5 +7,10 @@ export interface FormSubscribeProps {
     to: NamePath[];
     children: ChildrenType;
 }
-export declare const FormSubscribe: React.VFC<FormSubscribeProps>;
+export declare const FormSubscribe: FC<FormSubscribeProps>;
+export declare const Watcher: React.NamedExoticComponent<{
+    form: FormInstance;
+    namePath: NamePath;
+    onChange: () => void;
+}>;
 export {};

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

@@ -1,14 +1,21 @@
-import React from 'react';
-import Form from '.';
-export const FormSubscribe = ({
-  children,
-  to
-}) => {
-  return React.createElement(Form.Item, {
-    noStyle: true,
-    dependencies: to
-  }, form => {
-    const changedValues = form.getFieldsValue(to);
-    return children(changedValues, form);
-  });
-};
+import React, { memo, useContext } from 'react';
+import { FieldContext, useWatch } from 'rc-field-form';
+import { useUpdate } from 'ahooks';
+import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
+export const FormSubscribe = props => {
+  const update = useUpdate();
+  const form = useContext(FieldContext);
+  return React.createElement(React.Fragment, null, props.children(form.getFieldsValue(props.to), form), props.to.map(namePath => React.createElement(Watcher, {
+    key: namePath.toString(),
+    form: form,
+    namePath: namePath,
+    onChange: update
+  })));
+};
+export const Watcher = memo(props => {
+  const value = useWatch(props.namePath, props.form);
+  useIsomorphicUpdateLayoutEffect(() => {
+    props.onChange();
+  }, [value]);
+  return null;
+});

package/es/components/form/form.css

@@ -1,7 +1,7 @@
 .adm-form {
-  --border-inner: solid 1px var(--adm-border-color);
-  --border-top: solid 1px var(--adm-border-color);
-  --border-bottom: solid 1px var(--adm-border-color);
+  --border-inner: solid 1px var(--adm-color-border);
+  --border-top: solid 1px var(--adm-color-border);
+  --border-bottom: solid 1px var(--adm-color-border);
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);

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

@@ -8,7 +8,11 @@ export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'na
     footer?: ReactNode;
     mode?: ListProps['mode'];
 };
-export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<FormContextType> & {
+export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & Partial<FormContextType> & {
     footer?: ReactNode;
     mode?: ListProps['mode'];
 } & React.RefAttributes<FormInstance>>;

package/es/components/form/index.css

@@ -1,7 +1,7 @@
 .adm-form {
-  --border-inner: solid 1px var(--adm-border-color);
-  --border-top: solid 1px var(--adm-border-color);
-  --border-bottom: solid 1px var(--adm-border-color);
+  --border-inner: solid 1px var(--adm-color-border);
+  --border-top: solid 1px var(--adm-color-border);
+  --border-bottom: solid 1px var(--adm-color-border);
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
@@ -29,7 +29,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
-  color: #666666;
+  color: var(--adm-color-text-secondary);
 }
 .adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
@@ -37,7 +37,8 @@
   top: 0;
   font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-form-item-label .adm-form-item-required-text {
   margin-left: 4px;
@@ -85,6 +86,6 @@
   align-self: center;
 }
 .adm-form-item.adm-form-item-vertical .adm-form-item-label {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   margin-bottom: 4px;
 }

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

@@ -7,12 +7,16 @@ export type { FormItemProps } from './form-item';
 export type { FormSubscribeProps } from './form-subscribe';
 export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/interface';
 export type { FormArrayField, FormArrayOperation, FormArrayProps, } from './form-array';
-declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<import("./context").FormContextType> & {
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
     mode?: "default" | "card" | undefined;
 } & import("react").RefAttributes<import("./form").FormInstance>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
-    Subscribe: import("react").VFC<import("./form-subscribe").FormSubscribeProps>;
+    Subscribe: import("react").FC<import("./form-subscribe").FormSubscribeProps>;
     Header: import("react").FC<{
         children?: import("react").ReactNode;
     }>;

package/es/components/grid/grid.css

@@ -4,7 +4,8 @@
   --gap-vertical: var(--gap);
   display: grid;
   grid-gap: 10px;
-  column-gap: var(--gap-horizontal);
+  -webkit-column-gap: var(--gap-horizontal);
+          column-gap: var(--gap-horizontal);
   row-gap: var(--gap-vertical);
   grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
   align-items: stretch;

package/es/components/image/broken-image-icon.d.ts

@@ -0,0 +1 @@
+export declare const BrokenImageIcon: () => JSX.Element;

package/es/components/image/broken-image-icon.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export const BrokenImageIcon = () => React.createElement("svg", {
+  viewBox: '0 0 48 48',
+  xmlns: 'http://www.w3.org/2000/svg'
+}, React.createElement("path", {
+  d: 'M19.233 6.233 17.42 9.08l-10.817.001a.665.665 0 0 0-.647.562l-.007.096V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.415 2.415 0 0 1 1.807.625l.126.127 4.182 4.525 2.267-3.292 5.461 7.841-4.065 7.375H6.604c-1.86 0-3.382-1.47-3.482-3.317l-.005-.192V9.744c0-1.872 1.461-3.405 3.296-3.505l.19-.005h12.63Zm22.163 0c1.86 0 3.382 1.472 3.482 3.314l.005.192v29.14a3.507 3.507 0 0 1-3.3 3.505l-.191.006H27.789l3.63-6.587.06-.119a1.87 1.87 0 0 0-.163-1.853l-6.928-9.949 3.047-4.422a2.374 2.374 0 0 1 1.96-1.01 2.4 2.4 0 0 1 1.86.87l.106.14L42.05 34.89V9.74a.664.664 0 0 0-.654-.658H21.855l1.812-2.848h17.73Zm-28.305 5.611c.794 0 1.52.298 2.07.788l-.843 1.325-.067.114a1.87 1.87 0 0 0 .11 1.959l.848 1.217c-.556.515-1.3.83-2.118.83a3.122 3.122 0 0 1-3.117-3.116 3.119 3.119 0 0 1 3.117-3.117Z',
+  fill: '#DBDBDB',
+  fillRule: 'nonzero'
+}));

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

@@ -0,0 +1 @@
+export declare const ImageIcon: () => JSX.Element;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export const ImageIcon = () => React.createElement("svg", {
+  viewBox: '0 0 48 48',
+  xmlns: 'http://www.w3.org/2000/svg'
+}, React.createElement("path", {
+  d: 'M41.396 6.234c1.923 0 3.487 1.574 3.487 3.505v29.14c0 1.937-1.568 3.51-3.491 3.51H6.604c-1.923 0-3.487-1.573-3.487-3.51V9.745c0-1.936 1.564-3.51 3.487-3.51Zm0 2.847H6.604c-.355 0-.654.3-.654.658V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.405 2.405 0 0 1 1.933.752l4.182 4.525 7.58-11.005a2.374 2.374 0 0 1 1.96-1.01c.79 0 1.532.38 1.966 1.01L42.05 34.89V9.74a.664.664 0 0 0-.654-.658Zm-28.305 2.763a3.119 3.119 0 0 1 3.117 3.117 3.119 3.119 0 0 1-3.117 3.117 3.122 3.122 0 0 1-3.117-3.117 3.119 3.119 0 0 1 3.117-3.117Z',
+  fill: '#DBDBDB',
+  fillRule: 'nonzero'
+}));

package/es/components/image/image.css

@@ -12,12 +12,14 @@
 }
 .adm-image-tip {
   position: relative;
-  background-color: #f3f3f3;
+  background-color: var(--adm-color-box);
   height: 100%;
   min-height: 24px;
   min-width: 24px;
 }
-.adm-image-tip > .antd-mobile-icon {
+.adm-image-tip > svg {
+  width: 24px;
+  height: 24px;
   position: absolute;
   left: 50%;
   top: 50%;

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

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ImageProps = {
-    src: string;
+    src?: string;
     alt?: string;
     width?: number | string;
     height?: number | string;
@@ -9,8 +9,10 @@ export declare type ImageProps = {
     placeholder?: ReactNode;
     fallback?: ReactNode;
     lazy?: boolean;
+    draggable?: boolean;
     onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onContainerClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
 } & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
 export declare const Image: React.FC<ImageProps>;

package/es/components/image/image.js

@@ -1,21 +1,23 @@
 import { mergeProps } from '../../utils/with-default-props';
 import React, { useState, useRef } from 'react';
 import { withNativeProps } from '../../utils/native-props';
-import { PictureOutline, PictureWrongOutline } from 'antd-mobile-icons';
 import { staged } from 'staged-components';
 import { toCSSLength } from '../../utils/to-css-length';
 import { LazyDetector } from './lazy-detector';
 import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
+import { ImageIcon } from './image-icon';
+import { BrokenImageIcon } from './broken-image-icon';
 const classPrefix = `adm-image`;
 const defaultProps = {
   fit: 'fill',
   placeholder: React.createElement("div", {
     className: `${classPrefix}-tip`
-  }, React.createElement(PictureOutline, null)),
+  }, React.createElement(ImageIcon, null)),
   fallback: React.createElement("div", {
     className: `${classPrefix}-tip`
-  }, React.createElement(PictureWrongOutline, null)),
-  lazy: false
+  }, React.createElement(BrokenImageIcon, null)),
+  lazy: false,
+  draggable: false
 };
 export const Image = staged(p => {
   const props = mergeProps(defaultProps, p);
@@ -64,7 +66,8 @@ export const Image = staged(p => {
       referrerPolicy: props.referrerPolicy,
       sizes: props.sizes,
       srcSet: srcSet,
-      useMap: props.useMap
+      useMap: props.useMap,
+      draggable: props.draggable
     });
     return React.createElement(React.Fragment, null, !loaded && props.placeholder, img);
   }
@@ -73,16 +76,19 @@ export const Image = staged(p => {
 
   if (props.width) {
     style['--width'] = toCSSLength(props.width);
+    style['width'] = toCSSLength(props.width);
   }
 
   if (props.height) {
     style['--height'] = toCSSLength(props.height);
+    style['height'] = toCSSLength(props.height);
   }
 
   return withNativeProps(props, React.createElement("div", {
     ref: ref,
     className: classPrefix,
-    style: style
+    style: style,
+    onClick: props.onContainerClick
   }, props.lazy && !initialized && React.createElement(LazyDetector, {
     onActive: () => {
       setInitialized(true);

package/es/components/image/image.patch.css

@@ -0,0 +1,10 @@
+.adm-image {
+  width: auto;
+  height: auto;
+}
+.adm-image-tip {
+  background-color: #f5f5f5;
+}
+.adm-image-tip > svg {
+  color: #999999;
+}

package/es/components/image/test/image.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/components/image/test/image.test.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { fireEvent, render, act } from 'testing';
+import Image from '../index';
+const classPrefix = `adm-image`;
+const demoSrc = 'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60';
+describe('Image', () => {
+  test('onContainerClick can work', () => {
+    const onContainerClick = jest.fn();
+    const {
+      getByTestId
+    } = render(React.createElement(Image, {
+      src: demoSrc,
+      onContainerClick: onContainerClick,
+      "data-testid": 'img'
+    }));
+    fireEvent.click(getByTestId('img'));
+    expect(onContainerClick).toBeCalledTimes(1);
+  });
+  test('load successfully', () => {
+    render(React.createElement(Image, {
+      src: demoSrc
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+    fireEvent.load(img);
+    expect(img).toHaveAttribute('src', demoSrc);
+  });
+  test('load failed', () => {
+    render(React.createElement(Image, {
+      src: '404'
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+    fireEvent.error(img);
+    expect(img).not.toBeInTheDocument();
+    expect(document.querySelectorAll(`.${classPrefix}-tip`)[0]).toBeInTheDocument();
+  });
+  test('lazy load should be work', () => {
+    // mock useInViewport
+    // https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useInViewport/__tests__/index.test.ts
+    const mockIntersectionObserver = jest.fn().mockReturnValue({
+      observe: () => null,
+      disconnect: () => null
+    });
+    window.IntersectionObserver = mockIntersectionObserver;
+    render(React.createElement(Image, {
+      src: demoSrc,
+      lazy: true
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+    expect(img).not.toHaveAttribute('src');
+    const calls = mockIntersectionObserver.mock.calls;
+    const [onChange] = calls[calls.length - 1];
+    act(() => {
+      onChange([{
+        isIntersecting: true
+      }]);
+    });
+    expect(img).toHaveAttribute('src', demoSrc);
+  });
+  test('renders with width and height', () => {
+    const {
+      getByTestId
+    } = render(React.createElement(Image, {
+      src: demoSrc,
+      width: 100,
+      height: 100,
+      "data-testid": 'image'
+    }));
+    expect(getByTestId('image')).toHaveStyle('--width: 100px;--height: 100px');
+  });
+});

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

@@ -24,7 +24,7 @@
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 0 0 0 12px;
   font-size: 8px;
-  color: #fff;
+  color: var(--adm-color-white);
   cursor: pointer;
 }
 .adm-image-uploader-cell-delete-icon {
@@ -38,7 +38,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: rgba(50, 50, 51, 0.88);
 }
 .adm-image-uploader-cell-loading {
@@ -53,7 +53,7 @@
 .adm-image-uploader-cell-mask-message {
   display: inline-block;
   padding: 6px 4px;
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
 }
 .adm-image-uploader-cell-image {
   width: var(--cell-size);
@@ -63,7 +63,7 @@
   position: relative;
 }
 .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   text-align: center;
   line-height: var(--cell-size);
   display: block;

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

@@ -28,5 +28,6 @@ export declare type ImageUploaderProps = {
     showFailed?: boolean;
     imageFit?: ImageProps['fit'];
     children?: React.ReactNode;
+    renderItem?: (originNode: React.ReactElement, file: ImageUploadItem, fileList: ImageUploadItem[]) => React.ReactNode;
 } & NativeProps<'--cell-size'>;
 export declare const ImageUploader: FC<ImageUploaderProps>;

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

@@ -5,7 +5,7 @@ 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, useMemoizedFn, useUnmount } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUnmount } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
 import { useConfig } from '../config-provider';
@@ -28,9 +28,6 @@ export const ImageUploader = p => {
   } = useConfig();
   const props = mergeProps(defaultProps, p);
   const [value, setValue] = usePropsValue(props);
-  const updateValue = useMemoizedFn(updater => {
-    setValue(updater(value));
-  });
   const [tasks, setTasks] = useState([]);
   useIsomorphicLayoutEffect(() => {
     setTasks(prev => prev.filter(task => {
@@ -41,7 +38,8 @@ export const ImageUploader = p => {
   const idCountRef = useRef(0);
   const {
     maxCount,
-    onPreview
+    onPreview,
+    renderItem
   } = props;
 
   function processFile(file, fileList) {
@@ -109,7 +107,7 @@ export const ImageUploader = p => {
               return task;
             });
           });
-          updateValue(prev => {
+          setValue(prev => {
             const newVal = Object.assign({}, result);
             return [...prev, newVal];
           });
@@ -149,36 +147,42 @@ export const ImageUploader = p => {
     (_a = imageViewerHandlerRef.current) === null || _a === void 0 ? void 0 : _a.close();
   });
   const showUpload = props.showUpload && (maxCount === 0 || value.length + tasks.length < maxCount);
+
+  const renderImages = () => {
+    return value.map((fileItem, index) => {
+      var _a, _b;
+
+      const originNode = React.createElement(PreviewItem, {
+        key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
+        url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
+        deletable: props.deletable,
+        imageFit: props.imageFit,
+        onClick: () => {
+          if (props.preview) {
+            previewImage(index);
+          }
+
+          onPreview && onPreview(index, fileItem);
+        },
+        onDelete: () => __awaiter(void 0, void 0, void 0, function* () {
+          var _c;
+
+          const canDelete = yield (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
+          if (canDelete === false) return;
+          setValue(value.filter((x, i) => i !== index));
+        })
+      });
+      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
-  }, value.map((fileItem, index) => {
-    var _a, _b;
-
-    return React.createElement(PreviewItem, {
-      key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
-      url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
-      deletable: props.deletable,
-      imageFit: props.imageFit,
-      onClick: () => {
-        if (props.preview) {
-          previewImage(index);
-        }
-
-        onPreview && onPreview(index, fileItem);
-      },
-      onDelete: () => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
-
-        const canDelete = yield (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
-        if (canDelete === false) return;
-        setValue(value.filter((x, i) => i !== index));
-      })
-    });
-  }), tasks.map(task => {
+  }, renderImages(), tasks.map(task => {
     if (!props.showFailed && task.status === 'fail') {
       return null;
     }

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useLayoutEffect, useMemo } from 'react';
 import { CloseOutline } from 'antd-mobile-icons';
 import classNames from 'classnames';
 import Image from '../image';
@@ -28,6 +28,11 @@ const PreviewItem = props => {
 
     return '';
   }, [url, file]);
+  useLayoutEffect(() => {
+    return () => {
+      URL.revokeObjectURL(src);
+    };
+  }, [src]);
 
   function renderLoading() {
     return props.status === 'pending' && React.createElement("div", {

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

@@ -1,14 +1,21 @@
 .adm-image-viewer-content {
   width: 100vw;
   height: 100vh;
-  max-height: -webkit-fill-available;
   touch-action: none;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
+}
+.adm-image-viewer-footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  z-index: 1;
 }
 .adm-image-viewer-slides {
   height: 100%;
   position: relative;
   z-index: 1;
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
 }
@@ -32,6 +39,7 @@
   top: 0;
   width: 100%;
   height: 100%;
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
 }
@@ -54,5 +62,5 @@
   top: 12px;
   transform: translateX(-50%);
   color: #e6e6e6;
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
 }