antd-mobile 5.0.0-rc.9 → 5.0.0

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ImageUploader = void 0;
 
+var _tslib = require("tslib");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _antdMobileIcons = require("antd-mobile-icons");
@@ -15,7 +17,7 @@ var _imageViewer = _interopRequireDefault(require("../image-viewer"));
 
 var _previewItem = _interopRequireDefault(require("./preview-item"));
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
 var _ahooks = require("ahooks");
 
@@ -23,306 +25,180 @@ var _space = _interopRequireDefault(require("../space"));
 
 var _nativeProps = require("../../utils/native-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var classPrefix = "adm-image-uploader";
-var defaultProps = {
+const classPrefix = `adm-image-uploader`;
+const defaultProps = {
   disableUpload: false,
   deletable: true,
   showUpload: true,
   multiple: false,
   maxCount: 0,
   defaultValue: [],
-  accept: 'image/*'
+  accept: 'image/*',
+  preview: true
 };
 
-var ImageUploader = function ImageUploader(p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var updateValue = (0, _ahooks.useMemoizedFn)(function (updater) {
+const ImageUploader = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
+  const updateValue = (0, _ahooks.useMemoizedFn)(updater => {
     setValue(updater(value));
   });
-
-  var _useState = (0, _react.useState)([]),
-      tasks = _useState[0],
-      setTasks = _useState[1];
-
-  (0, _react.useLayoutEffect)(function () {
-    setTasks(function (prev) {
-      return prev.filter(function (task) {
-        if (task.url === undefined) return true;
-        return !value.some(function (fileItem) {
-          return fileItem.url === task.url;
-        });
-      });
-    });
+  const [tasks, setTasks] = (0, _react.useState)([]);
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    setTasks(prev => prev.filter(task => {
+      if (task.url === undefined) return true;
+      return !value.some(fileItem => fileItem.url === task.url);
+    }));
   }, [value]);
-  var idCountRef = (0, _react.useRef)(0);
-  var maxCount = props.maxCount,
-      onPreview = props.onPreview;
+  const idCountRef = (0, _react.useRef)(0);
+  const {
+    maxCount,
+    onPreview
+  } = props;
 
   function onChange(e) {
     var _a;
 
-    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var _this = this;
-
-      var rawFiles, files, exceed, newTasks;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              e.persist();
-              rawFiles = e.target.files;
-
-              if (rawFiles) {
-                _context2.next = 4;
-                break;
-              }
-
-              return _context2.abrupt("return");
+    return (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
+      e.persist();
+      const {
+        files: rawFiles
+      } = e.target;
+      if (!rawFiles) return;
+      let files = [].slice.call(rawFiles);
 
-            case 4:
-              files = [].slice.call(rawFiles);
+      if (props.beforeUpload) {
+        files = yield props.beforeUpload(files);
+      }
 
-              if (!props.beforeUpload) {
-                _context2.next = 9;
-                break;
-              }
+      if (files.length === 0) {
+        return;
+      }
 
-              _context2.next = 8;
-              return props.beforeUpload(files);
+      if (maxCount > 0) {
+        const exceed = value.length + files.length - maxCount;
 
-            case 8:
-              files = _context2.sent;
+        if (exceed > 0) {
+          files = files.slice(0, files.length - exceed);
+          (_a = props.onCountExceed) === null || _a === void 0 ? void 0 : _a.call(props, exceed);
+        }
+      }
 
-            case 9:
-              if (!(files.length === 0)) {
-                _context2.next = 11;
-                break;
+      const newTasks = files.map(file => ({
+        id: idCountRef.current++,
+        status: 'pending',
+        file
+      }));
+      setTasks(prev => [...prev, ...newTasks]);
+      yield Promise.all(newTasks.map(currentTask => (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
+        try {
+          const result = yield props.upload(currentTask.file);
+          setTasks(prev => {
+            return prev.map(task => {
+              if (task.id === currentTask.id) {
+                return Object.assign(Object.assign({}, task), {
+                  url: result.url
+                });
               }
 
-              return _context2.abrupt("return");
-
-            case 11:
-              if (maxCount > 0) {
-                exceed = value.length + files.length - maxCount;
-
-                if (exceed > 0) {
-                  files = files.slice(0, files.length - exceed);
-                  (_a = props.onCountExceed) === null || _a === void 0 ? void 0 : _a.call(props, exceed);
-                }
+              return task;
+            });
+          });
+          updateValue(prev => {
+            const newVal = Object.assign({}, result);
+            return [...prev, newVal];
+          });
+        } catch (e) {
+          setTasks(prev => {
+            return prev.map(task => {
+              if (task.id === currentTask.id) {
+                return Object.assign(Object.assign({}, task), {
+                  status: 'fail'
+                });
               }
 
-              newTasks = files.map(function (file) {
-                return {
-                  id: idCountRef.current++,
-                  status: 'pending',
-                  file: file
-                };
-              });
-              setTasks(function (prev) {
-                return [].concat(prev, newTasks);
-              });
-              _context2.next = 16;
-              return Promise.all(newTasks.map(function (currentTask) {
-                return __awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-                  var result;
-                  return regeneratorRuntime.wrap(function _callee$(_context) {
-                    while (1) {
-                      switch (_context.prev = _context.next) {
-                        case 0:
-                          _context.prev = 0;
-                          _context.next = 3;
-                          return props.upload(currentTask.file);
-
-                        case 3:
-                          result = _context.sent;
-                          setTasks(function (prev) {
-                            return prev.map(function (task) {
-                              if (task.id === currentTask.id) {
-                                return Object.assign(Object.assign({}, task), {
-                                  url: result.url
-                                });
-                              }
-
-                              return task;
-                            });
-                          });
-                          updateValue(function (prev) {
-                            var newVal = Object.assign({}, result);
-                            return [].concat(prev, [newVal]);
-                          });
-                          _context.next = 12;
-                          break;
-
-                        case 8:
-                          _context.prev = 8;
-                          _context.t0 = _context["catch"](0);
-                          setTasks(function (prev) {
-                            return prev.map(function (task) {
-                              if (task.id === currentTask.id) {
-                                return Object.assign(Object.assign({}, task), {
-                                  status: 'fail'
-                                });
-                              }
-
-                              return task;
-                            });
-                          });
-                          throw _context.t0;
-
-                        case 12:
-                        case "end":
-                          return _context.stop();
-                      }
-                    }
-                  }, _callee, null, [[0, 8]]);
-                }));
-              }))["catch"](function (error) {
-                return console.error(error);
-              });
-
-            case 16:
-              e.target.value = '';
-            // HACK: fix the same file doesn't trigger onChange
-
-            case 17:
-            case "end":
-              return _context2.stop();
-          }
+              return task;
+            });
+          });
+          throw e;
         }
-      }, _callee2);
-    }));
+      }))).catch(error => console.error(error));
+      e.target.value = ''; // HACK: fix the same file doesn't trigger onChange
+    });
   }
 
+  const imageViewerHandlerRef = (0, _react.useRef)(null);
+
   function previewImage(index) {
-    _imageViewer["default"].Multi.show({
-      images: value.map(function (fileItem) {
-        return fileItem.url;
-      }),
-      defaultIndex: index
+    imageViewerHandlerRef.current = _imageViewer.default.Multi.show({
+      images: value.map(fileItem => fileItem.url),
+      defaultIndex: index,
+      onClose: () => {
+        imageViewerHandlerRef.current = null;
+      }
     });
-
-    onPreview && onPreview(index);
   }
 
-  var showUpload = props.showUpload && (maxCount === 0 || value.length + tasks.length < maxCount);
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  (0, _ahooks.useUnmount)(() => {
+    var _a;
+
+    (_a = imageViewerHandlerRef.current) === null || _a === void 0 ? void 0 : _a.close();
+  });
+  const showUpload = props.showUpload && (maxCount === 0 || value.length + tasks.length < maxCount);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
-  }, /*#__PURE__*/_react["default"].createElement(_space["default"], {
-    className: classPrefix + "-space",
+  }, _react.default.createElement(_space.default, {
+    className: `${classPrefix}-space`,
     wrap: true
-  }, value.map(function (fileItem, index) {
+  }, value.map((fileItem, index) => {
     var _a, _b;
 
-    return /*#__PURE__*/_react["default"].createElement(_previewItem["default"], {
+    return _react.default.createElement(_previewItem.default, {
       key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
       url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
       deletable: props.deletable,
-      onClick: function onClick() {
-        return previewImage(index);
+      onClick: () => {
+        if (props.preview) {
+          previewImage(index);
+        }
+
+        onPreview && onPreview(index, fileItem);
       },
-      onDelete: function onDelete() {
-        return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-          var _c, canDelete;
-
-          return regeneratorRuntime.wrap(function _callee3$(_context3) {
-            while (1) {
-              switch (_context3.prev = _context3.next) {
-                case 0:
-                  _context3.next = 2;
-                  return (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
-
-                case 2:
-                  canDelete = _context3.sent;
-
-                  if (!(canDelete === false)) {
-                    _context3.next = 5;
-                    break;
-                  }
-
-                  return _context3.abrupt("return");
-
-                case 5:
-                  setValue(value.filter(function (x, i) {
-                    return i !== index;
-                  }));
-
-                case 6:
-                case "end":
-                  return _context3.stop();
-              }
-            }
-          }, _callee3);
-        }));
-      }
-    });
-  }), tasks.map(function (task) {
-    return /*#__PURE__*/_react["default"].createElement(_previewItem["default"], {
-      key: task.id,
-      file: task.file,
-      deletable: task.status !== 'pending',
-      status: task.status,
-      onDelete: function onDelete() {
-        setTasks(tasks.filter(function (x) {
-          return x.id !== task.id;
-        }));
-      }
+      onDelete: () => (0, _tslib.__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));
+      })
     });
-  }), showUpload && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-upload-button-wrap"
-  }, props.children ? props.children : /*#__PURE__*/_react["default"].createElement("span", {
-    className: classPrefix + "-cell " + classPrefix + "-upload-button",
+  }), tasks.map(task => _react.default.createElement(_previewItem.default, {
+    key: task.id,
+    file: task.file,
+    deletable: task.status !== 'pending',
+    status: task.status,
+    onDelete: () => {
+      setTasks(tasks.filter(x => x.id !== task.id));
+    }
+  })), showUpload && _react.default.createElement("div", {
+    className: `${classPrefix}-upload-button-wrap`
+  }, props.children ? props.children : _react.default.createElement("span", {
+    className: `${classPrefix}-cell ${classPrefix}-upload-button`,
     role: 'button'
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: classPrefix + "-upload-button-icon"
-  }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.AddOutline, null))), !props.disableUpload && /*#__PURE__*/_react["default"].createElement("input", {
+  }, _react.default.createElement("span", {
+    className: `${classPrefix}-upload-button-icon`
+  }, _react.default.createElement(_antdMobileIcons.AddOutline, null))), !props.disableUpload && _react.default.createElement("input", {
     capture: props.capture,
     accept: props.accept,
     multiple: props.multiple,
     type: 'file',
-    className: classPrefix + "-input",
+    className: `${classPrefix}-input`,
     onChange: onChange
   })))));
 };

package/cjs/components/image-uploader/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _imageUploader = require("./image-uploader");
 
 require("./image-uploader.css");
 
 var _default = _imageUploader.ImageUploader;
-exports["default"] = _default;
+exports.default = _default;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -13,27 +13,29 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _image = _interopRequireDefault(require("../image"));
 
-var _loading = _interopRequireDefault(require("../loading"));
+var _spinLoading = _interopRequireDefault(require("../spin-loading"));
 
 var _configProvider = require("../config-provider");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var classPrefix = "adm-image-uploader";
+const classPrefix = `adm-image-uploader`;
 
-var PreviewItem = function PreviewItem(props) {
-  var _useConfig = (0, _configProvider.useConfig)(),
-      locale = _useConfig.locale;
-
-  var url = props.url,
-      file = props.file,
-      deletable = props.deletable,
-      onDelete = props.onDelete;
-  var src = (0, _react.useMemo)(function () {
+const PreviewItem = props => {
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
+  const {
+    url,
+    file,
+    deletable,
+    onDelete
+  } = props;
+  const src = (0, _react.useMemo)(() => {
     if (url) {
       return url;
     }
@@ -46,30 +48,30 @@ var PreviewItem = function PreviewItem(props) {
   }, [url, file]);
 
   function renderLoading() {
-    return props.status === 'pending' && /*#__PURE__*/_react["default"].createElement("div", {
-      className: classPrefix + "-cell-mask"
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: classPrefix + "-cell-loading"
-    }, /*#__PURE__*/_react["default"].createElement(_loading["default"], {
-      color: '#fff'
-    }), /*#__PURE__*/_react["default"].createElement("span", {
-      className: classPrefix + "-cell-mask-message"
+    return props.status === 'pending' && _react.default.createElement("div", {
+      className: `${classPrefix}-cell-mask`
+    }, _react.default.createElement("span", {
+      className: `${classPrefix}-cell-loading`
+    }, _react.default.createElement(_spinLoading.default, {
+      color: 'white'
+    }), _react.default.createElement("span", {
+      className: `${classPrefix}-cell-mask-message`
     }, locale.ImageUploader.uploading)));
   }
 
   function renderDelete() {
-    return deletable && /*#__PURE__*/_react["default"].createElement("span", {
-      className: classPrefix + "-cell-delete",
+    return deletable && _react.default.createElement("span", {
+      className: `${classPrefix}-cell-delete`,
       onClick: onDelete
-    }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.CloseOutline, {
-      className: classPrefix + "-cell-delete-icon"
+    }, _react.default.createElement(_antdMobileIcons.CloseOutline, {
+      className: `${classPrefix}-cell-delete-icon`
     }));
   }
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix + "-cell", props.status === 'fail' && classPrefix + "-cell-fail")
-  }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
-    className: classPrefix + "-cell-image",
+  return _react.default.createElement("div", {
+    className: (0, _classnames.default)(`${classPrefix}-cell`, props.status === 'fail' && `${classPrefix}-cell-fail`)
+  }, _react.default.createElement(_image.default, {
+    className: `${classPrefix}-cell-image`,
     src: src,
     fit: 'cover',
     onClick: props.onClick
@@ -77,4 +79,4 @@ var PreviewItem = function PreviewItem(props) {
 };
 
 var _default = PreviewItem;
-exports["default"] = _default;
+exports.default = _default;

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

@@ -10,6 +10,7 @@
   position: relative;
   z-index: 1;
   cursor: grab;
+  touch-action: none;
 }
 .adm-image-viewer-slides-inner {
   height: 100%;
@@ -32,6 +33,7 @@
   width: 100%;
   height: 100%;
   cursor: grab;
+  touch-action: none;
 }
 .adm-image-viewer-image-wrapper {
   width: 100%;

package/cjs/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>>;