antd-mobile 5.22.0 → 5.24.0

package/2x/es/components/calendar/calendar.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
-declare type Page = {
-    month: number;
-    year: number;
-};
+import { Page } from './convert';
 export declare type CalendarRef = {
     jumpTo: (page: Page | ((page: Page) => Page)) => void;
     jumpToToday: () => void;
@@ -20,6 +17,8 @@ export declare type CalendarProps = {
     max?: Date;
     min?: Date;
     shouldDisableDate?: (date: Date) => boolean;
+    minPage?: Page;
+    maxPage?: Page;
 } & ({
     selectionMode?: undefined;
     value?: undefined;
@@ -37,4 +36,3 @@ export declare type CalendarProps = {
     onChange?: (val: [Date, Date] | null) => void;
 }) & NativeProps;
 export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
-export {};

package/2x/es/components/calendar/calendar.js

@@ -9,7 +9,7 @@ import { useConfig } from '../config-provider';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import { useUpdateEffect } from 'ahooks';
 import { usePropsValue } from '../../utils/use-props-value';
-import { convertValueToRange } from './convert';
+import { convertValueToRange, convertPageToDayjs } from './convert';
 dayjs.extend(isoWeek);
 const classPrefix = 'adm-calendar';
 const defaultProps = {
@@ -67,35 +67,58 @@ export const Calendar = forwardRef((p, ref) => {
         page = pageOrPageGenerator;
       }
 
-      setCurrent(dayjs().year(page.year).month(page.month - 1).date(1));
+      setCurrent(convertPageToDayjs(page));
     },
     jumpToToday: () => {
       setCurrent(dayjs().date(1));
     }
   }));
+
+  const handlePageChange = (action, num, type) => {
+    const nxtCurrent = current[action](num, type);
+
+    if (action === 'subtract' && props.minPage) {
+      const minPage = convertPageToDayjs(props.minPage);
+
+      if (nxtCurrent.isBefore(minPage, type)) {
+        return;
+      }
+    }
+
+    if (action === 'add' && props.maxPage) {
+      const maxPage = convertPageToDayjs(props.maxPage);
+
+      if (nxtCurrent.isAfter(maxPage, type)) {
+        return;
+      }
+    }
+
+    setCurrent(current[action](num, type));
+  };
+
   const header = React.createElement("div", {
     className: `${classPrefix}-header`
   }, React.createElement("a", {
     className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-year`,
     onClick: () => {
-      setCurrent(current.subtract(1, 'year'));
+      handlePageChange('subtract', 1, 'year');
     }
   }, props.prevYearButton), React.createElement("a", {
     className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-month`,
     onClick: () => {
-      setCurrent(current.subtract(1, 'month'));
+      handlePageChange('subtract', 1, 'month');
     }
   }, props.prevMonthButton), React.createElement("div", {
     className: `${classPrefix}-title`
   }, locale.Calendar.renderYearAndMonth(current.year(), current.month() + 1)), React.createElement("a", {
     className: classNames(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-month`),
     onClick: () => {
-      setCurrent(current.add(1, 'month'));
+      handlePageChange('add', 1, 'month');
     }
   }, props.nextMonthButton), React.createElement("a", {
     className: classNames(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-year`),
     onClick: () => {
-      setCurrent(current.add(1, 'year'));
+      handlePageChange('add', 1, 'year');
     }
   }, props.nextYearButton));
   const maxDay = useMemo(() => props.max && dayjs(props.max), [props.max]);

package/2x/es/components/calendar/convert.d.ts

@@ -1,2 +1,8 @@
+import dayjs from 'dayjs';
 export declare type DateRange = [Date, Date] | null;
+export declare type Page = {
+    month: number;
+    year: number;
+};
 export declare function convertValueToRange(selectionMode: 'single' | 'range' | undefined, value: Date | [Date, Date] | null): DateRange;
+export declare function convertPageToDayjs(page: Page): dayjs.Dayjs;

package/2x/es/components/calendar/convert.js

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 export function convertValueToRange(selectionMode, value) {
   if (selectionMode === undefined) {
     return null;
@@ -12,4 +13,7 @@ export function convertValueToRange(selectionMode, value) {
   }
 
   return [value, value];
+}
+export function convertPageToDayjs(page) {
+  return dayjs().year(page.year).month(page.month - 1).date(1);
 }

package/2x/es/components/dialog/dialog-action-button.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type Action = {
     key: string | number;
-    text: string;
+    text: ReactNode;
     disabled?: boolean;
     danger?: boolean;
     bold?: boolean;

package/2x/es/components/ellipsis/ellipsis.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
+import runes from 'runes';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 import { useResizeEffect } from '../../utils/use-resize-effect';
@@ -19,6 +20,11 @@ export const Ellipsis = p => {
   const [ellipsised, setEllipsised] = useState({});
   const [expanded, setExpanded] = useState(false);
   const [exceeded, setExceeded] = useState(false);
+  const chars = useMemo(() => runes(props.content), [props.content]);
+
+  function getSubString(start, end) {
+    return chars.slice(start, end).join('');
+  }
 
   function calcEllipsised() {
     const root = rootRef.current;
@@ -57,11 +63,11 @@ export const Ellipsis = p => {
         if (right - left <= 1) {
           if (props.direction === 'end') {
             return {
-              leading: props.content.slice(0, left) + '...'
+              leading: getSubString(0, left) + '...'
             };
           } else {
             return {
-              tailing: '...' + props.content.slice(right, end)
+              tailing: '...' + getSubString(right, end)
             };
           }
         }
@@ -69,9 +75,9 @@ export const Ellipsis = p => {
         const middle = Math.round((left + right) / 2);
 
         if (props.direction === 'end') {
-          container.innerText = props.content.slice(0, middle) + '...' + actionText;
+          container.innerText = getSubString(0, middle) + '...' + actionText;
         } else {
-          container.innerText = actionText + '...' + props.content.slice(middle, end);
+          container.innerText = actionText + '...' + getSubString(middle, end);
         }
 
         if (container.offsetHeight <= maxHeight) {
@@ -92,14 +98,14 @@ export const Ellipsis = p => {
       function checkMiddle(leftPart, rightPart) {
         if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
           return {
-            leading: props.content.slice(0, leftPart[0]) + '...',
-            tailing: '...' + props.content.slice(rightPart[1], end)
+            leading: getSubString(0, leftPart[0]) + '...',
+            tailing: '...' + getSubString(rightPart[1], end)
           };
         }
 
         const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
         const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
-        container.innerText = props.content.slice(0, leftPartMiddle) + '...' + actionText + '...' + props.content.slice(rightPartMiddle, end);
+        container.innerText = getSubString(0, leftPartMiddle) + '...' + actionText + '...' + getSubString(rightPartMiddle, end);
 
         if (container.offsetHeight <= maxHeight) {
           return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);

package/2x/es/components/empty/empty.d.ts

@@ -5,4 +5,5 @@ export declare type EmptyProps = {
     imageStyle?: React.CSSProperties;
     description?: ReactNode;
 } & NativeProps;
+/** @deprecated Empty has been deprecated and will be removed in the next major version. */
 export declare const Empty: React.FC<EmptyProps>;

package/2x/es/components/empty/empty.js

@@ -3,6 +3,8 @@ import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { EmptyIcon } from './empty-icon';
 const classPrefix = `adm-empty`;
+/** @deprecated Empty has been deprecated and will be removed in the next major version. */
+
 export const Empty = props => {
   function renderImageNode() {
     const {

package/2x/es/components/footer/footer.css

@@ -0,0 +1,60 @@
+.adm-footer {
+  --background-color: var(--adm-color-background);
+  color: var(--adm-color-text);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--background-color);
+}
+
+.adm-footer-label {
+  width: 100%;
+}
+
+.adm-footer-label .adm-divider.adm-divider {
+  color: var(--adm-color-light);
+}
+
+.adm-footer-links {
+  margin: 16px 0;
+  color: var(--adm-color-primary);
+  white-space: nowrap;
+}
+
+.adm-footer-links a {
+  text-decoration: none;
+}
+
+.adm-footer-content {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  color: var(--adm-color-light);
+}
+
+.adm-footer-chips {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  margin: 16px 0;
+}
+
+.adm-footer-chip {
+  white-space: nowrap;
+  margin-right: 40px;
+  font-size: 24px;
+  background-color: var(--adm-color-box);
+  color: var(--adm-color-weak);
+  padding: 8px 24px;
+  border-radius: 200px;
+}
+
+.adm-footer-chip-link {
+  cursor: pointer;
+  background-color: #e7f1ff;
+  color: var(--adm-color-primary);
+}
+
+.adm-footer-chip:last-child {
+  margin-right: 0;
+}

package/2x/es/components/footer/footer.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type LinkItem = {
+    text: string;
+    href: string;
+};
+export declare type ChipItem = {
+    text: ReactNode;
+    type?: 'plain' | 'link';
+};
+export declare type FooterProps = {
+    label?: ReactNode;
+    links?: LinkItem[];
+    content?: ReactNode;
+    chips?: ChipItem[];
+    onChipClick?: (item: ChipItem, index: number) => void;
+    onLinkClick?: (item: LinkItem, index: number) => void;
+} & NativeProps<'--background-color'>;
+export declare const Footer: FC<FooterProps>;

package/2x/es/components/footer/footer.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { Divider } from '../divider/divider';
+const classPrefix = `adm-footer`;
+const defaultProps = {
+  label: '',
+  links: [],
+  content: '',
+  chips: []
+};
+export const Footer = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    label,
+    links,
+    content,
+    chips,
+    onChipClick,
+    onLinkClick
+  } = props;
+
+  const clickChipItem = (item, index) => {
+    if ((chips === null || chips === void 0 ? void 0 : chips.length) && item.type === 'link') {
+      onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(item, index);
+    }
+  };
+
+  const clickLinkItem = (item, index, e) => {
+    if (onLinkClick) {
+      e.preventDefault();
+      onLinkClick(item, index);
+    }
+  };
+
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix)
+  }, label && React.createElement("div", {
+    className: `${classPrefix}-label`
+  }, React.createElement(Divider, null, label)), links && links.length > 0 && React.createElement("div", {
+    className: `${classPrefix}-links`
+  }, links.map((link, index) => {
+    return React.createElement(React.Fragment, {
+      key: index
+    }, React.createElement("a", {
+      href: link.href,
+      rel: 'noopener noreferrer',
+      onClick: event => clickLinkItem(link, index, event)
+    }, link.text), index !== links.length - 1 && React.createElement(Divider, {
+      direction: 'vertical'
+    }));
+  })), content && React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, content), chips && chips.length > 0 && React.createElement("div", {
+    className: `${classPrefix}-chips`
+  }, chips.map((chip, index) => {
+    return React.createElement("div", {
+      key: index,
+      onClick: () => clickChipItem(chip, index),
+      className: classNames(`${classPrefix}-chip`, {
+        [`${classPrefix}-chip-link`]: chip.type === 'link'
+      })
+    }, chip.text);
+  }))));
+};

package/2x/es/components/footer/index.d.ts

@@ -0,0 +1,4 @@
+import './footer.less';
+import { Footer } from './footer';
+export type { FooterProps, ChipItem, LinkItem } from './footer';
+export default Footer;

package/2x/es/components/footer/index.js

@@ -0,0 +1,3 @@
+import "./footer.css";
+import { Footer } from './footer';
+export default Footer;

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

@@ -67,7 +67,6 @@
 
 .adm-form-item.adm-form-item-horizontal.adm-list-item {
   --align-items: stretch;
-  --prefix-width: 6.8em;
 }
 
 .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {

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

@@ -1,10 +1,12 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-color-border);
-  --border-top: solid 2px var(--adm-color-border);
-  --border-bottom: solid 2px var(--adm-color-border);
+  --border-inner: solid 2px var(--adm-border-color);
+  --border-top: solid 2px var(--adm-border-color);
+  --border-bottom: solid 2px var(--adm-border-color);
+  --prefix-width: 6.8em;
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
+  ---prefix-width: var(--prefix-width);
 }
 
 .adm-form .adm-list.adm-list {
@@ -19,6 +21,10 @@
   padding: 40px 24px;
 }
 
+.adm-form .adm-form-item-horizontal.adm-list-item {
+  --prefix-width: var(---prefix-width);
+}
+
 .adm-form-list-operation {
   text-align: center;
   color: #1677ff;

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

@@ -4,13 +4,13 @@ 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 FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps<'--border-inner' | '--border-top' | '--border-bottom'> & Partial<FormContextType> & {
+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'];
 };
 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;
+    style?: (React.CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top" | "--prefix-width", string>>) | undefined;
     tabIndex?: number | undefined;
 } & React.AriaAttributes & Partial<FormContextType> & {
     footer?: ReactNode;

package/2x/es/components/form/index.css

@@ -1,10 +1,12 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-color-border);
-  --border-top: solid 2px var(--adm-color-border);
-  --border-bottom: solid 2px var(--adm-color-border);
+  --border-inner: solid 2px var(--adm-border-color);
+  --border-top: solid 2px var(--adm-border-color);
+  --border-bottom: solid 2px var(--adm-border-color);
+  --prefix-width: 6.8em;
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
+  ---prefix-width: var(--prefix-width);
 }
 
 .adm-form .adm-list.adm-list {
@@ -19,6 +21,10 @@
   padding: 40px 24px;
 }
 
+.adm-form .adm-form-item-horizontal.adm-list-item {
+  --prefix-width: var(---prefix-width);
+}
+
 .adm-form-list-operation {
   text-align: center;
   color: #1677ff;
@@ -93,7 +99,6 @@
 
 .adm-form-item.adm-form-item-horizontal.adm-list-item {
   --align-items: stretch;
-  --prefix-width: 6.8em;
 }
 
 .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {

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

@@ -9,7 +9,7 @@ export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/in
 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"> & {
     className?: string | undefined;
-    style?: (import("react").CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top", string>>) | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top" | "--prefix-width", string>>) | undefined;
     tabIndex?: number | undefined;
 } & import("react").AriaAttributes & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;

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

@@ -1,17 +1,25 @@
 import React, { FC, InputHTMLAttributes } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import type { ImageProps } from '../image';
-export declare type TaskStatus = 'pending' | 'fail';
+export declare type TaskStatus = 'pending' | 'fail' | 'success';
 export interface ImageUploadItem {
     key?: string | number;
     url: string;
     thumbnailUrl?: string;
     extra?: any;
 }
+declare type Task = {
+    id: number;
+    url?: string;
+    file: File;
+    status: TaskStatus;
+};
+export declare type UploadTask = Pick<Task, 'id' | 'status'>;
 export declare type ImageUploaderProps = {
     defaultValue?: ImageUploadItem[];
     value?: ImageUploadItem[];
     onChange?: (items: ImageUploadItem[]) => void;
+    onUploadQueueChange?: (tasks: UploadTask[]) => void;
     accept?: string;
     multiple?: boolean;
     maxCount?: number;
@@ -28,5 +36,7 @@ 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>;
+export {};

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

@@ -35,10 +35,19 @@ export const ImageUploader = p => {
       return !value.some(fileItem => fileItem.url === task.url);
     }));
   }, [value]);
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+
+    (_a = props.onUploadQueueChange) === null || _a === void 0 ? void 0 : _a.call(props, tasks.map(item => ({
+      id: item.id,
+      status: item.status
+    })));
+  }, [tasks]);
   const idCountRef = useRef(0);
   const {
     maxCount,
-    onPreview
+    onPreview,
+    renderItem
   } = props;
 
   function processFile(file, fileList) {
@@ -99,6 +108,7 @@ export const ImageUploader = p => {
             return prev.map(task => {
               if (task.id === currentTask.id) {
                 return Object.assign(Object.assign({}, task), {
+                  status: 'success',
                   url: result.url
                 });
               }
@@ -146,36 +156,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/2x/es/components/image-uploader/index.d.ts

@@ -1,4 +1,4 @@
 import { ImageUploader } from './image-uploader';
 import './image-uploader.less';
-export type { ImageUploadItem, ImageUploaderProps } from './image-uploader';
+export type { ImageUploadItem, ImageUploaderProps, UploadTask, } from './image-uploader';
 export default ImageUploader;

package/2x/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/2x/es/components/image-viewer/slides.js

@@ -75,8 +75,8 @@ export const Slides = forwardRef((props, ref) => {
     style: {
       x: x.to(x => -x)
     }
-  }, props.images.map(image => React.createElement(Slide, {
-    key: image,
+  }, props.images.map((image, index) => React.createElement(Slide, {
+    key: index,
     image: image,
     onTap: props.onTap,
     maxZoom: props.maxZoom,

package/2x/es/components/page-indicator/page-indicator.css

@@ -28,6 +28,7 @@
 }
 
 .adm-page-indicator-color-white {
+  --dot-color: rgba(255, 255, 255, 0.5);
   --active-dot-color: var(--adm-color-white);
 }