antd-mobile 5.0.0-rc.22 → 5.0.0-rc.26

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

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import dayjs from 'dayjs';
 import classNames from 'classnames';
@@ -7,6 +7,7 @@ import { ArrowLeft } from './arrow-left';
 import { ArrowLeftDouble } from './arrow-left-double';
 import { useConfig } from '../config-provider';
 import isoWeek from 'dayjs/plugin/isoWeek';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 dayjs.extend(isoWeek);
 const classPrefix = 'adm-calendar';
 const defaultProps = {
@@ -65,7 +66,7 @@ export const Calendar = p => {
   }, [props.selectionMode, props.value, props.defaultValue]);
   const [begin, setBegin] = useState(null);
   const [end, setEnd] = useState(null);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setBegin(dateRange[0] ? dayjs(dateRange[0]) : null);
     setEnd(dateRange[1] ? dayjs(dateRange[1]) : null);
   }, [dateRange[0], dateRange[1]]);

package/2x/es/components/cascade-picker-view/cascade-picker-view.d.ts

@@ -1,8 +1,7 @@
 import { FC } from 'react';
-import { NativeProps } from '../../utils/native-props';
 import type { PickerViewProps } from '../picker-view';
 import type { CascadePickerOption } from '../cascade-picker';
 export declare type CascadePickerViewProps = Omit<PickerViewProps, 'columns'> & {
     options: CascadePickerOption[];
-} & NativeProps<'--height'>;
+};
 export declare const CascadePickerView: FC<CascadePickerViewProps>;

package/2x/es/components/checkbox/check-icon.js

@@ -2,18 +2,9 @@ import React, { memo } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 export const CheckIcon = memo(props => {
   return withNativeProps(props, React.createElement("svg", {
-    viewBox: '0 0 24 16'
-  }, React.createElement("g", {
-    stroke: 'none',
-    strokeWidth: '1',
-    fill: 'none',
-    fillRule: 'evenodd'
-  }, React.createElement("g", {
-    transform: 'translate(-35.000000, -40.000000)',
-    fill: 'currentColor'
-  }, React.createElement("g", {
-    transform: 'translate(24.000000, 26.000000)'
+    viewBox: '0 0 40 40'
   }, React.createElement("path", {
-    d: 'M18.8574375,25.9363304 L14.4138058,21.4926987 C13.8001225,20.8790154 12.8051453,20.8790154 12.1914621,21.4926987 C11.5777807,22.10638 11.5777807,23.1013541 12.1914621,23.7150354 C12.1914632,23.7150366 12.1914644,23.7150377 12.1914656,23.7150389 L17.4442507,28.9677909 C18.225314,29.7488091 19.4916285,29.7488141 20.2726979,28.9678021 L21.0808125,28.1597054 L21.0808125,28.1597054 L32.5627182,16.6759191 C33.176366,16.0621709 33.1763252,15.0671824 32.5626272,14.4534844 C31.948944,13.8398011 30.9539668,13.8398011 30.3402835,14.4534844 L18.8574375,25.9363304 L18.8574375,25.9363304 Z'
-  }))))));
+    d: 'M31.5541766,15 L28.0892433,15 L28.0892434,15 C27.971052,15 27.8576674,15.044522 27.7740471,15.1239792 L18.2724722,24.1625319 L13.2248725,19.3630279 L13.2248725,19.3630279 C13.1417074,19.2834412 13.0287551,19.2384807 12.9107898,19.2380079 L9.44474455,19.2380079 L9.44474454,19.2380079 C9.19869815,19.2384085 8.99957935,19.4284738 9,19.66253 C9,19.7747587 9.04719253,19.8823283 9.13066188,19.9616418 L17.0907466,27.5338228 C17.4170809,27.8442545 17.8447695,28 18.2713393,28 L18.2980697,28 C18.7168464,27.993643 19.133396,27.8378975 19.4530492,27.5338228 L31.8693384,15.7236361 L31.8693384,15.7236361 C32.0434167,15.5582251 32.0435739,15.2898919 31.8696892,15.1242941 C31.7860402,15.0446329 31.6725052,15 31.5541421,15 L31.5541766,15 Z',
+    fill: 'currentColor'
+  })));
 });

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

@@ -18,17 +18,15 @@
   border: 2px solid var(--adm-color-light);
   border-radius: var(--icon-size);
   box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: #ffffff;
+  color: var(--adm-color-white);
 }
 
-.adm-checkbox .adm-checkbox-icon-checked {
-  width: 65%;
-  height: 65%;
+.adm-checkbox .adm-checkbox-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
 .adm-checkbox.adm-checkbox-block {
@@ -63,13 +61,6 @@
   color: var(--adm-color-primary);
 }
 
-.adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-indeterminate-checked {
-  width: 60%;
-  height: 60%;
-  border-radius: 100%;
-  background-color: currentColor;
-}
-
 .adm-checkbox-content {
   flex: 0 1 auto;
   font-size: var(--font-size);

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

@@ -6,6 +6,7 @@ import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 import { devWarning } from '../../utils/dev-log';
 import { CheckIcon } from './check-icon';
+import { IndeterminateIcon } from './indeterminate-icon';
 const classPrefix = `adm-checkbox`;
 const defaultProps = {
   defaultChecked: false,
@@ -63,11 +64,7 @@ export const Checkbox = p => {
 
     return React.createElement("div", {
       className: `${classPrefix}-icon`
-    }, props.indeterminate ? React.createElement("div", {
-      className: `${classPrefix}-indeterminate-checked`
-    }) : checked && React.createElement(CheckIcon, {
-      className: `${classPrefix}-icon-checked`
-    }));
+    }, props.indeterminate ? React.createElement(IndeterminateIcon, null) : checked && React.createElement(CheckIcon, null));
   };
 
   return withNativeProps(props, React.createElement("label", {

package/2x/es/components/checkbox/indeterminate-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const IndeterminateIcon: React.NamedExoticComponent<NativeProps<never>>;

package/2x/es/components/checkbox/indeterminate-icon.js

@@ -0,0 +1,10 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const IndeterminateIcon = memo(props => {
+  return withNativeProps(props, React.createElement("svg", {
+    viewBox: '0 0 40 40'
+  }, React.createElement("path", {
+    d: 'M20,9 C26.0752953,9 31,13.9247047 31,20 C31,26.0752953 26.0752953,31 20,31 C13.9247047,31 9,26.0752953 9,20 C9,13.9247047 13.9247047,9 20,9 Z',
+    fill: 'currentColor'
+  })));
+});

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import type { PickerProps } from '../picker';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from './date-picker-utils';
-export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation'> & {
+export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style'> & {
     value?: Date | null;
     defaultValue?: Date | null;
     onSelect?: (value: Date) => void;

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

@@ -1,7 +1,8 @@
 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 DatePickerViewProps = {
+export declare type DatePickerViewProps = Pick<PickerViewProps, 'style'> & {
     value?: Date;
     defaultValue?: Date;
     onChange?: (value: Date) => void;
@@ -10,5 +11,5 @@ export declare type DatePickerViewProps = {
     precision?: Precision;
     renderLabel?: (type: Precision, data: number) => ReactNode;
     filter?: DatePickerFilter;
-} & NativeProps<'--height'>;
+} & NativeProps;
 export declare const DatePickerView: FC<DatePickerViewProps>;

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

@@ -1,7 +1,8 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 import { useResizeEffect } from '../../utils/use-resize-effect';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 const classPrefix = `adm-ellipsis`;
 const defaultProps = {
   direction: 'end',
@@ -113,7 +114,7 @@ export const Ellipsis = p => {
   }
 
   useResizeEffect(calcEllipsised, rootRef);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     calcEllipsised();
   }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
   const expandActionElement = exceeded && props.expandText ? React.createElement("a", {

package/2x/es/components/floating-bubble/floating-bubble.css

@@ -16,6 +16,7 @@
   width: 100vw;
   height: 100vh;
   padding: var(--edge-distance);
+  box-sizing: border-box;
   pointer-events: none;
 }
 

package/2x/es/components/floating-panel/floating-panel.d.ts

@@ -1,17 +1,19 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type FloatingPanelProps = {
-    anchors: number[];
-    children: ReactNode;
-    onHeightChange?: (height: number, animating: boolean) => void;
-} & NativeProps<'--border-radius' | '--z-index'>;
 export declare type FloatingPanelRef = {
     setHeight: (height: number, options?: {
         immediate?: boolean;
     }) => void;
 };
+export declare type FloatingPanelProps = {
+    anchors: number[];
+    children: ReactNode;
+    onHeightChange?: (height: number, animating: boolean) => void;
+    handleDraggingOfContent?: boolean;
+} & NativeProps<'--border-radius' | '--z-index'>;
 export declare const FloatingPanel: React.ForwardRefExoticComponent<{
     anchors: number[];
     children: ReactNode;
     onHeightChange?: ((height: number, animating: boolean) => void) | undefined;
+    handleDraggingOfContent?: boolean | undefined;
 } & NativeProps<"--z-index" | "--border-radius"> & React.RefAttributes<FloatingPanelRef>>;

package/2x/es/components/floating-panel/floating-panel.js

@@ -4,9 +4,15 @@ import { useDrag } from '@use-gesture/react';
 import { useSpring, animated } from '@react-spring/web';
 import { supportsPassive } from '../../utils/supports-passive';
 import { nearest } from '../../utils/nearest';
-export const FloatingPanel = forwardRef((props, ref) => {
+import { mergeProps } from '../../utils/with-default-props';
+import { useLockScroll } from '../../utils/use-lock-scroll';
+const defaultProps = {
+  handleDraggingOfContent: true
+};
+export const FloatingPanel = forwardRef((p, ref) => {
   var _a;
 
+  const props = mergeProps(defaultProps, p);
   const {
     anchors
   } = props;
@@ -44,6 +50,7 @@ export const FloatingPanel = forwardRef((props, ref) => {
       if (header === target || (header === null || header === void 0 ? void 0 : header.contains(target))) {
         pullingRef.current = true;
       } else {
+        if (!props.handleDraggingOfContent) return;
         const reachedTop = y.goal <= bounds.top;
         const content = contentRef.current;
         if (!content) return;
@@ -101,6 +108,7 @@ export const FloatingPanel = forwardRef((props, ref) => {
       });
     }
   }), [api]);
+  useLockScroll(elementRef, true);
   return withNativeProps(props, React.createElement(animated.div, {
     ref: elementRef,
     className: 'adm-floating-panel',

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

@@ -13,7 +13,8 @@
 .adm-form-item-label-required {
   position: absolute;
   left: -0.6em;
-  top: 0.2em;
+  top: 0;
+  font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
   user-select: none;
 }
@@ -27,8 +28,8 @@
 }
 
 .adm-form-vertical .adm-form-item-label {
-  margin-bottom: 8px;
   font-size: 30px;
+  margin-bottom: 8px;
 }
 
 .adm-form-vertical .adm-form-item-footer {

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

@@ -7,7 +7,7 @@ import type { FormLayout } from './index';
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
-export declare type FormItemProps = RcFieldProps & NativeProps & Pick<ListItemProps, 'style' | 'onClick' | 'extra'> & {
+export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'onClick' | 'extra' | 'arrow'> & {
     label?: React.ReactNode;
     help?: React.ReactNode;
     hasFeedback?: boolean;
@@ -17,6 +17,6 @@ export declare type FormItemProps = RcFieldProps & NativeProps & Pick<ListItemPr
     hidden?: boolean;
     layout?: FormLayout;
     children: ChildrenType;
-};
+} & NativeProps;
 export declare const FormItem: FC<FormItemProps>;
 export {};

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

@@ -25,7 +25,8 @@ const FormItemLayout = props => {
     children,
     htmlFor,
     hidden,
-    errors
+    errors,
+    arrow
   } = props;
   const context = useContext(FormContext);
   const hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
@@ -52,7 +53,8 @@ const FormItemLayout = props => {
       [`${classPrefix}-hidden`]: hidden
     }),
     disabled: disabled,
-    onClick: props.onClick
+    onClick: props.onClick,
+    arrow: arrow
   }, children);
 };
 
@@ -80,9 +82,10 @@ export const FormItem = props => {
     validateTrigger,
     onClick,
     shouldUpdate,
-    dependencies
+    dependencies,
+    arrow
   } = props,
-        fieldProps = __rest(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies"]);
+        fieldProps = __rest(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
 
   const {
     validateTrigger: contextValidateTrigger
@@ -138,7 +141,8 @@ export const FormItem = props => {
       errors: errors,
       onClick: onClick,
       hidden: hidden,
-      layout: layout
+      layout: layout,
+      arrow: arrow
     }, React.createElement(NoStyleItemContext.Provider, {
       value: onSubMetaChange
     }, baseChildren));

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

@@ -1,6 +1,6 @@
 .adm-form .adm-list.adm-list {
-  --padding-left: 40px;
-  --padding-right: 40px;
+  --padding-left: 32px;
+  --padding-right: 24px;
 }
 
 .adm-form-horizontal .adm-list.adm-list {
@@ -13,5 +13,5 @@
 }
 
 .adm-form .adm-form-footer {
-  padding: 24px;
+  padding: 40px 24px;
 }

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

@@ -1,16 +1,17 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { ListProps } from '../list';
-import type { FormProps as RcFormProps, FormInstance } from 'rc-field-form';
+import type { FormProps as RcFormProps, FormInstance as RCFormInstance } from 'rc-field-form';
 import { FormContextType } from './context';
 import type { FormLayout } from '.';
-export declare type FormProps = RcFormProps & NativeProps & Partial<FormContextType> & {
+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 & Partial<FormContextType> & {
     footer?: ReactNode;
     layout?: FormLayout;
     mode?: ListProps['mode'];
 };
-export declare const Form: React.ForwardRefExoticComponent<RcFormProps<any> & NativeProps<never> & Partial<FormContextType> & {
+export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<never> & Partial<FormContextType> & {
     footer?: ReactNode;
     layout?: "horizontal" | "vertical" | undefined;
     mode?: ListProps['mode'];
-} & React.RefAttributes<FormInstance<any>>>;
+} & React.RefAttributes<Pick<RCFormInstance<any>, "submit" | "getFieldValue" | "getFieldsValue" | "getFieldError" | "getFieldsError" | "isFieldTouched" | "isFieldsTouched" | "resetFields" | "setFields" | "setFieldsValue" | "validateFields">>>;

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

@@ -1,6 +1,6 @@
 .adm-form .adm-list.adm-list {
-  --padding-left: 40px;
-  --padding-right: 40px;
+  --padding-left: 32px;
+  --padding-right: 24px;
 }
 
 .adm-form-horizontal .adm-list.adm-list {
@@ -13,7 +13,7 @@
 }
 
 .adm-form .adm-form-footer {
-  padding: 24px;
+  padding: 40px 24px;
 }
 
 .adm-form-item + .adm-form-item {
@@ -31,7 +31,8 @@
 .adm-form-item-label-required {
   position: absolute;
   left: -0.6em;
-  top: 0.2em;
+  top: 0;
+  font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
   user-select: none;
 }
@@ -45,8 +46,8 @@
 }
 
 .adm-form-vertical .adm-form-item-label {
-  margin-bottom: 8px;
   font-size: 30px;
+  margin-bottom: 8px;
 }
 
 .adm-form-vertical .adm-form-item-footer {

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

@@ -2,13 +2,14 @@
 import './index.less';
 import { useForm } from 'rc-field-form';
 export declare type FormLayout = 'vertical' | 'horizontal';
-export type { FormProps } from './form';
-export type { FormInstance } from 'rc-field-form';
-declare const _default: import("react").ForwardRefExoticComponent<import("rc-field-form").FormProps<any> & import("../../utils/native-props").NativeProps<never> & Partial<import("./context").FormContextType> & {
+export type { FormProps, FormInstance } from './form';
+export type { FormItemProps } from './form-item';
+export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/interface';
+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<never> & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
     layout?: "horizontal" | "vertical" | undefined;
     mode?: "default" | "card" | undefined;
-} & import("react").RefAttributes<import("rc-field-form").FormInstance<any>>> & {
+} & import("react").RefAttributes<Pick<import("rc-field-form").FormInstance<any>, "submit" | "getFieldValue" | "getFieldsValue" | "getFieldError" | "getFieldsError" | "isFieldTouched" | "isFieldsTouched" | "resetFields" | "setFields" | "setFieldsValue" | "validateFields">>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
     Header: import("react").FC<{}>;
     useForm: typeof useForm;

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

@@ -1,11 +1,11 @@
 import { __awaiter } from "tslib";
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { AddOutline } 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 { useMemoizedFn, useUnmount } from 'ahooks';
+import { useIsomorphicLayoutEffect, useMemoizedFn, useUnmount } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
 const classPrefix = `adm-image-uploader`;
@@ -26,7 +26,7 @@ export const ImageUploader = p => {
     setValue(updater(value));
   });
   const [tasks, setTasks] = useState([]);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setTasks(prev => prev.filter(task => {
       if (task.url === undefined) return true;
       return !value.some(fileItem => fileItem.url === task.url);

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

@@ -1,5 +1,6 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { GetContainer } from '../../utils/render-to-container';
+import { SlidesRef } from './slides';
 export declare type ImageViewerProps = {
     image?: string;
     maxZoom?: number;
@@ -9,9 +10,14 @@ export declare type ImageViewerProps = {
     afterClose?: () => void;
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
+export declare type MultiImageViewerRef = SlidesRef;
 export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image'> & {
     images?: string[];
     defaultIndex?: number;
     onIndexChange?: (index: number) => void;
 };
-export declare const MultiImageViewer: FC<MultiImageViewerProps>;
+export declare const MultiImageViewer: React.ForwardRefExoticComponent<Pick<ImageViewerProps, "visible" | "onClose" | "afterClose" | "getContainer" | "maxZoom"> & {
+    images?: string[] | undefined;
+    defaultIndex?: number | undefined;
+    onIndexChange?: ((index: number) => void) | undefined;
+} & React.RefAttributes<SlidesRef>>;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import { renderToContainer } from '../../utils/render-to-container';
 import Mask from '../mask';
@@ -33,8 +33,18 @@ export const ImageViewer = p => {
 const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
-export const MultiImageViewer = p => {
+export const MultiImageViewer = forwardRef((p, ref) => {
   const props = mergeProps(multiDefaultProps, p);
+  const [defaultIndex, setDefaultIndex] = useState(props.defaultIndex);
+  const slidesRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    swipeTo: (index, immediate) => {
+      var _a;
+
+      setDefaultIndex(index);
+      (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
+    }
+  }));
   const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
@@ -43,7 +53,8 @@ export const MultiImageViewer = p => {
   }, React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && React.createElement(Slides, {
-    defaultIndex: props.defaultIndex,
+    ref: slidesRef,
+    defaultIndex: defaultIndex,
     onIndexChange: props.onIndexChange,
     images: props.images,
     onTap: () => {
@@ -54,4 +65,4 @@ export const MultiImageViewer = p => {
     maxZoom: props.maxZoom
   })));
   return renderToContainer(props.getContainer, node);
-};
+});

package/2x/es/components/image-viewer/index.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import './image-viewer.less';
 import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
-export type { ImageViewerProps, MultiImageViewerProps } from './image-viewer';
+export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';
 export type { ImageViewerHandler } from './methods';
 declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
-    Multi: import("react").FC<import("./image-viewer").MultiImageViewerProps> & {
+    Multi: import("react").ForwardRefExoticComponent<Pick<import("./image-viewer").ImageViewerProps, "visible" | "onClose" | "afterClose" | "getContainer" | "maxZoom"> & {
+        images?: string[] | undefined;
+        defaultIndex?: number | undefined;
+        onIndexChange?: ((index: number) => void) | undefined;
+    } & import("react").RefAttributes<import("./slides").SlidesRef>> & {
         show: typeof showMultiImageViewer;
     };
     show: typeof showImageViewer;

package/2x/es/components/image-viewer/slide.js

@@ -109,6 +109,7 @@ export const Slide = props => {
     }
   }, React.createElement("img", {
     src: props.image,
-    draggable: false
+    draggable: false,
+    alt: props.image
   }))));
 };

package/2x/es/components/image-viewer/slides.d.ts

@@ -1,8 +1,12 @@
-import { FC } from 'react';
-export declare const Slides: FC<{
+import React from 'react';
+export declare type SlidesType = {
     images: string[];
     onTap: () => void;
     maxZoom: number;
     defaultIndex: number;
     onIndexChange?: (index: number) => void;
-}>;
+};
+export declare type SlidesRef = {
+    swipeTo: (index: number, immediate?: boolean) => void;
+};
+export declare const Slides: React.ForwardRefExoticComponent<SlidesType & React.RefAttributes<SlidesRef>>;

package/2x/es/components/image-viewer/slides.js

@@ -1,11 +1,11 @@
-import React, { useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useDrag } from '@use-gesture/react';
 import { useSpring, animated } from '@react-spring/web';
 import { Slide } from './slide';
 import { convertPx } from '../../utils/convert-px';
 import { bound } from '../../utils/bound';
 const classPrefix = `adm-image-viewer`;
-export const Slides = props => {
+export const Slides = forwardRef((props, ref) => {
   const slideWidth = window.innerWidth + convertPx(16);
   const [{
     x
@@ -17,10 +17,23 @@ export const Slides = props => {
     }
   }));
   const count = props.images.length;
-  const dragLockRef = useRef(false);
-  const bind = useDrag(state => {
+
+  function swipeTo(index, immediate = false) {
     var _a;
 
+    const i = bound(index, 0, count - 1);
+    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, i);
+    api.start({
+      x: i * slideWidth,
+      immediate
+    });
+  }
+
+  useImperativeHandle(ref, () => ({
+    swipeTo
+  }));
+  const dragLockRef = useRef(false);
+  const bind = useDrag(state => {
     if (dragLockRef.current) return;
     const [offsetX] = state.offset;
 
@@ -28,11 +41,7 @@ export const Slides = props => {
       const minIndex = Math.floor(offsetX / slideWidth);
       const maxIndex = minIndex + 1;
       const velocityOffset = Math.min(state.velocity[0] * 2000, slideWidth) * state.direction[0];
-      const index = bound(bound(Math.round((offsetX + velocityOffset) / slideWidth), minIndex, maxIndex), 0, count - 1);
-      (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
-      api.start({
-        x: index * slideWidth
-      });
+      swipeTo(bound(Math.round((offsetX + velocityOffset) / slideWidth), minIndex, maxIndex));
     } else {
       api.start({
         x: offsetX,
@@ -81,4 +90,4 @@ export const Slides = props => {
     },
     dragLockRef: dragLockRef
   }))));
-};
+});