rc-image - npm Package Compare versions

Comparing version 5.17.1 to 5.18.0

es/hooks/useImageTransform.d.ts

 /// <reference types="react" />
-declare type TransformType = {
+export declare type TransformType = {
     x: number;
@@ -10,3 +10,7 @@ y: number;
 };
-export default function useImageTransform(imgRef: React.MutableRefObject<HTMLImageElement>): {
+export declare type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound';
+export default function useImageTransform(imgRef: React.MutableRefObject<HTMLImageElement>, minScale: number, maxScale: number, onTransform: (params: {
+    transform: TransformType;
+    action: TransformAction;
+}) => void): {
     transform: {
@@ -20,6 +24,5 @@ x: number;
     };
-    resetTransform: () => void;
-    updateTransform: (newTransform: Partial<TransformType>) => void;
-    dispatchZoomChange: (ratio: number, clientX?: number, clientY?: number) => void;
+    resetTransform: (action: TransformAction) => void;
+    updateTransform: (newTransform: Partial<TransformType>, action: TransformAction) => void;
+    dispatchZoomChange: (ratio: number, action: TransformAction, clientX?: number, clientY?: number) => void;
 };
-export {};

es/hooks/useImageTransform.js

 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { useState, useRef } from 'react';
+import { getClientSize } from "rc-util/es/Dom/css";
+import isEqual from "rc-util/es/isEqual";
 import raf from "rc-util/es/raf";
-import { getClientSize } from "rc-util/es/Dom/css";
-import { MIN_SCALE, MAX_SCALE } from "../previewConfig";
+import { useRef, useState } from 'react';
 var initialTransform = {
@@ -15,3 +15,3 @@ x: 0,
 };
-export default function useImageTransform(imgRef) {
+export default function useImageTransform(imgRef, minScale, maxScale, onTransform) {
   var frame = useRef(null);
@@ -23,8 +23,14 @@ var queue = useRef([]);
     setTransform = _useState2[1];
-  var resetTransform = function resetTransform() {
+  var resetTransform = function resetTransform(action) {
     setTransform(initialTransform);
+    if (onTransform && !isEqual(initialTransform, transform)) {
+      onTransform({
+        transform: initialTransform,
+        action: action
+      });
+    }
   };
 
   /** Direct update transform */
-  var updateTransform = function updateTransform(newTransform) {
+  var updateTransform = function updateTransform(newTransform, action) {
     if (frame.current === null) {
@@ -39,2 +45,6 @@ queue.current = [];
           frame.current = null;
+          onTransform === null || onTransform === void 0 ? void 0 : onTransform({
+            transform: memoState,
+            action: action
+          });
           return memoState;
@@ -48,3 +58,3 @@ });
   /** Scale according to the position of clientX and clientY */
-  var dispatchZoomChange = function dispatchZoomChange(ratio, clientX, clientY) {
+  var dispatchZoomChange = function dispatchZoomChange(ratio, action, clientX, clientY) {
     var _imgRef$current = imgRef.current,
@@ -59,8 +69,8 @@ width = _imgRef$current.width,
     var newScale = transform.scale * ratio;
-    if (newScale > MAX_SCALE) {
-      newRatio = MAX_SCALE / transform.scale;
-      newScale = MAX_SCALE;
-    } else if (newScale < MIN_SCALE) {
-      newRatio = MIN_SCALE / transform.scale;
-      newScale = MIN_SCALE;
+    if (newScale > maxScale) {
+      newRatio = maxScale / transform.scale;
+      newScale = maxScale;
+    } else if (newScale < minScale) {
+      newRatio = minScale / transform.scale;
+      newScale = minScale;
     }
@@ -101,3 +111,3 @@
       scale: newScale
-    });
+    }, action);
   };
@@ -110,3 +120,2 @@ return {
   };
-}
-;
+}

es/Image.d.ts

@@ -0,10 +1,13 @@
+import type { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
+import type { GetContainer } from 'rc-util/lib/PortalWrapper';
 import * as React from 'react';
-import type { GetContainer } from 'rc-util/lib/PortalWrapper';
-import type { PreviewProps } from './Preview';
+import type { TransformType } from './hooks/useImageTransform';
+import type { PreviewProps, ToolbarRenderType } from './Preview';
 import PreviewGroup from './PreviewGroup';
-import type { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
 export interface ImagePreviewType extends Omit<IDialogPropTypes, 'mask' | 'visible' | 'closable' | 'prefixCls' | 'onClose' | 'afterClose' | 'wrapClassName'> {
     src?: string;
     visible?: boolean;
-    onVisibleChange?: (value: boolean, prevValue: boolean, currentIndex?: number) => void;
+    minScale?: number;
+    maxScale?: number;
+    onVisibleChange?: (value: boolean, prevValue: boolean) => void;
     getContainer?: GetContainer | false;
@@ -15,2 +18,8 @@ mask?: React.ReactNode;
     scaleStep?: number;
+    imageRender?: (params: {
+        originalNode: React.ReactNode;
+        transform: TransformType;
+    }) => React.ReactNode;
+    onTransform?: PreviewProps['onTransform'];
+    toolbarRender?: (params: Omit<ToolbarRenderType, 'current' | 'total'>) => React.ReactNode;
 }
@@ -17,0 +26,0 @@ export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onClick'> {

es/Image.js

@@ -7,12 +7,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["src", "alt", "onPreviewClose", "prefixCls", "previewPrefixCls", "placeholder", "fallback", "width", "height", "style", "preview", "className", "onClick", "onError", "wrapperClassName", "wrapperStyle", "rootClassName", "crossOrigin", "decoding", "loading", "referrerPolicy", "sizes", "srcSet", "useMap", "draggable"],
-  _excluded2 = ["src", "visible", "onVisibleChange", "getContainer", "mask", "maskClassName", "icons", "scaleStep"];
-import * as React from 'react';
-import { useState } from 'react';
+var _excluded = ["src", "alt", "onPreviewClose", "prefixCls", "previewPrefixCls", "placeholder", "fallback", "width", "height", "style", "preview", "className", "onClick", "onError", "wrapperClassName", "wrapperStyle", "rootClassName"],
+  _excluded2 = ["src", "visible", "onVisibleChange", "getContainer", "mask", "maskClassName", "icons", "scaleStep", "minScale", "maxScale", "imageRender", "toolbarRender"];
 import cn from 'classnames';
 import { getOffset } from "rc-util/es/Dom/css";
 import useMergedState from "rc-util/es/hooks/useMergedState";
+import * as React from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { PreviewGroupContext } from "./context";
+import useRegisterImage from "./hooks/useRegisterImage";
 import Preview from "./Preview";
-import PreviewGroup, { context } from "./PreviewGroup";
-var uuid = 0;
+import PreviewGroup from "./PreviewGroup";
+var COMMON_PROPS = ['crossOrigin', 'decoding', 'draggable', 'loading', 'referrerPolicy', 'sizes', 'srcSet', 'useMap', 'alt'];
 function isImageValid(src) {
@@ -30,49 +32,43 @@ return new Promise(function (resolve) {
 }
-var ImageInternal = function ImageInternal(_ref) {
-  var _imgCommonProps$style;
-  var imgSrc = _ref.src,
-    alt = _ref.alt,
-    onInitialPreviewClose = _ref.onPreviewClose,
-    _ref$prefixCls = _ref.prefixCls,
-    prefixCls = _ref$prefixCls === void 0 ? 'rc-image' : _ref$prefixCls,
-    _ref$previewPrefixCls = _ref.previewPrefixCls,
-    previewPrefixCls = _ref$previewPrefixCls === void 0 ? "".concat(prefixCls, "-preview") : _ref$previewPrefixCls,
-    placeholder = _ref.placeholder,
-    fallback = _ref.fallback,
-    width = _ref.width,
-    height = _ref.height,
-    style = _ref.style,
-    _ref$preview = _ref.preview,
-    preview = _ref$preview === void 0 ? true : _ref$preview,
-    className = _ref.className,
-    onClick = _ref.onClick,
-    onError = _ref.onError,
-    wrapperClassName = _ref.wrapperClassName,
-    wrapperStyle = _ref.wrapperStyle,
-    rootClassName = _ref.rootClassName,
-    crossOrigin = _ref.crossOrigin,
-    decoding = _ref.decoding,
-    loading = _ref.loading,
-    referrerPolicy = _ref.referrerPolicy,
-    sizes = _ref.sizes,
-    srcSet = _ref.srcSet,
-    useMap = _ref.useMap,
-    draggable = _ref.draggable,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
+var ImageInternal = function ImageInternal(props) {
+  var imgSrc = props.src,
+    alt = props.alt,
+    onInitialPreviewClose = props.onPreviewClose,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'rc-image' : _props$prefixCls,
+    _props$previewPrefixC = props.previewPrefixCls,
+    previewPrefixCls = _props$previewPrefixC === void 0 ? "".concat(prefixCls, "-preview") : _props$previewPrefixC,
+    placeholder = props.placeholder,
+    fallback = props.fallback,
+    width = props.width,
+    height = props.height,
+    style = props.style,
+    _props$preview = props.preview,
+    preview = _props$preview === void 0 ? true : _props$preview,
+    className = props.className,
+    onClick = props.onClick,
+    onError = props.onError,
+    wrapperClassName = props.wrapperClassName,
+    wrapperStyle = props.wrapperStyle,
+    rootClassName = props.rootClassName,
+    otherProps = _objectWithoutProperties(props, _excluded);
   var isCustomPlaceholder = placeholder && placeholder !== true;
-  var _ref2 = _typeof(preview) === 'object' ? preview : {},
-    previewSrc = _ref2.src,
-    _ref2$visible = _ref2.visible,
-    previewVisible = _ref2$visible === void 0 ? undefined : _ref2$visible,
-    _ref2$onVisibleChange = _ref2.onVisibleChange,
-    onPreviewVisibleChange = _ref2$onVisibleChange === void 0 ? onInitialPreviewClose : _ref2$onVisibleChange,
-    _ref2$getContainer = _ref2.getContainer,
-    getPreviewContainer = _ref2$getContainer === void 0 ? undefined : _ref2$getContainer,
-    previewMask = _ref2.mask,
-    maskClassName = _ref2.maskClassName,
-    icons = _ref2.icons,
-    scaleStep = _ref2.scaleStep,
-    dialogProps = _objectWithoutProperties(_ref2, _excluded2);
+  var _ref = _typeof(preview) === 'object' ? preview : {},
+    previewSrc = _ref.src,
+    _ref$visible = _ref.visible,
+    previewVisible = _ref$visible === void 0 ? undefined : _ref$visible,
+    _ref$onVisibleChange = _ref.onVisibleChange,
+    onPreviewVisibleChange = _ref$onVisibleChange === void 0 ? onInitialPreviewClose : _ref$onVisibleChange,
+    _ref$getContainer = _ref.getContainer,
+    getPreviewContainer = _ref$getContainer === void 0 ? undefined : _ref$getContainer,
+    previewMask = _ref.mask,
+    maskClassName = _ref.maskClassName,
+    icons = _ref.icons,
+    scaleStep = _ref.scaleStep,
+    minScale = _ref.minScale,
+    maxScale = _ref.maxScale,
+    imageRender = _ref.imageRender,
+    toolbarRender = _ref.toolbarRender,
+    dialogProps = _objectWithoutProperties(_ref, _excluded2);
   var src = previewSrc !== null && previewSrc !== void 0 ? previewSrc : imgSrc;
-  var isControlled = previewVisible !== undefined;
   var _useMergedState = useMergedState(!!previewVisible, {
@@ -94,50 +90,11 @@ value: previewVisible,
   var isError = status === 'error';
-  var _React$useContext = React.useContext(context),
-    isPreviewGroup = _React$useContext.isPreviewGroup,
-    setCurrent = _React$useContext.setCurrent,
-    setGroupShowPreview = _React$useContext.setShowPreview,
-    setGroupMousePosition = _React$useContext.setMousePosition,
-    registerImage = _React$useContext.registerImage;
-  var _React$useState = React.useState(function () {
-      uuid += 1;
-      return uuid;
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 1),
-    currentId = _React$useState2[0];
+  var groupContext = useContext(PreviewGroupContext);
   var canPreview = !!preview;
-  var isLoaded = React.useRef(false);
+  var isLoaded = useRef(false);
   var onLoad = function onLoad() {
     setStatus('normal');
   };
-  var onPreview = function onPreview(e) {
-    if (!isControlled) {
-      var _getOffset = getOffset(e.target),
-        left = _getOffset.left,
-        top = _getOffset.top;
-      if (isPreviewGroup) {
-        setCurrent(currentId);
-        setGroupMousePosition({
-          x: left,
-          y: top
-        });
-      } else {
-        setMousePosition({
-          x: left,
-          y: top
-        });
-      }
-    }
-    if (isPreviewGroup) {
-      setGroupShowPreview(true);
-    } else {
-      setShowPreview(true);
-    }
-    onClick === null || onClick === void 0 ? void 0 : onClick(e);
-  };
-  var onPreviewClose = function onPreviewClose(e) {
-    e.stopPropagation();
+  var onPreviewClose = function onPreviewClose() {
     setShowPreview(false);
-    if (!isControlled) {
-      setMousePosition(null);
-    }
+    setMousePosition(null);
   };
@@ -152,3 +109,3 @@ var getImgRef = function getImgRef(img) {
   };
-  React.useEffect(function () {
+  useEffect(function () {
     isImageValid(src).then(function (isValid) {
@@ -160,16 +117,3 @@ if (!isValid) {
   }, [src]);
-
-  // Keep order start
-  // Resolve https://github.com/ant-design/ant-design/issues/28881
-  // Only need unRegister when component unMount
-  React.useEffect(function () {
-    var unRegister = registerImage(currentId, src);
-    return unRegister;
-  }, []);
-  React.useEffect(function () {
-    registerImage(currentId, src, canPreview);
-  }, [src, canPreview]);
-  // Keep order end
-
-  React.useEffect(function () {
+  useEffect(function () {
     if (isError) {
@@ -184,18 +128,42 @@ setStatus('normal');
   var mergedSrc = isError && fallback ? fallback : src;
-  var imgCommonProps = {
-    crossOrigin: crossOrigin,
-    decoding: decoding,
-    draggable: draggable,
-    loading: loading,
-    referrerPolicy: referrerPolicy,
-    sizes: sizes,
-    srcSet: srcSet,
-    useMap: useMap,
-    onError: onError,
-    alt: alt,
-    className: cn("".concat(prefixCls, "-img"), _defineProperty({}, "".concat(prefixCls, "-img-placeholder"), placeholder === true), className),
-    style: _objectSpread({
-      height: height
-    }, style)
+
+  // ========================= ImageProps =========================
+  var imgCommonProps = useMemo(function () {
+    var obj = {};
+    COMMON_PROPS.forEach(function (prop) {
+      if (props[prop] !== undefined) {
+        obj[prop] = props[prop];
+      }
+    });
+    return obj;
+  }, COMMON_PROPS.map(function (prop) {
+    return props[prop];
+  }));
+
+  // ========================== Register ==========================
+  var registerData = useMemo(function () {
+    return _objectSpread(_objectSpread({}, imgCommonProps), {}, {
+      src: src
+    });
+  }, [src, imgCommonProps]);
+  var imageId = useRegisterImage(canPreview, registerData);
+
+  // ========================== Preview ===========================
+  var onPreview = function onPreview(e) {
+    var _getOffset = getOffset(e.target),
+      left = _getOffset.left,
+      top = _getOffset.top;
+    if (groupContext) {
+      groupContext.onPreview(imageId, left, top);
+    } else {
+      setMousePosition({
+        x: left,
+        y: top
+      });
+      setShowPreview(true);
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
+
+  // =========================== Render ===========================
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, otherProps, {
@@ -209,2 +177,6 @@ className: wrapperClass,
   }), /*#__PURE__*/React.createElement("img", _extends({}, imgCommonProps, {
+    className: cn("".concat(prefixCls, "-img"), _defineProperty({}, "".concat(prefixCls, "-img-placeholder"), placeholder === true), className),
+    style: _objectSpread({
+      height: height
+    }, style),
     ref: getImgRef
@@ -218,3 +190,4 @@ }, isError && fallback ? {
     width: width,
-    height: height
+    height: height,
+    onError: onError
   })), status === 'loading' && /*#__PURE__*/React.createElement("div", {
@@ -226,5 +199,5 @@ "aria-hidden": "true",
     style: {
-      display: ((_imgCommonProps$style = imgCommonProps.style) === null || _imgCommonProps$style === void 0 ? void 0 : _imgCommonProps$style.display) === 'none' ? 'none' : undefined
+      display: (style === null || style === void 0 ? void 0 : style.display) === 'none' ? 'none' : undefined
     }
-  }, previewMask)), !isPreviewGroup && canPreview && /*#__PURE__*/React.createElement(Preview, _extends({
+  }, previewMask)), !groupContext && canPreview && /*#__PURE__*/React.createElement(Preview, _extends({
     "aria-hidden": !isShowPreview,
@@ -240,3 +213,8 @@ visible: isShowPreview,
     scaleStep: scaleStep,
-    rootClassName: rootClassName
+    minScale: minScale,
+    maxScale: maxScale,
+    rootClassName: rootClassName,
+    imageRender: imageRender,
+    imgCommonProps: imgCommonProps,
+    toolbarRender: toolbarRender
   }, dialogProps)));
@@ -243,0 +221,0 @@ };

es/Operations.d.ts

 import * as React from 'react';
-import type { PreviewProps } from './Preview';
+import type { TransformType } from './hooks/useImageTransform';
+import type { PreviewProps, ToolbarRenderType } from './Preview';
 interface OperationsProps extends Pick<PreviewProps, 'visible' | 'maskTransitionName' | 'getContainer' | 'prefixCls' | 'rootClassName' | 'icons' | 'countRender' | 'onClose'> {
@@ -7,4 +8,7 @@ showSwitch: boolean;
     current: number;
+    transform: TransformType;
     count: number;
     scale: number;
+    minScale: number;
+    maxScale: number;
     onSwitchLeft: React.MouseEventHandler<HTMLDivElement>;
@@ -18,4 +22,5 @@ onSwitchRight: React.MouseEventHandler<HTMLDivElement>;
     onFlipY: () => void;
+    toolbarRender: (params: ToolbarRenderType | Omit<ToolbarRenderType, 'current' | 'total'>) => React.ReactNode;
 }
 declare const Operations: React.FC<OperationsProps>;
 export default Operations;

es/Operations.js

@@ -0,7 +1,9 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import * as React from 'react';
+import Portal from '@rc-component/portal';
 import classnames from 'classnames';
 import CSSMotion from 'rc-motion';
-import Portal from '@rc-component/portal';
-import { MIN_SCALE, MAX_SCALE } from "./previewConfig";
+import * as React from 'react';
+import { useContext } from 'react';
+import { PreviewGroupContext } from "./context";
 var Operations = function Operations(props) {
@@ -19,4 +21,7 @@ var _countRender;
     current = props.current,
+    transform = props.transform,
     count = props.count,
     scale = props.scale,
+    minScale = props.minScale,
+    maxScale = props.maxScale,
     onSwitchLeft = props.onSwitchLeft,
@@ -30,3 +35,5 @@ onSwitchRight = props.onSwitchRight,
     onFlipX = props.onFlipX,
-    onFlipY = props.onFlipY;
+    onFlipY = props.onFlipY,
+    toolbarRender = props.toolbarRender;
+  var groupContext = useContext(PreviewGroupContext);
   var rotateLeft = icons.rotateLeft,
@@ -44,15 +51,13 @@ rotateRight = icons.rotateRight,
   var tools = [{
-    icon: close,
-    onClick: onClose,
-    type: 'close'
+    icon: flipY,
+    onClick: onFlipY,
+    type: 'flipY'
   }, {
-    icon: zoomIn,
-    onClick: onZoomIn,
-    type: 'zoomIn',
-    disabled: scale === MAX_SCALE
+    icon: flipX,
+    onClick: onFlipX,
+    type: 'flipX'
   }, {
-    icon: zoomOut,
-    onClick: onZoomOut,
-    type: 'zoomOut',
-    disabled: scale === MIN_SCALE
+    icon: rotateLeft,
+    onClick: onRotateLeft,
+    type: 'rotateLeft'
   }, {
@@ -63,26 +68,18 @@ icon: rotateRight,
   }, {
-    icon: rotateLeft,
-    onClick: onRotateLeft,
-    type: 'rotateLeft'
+    icon: zoomOut,
+    onClick: onZoomOut,
+    type: 'zoomOut',
+    disabled: scale === minScale
   }, {
-    icon: flipX,
-    onClick: onFlipX,
-    type: 'flipX'
+    icon: zoomIn,
+    onClick: onZoomIn,
+    type: 'zoomIn',
+    disabled: scale === maxScale
   }, {
-    icon: flipY,
-    onClick: onFlipY,
-    type: 'flipY'
+    icon: close,
+    onClick: onClose,
+    type: 'close'
   }];
-  var operations = /*#__PURE__*/React.createElement(React.Fragment, null, showSwitch && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classnames("".concat(prefixCls, "-switch-left"), _defineProperty({}, "".concat(prefixCls, "-switch-left-disabled"), current === 0)),
-    onClick: onSwitchLeft
-  }, left), /*#__PURE__*/React.createElement("div", {
-    className: classnames("".concat(prefixCls, "-switch-right"), _defineProperty({}, "".concat(prefixCls, "-switch-right-disabled"), current === count - 1)),
-    onClick: onSwitchRight
-  }, right)), /*#__PURE__*/React.createElement("ul", {
-    className: "".concat(prefixCls, "-operations")
-  }, showProgress && /*#__PURE__*/React.createElement("li", {
-    className: "".concat(prefixCls, "-operations-progress")
-  }, (_countRender = countRender === null || countRender === void 0 ? void 0 : countRender(current + 1, count)) !== null && _countRender !== void 0 ? _countRender : "".concat(current + 1, " / ").concat(count)), tools.map(function (_ref) {
-    var _classnames3;
+  var toolsNode = tools.map(function (_ref) {
+    var _classnames;
     var icon = _ref.icon,
@@ -93,3 +90,3 @@ onClick = _ref.onClick,
     return /*#__PURE__*/React.createElement("li", {
-      className: classnames(toolClassName, (_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefixCls, "-operations-operation-").concat(type), true), _defineProperty(_classnames3, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames3)),
+      className: classnames(toolClassName, (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-operations-operation-").concat(type), true), _defineProperty(_classnames, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames)),
       onClick: onClick,
@@ -100,3 +97,39 @@ key: type
     }) : icon);
-  })));
+  });
+  var toolbar = /*#__PURE__*/React.createElement("ul", {
+    className: "".concat(prefixCls, "-operations")
+  }, showProgress && /*#__PURE__*/React.createElement("li", {
+    className: "".concat(prefixCls, "-operations-progress")
+  }, (_countRender = countRender === null || countRender === void 0 ? void 0 : countRender(current + 1, count)) !== null && _countRender !== void 0 ? _countRender : "".concat(current + 1, " / ").concat(count)), toolsNode);
+  var operations = /*#__PURE__*/React.createElement(React.Fragment, null, showSwitch && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-switch-left"), _defineProperty({}, "".concat(prefixCls, "-switch-left-disabled"), current === 0)),
+    onClick: onSwitchLeft
+  }, left), /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-switch-right"), _defineProperty({}, "".concat(prefixCls, "-switch-right-disabled"), current === count - 1)),
+    onClick: onSwitchRight
+  }, right)), toolbarRender ? toolbarRender(_objectSpread({
+    originalNode: toolbar,
+    icons: {
+      flipYIcon: toolsNode[0],
+      flipXIcon: toolsNode[1],
+      rotateLeftIcon: toolsNode[2],
+      rotateRightIcon: toolsNode[3],
+      zoomOutIcon: toolsNode[4],
+      zoomInIcon: toolsNode[5],
+      closeIcon: toolsNode[6]
+    },
+    actions: {
+      flipY: onFlipY,
+      flipX: onFlipX,
+      rotateLeft: onRotateLeft,
+      rotateRight: onRotateRight,
+      zoomOut: onZoomOut,
+      zoomIn: onZoomIn,
+      close: onClose
+    },
+    transform: transform
+  }, groupContext ? {
+    current: current,
+    total: count
+  } : {})) : toolbar);
   return /*#__PURE__*/React.createElement(CSSMotion, {
@@ -103,0 +136,0 @@ visible: visible,

es/Preview.d.ts

 import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
 import React from 'react';
+import type { TransformAction, TransformType } from './hooks/useImageTransform';
+export declare type ToolbarRenderType = {
+    originalNode: React.ReactNode;
+    icons: {
+        flipYIcon: React.ReactNode;
+        flipXIcon: React.ReactNode;
+        rotateLeftIcon: React.ReactNode;
+        rotateRightIcon: React.ReactNode;
+        zoomOutIcon: React.ReactNode;
+        zoomInIcon: React.ReactNode;
+        closeIcon: React.ReactNode;
+    };
+    actions: {
+        flipY: () => void;
+        flipX: () => void;
+        rotateLeft: () => void;
+        rotateRight: () => void;
+        zoomOut: () => void;
+        zoomIn: () => void;
+        close: () => void;
+    };
+    transform: TransformType;
+    current: number;
+    total: number;
+};
 export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
-    onClose?: (e: React.SyntheticEvent<Element>) => void;
+    imgCommonProps?: React.ImgHTMLAttributes<HTMLImageElement>;
     src?: string;
@@ -19,6 +44,22 @@ alt?: string;
     };
+    current?: number;
+    count?: number;
     countRender?: (current: number, total: number) => string;
     scaleStep?: number;
+    minScale?: number;
+    maxScale?: number;
+    imageRender?: (params: {
+        originalNode: React.ReactNode;
+        transform: TransformType;
+        current?: number;
+    }) => React.ReactNode;
+    onClose?: () => void;
+    onTransform?: (params: {
+        transform: TransformType;
+        action: TransformAction;
+    }) => void;
+    toolbarRender?: (params: ToolbarRenderType) => React.ReactNode;
+    onChange?: (current: any, prev: any) => void;
 }
 declare const Preview: React.FC<PreviewProps>;
 export default Preview;

es/Preview.js

@@ -6,3 +6,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "src", "alt", "onClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
+var _excluded = ["prefixCls", "src", "alt", "onClose", "visible", "icons", "rootClassName", "getContainer", "current", "count", "countRender", "scaleStep", "minScale", "maxScale", "transitionName", "maskTransitionName", "imageRender", "imgCommonProps", "toolbarRender", "onTransform", "onChange"];
 import classnames from 'classnames';
@@ -13,3 +13,4 @@ import Dialog from 'rc-dialog';
 import { warning } from "rc-util/es/warning";
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { PreviewGroupContext } from "./context";
 import getFixScaleEleTransPosition from "./getFixScaleEleTransPosition";
@@ -19,3 +20,2 @@ import useImageTransform from "./hooks/useImageTransform";
 import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "./previewConfig";
-import { context } from "./PreviewGroup";
 var Preview = function Preview(props) {
@@ -31,5 +31,13 @@ var prefixCls = props.prefixCls,
     getContainer = props.getContainer,
+    _props$current = props.current,
+    current = _props$current === void 0 ? 0 : _props$current,
+    _props$count = props.count,
+    count = _props$count === void 0 ? 1 : _props$count,
     countRender = props.countRender,
     _props$scaleStep = props.scaleStep,
     scaleStep = _props$scaleStep === void 0 ? 0.5 : _props$scaleStep,
+    _props$minScale = props.minScale,
+    minScale = _props$minScale === void 0 ? 1 : _props$minScale,
+    _props$maxScale = props.maxScale,
+    maxScale = _props$maxScale === void 0 ? 50 : _props$maxScale,
     _props$transitionName = props.transitionName,
@@ -39,2 +47,7 @@ transitionName = _props$transitionName === void 0 ? 'zoom' : _props$transitionName,
     maskTransitionName = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
+    imageRender = props.imageRender,
+    imgCommonProps = props.imgCommonProps,
+    toolbarRender = props.toolbarRender,
+    onTransform = props.onTransform,
+    onChange = props.onChange,
     restProps = _objectWithoutProperties(props, _excluded);
@@ -52,14 +65,6 @@ var imgRef = useRef();
     setMoving = _useState2[1];
-  var _useContext = useContext(context),
-    previewUrls = _useContext.previewUrls,
-    current = _useContext.current,
-    isPreviewGroup = _useContext.isPreviewGroup,
-    setCurrent = _useContext.setCurrent;
-  var previewGroupCount = previewUrls.size;
-  var previewUrlsKeys = Array.from(previewUrls.keys());
-  var currentPreviewIndex = previewUrlsKeys.indexOf(current);
-  var combinationSrc = isPreviewGroup ? previewUrls.get(current) : src;
-  var showLeftOrRightSwitches = isPreviewGroup && previewGroupCount > 1;
-  var showOperationsProgress = isPreviewGroup && previewGroupCount >= 1;
-  var _useImageTransform = useImageTransform(imgRef),
+  var groupContext = useContext(PreviewGroupContext);
+  var showLeftOrRightSwitches = groupContext && count > 1;
+  var showOperationsProgress = groupContext && count >= 1;
+  var _useImageTransform = useImageTransform(imgRef, minScale, maxScale, onTransform),
     transform = _useImageTransform.transform,
@@ -74,3 +79,5 @@ resetTransform = _useImageTransform.resetTransform,
   var rotate = transform.rotate,
-    scale = transform.scale;
+    scale = transform.scale,
+    x = transform.x,
+    y = transform.y;
   var wrapClassName = classnames(_defineProperty({}, "".concat(prefixCls, "-moving"), isMoving));
@@ -83,9 +90,9 @@ useEffect(function () {
   var onAfterClose = function onAfterClose() {
-    resetTransform();
+    resetTransform('close');
   };
   var onZoomIn = function onZoomIn() {
-    dispatchZoomChange(BASE_SCALE_RATIO + scaleStep);
+    dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, 'zoomIn');
   };
   var onZoomOut = function onZoomOut() {
-    dispatchZoomChange(BASE_SCALE_RATIO - scaleStep);
+    dispatchZoomChange(BASE_SCALE_RATIO / (BASE_SCALE_RATIO + scaleStep), 'zoomOut');
   };
@@ -95,3 +102,3 @@ var onRotateRight = function onRotateRight() {
       rotate: rotate + 90
-    });
+    }, 'rotateRight');
   };
@@ -101,3 +108,3 @@ var onRotateLeft = function onRotateLeft() {
       rotate: rotate - 90
-    });
+    }, 'rotateLeft');
   };
@@ -107,3 +114,3 @@ var onFlipX = function onFlipX() {
       flipX: !transform.flipX
-    });
+    }, 'flipX');
   };
@@ -113,20 +120,20 @@ var onFlipY = function onFlipY() {
       flipY: !transform.flipY
-    });
+    }, 'flipY');
   };
   var onSwitchLeft = function onSwitchLeft(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (currentPreviewIndex > 0) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    if (current > 0) {
       setEnableTransition(false);
-      resetTransform();
-      setCurrent(previewUrlsKeys[currentPreviewIndex - 1]);
+      resetTransform('prev');
+      onChange === null || onChange === void 0 ? void 0 : onChange(current - 1, current);
     }
   };
   var onSwitchRight = function onSwitchRight(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (currentPreviewIndex < previewGroupCount - 1) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    if (current < count - 1) {
       setEnableTransition(false);
-      resetTransform();
-      setCurrent(previewUrlsKeys[currentPreviewIndex + 1]);
+      resetTransform('next');
+      onChange === null || onChange === void 0 ? void 0 : onChange(current + 1, current);
     }
@@ -137,3 +144,2 @@ };
       setMoving(false);
-
       /** No need to restore the position when the picture is not moved, So as not to interfere with the click */
@@ -143,3 +149,3 @@ var _downPositionRef$curr = downPositionRef.current,
         transformY = _downPositionRef$curr.transformY;
-      var hasChangedPosition = transform.x !== transformX && transform.y !== transformY;
+      var hasChangedPosition = x !== transformX && y !== transformY;
       if (!hasChangedPosition) {
@@ -157,3 +163,3 @@ return;
       if (fixState) {
-        updateTransform(_objectSpread({}, fixState));
+        updateTransform(_objectSpread({}, fixState), 'dragRebound');
       }
@@ -180,3 +186,3 @@ }
         y: event.pageY - downPositionRef.current.deltaY
-      });
+      }, 'move');
     }
@@ -195,16 +201,12 @@ };
     }
-    dispatchZoomChange(ratio, event.clientX, event.clientY);
+    dispatchZoomChange(ratio, 'wheel', event.clientX, event.clientY);
   };
-  var onKeyDown = useCallback(function (event) {
+  var onKeyDown = function onKeyDown(event) {
     if (!visible || !showLeftOrRightSwitches) return;
     if (event.keyCode === KeyCode.LEFT) {
-      if (currentPreviewIndex > 0) {
-        setCurrent(previewUrlsKeys[currentPreviewIndex - 1]);
-      }
+      onSwitchLeft();
     } else if (event.keyCode === KeyCode.RIGHT) {
-      if (currentPreviewIndex < previewGroupCount - 1) {
-        setCurrent(previewUrlsKeys[currentPreviewIndex + 1]);
-      }
+      onSwitchRight();
     }
-  }, [currentPreviewIndex, previewGroupCount, previewUrlsKeys, setCurrent, showLeftOrRightSwitches, visible]);
+  };
   var onDoubleClick = function onDoubleClick(event) {
@@ -217,5 +219,5 @@ if (visible) {
           scale: 1
-        });
+        }, 'doubleClick');
       } else {
-        dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, event.clientX, event.clientY);
+        dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, 'doubleClick', event.clientX, event.clientY);
       }
@@ -229,3 +231,2 @@ }
     var onMouseMoveListener = addEventListener(window, 'mousemove', onMouseMove, false);
-    var onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);
     try {
@@ -246,3 +247,2 @@ // Resolve if in iframe lost event
       onMouseMoveListener.remove();
-      onKeyDownListener.remove();
       /* istanbul ignore next */
@@ -253,3 +253,24 @@ (_onTopMouseUpListener = onTopMouseUpListener) === null || _onTopMouseUpListener === void 0 ? void 0 : _onTopMouseUpListener.remove();
     };
-  }, [visible, isMoving, onKeyDown]);
+  }, [visible, isMoving, x, y, rotate]);
+  useEffect(function () {
+    var onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);
+    return function () {
+      onKeyDownListener.remove();
+    };
+  }, [visible, showLeftOrRightSwitches, current]);
+  var imgNode = /*#__PURE__*/React.createElement("img", _extends({}, imgCommonProps, {
+    width: props.width,
+    height: props.height,
+    onWheel: onWheel,
+    onMouseDown: onMouseDown,
+    onDoubleClick: onDoubleClick,
+    ref: imgRef,
+    className: "".concat(prefixCls, "-img"),
+    src: src,
+    alt: alt,
+    style: {
+      transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale3d(").concat(transform.flipX ? '-' : '').concat(scale, ", ").concat(transform.flipY ? '-' : '').concat(scale, ", 1) rotate(").concat(rotate, "deg)"),
+      transitionDuration: !enableTransition && '0s'
+    }
+  }));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog, _extends({
@@ -270,18 +291,10 @@ transitionName: transitionName,
     className: "".concat(prefixCls, "-img-wrapper")
-  }, /*#__PURE__*/React.createElement("img", {
-    width: props.width,
-    height: props.height,
-    onWheel: onWheel,
-    onMouseDown: onMouseDown,
-    onDoubleClick: onDoubleClick,
-    ref: imgRef,
-    className: "".concat(prefixCls, "-img"),
-    src: combinationSrc,
-    alt: alt,
-    style: {
-      transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale3d(").concat(transform.flipX ? '-' : '').concat(scale, ", ").concat(transform.flipY ? '-' : '').concat(scale, ", 1) rotate(").concat(rotate, "deg)"),
-      transitionDuration: !enableTransition && '0s'
-    }
-  }))), /*#__PURE__*/React.createElement(Operations, {
+  }, imageRender ? imageRender(_objectSpread({
+    originalNode: imgNode,
+    transform: transform
+  }, groupContext ? {
+    current: current
+  } : {})) : imgNode)), /*#__PURE__*/React.createElement(Operations, {
     visible: visible,
+    transform: transform,
     maskTransitionName: maskTransitionName,
@@ -295,5 +308,8 @@ getContainer: getContainer,
     showProgress: showOperationsProgress,
-    current: currentPreviewIndex,
-    count: previewGroupCount,
+    current: current,
+    count: count,
     scale: scale,
+    minScale: minScale,
+    maxScale: maxScale,
+    toolbarRender: toolbarRender,
     onSwitchLeft: onSwitchLeft,
@@ -300,0 +316,0 @@ onSwitchRight: onSwitchRight,

es/previewConfig.d.ts

@@ -1,5 +0,1 @@
-/** Minimum scale */
-export declare const MIN_SCALE = 1;
-/** Maximum Scale */
-export declare const MAX_SCALE = 50;
 /** Scale the ratio base */
@@ -6,0 +2,0 @@ export declare const BASE_SCALE_RATIO = 1;

es/previewConfig.js

@@ -1,6 +0,1 @@
-/** Minimum scale */
-export var MIN_SCALE = 1;
-/** Maximum Scale */
-export var MAX_SCALE = 50;
-
 /** Scale the ratio base */
@@ -7,0 +2,0 @@ export var BASE_SCALE_RATIO = 1;

es/PreviewGroup.d.ts

 import * as React from 'react';
+import type { TransformType } from './hooks/useImageTransform';
 import type { ImagePreviewType } from './Image';
-import type { PreviewProps } from './Preview';
-export interface PreviewGroupPreview extends Omit<ImagePreviewType, 'icons' | 'mask' | 'maskClassName'> {
+import type { ImageElementProps } from './interface';
+import type { PreviewProps, ToolbarRenderType } from './Preview';
+export interface PreviewGroupPreview extends Omit<ImagePreviewType, 'icons' | 'mask' | 'maskClassName' | 'onVisibleChange' | 'toolbarRender' | 'imageRender'> {
     /**
@@ -11,2 +13,9 @@ * If Preview the show img index
     countRender?: (current: number, total: number) => string;
+    toolbarRender?: (params: ToolbarRenderType) => React.ReactNode;
+    imageRender?: (params: {
+        originalNode: React.ReactNode;
+        transform: TransformType;
+        current: number;
+    }) => React.ReactNode;
+    onVisibleChange?: (value: boolean, prevValue: boolean, current: number) => void;
     onChange?: (current: number, prevCurrent: number) => void;
@@ -17,25 +26,7 @@ }
     icons?: PreviewProps['icons'];
+    items?: (string | ImageElementProps)[];
     preview?: boolean | PreviewGroupPreview;
     children?: React.ReactNode;
 }
-interface PreviewUrl {
-    url: string;
-    canPreview: boolean;
-}
-export interface GroupConsumerValue extends GroupConsumerProps {
-    isPreviewGroup?: boolean;
-    previewUrls: Map<number, string>;
-    setPreviewUrls: React.Dispatch<React.SetStateAction<Map<number, PreviewUrl>>>;
-    current: number;
-    setCurrent: React.Dispatch<React.SetStateAction<number>>;
-    setShowPreview: React.Dispatch<React.SetStateAction<boolean>>;
-    setMousePosition: React.Dispatch<React.SetStateAction<null | {
-        x: number;
-        y: number;
-    }>>;
-    registerImage: (id: number, url: string, canPreview?: boolean) => () => void;
-    rootClassName?: string;
-}
-export declare const context: React.Context<GroupConsumerValue>;
 declare const Group: React.FC<GroupConsumerProps>;
 export default Group;

es/PreviewGroup.js

@@ -5,38 +5,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "countRender", "onChange"];
+var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "minScale", "maxScale", "countRender", "onChange", "onTransform", "toolbarRender", "imageRender"],
+  _excluded2 = ["src"];
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import * as React from 'react';
 import { useState } from 'react';
+import { PreviewGroupContext } from "./context";
+import usePreviewItems from "./hooks/usePreviewItems";
 import Preview from "./Preview";
-/* istanbul ignore next */
-export var context = /*#__PURE__*/React.createContext({
-  previewUrls: new Map(),
-  setPreviewUrls: function setPreviewUrls() {
-    return null;
-  },
-  current: null,
-  setCurrent: function setCurrent() {
-    return null;
-  },
-  setShowPreview: function setShowPreview() {
-    return null;
-  },
-  setMousePosition: function setMousePosition() {
-    return null;
-  },
-  registerImage: function registerImage() {
-    return function () {
-      return null;
-    };
-  },
-  rootClassName: ''
-});
-var Provider = context.Provider;
-function getSafeIndex(keys, key) {
-  if (key === undefined) return undefined;
-  var index = keys.indexOf(key);
-  if (index === -1) return undefined;
-  return index;
-}
 var Group = function Group(_ref) {
+  var _mergedItems$current;
   var _ref$previewPrefixCls = _ref.previewPrefixCls,
@@ -47,30 +21,28 @@ previewPrefixCls = _ref$previewPrefixCls === void 0 ? 'rc-image-preview' : _ref$previewPrefixCls,
     icons = _ref$icons === void 0 ? {} : _ref$icons,
+    items = _ref.items,
     preview = _ref.preview;
   var _ref2 = _typeof(preview) === 'object' ? preview : {},
-    _ref2$visible = _ref2.visible,
-    previewVisible = _ref2$visible === void 0 ? undefined : _ref2$visible,
-    _ref2$onVisibleChange = _ref2.onVisibleChange,
-    onPreviewVisibleChange = _ref2$onVisibleChange === void 0 ? undefined : _ref2$onVisibleChange,
-    _ref2$getContainer = _ref2.getContainer,
-    getContainer = _ref2$getContainer === void 0 ? undefined : _ref2$getContainer,
-    _ref2$current = _ref2.current,
-    currentIndex = _ref2$current === void 0 ? 0 : _ref2$current,
-    _ref2$countRender = _ref2.countRender,
-    countRender = _ref2$countRender === void 0 ? undefined : _ref2$countRender,
-    _ref2$onChange = _ref2.onChange,
-    _onChange = _ref2$onChange === void 0 ? undefined : _ref2$onChange,
+    previewVisible = _ref2.visible,
+    onVisibleChange = _ref2.onVisibleChange,
+    getContainer = _ref2.getContainer,
+    currentIndex = _ref2.current,
+    minScale = _ref2.minScale,
+    maxScale = _ref2.maxScale,
+    countRender = _ref2.countRender,
+    onChange = _ref2.onChange,
+    onTransform = _ref2.onTransform,
+    toolbarRender = _ref2.toolbarRender,
+    imageRender = _ref2.imageRender,
     dialogProps = _objectWithoutProperties(_ref2, _excluded);
-  var _useState = useState(new Map()),
-    _useState2 = _slicedToArray(_useState, 2),
-    previewUrls = _useState2[0],
-    setPreviewUrls = _useState2[1];
-  var previewUrlsKeys = Array.from(previewUrls.keys());
-  var prevCurrent = React.useRef();
-  var _useMergedState = useMergedState(undefined, {
-      onChange: function onChange(val, prev) {
-        if (prevCurrent.current !== undefined) {
-          _onChange === null || _onChange === void 0 ? void 0 : _onChange(getSafeIndex(previewUrlsKeys, val), getSafeIndex(previewUrlsKeys, prev));
-        }
-        prevCurrent.current = prev;
-      }
+
+  // ========================== Items ===========================
+  var _usePreviewItems = usePreviewItems(items),
+    _usePreviewItems2 = _slicedToArray(_usePreviewItems, 2),
+    mergedItems = _usePreviewItems2[0],
+    register = _usePreviewItems2[1];
+
+  // ========================= Preview ==========================
+  // >>> Index
+  var _useMergedState = useMergedState(0, {
+      value: currentIndex
     }),
@@ -80,7 +52,16 @@ _useMergedState2 = _slicedToArray(_useMergedState, 2),
     setCurrent = _useMergedState2[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    keepOpenIndex = _useState2[0],
+    setKeepOpenIndex = _useState2[1];
+
+  // >>> Image
+  var _ref3 = ((_mergedItems$current = mergedItems[current]) === null || _mergedItems$current === void 0 ? void 0 : _mergedItems$current.data) || {},
+    src = _ref3.src,
+    imgCommonProps = _objectWithoutProperties(_ref3, _excluded2);
+  // >>> Visible
   var _useMergedState3 = useMergedState(!!previewVisible, {
       value: previewVisible,
       onChange: function onChange(val, prevVal) {
-        onPreviewVisibleChange === null || onPreviewVisibleChange === void 0 ? void 0 : onPreviewVisibleChange(val, prevVal, getSafeIndex(previewUrlsKeys, current));
-        prevCurrent.current = val ? current : undefined;
+        onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(val, prevVal, current);
       }
@@ -91,2 +72,4 @@ }),
     setShowPreview = _useMergedState4[1];
+
+  // >>> Position
   var _useState3 = useState(null),
@@ -96,55 +79,47 @@ _useState4 = _slicedToArray(_useState3, 2),
     setMousePosition = _useState4[1];
-  var isControlled = previewVisible !== undefined;
-  var currentControlledKey = previewUrlsKeys[currentIndex];
-  var canPreviewUrls = new Map(Array.from(previewUrls).filter(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-      canPreview = _ref4[1].canPreview;
-    return !!canPreview;
-  }).map(function (_ref5) {
-    var _ref6 = _slicedToArray(_ref5, 2),
-      id = _ref6[0],
-      url = _ref6[1].url;
-    return [id, url];
-  }));
-  var registerImage = function registerImage(id, url) {
-    var canPreview = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    var unRegister = function unRegister() {
-      setPreviewUrls(function (oldPreviewUrls) {
-        var clonePreviewUrls = new Map(oldPreviewUrls);
-        var deleteResult = clonePreviewUrls.delete(id);
-        return deleteResult ? clonePreviewUrls : oldPreviewUrls;
-      });
-    };
-    setPreviewUrls(function (oldPreviewUrls) {
-      return new Map(oldPreviewUrls).set(id, {
-        url: url,
-        canPreview: canPreview
-      });
+  var onPreviewFromImage = React.useCallback(function (id, mouseX, mouseY) {
+    var index = mergedItems.findIndex(function (item) {
+      return item.id === id;
     });
-    return unRegister;
+    setShowPreview(true);
+    setMousePosition({
+      x: mouseX,
+      y: mouseY
+    });
+    setCurrent(index);
+    setKeepOpenIndex(index >= 0);
+  }, [mergedItems]);
+
+  // Reset current when reopen
+  React.useEffect(function () {
+    if (isShowPreview) {
+      if (!keepOpenIndex) {
+        setCurrent(0);
+      }
+    } else {
+      setKeepOpenIndex(false);
+    }
+  }, [isShowPreview]);
+
+  // ========================== Events ==========================
+  var onInternalChange = function onInternalChange(next, prev) {
+    setCurrent(next);
+    onChange === null || onChange === void 0 ? void 0 : onChange(next, prev);
   };
-  var onPreviewClose = function onPreviewClose(e) {
-    e.stopPropagation();
+  var onPreviewClose = function onPreviewClose() {
     setShowPreview(false);
     setMousePosition(null);
   };
-  React.useEffect(function () {
-    setCurrent(currentControlledKey);
-  }, [currentControlledKey]);
-  React.useEffect(function () {
-    if (!isShowPreview && isControlled) {
-      setCurrent(currentControlledKey);
-    }
-  }, [currentControlledKey, isControlled, isShowPreview]);
-  return /*#__PURE__*/React.createElement(Provider, {
-    value: {
-      isPreviewGroup: true,
-      previewUrls: canPreviewUrls,
-      setPreviewUrls: setPreviewUrls,
-      current: current,
-      setCurrent: setCurrent,
-      setShowPreview: setShowPreview,
-      setMousePosition: setMousePosition,
-      registerImage: registerImage
-    }
+
+  // ========================= Context ==========================
+  var previewGroupContext = React.useMemo(function () {
+    return {
+      register: register,
+      onPreview: onPreviewFromImage
+    };
+  }, [register, onPreviewFromImage]);
+
+  // ========================== Render ==========================
+  return /*#__PURE__*/React.createElement(PreviewGroupContext.Provider, {
+    value: previewGroupContext
   }, children, /*#__PURE__*/React.createElement(Preview, _extends({
@@ -156,8 +131,17 @@ "aria-hidden": !isShowPreview,
     mousePosition: mousePosition,
-    src: canPreviewUrls.get(current),
+    imgCommonProps: imgCommonProps,
+    src: src,
     icons: icons,
+    minScale: minScale,
+    maxScale: maxScale,
     getContainer: getContainer,
-    countRender: countRender
+    current: current,
+    count: mergedItems.length,
+    countRender: countRender,
+    onTransform: onTransform,
+    toolbarRender: toolbarRender,
+    imageRender: imageRender,
+    onChange: onInternalChange
   }, dialogProps)));
 };
 export default Group;

lib/hooks/useImageTransform.d.ts

 /// <reference types="react" />
-declare type TransformType = {
+export declare type TransformType = {
     x: number;
@@ -10,3 +10,7 @@ y: number;
 };
-export default function useImageTransform(imgRef: React.MutableRefObject<HTMLImageElement>): {
+export declare type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound';
+export default function useImageTransform(imgRef: React.MutableRefObject<HTMLImageElement>, minScale: number, maxScale: number, onTransform: (params: {
+    transform: TransformType;
+    action: TransformAction;
+}) => void): {
     transform: {
@@ -20,6 +24,5 @@ x: number;
     };
-    resetTransform: () => void;
-    updateTransform: (newTransform: Partial<TransformType>) => void;
-    dispatchZoomChange: (ratio: number, clientX?: number, clientY?: number) => void;
+    resetTransform: (action: TransformAction) => void;
+    updateTransform: (newTransform: Partial<TransformType>, action: TransformAction) => void;
+    dispatchZoomChange: (ratio: number, action: TransformAction, clientX?: number, clientY?: number) => void;
 };
-export {};

lib/hooks/useImageTransform.js

@@ -10,6 +10,6 @@ "use strict";
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _css = require("rc-util/lib/Dom/css");
+var _isEqual = _interopRequireDefault(require("rc-util/lib/isEqual"));
+var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
 var _react = require("react");
-var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
-var _css = require("rc-util/lib/Dom/css");
-var _previewConfig = require("../previewConfig");
 var initialTransform = {
@@ -23,3 +23,3 @@ x: 0,
 };
-function useImageTransform(imgRef) {
+function useImageTransform(imgRef, minScale, maxScale, onTransform) {
   var frame = (0, _react.useRef)(null);
@@ -31,8 +31,14 @@ var queue = (0, _react.useRef)([]);
     setTransform = _useState2[1];
-  var resetTransform = function resetTransform() {
+  var resetTransform = function resetTransform(action) {
     setTransform(initialTransform);
+    if (onTransform && !(0, _isEqual.default)(initialTransform, transform)) {
+      onTransform({
+        transform: initialTransform,
+        action: action
+      });
+    }
   };
 
   /** Direct update transform */
-  var updateTransform = function updateTransform(newTransform) {
+  var updateTransform = function updateTransform(newTransform, action) {
     if (frame.current === null) {
@@ -47,2 +53,6 @@ queue.current = [];
           frame.current = null;
+          onTransform === null || onTransform === void 0 ? void 0 : onTransform({
+            transform: memoState,
+            action: action
+          });
           return memoState;
@@ -56,3 +66,3 @@ });
   /** Scale according to the position of clientX and clientY */
-  var dispatchZoomChange = function dispatchZoomChange(ratio, clientX, clientY) {
+  var dispatchZoomChange = function dispatchZoomChange(ratio, action, clientX, clientY) {
     var _imgRef$current = imgRef.current,
@@ -67,8 +77,8 @@ width = _imgRef$current.width,
     var newScale = transform.scale * ratio;
-    if (newScale > _previewConfig.MAX_SCALE) {
-      newRatio = _previewConfig.MAX_SCALE / transform.scale;
-      newScale = _previewConfig.MAX_SCALE;
-    } else if (newScale < _previewConfig.MIN_SCALE) {
-      newRatio = _previewConfig.MIN_SCALE / transform.scale;
-      newScale = _previewConfig.MIN_SCALE;
+    if (newScale > maxScale) {
+      newRatio = maxScale / transform.scale;
+      newScale = maxScale;
+    } else if (newScale < minScale) {
+      newRatio = minScale / transform.scale;
+      newScale = minScale;
     }
@@ -109,3 +119,3 @@
       scale: newScale
-    });
+    }, action);
   };
@@ -118,3 +128,2 @@ return {
   };
-}
-;
+}

lib/Image.d.ts

@@ -0,10 +1,13 @@
+import type { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
+import type { GetContainer } from 'rc-util/lib/PortalWrapper';
 import * as React from 'react';
-import type { GetContainer } from 'rc-util/lib/PortalWrapper';
-import type { PreviewProps } from './Preview';
+import type { TransformType } from './hooks/useImageTransform';
+import type { PreviewProps, ToolbarRenderType } from './Preview';
 import PreviewGroup from './PreviewGroup';
-import type { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
 export interface ImagePreviewType extends Omit<IDialogPropTypes, 'mask' | 'visible' | 'closable' | 'prefixCls' | 'onClose' | 'afterClose' | 'wrapClassName'> {
     src?: string;
     visible?: boolean;
-    onVisibleChange?: (value: boolean, prevValue: boolean, currentIndex?: number) => void;
+    minScale?: number;
+    maxScale?: number;
+    onVisibleChange?: (value: boolean, prevValue: boolean) => void;
     getContainer?: GetContainer | false;
@@ -15,2 +18,8 @@ mask?: React.ReactNode;
     scaleStep?: number;
+    imageRender?: (params: {
+        originalNode: React.ReactNode;
+        transform: TransformType;
+    }) => React.ReactNode;
+    onTransform?: PreviewProps['onTransform'];
+    toolbarRender?: (params: Omit<ToolbarRenderType, 'current' | 'total'>) => React.ReactNode;
 }
@@ -17,0 +26,0 @@ export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onClick'> {

lib/Image.js

@@ -15,13 +15,15 @@ "use strict";
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _css = require("rc-util/lib/Dom/css");
 var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var React = _interopRequireWildcard(require("react"));
+var _context = require("./context");
+var _useRegisterImage = _interopRequireDefault(require("./hooks/useRegisterImage"));
 var _Preview = _interopRequireDefault(require("./Preview"));
-var _PreviewGroup = _interopRequireWildcard(require("./PreviewGroup"));
-var _excluded = ["src", "alt", "onPreviewClose", "prefixCls", "previewPrefixCls", "placeholder", "fallback", "width", "height", "style", "preview", "className", "onClick", "onError", "wrapperClassName", "wrapperStyle", "rootClassName", "crossOrigin", "decoding", "loading", "referrerPolicy", "sizes", "srcSet", "useMap", "draggable"],
-  _excluded2 = ["src", "visible", "onVisibleChange", "getContainer", "mask", "maskClassName", "icons", "scaleStep"];
+var _PreviewGroup = _interopRequireDefault(require("./PreviewGroup"));
+var _excluded = ["src", "alt", "onPreviewClose", "prefixCls", "previewPrefixCls", "placeholder", "fallback", "width", "height", "style", "preview", "className", "onClick", "onError", "wrapperClassName", "wrapperStyle", "rootClassName"],
+  _excluded2 = ["src", "visible", "onVisibleChange", "getContainer", "mask", "maskClassName", "icons", "scaleStep", "minScale", "maxScale", "imageRender", "toolbarRender"];
 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 || _typeof3(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 uuid = 0;
+var COMMON_PROPS = ['crossOrigin', 'decoding', 'draggable', 'loading', 'referrerPolicy', 'sizes', 'srcSet', 'useMap', 'alt'];
 function isImageValid(src) {
@@ -39,49 +41,43 @@ return new Promise(function (resolve) {
 }
-var ImageInternal = function ImageInternal(_ref) {
-  var _imgCommonProps$style;
-  var imgSrc = _ref.src,
-    alt = _ref.alt,
-    onInitialPreviewClose = _ref.onPreviewClose,
-    _ref$prefixCls = _ref.prefixCls,
-    prefixCls = _ref$prefixCls === void 0 ? 'rc-image' : _ref$prefixCls,
-    _ref$previewPrefixCls = _ref.previewPrefixCls,
-    previewPrefixCls = _ref$previewPrefixCls === void 0 ? "".concat(prefixCls, "-preview") : _ref$previewPrefixCls,
-    placeholder = _ref.placeholder,
-    fallback = _ref.fallback,
-    width = _ref.width,
-    height = _ref.height,
-    style = _ref.style,
-    _ref$preview = _ref.preview,
-    preview = _ref$preview === void 0 ? true : _ref$preview,
-    className = _ref.className,
-    onClick = _ref.onClick,
-    onError = _ref.onError,
-    wrapperClassName = _ref.wrapperClassName,
-    wrapperStyle = _ref.wrapperStyle,
-    rootClassName = _ref.rootClassName,
-    crossOrigin = _ref.crossOrigin,
-    decoding = _ref.decoding,
-    loading = _ref.loading,
-    referrerPolicy = _ref.referrerPolicy,
-    sizes = _ref.sizes,
-    srcSet = _ref.srcSet,
-    useMap = _ref.useMap,
-    draggable = _ref.draggable,
-    otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var ImageInternal = function ImageInternal(props) {
+  var imgSrc = props.src,
+    alt = props.alt,
+    onInitialPreviewClose = props.onPreviewClose,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'rc-image' : _props$prefixCls,
+    _props$previewPrefixC = props.previewPrefixCls,
+    previewPrefixCls = _props$previewPrefixC === void 0 ? "".concat(prefixCls, "-preview") : _props$previewPrefixC,
+    placeholder = props.placeholder,
+    fallback = props.fallback,
+    width = props.width,
+    height = props.height,
+    style = props.style,
+    _props$preview = props.preview,
+    preview = _props$preview === void 0 ? true : _props$preview,
+    className = props.className,
+    onClick = props.onClick,
+    onError = props.onError,
+    wrapperClassName = props.wrapperClassName,
+    wrapperStyle = props.wrapperStyle,
+    rootClassName = props.rootClassName,
+    otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var isCustomPlaceholder = placeholder && placeholder !== true;
-  var _ref2 = (0, _typeof2.default)(preview) === 'object' ? preview : {},
-    previewSrc = _ref2.src,
-    _ref2$visible = _ref2.visible,
-    previewVisible = _ref2$visible === void 0 ? undefined : _ref2$visible,
-    _ref2$onVisibleChange = _ref2.onVisibleChange,
-    onPreviewVisibleChange = _ref2$onVisibleChange === void 0 ? onInitialPreviewClose : _ref2$onVisibleChange,
-    _ref2$getContainer = _ref2.getContainer,
-    getPreviewContainer = _ref2$getContainer === void 0 ? undefined : _ref2$getContainer,
-    previewMask = _ref2.mask,
-    maskClassName = _ref2.maskClassName,
-    icons = _ref2.icons,
-    scaleStep = _ref2.scaleStep,
-    dialogProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var _ref = (0, _typeof2.default)(preview) === 'object' ? preview : {},
+    previewSrc = _ref.src,
+    _ref$visible = _ref.visible,
+    previewVisible = _ref$visible === void 0 ? undefined : _ref$visible,
+    _ref$onVisibleChange = _ref.onVisibleChange,
+    onPreviewVisibleChange = _ref$onVisibleChange === void 0 ? onInitialPreviewClose : _ref$onVisibleChange,
+    _ref$getContainer = _ref.getContainer,
+    getPreviewContainer = _ref$getContainer === void 0 ? undefined : _ref$getContainer,
+    previewMask = _ref.mask,
+    maskClassName = _ref.maskClassName,
+    icons = _ref.icons,
+    scaleStep = _ref.scaleStep,
+    minScale = _ref.minScale,
+    maxScale = _ref.maxScale,
+    imageRender = _ref.imageRender,
+    toolbarRender = _ref.toolbarRender,
+    dialogProps = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
   var src = previewSrc !== null && previewSrc !== void 0 ? previewSrc : imgSrc;
-  var isControlled = previewVisible !== undefined;
   var _useMergedState = (0, _useMergedState3.default)(!!previewVisible, {
@@ -103,50 +99,11 @@ value: previewVisible,
   var isError = status === 'error';
-  var _React$useContext = React.useContext(_PreviewGroup.context),
-    isPreviewGroup = _React$useContext.isPreviewGroup,
-    setCurrent = _React$useContext.setCurrent,
-    setGroupShowPreview = _React$useContext.setShowPreview,
-    setGroupMousePosition = _React$useContext.setMousePosition,
-    registerImage = _React$useContext.registerImage;
-  var _React$useState = React.useState(function () {
-      uuid += 1;
-      return uuid;
-    }),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
-    currentId = _React$useState2[0];
+  var groupContext = (0, React.useContext)(_context.PreviewGroupContext);
   var canPreview = !!preview;
-  var isLoaded = React.useRef(false);
+  var isLoaded = (0, React.useRef)(false);
   var onLoad = function onLoad() {
     setStatus('normal');
   };
-  var onPreview = function onPreview(e) {
-    if (!isControlled) {
-      var _getOffset = (0, _css.getOffset)(e.target),
-        left = _getOffset.left,
-        top = _getOffset.top;
-      if (isPreviewGroup) {
-        setCurrent(currentId);
-        setGroupMousePosition({
-          x: left,
-          y: top
-        });
-      } else {
-        setMousePosition({
-          x: left,
-          y: top
-        });
-      }
-    }
-    if (isPreviewGroup) {
-      setGroupShowPreview(true);
-    } else {
-      setShowPreview(true);
-    }
-    onClick === null || onClick === void 0 ? void 0 : onClick(e);
-  };
-  var onPreviewClose = function onPreviewClose(e) {
-    e.stopPropagation();
+  var onPreviewClose = function onPreviewClose() {
     setShowPreview(false);
-    if (!isControlled) {
-      setMousePosition(null);
-    }
+    setMousePosition(null);
   };
@@ -161,3 +118,3 @@ var getImgRef = function getImgRef(img) {
   };
-  React.useEffect(function () {
+  (0, React.useEffect)(function () {
     isImageValid(src).then(function (isValid) {
@@ -169,16 +126,3 @@ if (!isValid) {
   }, [src]);
-
-  // Keep order start
-  // Resolve https://github.com/ant-design/ant-design/issues/28881
-  // Only need unRegister when component unMount
-  React.useEffect(function () {
-    var unRegister = registerImage(currentId, src);
-    return unRegister;
-  }, []);
-  React.useEffect(function () {
-    registerImage(currentId, src, canPreview);
-  }, [src, canPreview]);
-  // Keep order end
-
-  React.useEffect(function () {
+  (0, React.useEffect)(function () {
     if (isError) {
@@ -193,18 +137,42 @@ setStatus('normal');
   var mergedSrc = isError && fallback ? fallback : src;
-  var imgCommonProps = {
-    crossOrigin: crossOrigin,
-    decoding: decoding,
-    draggable: draggable,
-    loading: loading,
-    referrerPolicy: referrerPolicy,
-    sizes: sizes,
-    srcSet: srcSet,
-    useMap: useMap,
-    onError: onError,
-    alt: alt,
-    className: (0, _classnames.default)("".concat(prefixCls, "-img"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-img-placeholder"), placeholder === true), className),
-    style: (0, _objectSpread2.default)({
-      height: height
-    }, style)
+
+  // ========================= ImageProps =========================
+  var imgCommonProps = (0, React.useMemo)(function () {
+    var obj = {};
+    COMMON_PROPS.forEach(function (prop) {
+      if (props[prop] !== undefined) {
+        obj[prop] = props[prop];
+      }
+    });
+    return obj;
+  }, COMMON_PROPS.map(function (prop) {
+    return props[prop];
+  }));
+
+  // ========================== Register ==========================
+  var registerData = (0, React.useMemo)(function () {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, imgCommonProps), {}, {
+      src: src
+    });
+  }, [src, imgCommonProps]);
+  var imageId = (0, _useRegisterImage.default)(canPreview, registerData);
+
+  // ========================== Preview ===========================
+  var onPreview = function onPreview(e) {
+    var _getOffset = (0, _css.getOffset)(e.target),
+      left = _getOffset.left,
+      top = _getOffset.top;
+    if (groupContext) {
+      groupContext.onPreview(imageId, left, top);
+    } else {
+      setMousePosition({
+        x: left,
+        y: top
+      });
+      setShowPreview(true);
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
+
+  // =========================== Render ===========================
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, otherProps, {
@@ -218,2 +186,6 @@ className: wrapperClass,
   }), /*#__PURE__*/React.createElement("img", (0, _extends2.default)({}, imgCommonProps, {
+    className: (0, _classnames.default)("".concat(prefixCls, "-img"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-img-placeholder"), placeholder === true), className),
+    style: (0, _objectSpread2.default)({
+      height: height
+    }, style),
     ref: getImgRef
@@ -227,3 +199,4 @@ }, isError && fallback ? {
     width: width,
-    height: height
+    height: height,
+    onError: onError
   })), status === 'loading' && /*#__PURE__*/React.createElement("div", {
@@ -235,5 +208,5 @@ "aria-hidden": "true",
     style: {
-      display: ((_imgCommonProps$style = imgCommonProps.style) === null || _imgCommonProps$style === void 0 ? void 0 : _imgCommonProps$style.display) === 'none' ? 'none' : undefined
+      display: (style === null || style === void 0 ? void 0 : style.display) === 'none' ? 'none' : undefined
     }
-  }, previewMask)), !isPreviewGroup && canPreview && /*#__PURE__*/React.createElement(_Preview.default, (0, _extends2.default)({
+  }, previewMask)), !groupContext && canPreview && /*#__PURE__*/React.createElement(_Preview.default, (0, _extends2.default)({
     "aria-hidden": !isShowPreview,
@@ -249,3 +222,8 @@ visible: isShowPreview,
     scaleStep: scaleStep,
-    rootClassName: rootClassName
+    minScale: minScale,
+    maxScale: maxScale,
+    rootClassName: rootClassName,
+    imageRender: imageRender,
+    imgCommonProps: imgCommonProps,
+    toolbarRender: toolbarRender
   }, dialogProps)));
@@ -252,0 +230,0 @@ };

lib/Operations.d.ts

 import * as React from 'react';
-import type { PreviewProps } from './Preview';
+import type { TransformType } from './hooks/useImageTransform';
+import type { PreviewProps, ToolbarRenderType } from './Preview';
 interface OperationsProps extends Pick<PreviewProps, 'visible' | 'maskTransitionName' | 'getContainer' | 'prefixCls' | 'rootClassName' | 'icons' | 'countRender' | 'onClose'> {
@@ -7,4 +8,7 @@ showSwitch: boolean;
     current: number;
+    transform: TransformType;
     count: number;
     scale: number;
+    minScale: number;
+    maxScale: number;
     onSwitchLeft: React.MouseEventHandler<HTMLDivElement>;
@@ -18,4 +22,5 @@ onSwitchRight: React.MouseEventHandler<HTMLDivElement>;
     onFlipY: () => void;
+    toolbarRender: (params: ToolbarRenderType | Omit<ToolbarRenderType, 'current' | 'total'>) => React.ReactNode;
 }
 declare const Operations: React.FC<OperationsProps>;
 export default Operations;

lib/Operations.js

@@ -9,8 +9,9 @@ "use strict";
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var React = _interopRequireWildcard(require("react"));
+var _portal = _interopRequireDefault(require("@rc-component/portal"));
 var _classnames4 = _interopRequireDefault(require("classnames"));
 var _rcMotion = _interopRequireDefault(require("rc-motion"));
-var _portal = _interopRequireDefault(require("@rc-component/portal"));
-var _previewConfig = require("./previewConfig");
+var React = _interopRequireWildcard(require("react"));
+var _context = require("./context");
 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); }
@@ -30,4 +31,7 @@ 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; }
     current = props.current,
+    transform = props.transform,
     count = props.count,
     scale = props.scale,
+    minScale = props.minScale,
+    maxScale = props.maxScale,
     onSwitchLeft = props.onSwitchLeft,
@@ -41,3 +45,5 @@ onSwitchRight = props.onSwitchRight,
     onFlipX = props.onFlipX,
-    onFlipY = props.onFlipY;
+    onFlipY = props.onFlipY,
+    toolbarRender = props.toolbarRender;
+  var groupContext = (0, React.useContext)(_context.PreviewGroupContext);
   var rotateLeft = icons.rotateLeft,
@@ -55,15 +61,13 @@ rotateRight = icons.rotateRight,
   var tools = [{
-    icon: close,
-    onClick: onClose,
-    type: 'close'
+    icon: flipY,
+    onClick: onFlipY,
+    type: 'flipY'
   }, {
-    icon: zoomIn,
-    onClick: onZoomIn,
-    type: 'zoomIn',
-    disabled: scale === _previewConfig.MAX_SCALE
+    icon: flipX,
+    onClick: onFlipX,
+    type: 'flipX'
   }, {
-    icon: zoomOut,
-    onClick: onZoomOut,
-    type: 'zoomOut',
-    disabled: scale === _previewConfig.MIN_SCALE
+    icon: rotateLeft,
+    onClick: onRotateLeft,
+    type: 'rotateLeft'
   }, {
@@ -74,26 +78,18 @@ icon: rotateRight,
   }, {
-    icon: rotateLeft,
-    onClick: onRotateLeft,
-    type: 'rotateLeft'
+    icon: zoomOut,
+    onClick: onZoomOut,
+    type: 'zoomOut',
+    disabled: scale === minScale
   }, {
-    icon: flipX,
-    onClick: onFlipX,
-    type: 'flipX'
+    icon: zoomIn,
+    onClick: onZoomIn,
+    type: 'zoomIn',
+    disabled: scale === maxScale
   }, {
-    icon: flipY,
-    onClick: onFlipY,
-    type: 'flipY'
+    icon: close,
+    onClick: onClose,
+    type: 'close'
   }];
-  var operations = /*#__PURE__*/React.createElement(React.Fragment, null, showSwitch && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames4.default)("".concat(prefixCls, "-switch-left"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-left-disabled"), current === 0)),
-    onClick: onSwitchLeft
-  }, left), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames4.default)("".concat(prefixCls, "-switch-right"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-right-disabled"), current === count - 1)),
-    onClick: onSwitchRight
-  }, right)), /*#__PURE__*/React.createElement("ul", {
-    className: "".concat(prefixCls, "-operations")
-  }, showProgress && /*#__PURE__*/React.createElement("li", {
-    className: "".concat(prefixCls, "-operations-progress")
-  }, (_countRender = countRender === null || countRender === void 0 ? void 0 : countRender(current + 1, count)) !== null && _countRender !== void 0 ? _countRender : "".concat(current + 1, " / ").concat(count)), tools.map(function (_ref) {
-    var _classnames3;
+  var toolsNode = tools.map(function (_ref) {
+    var _classnames;
     var icon = _ref.icon,
@@ -104,3 +100,3 @@ onClick = _ref.onClick,
     return /*#__PURE__*/React.createElement("li", {
-      className: (0, _classnames4.default)(toolClassName, (_classnames3 = {}, (0, _defineProperty2.default)(_classnames3, "".concat(prefixCls, "-operations-operation-").concat(type), true), (0, _defineProperty2.default)(_classnames3, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames3)),
+      className: (0, _classnames4.default)(toolClassName, (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-operations-operation-").concat(type), true), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames)),
       onClick: onClick,
@@ -111,3 +107,39 @@ key: type
     }) : icon);
-  })));
+  });
+  var toolbar = /*#__PURE__*/React.createElement("ul", {
+    className: "".concat(prefixCls, "-operations")
+  }, showProgress && /*#__PURE__*/React.createElement("li", {
+    className: "".concat(prefixCls, "-operations-progress")
+  }, (_countRender = countRender === null || countRender === void 0 ? void 0 : countRender(current + 1, count)) !== null && _countRender !== void 0 ? _countRender : "".concat(current + 1, " / ").concat(count)), toolsNode);
+  var operations = /*#__PURE__*/React.createElement(React.Fragment, null, showSwitch && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames4.default)("".concat(prefixCls, "-switch-left"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-left-disabled"), current === 0)),
+    onClick: onSwitchLeft
+  }, left), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames4.default)("".concat(prefixCls, "-switch-right"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-right-disabled"), current === count - 1)),
+    onClick: onSwitchRight
+  }, right)), toolbarRender ? toolbarRender((0, _objectSpread2.default)({
+    originalNode: toolbar,
+    icons: {
+      flipYIcon: toolsNode[0],
+      flipXIcon: toolsNode[1],
+      rotateLeftIcon: toolsNode[2],
+      rotateRightIcon: toolsNode[3],
+      zoomOutIcon: toolsNode[4],
+      zoomInIcon: toolsNode[5],
+      closeIcon: toolsNode[6]
+    },
+    actions: {
+      flipY: onFlipY,
+      flipX: onFlipX,
+      rotateLeft: onRotateLeft,
+      rotateRight: onRotateRight,
+      zoomOut: onZoomOut,
+      zoomIn: onZoomIn,
+      close: onClose
+    },
+    transform: transform
+  }, groupContext ? {
+    current: current,
+    total: count
+  } : {})) : toolbar);
   return /*#__PURE__*/React.createElement(_rcMotion.default, {
@@ -114,0 +146,0 @@ visible: visible,

lib/Preview.d.ts

 import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
 import React from 'react';
+import type { TransformAction, TransformType } from './hooks/useImageTransform';
+export declare type ToolbarRenderType = {
+    originalNode: React.ReactNode;
+    icons: {
+        flipYIcon: React.ReactNode;
+        flipXIcon: React.ReactNode;
+        rotateLeftIcon: React.ReactNode;
+        rotateRightIcon: React.ReactNode;
+        zoomOutIcon: React.ReactNode;
+        zoomInIcon: React.ReactNode;
+        closeIcon: React.ReactNode;
+    };
+    actions: {
+        flipY: () => void;
+        flipX: () => void;
+        rotateLeft: () => void;
+        rotateRight: () => void;
+        zoomOut: () => void;
+        zoomIn: () => void;
+        close: () => void;
+    };
+    transform: TransformType;
+    current: number;
+    total: number;
+};
 export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
-    onClose?: (e: React.SyntheticEvent<Element>) => void;
+    imgCommonProps?: React.ImgHTMLAttributes<HTMLImageElement>;
     src?: string;
@@ -19,6 +44,22 @@ alt?: string;
     };
+    current?: number;
+    count?: number;
     countRender?: (current: number, total: number) => string;
     scaleStep?: number;
+    minScale?: number;
+    maxScale?: number;
+    imageRender?: (params: {
+        originalNode: React.ReactNode;
+        transform: TransformType;
+        current?: number;
+    }) => React.ReactNode;
+    onClose?: () => void;
+    onTransform?: (params: {
+        transform: TransformType;
+        action: TransformAction;
+    }) => void;
+    toolbarRender?: (params: ToolbarRenderType) => React.ReactNode;
+    onChange?: (current: any, prev: any) => void;
 }
 declare const Preview: React.FC<PreviewProps>;
 export default Preview;

lib/Preview.js

@@ -20,2 +20,3 @@ "use strict";
 var _react = _interopRequireWildcard(require("react"));
+var _context = require("./context");
 var _getFixScaleEleTransPosition = _interopRequireDefault(require("./getFixScaleEleTransPosition"));
@@ -25,4 +26,3 @@ var _useImageTransform2 = _interopRequireDefault(require("./hooks/useImageTransform"));
 var _previewConfig = require("./previewConfig");
-var _PreviewGroup = require("./PreviewGroup");
-var _excluded = ["prefixCls", "src", "alt", "onClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
+var _excluded = ["prefixCls", "src", "alt", "onClose", "visible", "icons", "rootClassName", "getContainer", "current", "count", "countRender", "scaleStep", "minScale", "maxScale", "transitionName", "maskTransitionName", "imageRender", "imgCommonProps", "toolbarRender", "onTransform", "onChange"];
 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); }
@@ -40,5 +40,13 @@ 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; }
     getContainer = props.getContainer,
+    _props$current = props.current,
+    current = _props$current === void 0 ? 0 : _props$current,
+    _props$count = props.count,
+    count = _props$count === void 0 ? 1 : _props$count,
     countRender = props.countRender,
     _props$scaleStep = props.scaleStep,
     scaleStep = _props$scaleStep === void 0 ? 0.5 : _props$scaleStep,
+    _props$minScale = props.minScale,
+    minScale = _props$minScale === void 0 ? 1 : _props$minScale,
+    _props$maxScale = props.maxScale,
+    maxScale = _props$maxScale === void 0 ? 50 : _props$maxScale,
     _props$transitionName = props.transitionName,
@@ -48,2 +56,7 @@ transitionName = _props$transitionName === void 0 ? 'zoom' : _props$transitionName,
     maskTransitionName = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
+    imageRender = props.imageRender,
+    imgCommonProps = props.imgCommonProps,
+    toolbarRender = props.toolbarRender,
+    onTransform = props.onTransform,
+    onChange = props.onChange,
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -61,14 +74,6 @@ var imgRef = (0, _react.useRef)();
     setMoving = _useState2[1];
-  var _useContext = (0, _react.useContext)(_PreviewGroup.context),
-    previewUrls = _useContext.previewUrls,
-    current = _useContext.current,
-    isPreviewGroup = _useContext.isPreviewGroup,
-    setCurrent = _useContext.setCurrent;
-  var previewGroupCount = previewUrls.size;
-  var previewUrlsKeys = Array.from(previewUrls.keys());
-  var currentPreviewIndex = previewUrlsKeys.indexOf(current);
-  var combinationSrc = isPreviewGroup ? previewUrls.get(current) : src;
-  var showLeftOrRightSwitches = isPreviewGroup && previewGroupCount > 1;
-  var showOperationsProgress = isPreviewGroup && previewGroupCount >= 1;
-  var _useImageTransform = (0, _useImageTransform2.default)(imgRef),
+  var groupContext = (0, _react.useContext)(_context.PreviewGroupContext);
+  var showLeftOrRightSwitches = groupContext && count > 1;
+  var showOperationsProgress = groupContext && count >= 1;
+  var _useImageTransform = (0, _useImageTransform2.default)(imgRef, minScale, maxScale, onTransform),
     transform = _useImageTransform.transform,
@@ -83,3 +88,5 @@ resetTransform = _useImageTransform.resetTransform,
   var rotate = transform.rotate,
-    scale = transform.scale;
+    scale = transform.scale,
+    x = transform.x,
+    y = transform.y;
   var wrapClassName = (0, _classnames2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-moving"), isMoving));
@@ -92,9 +99,9 @@ (0, _react.useEffect)(function () {
   var onAfterClose = function onAfterClose() {
-    resetTransform();
+    resetTransform('close');
   };
   var onZoomIn = function onZoomIn() {
-    dispatchZoomChange(_previewConfig.BASE_SCALE_RATIO + scaleStep);
+    dispatchZoomChange(_previewConfig.BASE_SCALE_RATIO + scaleStep, 'zoomIn');
   };
   var onZoomOut = function onZoomOut() {
-    dispatchZoomChange(_previewConfig.BASE_SCALE_RATIO - scaleStep);
+    dispatchZoomChange(_previewConfig.BASE_SCALE_RATIO / (_previewConfig.BASE_SCALE_RATIO + scaleStep), 'zoomOut');
   };
@@ -104,3 +111,3 @@ var onRotateRight = function onRotateRight() {
       rotate: rotate + 90
-    });
+    }, 'rotateRight');
   };
@@ -110,3 +117,3 @@ var onRotateLeft = function onRotateLeft() {
       rotate: rotate - 90
-    });
+    }, 'rotateLeft');
   };
@@ -116,3 +123,3 @@ var onFlipX = function onFlipX() {
       flipX: !transform.flipX
-    });
+    }, 'flipX');
   };
@@ -122,20 +129,20 @@ var onFlipY = function onFlipY() {
       flipY: !transform.flipY
-    });
+    }, 'flipY');
   };
   var onSwitchLeft = function onSwitchLeft(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (currentPreviewIndex > 0) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    if (current > 0) {
       setEnableTransition(false);
-      resetTransform();
-      setCurrent(previewUrlsKeys[currentPreviewIndex - 1]);
+      resetTransform('prev');
+      onChange === null || onChange === void 0 ? void 0 : onChange(current - 1, current);
     }
   };
   var onSwitchRight = function onSwitchRight(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (currentPreviewIndex < previewGroupCount - 1) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    if (current < count - 1) {
       setEnableTransition(false);
-      resetTransform();
-      setCurrent(previewUrlsKeys[currentPreviewIndex + 1]);
+      resetTransform('next');
+      onChange === null || onChange === void 0 ? void 0 : onChange(current + 1, current);
     }
@@ -146,3 +153,2 @@ };
       setMoving(false);
-
       /** No need to restore the position when the picture is not moved, So as not to interfere with the click */
@@ -152,3 +158,3 @@ var _downPositionRef$curr = downPositionRef.current,
         transformY = _downPositionRef$curr.transformY;
-      var hasChangedPosition = transform.x !== transformX && transform.y !== transformY;
+      var hasChangedPosition = x !== transformX && y !== transformY;
       if (!hasChangedPosition) {
@@ -166,3 +172,3 @@ return;
       if (fixState) {
-        updateTransform((0, _objectSpread2.default)({}, fixState));
+        updateTransform((0, _objectSpread2.default)({}, fixState), 'dragRebound');
       }
@@ -189,3 +195,3 @@ }
         y: event.pageY - downPositionRef.current.deltaY
-      });
+      }, 'move');
     }
@@ -204,16 +210,12 @@ };
     }
-    dispatchZoomChange(ratio, event.clientX, event.clientY);
+    dispatchZoomChange(ratio, 'wheel', event.clientX, event.clientY);
   };
-  var onKeyDown = (0, _react.useCallback)(function (event) {
+  var onKeyDown = function onKeyDown(event) {
     if (!visible || !showLeftOrRightSwitches) return;
     if (event.keyCode === _KeyCode.default.LEFT) {
-      if (currentPreviewIndex > 0) {
-        setCurrent(previewUrlsKeys[currentPreviewIndex - 1]);
-      }
+      onSwitchLeft();
     } else if (event.keyCode === _KeyCode.default.RIGHT) {
-      if (currentPreviewIndex < previewGroupCount - 1) {
-        setCurrent(previewUrlsKeys[currentPreviewIndex + 1]);
-      }
+      onSwitchRight();
     }
-  }, [currentPreviewIndex, previewGroupCount, previewUrlsKeys, setCurrent, showLeftOrRightSwitches, visible]);
+  };
   var onDoubleClick = function onDoubleClick(event) {
@@ -226,5 +228,5 @@ if (visible) {
           scale: 1
-        });
+        }, 'doubleClick');
       } else {
-        dispatchZoomChange(_previewConfig.BASE_SCALE_RATIO + scaleStep, event.clientX, event.clientY);
+        dispatchZoomChange(_previewConfig.BASE_SCALE_RATIO + scaleStep, 'doubleClick', event.clientX, event.clientY);
       }
@@ -238,3 +240,2 @@ }
     var onMouseMoveListener = (0, _addEventListener.default)(window, 'mousemove', onMouseMove, false);
-    var onKeyDownListener = (0, _addEventListener.default)(window, 'keydown', onKeyDown, false);
     try {
@@ -255,3 +256,2 @@ // Resolve if in iframe lost event
       onMouseMoveListener.remove();
-      onKeyDownListener.remove();
       /* istanbul ignore next */
@@ -262,3 +262,24 @@ (_onTopMouseUpListener = onTopMouseUpListener) === null || _onTopMouseUpListener === void 0 ? void 0 : _onTopMouseUpListener.remove();
     };
-  }, [visible, isMoving, onKeyDown]);
+  }, [visible, isMoving, x, y, rotate]);
+  (0, _react.useEffect)(function () {
+    var onKeyDownListener = (0, _addEventListener.default)(window, 'keydown', onKeyDown, false);
+    return function () {
+      onKeyDownListener.remove();
+    };
+  }, [visible, showLeftOrRightSwitches, current]);
+  var imgNode = /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, imgCommonProps, {
+    width: props.width,
+    height: props.height,
+    onWheel: onWheel,
+    onMouseDown: onMouseDown,
+    onDoubleClick: onDoubleClick,
+    ref: imgRef,
+    className: "".concat(prefixCls, "-img"),
+    src: src,
+    alt: alt,
+    style: {
+      transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale3d(").concat(transform.flipX ? '-' : '').concat(scale, ", ").concat(transform.flipY ? '-' : '').concat(scale, ", 1) rotate(").concat(rotate, "deg)"),
+      transitionDuration: !enableTransition && '0s'
+    }
+  }));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcDialog.default, (0, _extends2.default)({
@@ -279,18 +300,10 @@ transitionName: transitionName,
     className: "".concat(prefixCls, "-img-wrapper")
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    width: props.width,
-    height: props.height,
-    onWheel: onWheel,
-    onMouseDown: onMouseDown,
-    onDoubleClick: onDoubleClick,
-    ref: imgRef,
-    className: "".concat(prefixCls, "-img"),
-    src: combinationSrc,
-    alt: alt,
-    style: {
-      transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale3d(").concat(transform.flipX ? '-' : '').concat(scale, ", ").concat(transform.flipY ? '-' : '').concat(scale, ", 1) rotate(").concat(rotate, "deg)"),
-      transitionDuration: !enableTransition && '0s'
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_Operations.default, {
+  }, imageRender ? imageRender((0, _objectSpread2.default)({
+    originalNode: imgNode,
+    transform: transform
+  }, groupContext ? {
+    current: current
+  } : {})) : imgNode)), /*#__PURE__*/_react.default.createElement(_Operations.default, {
     visible: visible,
+    transform: transform,
     maskTransitionName: maskTransitionName,
@@ -304,5 +317,8 @@ getContainer: getContainer,
     showProgress: showOperationsProgress,
-    current: currentPreviewIndex,
-    count: previewGroupCount,
+    current: current,
+    count: count,
     scale: scale,
+    minScale: minScale,
+    maxScale: maxScale,
+    toolbarRender: toolbarRender,
     onSwitchLeft: onSwitchLeft,
@@ -309,0 +325,0 @@ onSwitchRight: onSwitchRight,

lib/previewConfig.d.ts

@@ -1,5 +0,1 @@
-/** Minimum scale */
-export declare const MIN_SCALE = 1;
-/** Maximum Scale */
-export declare const MAX_SCALE = 50;
 /** Scale the ratio base */
@@ -6,0 +2,0 @@ export declare const BASE_SCALE_RATIO = 1;

lib/previewConfig.js

@@ -6,11 +6,4 @@ "use strict";
 });
-exports.WHEEL_MAX_SCALE_RATIO = exports.MIN_SCALE = exports.MAX_SCALE = exports.BASE_SCALE_RATIO = void 0;
-/** Minimum scale */
-var MIN_SCALE = 1;
-/** Maximum Scale */
-exports.MIN_SCALE = MIN_SCALE;
-var MAX_SCALE = 50;
-
+exports.WHEEL_MAX_SCALE_RATIO = exports.BASE_SCALE_RATIO = void 0;
 /** Scale the ratio base */
-exports.MAX_SCALE = MAX_SCALE;
 var BASE_SCALE_RATIO = 1;
@@ -17,0 +10,0 @@ /** The maximum zoom ratio when the mouse zooms in, adjustable */

lib/PreviewGroup.d.ts

 import * as React from 'react';
+import type { TransformType } from './hooks/useImageTransform';
 import type { ImagePreviewType } from './Image';
-import type { PreviewProps } from './Preview';
-export interface PreviewGroupPreview extends Omit<ImagePreviewType, 'icons' | 'mask' | 'maskClassName'> {
+import type { ImageElementProps } from './interface';
+import type { PreviewProps, ToolbarRenderType } from './Preview';
+export interface PreviewGroupPreview extends Omit<ImagePreviewType, 'icons' | 'mask' | 'maskClassName' | 'onVisibleChange' | 'toolbarRender' | 'imageRender'> {
     /**
@@ -11,2 +13,9 @@ * If Preview the show img index
     countRender?: (current: number, total: number) => string;
+    toolbarRender?: (params: ToolbarRenderType) => React.ReactNode;
+    imageRender?: (params: {
+        originalNode: React.ReactNode;
+        transform: TransformType;
+        current: number;
+    }) => React.ReactNode;
+    onVisibleChange?: (value: boolean, prevValue: boolean, current: number) => void;
     onChange?: (current: number, prevCurrent: number) => void;
@@ -17,25 +26,7 @@ }
     icons?: PreviewProps['icons'];
+    items?: (string | ImageElementProps)[];
     preview?: boolean | PreviewGroupPreview;
     children?: React.ReactNode;
 }
-interface PreviewUrl {
-    url: string;
-    canPreview: boolean;
-}
-export interface GroupConsumerValue extends GroupConsumerProps {
-    isPreviewGroup?: boolean;
-    previewUrls: Map<number, string>;
-    setPreviewUrls: React.Dispatch<React.SetStateAction<Map<number, PreviewUrl>>>;
-    current: number;
-    setCurrent: React.Dispatch<React.SetStateAction<number>>;
-    setShowPreview: React.Dispatch<React.SetStateAction<boolean>>;
-    setMousePosition: React.Dispatch<React.SetStateAction<null | {
-        x: number;
-        y: number;
-    }>>;
-    registerImage: (id: number, url: string, canPreview?: boolean) => () => void;
-    rootClassName?: string;
-}
-export declare const context: React.Context<GroupConsumerValue>;
 declare const Group: React.FC<GroupConsumerProps>;
 export default Group;

lib/PreviewGroup.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = exports.context = void 0;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -16,38 +16,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
+var _context = require("./context");
+var _usePreviewItems3 = _interopRequireDefault(require("./hooks/usePreviewItems"));
 var _Preview = _interopRequireDefault(require("./Preview"));
-var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "countRender", "onChange"];
+var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "minScale", "maxScale", "countRender", "onChange", "onTransform", "toolbarRender", "imageRender"],
+  _excluded2 = ["src"];
 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 || _typeof3(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; }
-/* istanbul ignore next */
-var context = /*#__PURE__*/React.createContext({
-  previewUrls: new Map(),
-  setPreviewUrls: function setPreviewUrls() {
-    return null;
-  },
-  current: null,
-  setCurrent: function setCurrent() {
-    return null;
-  },
-  setShowPreview: function setShowPreview() {
-    return null;
-  },
-  setMousePosition: function setMousePosition() {
-    return null;
-  },
-  registerImage: function registerImage() {
-    return function () {
-      return null;
-    };
-  },
-  rootClassName: ''
-});
-exports.context = context;
-var Provider = context.Provider;
-function getSafeIndex(keys, key) {
-  if (key === undefined) return undefined;
-  var index = keys.indexOf(key);
-  if (index === -1) return undefined;
-  return index;
-}
 var Group = function Group(_ref) {
+  var _mergedItems$current;
   var _ref$previewPrefixCls = _ref.previewPrefixCls,
@@ -58,30 +31,28 @@ previewPrefixCls = _ref$previewPrefixCls === void 0 ? 'rc-image-preview' : _ref$previewPrefixCls,
     icons = _ref$icons === void 0 ? {} : _ref$icons,
+    items = _ref.items,
     preview = _ref.preview;
   var _ref2 = (0, _typeof2.default)(preview) === 'object' ? preview : {},
-    _ref2$visible = _ref2.visible,
-    previewVisible = _ref2$visible === void 0 ? undefined : _ref2$visible,
-    _ref2$onVisibleChange = _ref2.onVisibleChange,
-    onPreviewVisibleChange = _ref2$onVisibleChange === void 0 ? undefined : _ref2$onVisibleChange,
-    _ref2$getContainer = _ref2.getContainer,
-    getContainer = _ref2$getContainer === void 0 ? undefined : _ref2$getContainer,
-    _ref2$current = _ref2.current,
-    currentIndex = _ref2$current === void 0 ? 0 : _ref2$current,
-    _ref2$countRender = _ref2.countRender,
-    countRender = _ref2$countRender === void 0 ? undefined : _ref2$countRender,
-    _ref2$onChange = _ref2.onChange,
-    _onChange = _ref2$onChange === void 0 ? undefined : _ref2$onChange,
+    previewVisible = _ref2.visible,
+    onVisibleChange = _ref2.onVisibleChange,
+    getContainer = _ref2.getContainer,
+    currentIndex = _ref2.current,
+    minScale = _ref2.minScale,
+    maxScale = _ref2.maxScale,
+    countRender = _ref2.countRender,
+    onChange = _ref2.onChange,
+    onTransform = _ref2.onTransform,
+    toolbarRender = _ref2.toolbarRender,
+    imageRender = _ref2.imageRender,
     dialogProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  var _useState = (0, React.useState)(new Map()),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    previewUrls = _useState2[0],
-    setPreviewUrls = _useState2[1];
-  var previewUrlsKeys = Array.from(previewUrls.keys());
-  var prevCurrent = React.useRef();
-  var _useMergedState = (0, _useMergedState5.default)(undefined, {
-      onChange: function onChange(val, prev) {
-        if (prevCurrent.current !== undefined) {
-          _onChange === null || _onChange === void 0 ? void 0 : _onChange(getSafeIndex(previewUrlsKeys, val), getSafeIndex(previewUrlsKeys, prev));
-        }
-        prevCurrent.current = prev;
-      }
+
+  // ========================== Items ===========================
+  var _usePreviewItems = (0, _usePreviewItems3.default)(items),
+    _usePreviewItems2 = (0, _slicedToArray2.default)(_usePreviewItems, 2),
+    mergedItems = _usePreviewItems2[0],
+    register = _usePreviewItems2[1];
+
+  // ========================= Preview ==========================
+  // >>> Index
+  var _useMergedState = (0, _useMergedState5.default)(0, {
+      value: currentIndex
     }),
@@ -91,7 +62,16 @@ _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
     setCurrent = _useMergedState2[1];
+  var _useState = (0, React.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    keepOpenIndex = _useState2[0],
+    setKeepOpenIndex = _useState2[1];
+
+  // >>> Image
+  var _ref3 = ((_mergedItems$current = mergedItems[current]) === null || _mergedItems$current === void 0 ? void 0 : _mergedItems$current.data) || {},
+    src = _ref3.src,
+    imgCommonProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
+  // >>> Visible
   var _useMergedState3 = (0, _useMergedState5.default)(!!previewVisible, {
       value: previewVisible,
       onChange: function onChange(val, prevVal) {
-        onPreviewVisibleChange === null || onPreviewVisibleChange === void 0 ? void 0 : onPreviewVisibleChange(val, prevVal, getSafeIndex(previewUrlsKeys, current));
-        prevCurrent.current = val ? current : undefined;
+        onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(val, prevVal, current);
       }
@@ -102,2 +82,4 @@ }),
     setShowPreview = _useMergedState4[1];
+
+  // >>> Position
   var _useState3 = (0, React.useState)(null),
@@ -107,55 +89,47 @@ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     setMousePosition = _useState4[1];
-  var isControlled = previewVisible !== undefined;
-  var currentControlledKey = previewUrlsKeys[currentIndex];
-  var canPreviewUrls = new Map(Array.from(previewUrls).filter(function (_ref3) {
-    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-      canPreview = _ref4[1].canPreview;
-    return !!canPreview;
-  }).map(function (_ref5) {
-    var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-      id = _ref6[0],
-      url = _ref6[1].url;
-    return [id, url];
-  }));
-  var registerImage = function registerImage(id, url) {
-    var canPreview = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    var unRegister = function unRegister() {
-      setPreviewUrls(function (oldPreviewUrls) {
-        var clonePreviewUrls = new Map(oldPreviewUrls);
-        var deleteResult = clonePreviewUrls.delete(id);
-        return deleteResult ? clonePreviewUrls : oldPreviewUrls;
-      });
-    };
-    setPreviewUrls(function (oldPreviewUrls) {
-      return new Map(oldPreviewUrls).set(id, {
-        url: url,
-        canPreview: canPreview
-      });
+  var onPreviewFromImage = React.useCallback(function (id, mouseX, mouseY) {
+    var index = mergedItems.findIndex(function (item) {
+      return item.id === id;
     });
-    return unRegister;
+    setShowPreview(true);
+    setMousePosition({
+      x: mouseX,
+      y: mouseY
+    });
+    setCurrent(index);
+    setKeepOpenIndex(index >= 0);
+  }, [mergedItems]);
+
+  // Reset current when reopen
+  React.useEffect(function () {
+    if (isShowPreview) {
+      if (!keepOpenIndex) {
+        setCurrent(0);
+      }
+    } else {
+      setKeepOpenIndex(false);
+    }
+  }, [isShowPreview]);
+
+  // ========================== Events ==========================
+  var onInternalChange = function onInternalChange(next, prev) {
+    setCurrent(next);
+    onChange === null || onChange === void 0 ? void 0 : onChange(next, prev);
   };
-  var onPreviewClose = function onPreviewClose(e) {
-    e.stopPropagation();
+  var onPreviewClose = function onPreviewClose() {
     setShowPreview(false);
     setMousePosition(null);
   };
-  React.useEffect(function () {
-    setCurrent(currentControlledKey);
-  }, [currentControlledKey]);
-  React.useEffect(function () {
-    if (!isShowPreview && isControlled) {
-      setCurrent(currentControlledKey);
-    }
-  }, [currentControlledKey, isControlled, isShowPreview]);
-  return /*#__PURE__*/React.createElement(Provider, {
-    value: {
-      isPreviewGroup: true,
-      previewUrls: canPreviewUrls,
-      setPreviewUrls: setPreviewUrls,
-      current: current,
-      setCurrent: setCurrent,
-      setShowPreview: setShowPreview,
-      setMousePosition: setMousePosition,
-      registerImage: registerImage
-    }
+
+  // ========================= Context ==========================
+  var previewGroupContext = React.useMemo(function () {
+    return {
+      register: register,
+      onPreview: onPreviewFromImage
+    };
+  }, [register, onPreviewFromImage]);
+
+  // ========================== Render ==========================
+  return /*#__PURE__*/React.createElement(_context.PreviewGroupContext.Provider, {
+    value: previewGroupContext
   }, children, /*#__PURE__*/React.createElement(_Preview.default, (0, _extends2.default)({
@@ -167,6 +141,15 @@ "aria-hidden": !isShowPreview,
     mousePosition: mousePosition,
-    src: canPreviewUrls.get(current),
+    imgCommonProps: imgCommonProps,
+    src: src,
     icons: icons,
+    minScale: minScale,
+    maxScale: maxScale,
     getContainer: getContainer,
-    countRender: countRender
+    current: current,
+    count: mergedItems.length,
+    countRender: countRender,
+    onTransform: onTransform,
+    toolbarRender: toolbarRender,
+    imageRender: imageRender,
+    onChange: onInternalChange
   }, dialogProps)));
@@ -173,0 +156,0 @@ };

package.json

 {
   "name": "rc-image",
-  "version": "5.17.1",
+  "version": "5.18.0",
   "description": "React easy to use image component",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -68,3 +68,3 @@ # rc-image
 | --- | --- | --- | --- |
-| preview | boolean \| { visible: boolean, scaleStep: number, onVisibleChange: function(value, prevValue), getContainer: string \| HTMLElement \| (() => HTMLElement) \| false } | true | Whether to show preview |
+| preview | boolean \| [PreviewType](#PreviewType) | true | Whether to show preview |
 | prefixCls | string | rc-image | Classname prefix |
@@ -76,2 +76,18 @@ | placeholder | boolean \| ReactElement | - | if `true` will set default placeholder or use `ReactElement` set customize placeholder |
 
+### PreviewType
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| visible | boolean | - | Whether the preview is open or not |
+| src | string | - | customize preview src |
+| scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
+| minScale | number | 1 | min scale |
+| maxScale | number | 50 | max scale |
+| forceRender | boolean | - | Force render preview |
+| getContainer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | Return the mount node for preview |
+| imageRender | { originalNode: React.ReactNode, transform: [TransformType](#TransformType) } => React.ReactNode | - | Customize image |
+| toolbarRender | (params: Omit<[ToolbarRenderType](#ToolbarRenderType), 'current' \| 'total'>) => React.ReactNode | - | Customize toolbar |
+| onVisibleChange | (visible: boolean, prevVisible: boolean) => void | - | Callback when visible is changed |
+| onTransform | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | Callback when transform is changed |
+
 ## Image.PreviewGroup
@@ -96,6 +112,92 @@
 | --- | --- | --- | --- |
-| preview | boolean \|<br> { visible: boolean, scaleStep: number, onVisibleChange: function(value, prevValue), getContainer: string \| HTMLElement \| (() => HTMLElement) \| false, countRender?: (current: number, total: number) => string, current: number } | true | Whether to show preview, <br> current: If Preview the show img index, default 0 |
+| preview | boolean \| [PreviewGroupType](#PreviewGroupType) | true | Whether to show preview, <br> current: If Preview the show img index, default 0 |
 | previewPrefixCls | string | rc-image-preview | Preview classname prefix |
-| icons | { [iconKey]?: ReactNode } | - | Icons in the top operation bar, iconKey: 'rotateLeft' \| 'rotateRight' \| 'zoomIn' \| 'zoomOut' \| 'close' \| 'left' \| 'right' 
+| icons | { [iconKey]?: ReactNode } | - | Icons in the top operation bar, iconKey: 'rotateLeft' \| 'rotateRight' \| 'zoomIn' \| 'zoomOut' \| 'close' \| 'left' \| 'right' |
 
+### PreviewGroupType
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| visible | boolean | - | Whether the preview is open or not |
+| current | number | - | current index |
+| scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
+| minScale | number | 1 | min scale |
+| maxScale | number | 50 | max scale |
+| forceRender | boolean | - | Force render preview |
+| getContainer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | Return the mount node for preview |
+| items | (string \| { src: string, alt: string, crossOrigin: string, ... })[] | - | preview group |
+| countRender | (current: number, total: number) => string | - | Customize count |
+| imageRender | { originalNode: React.ReactNode, transform: [TransformType](#TransformType), current: number } => React.ReactNode | - | Customize image |
+| toolbarRender | (params: [ToolbarRenderType](#ToolbarRenderType)) => React.ReactNode | - | Customize toolbar |
+| onVisibleChange | (visible: boolean, prevVisible: boolean, current: number) => void | - | Callback when visible is changed |
+| onTransform | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | Callback when transform is changed |
+
+### TransformType
+
+```typescript
+{
+  x: number;
+  y: number;
+  rotate: number;
+  scale: number;
+  flipX: boolean;
+  flipY: boolean;
+}
+```
+
+### TransformAction
+
+```typescript
+type TransformAction =
+  | 'flipY'
+  | 'flipX'
+  | 'rotateLeft'
+  | 'rotateRight'
+  | 'zoomIn'
+  | 'zoomOut'
+  | 'close'
+  | 'prev'
+  | 'next'
+  | 'wheel'
+  | 'doubleClick'
+  | 'move'
+  | 'dragRebound';
+```
+
+### ToolbarRenderType
+
+```typescript
+{
+  originalNode: React.ReactNode;
+  icons: {
+    flipYIcon: React.ReactNode;
+    flipXIcon: React.ReactNode;
+    rotateLeftIcon: React.ReactNode;
+    rotateRightIcon: React.ReactNode;
+    zoomOutIcon: React.ReactNode;
+    zoomInIcon: React.ReactNode;
+    closeIcon: React.ReactNode;
+  };
+  actions: {
+    flipY: () => void;
+    flipX: () => void;
+    rotateLeft: () => void;
+    rotateRight: () => void;
+    zoomOut: () => void;
+    zoomIn: () => void;
+    close: () => void;
+  };
+  transform: {
+    x: number;
+    y: number;
+    rotate: number;
+    scale: number;
+    flipX: boolean;
+    flipY: boolean;
+  },
+  current: number;
+  total: number;
+}
+```
+
 ## Example
@@ -102,0 +204,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

130800

increased by19.09%

Number of package files

52

increased by44.44%

Lines of code

2977

increased by13.63%

Number of lines in readme file

219

increased by87.18%

No dependency changes