rc-image - npm Package Compare versions

Comparing version 5.13.0 to 5.14.0

es/getFixScaleEleTransPosition.js

 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { getClientSize } from "rc-util/es/Dom/css";
-
 function fixPoint(key, start, width, clientWidth) {
   var startAddWidth = start + width;
   var offsetStart = (width - clientWidth) / 2;
-
   if (width > clientWidth) {
@@ -13,3 +11,2 @@ if (start > 0) {
     }
-
     if (start < 0 && startAddWidth < clientWidth) {
@@ -21,5 +18,5 @@ return _defineProperty({}, key, -offsetStart);
   }
-
   return {};
 }
+
 /**
@@ -37,11 +34,7 @@ * Fix positon x,y point when
  */
-
-
 export default function getFixScaleEleTransPosition(width, height, left, top) {
   var _getClientSize = getClientSize(),
-      clientWidth = _getClientSize.width,
-      clientHeight = _getClientSize.height;
-
+    clientWidth = _getClientSize.width,
+    clientHeight = _getClientSize.height;
   var fixPos = null;
-
   if (width <= clientWidth && height <= clientHeight) {
@@ -55,4 +48,3 @@ fixPos = {
   }
-
   return fixPos;
 }

es/hooks/useImageTransform.js

@@ -16,14 +16,11 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
   var queue = useRef([]);
-
   var _useState = useState(initialTransform),
-      _useState2 = _slicedToArray(_useState, 2),
-      transform = _useState2[0],
-      setTransform = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    transform = _useState2[0],
+    setTransform = _useState2[1];
   var resetTransform = function resetTransform() {
     setTransform(initialTransform);
   };
+
   /** Direct update transform */
-
-
   var updateTransform = function updateTransform(newTransform) {
@@ -43,19 +40,16 @@ if (frame.current === null) {
     }
-
     queue.current.push(_objectSpread(_objectSpread({}, transform), newTransform));
   };
+
   /** Scale according to the position of clientX and clientY */
-
-
   var dispatchZoonChange = function dispatchZoonChange(ratio, clientX, clientY) {
     var _imgRef$current = imgRef.current,
-        width = _imgRef$current.width,
-        height = _imgRef$current.height,
-        offsetWidth = _imgRef$current.offsetWidth,
-        offsetHeight = _imgRef$current.offsetHeight,
-        offsetLeft = _imgRef$current.offsetLeft,
-        offsetTop = _imgRef$current.offsetTop;
+      width = _imgRef$current.width,
+      height = _imgRef$current.height,
+      offsetWidth = _imgRef$current.offsetWidth,
+      offsetHeight = _imgRef$current.offsetHeight,
+      offsetLeft = _imgRef$current.offsetLeft,
+      offsetTop = _imgRef$current.offsetTop;
     var newRatio = ratio;
     var newScale = transform.scale * ratio;
-
     if (newScale > MAX_SCALE) {
@@ -68,5 +62,4 @@ newRatio = MAX_SCALE / transform.scale;
     }
+
     /** Default center point scaling */
-
-
     var mergedClientX = clientX !== null && clientX !== void 0 ? clientX : innerWidth / 2;
@@ -76,13 +69,11 @@ var mergedClientY = clientY !== null && clientY !== void 0 ? clientY : innerHeight / 2;
     /** Deviation calculated from image size */
-
     var diffImgX = diffRatio * width * 0.5;
     var diffImgY = diffRatio * height * 0.5;
     /** The difference between the click position and the edge of the document */
-
     var diffOffsetLeft = diffRatio * (mergedClientX - transform.x - offsetLeft);
     var diffOffsetTop = diffRatio * (mergedClientY - transform.y - offsetTop);
     /** Final positioning */
-
     var newX = transform.x - (diffOffsetLeft - diffImgX);
     var newY = transform.y - (diffOffsetTop - diffImgY);
+
     /**
@@ -92,11 +83,8 @@ * When zooming the image
      */
-
     if (ratio < 1 && newScale === 1) {
       var mergedWidth = offsetWidth * newScale;
       var mergedHeight = offsetHeight * newScale;
-
       var _getClientSize = getClientSize(),
-          clientWidth = _getClientSize.width,
-          clientHeight = _getClientSize.height;
-
+        clientWidth = _getClientSize.width,
+        clientHeight = _getClientSize.height;
       if (mergedWidth <= clientWidth && mergedHeight <= clientHeight) {
@@ -107,3 +95,2 @@ newX = 0;
     }
-
     updateTransform({
@@ -115,3 +102,2 @@ x: newX,
   };
-
   return {
@@ -118,0 +104,0 @@ transform: transform,

es/Image.js

@@ -8,3 +8,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 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"];
+  _excluded2 = ["src", "visible", "onVisibleChange", "getContainer", "mask", "maskClassName", "icons", "scaleStep"];
 import * as React from 'react';
@@ -18,96 +18,82 @@ import { useState } from 'react';
 var uuid = 0;
-
 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,
-      onImageError = _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);
-
+    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,
+    onImageError = _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 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);
-
+    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 src = previewSrc !== null && previewSrc !== void 0 ? previewSrc : imgSrc;
   var isControlled = previewVisible !== undefined;
-
   var _useMergedState = useMergedState(!!previewVisible, {
-    value: previewVisible,
-    onChange: onPreviewVisibleChange
-  }),
-      _useMergedState2 = _slicedToArray(_useMergedState, 2),
-      isShowPreview = _useMergedState2[0],
-      setShowPreview = _useMergedState2[1];
-
+      value: previewVisible,
+      onChange: onPreviewVisibleChange
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    isShowPreview = _useMergedState2[0],
+    setShowPreview = _useMergedState2[1];
   var _useState = useState(isCustomPlaceholder ? 'loading' : 'normal'),
-      _useState2 = _slicedToArray(_useState, 2),
-      status = _useState2[0],
-      setStatus = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
   var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      mousePosition = _useState4[0],
-      setMousePosition = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    mousePosition = _useState4[0],
+    setMousePosition = _useState4[1];
   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;
-
+    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];
-
+      uuid += 1;
+      return uuid;
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 1),
+    currentId = _React$useState2[0];
   var canPreview = !!preview;
   var isLoaded = React.useRef(false);
-
   var onLoad = function onLoad() {
     setStatus('normal');
   };
-
   var onError = function onError(e) {
@@ -117,12 +103,9 @@ if (onImageError) {
     }
-
     setStatus('error');
   };
-
   var onPreview = function onPreview(e) {
     if (!isControlled) {
       var _getOffset = getOffset(e.target),
-          left = _getOffset.left,
-          top = _getOffset.top;
-
+        left = _getOffset.left,
+        top = _getOffset.top;
       if (isPreviewGroup) {
@@ -141,3 +124,2 @@ setCurrent(currentId);
     }
-
     if (isPreviewGroup) {
@@ -148,10 +130,7 @@ setGroupShowPreview(true);
     }
-
     if (onClick) onClick(e);
   };
-
   var onPreviewClose = function onPreviewClose(e) {
     e.stopPropagation();
     setShowPreview(false);
-
     if (!isControlled) {
@@ -161,7 +140,5 @@ setMousePosition(null);
   };
-
   var getImgRef = function getImgRef(img) {
     isLoaded.current = false;
     if (status !== 'loading') return;
-
     if (img !== null && img !== void 0 && img.complete && (img.naturalWidth || img.naturalHeight)) {
@@ -171,7 +148,7 @@ isLoaded.current = true;
     }
-  }; // Keep order start
+  };
+
+  // Keep order start
   // Resolve https://github.com/ant-design/ant-design/issues/28881
   // Only need unRegister when component unMount
-
-
   React.useEffect(function () {
@@ -183,3 +160,4 @@ var unRegister = registerImage(currentId, src);
     registerImage(currentId, src, canPreview);
-  }, [src, canPreview]); // Keep order end
+  }, [src, canPreview]);
+  // Keep order end
 
@@ -190,3 +168,2 @@ React.useEffect(function () {
     }
-
     if (isCustomPlaceholder && !isLoaded.current) {
@@ -253,5 +230,4 @@ setStatus('loading');
 };
-
 ImageInternal.PreviewGroup = PreviewGroup;
 ImageInternal.displayName = 'Image';
 export default ImageInternal;

es/Operations.js

@@ -7,32 +7,30 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { MIN_SCALE, MAX_SCALE } from "./previewConfig";
-
 var Operations = function Operations(props) {
   var _countRender;
-
   var visible = props.visible,
-      maskTransitionName = props.maskTransitionName,
-      getContainer = props.getContainer,
-      prefixCls = props.prefixCls,
-      rootClassName = props.rootClassName,
-      icons = props.icons,
-      countRender = props.countRender,
-      showSwitch = props.showSwitch,
-      showProgress = props.showProgress,
-      current = props.current,
-      count = props.count,
-      scale = props.scale,
-      onSwitchLeft = props.onSwitchLeft,
-      onSwitchRight = props.onSwitchRight,
-      onClose = props.onClose,
-      onZoomIn = props.onZoomIn,
-      onZoomOut = props.onZoomOut,
-      onRotateRight = props.onRotateRight,
-      onRotateLeft = props.onRotateLeft;
+    maskTransitionName = props.maskTransitionName,
+    getContainer = props.getContainer,
+    prefixCls = props.prefixCls,
+    rootClassName = props.rootClassName,
+    icons = props.icons,
+    countRender = props.countRender,
+    showSwitch = props.showSwitch,
+    showProgress = props.showProgress,
+    current = props.current,
+    count = props.count,
+    scale = props.scale,
+    onSwitchLeft = props.onSwitchLeft,
+    onSwitchRight = props.onSwitchRight,
+    onClose = props.onClose,
+    onZoomIn = props.onZoomIn,
+    onZoomOut = props.onZoomOut,
+    onRotateRight = props.onRotateRight,
+    onRotateLeft = props.onRotateLeft;
   var rotateLeft = icons.rotateLeft,
-      rotateRight = icons.rotateRight,
-      zoomIn = icons.zoomIn,
-      zoomOut = icons.zoomOut,
-      close = icons.close,
-      left = icons.left,
-      right = icons.right;
+    rotateRight = icons.rotateRight,
+    zoomIn = icons.zoomIn,
+    zoomOut = icons.zoomOut,
+    close = icons.close,
+    left = icons.left,
+    right = icons.right;
   var toolClassName = "".concat(prefixCls, "-operations-operation");
@@ -75,7 +73,6 @@ var iconClassName = "".concat(prefixCls, "-operations-icon");
     var _classnames3;
-
     var icon = _ref.icon,
-        onClick = _ref.onClick,
-        type = _ref.type,
-        disabled = _ref.disabled;
+      onClick = _ref.onClick,
+      type = _ref.type,
+      disabled = _ref.disabled;
     return /*#__PURE__*/React.createElement("li", {
@@ -94,3 +91,3 @@ className: classnames(toolClassName, (_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefixCls, "-operations-operation-").concat(type), true), _defineProperty(_classnames3, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames3)),
     var className = _ref2.className,
-        style = _ref2.style;
+      style = _ref2.style;
     return /*#__PURE__*/React.createElement(Portal, {
@@ -105,3 +102,2 @@ open: true,
 };
-
 export default Operations;

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", "afterClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
+var _excluded = ["prefixCls", "src", "alt", "onClose", "afterClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName", "onChange"];
 import React, { useState, useEffect, useCallback, useRef, useContext } from 'react';
@@ -19,23 +19,22 @@ import Dialog from 'rc-dialog';
 import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "./previewConfig";
-
 var Preview = function Preview(props) {
   var prefixCls = props.prefixCls,
-      src = props.src,
-      alt = props.alt,
-      onClose = props.onClose,
-      afterClose = props.afterClose,
-      visible = props.visible,
-      _props$icons = props.icons,
-      icons = _props$icons === void 0 ? {} : _props$icons,
-      rootClassName = props.rootClassName,
-      getContainer = props.getContainer,
-      countRender = props.countRender,
-      _props$scaleStep = props.scaleStep,
-      scaleStep = _props$scaleStep === void 0 ? 0.5 : _props$scaleStep,
-      _props$transitionName = props.transitionName,
-      transitionName = _props$transitionName === void 0 ? 'zoom' : _props$transitionName,
-      _props$maskTransition = props.maskTransitionName,
-      maskTransitionName = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
-      restProps = _objectWithoutProperties(props, _excluded);
-
+    src = props.src,
+    alt = props.alt,
+    onClose = props.onClose,
+    afterClose = props.afterClose,
+    visible = props.visible,
+    _props$icons = props.icons,
+    icons = _props$icons === void 0 ? {} : _props$icons,
+    rootClassName = props.rootClassName,
+    getContainer = props.getContainer,
+    countRender = props.countRender,
+    _props$scaleStep = props.scaleStep,
+    scaleStep = _props$scaleStep === void 0 ? 0.5 : _props$scaleStep,
+    _props$transitionName = props.transitionName,
+    transitionName = _props$transitionName === void 0 ? 'zoom' : _props$transitionName,
+    _props$maskTransition = props.maskTransitionName,
+    maskTransitionName = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
+    onChange = props.onChange,
+    restProps = _objectWithoutProperties(props, _excluded);
   var imgRef = useRef();
@@ -48,14 +47,11 @@ var downPositionRef = useRef({
   });
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMoving = _useState2[0],
-      setMoving = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isMoving = _useState2[0],
+    setMoving = _useState2[1];
   var _useContext = useContext(context),
-      previewUrls = _useContext.previewUrls,
-      current = _useContext.current,
-      isPreviewGroup = _useContext.isPreviewGroup,
-      setCurrent = _useContext.setCurrent;
-
+    previewUrls = _useContext.previewUrls,
+    current = _useContext.current,
+    isPreviewGroup = _useContext.isPreviewGroup,
+    setCurrent = _useContext.setCurrent;
   var previewGroupCount = previewUrls.size;
@@ -67,25 +63,19 @@ var previewUrlsKeys = Array.from(previewUrls.keys());
   var showOperationsProgress = isPreviewGroup && previewGroupCount >= 1;
-
   var _useImageTransform = useImageTransform(imgRef),
-      transform = _useImageTransform.transform,
-      resetTransform = _useImageTransform.resetTransform,
-      updateTransform = _useImageTransform.updateTransform,
-      dispatchZoonChange = _useImageTransform.dispatchZoonChange;
-
+    transform = _useImageTransform.transform,
+    resetTransform = _useImageTransform.resetTransform,
+    updateTransform = _useImageTransform.updateTransform,
+    dispatchZoonChange = _useImageTransform.dispatchZoonChange;
   var rotate = transform.rotate,
-      scale = transform.scale;
+    scale = transform.scale;
   var wrapClassName = classnames(_defineProperty({}, "".concat(prefixCls, "-moving"), isMoving));
-
   var onAfterClose = function onAfterClose() {
     resetTransform();
   };
-
   var onZoomIn = function onZoomIn() {
     dispatchZoonChange(BASE_SCALE_RATIO + scaleStep);
   };
-
   var onZoomOut = function onZoomOut() {
     dispatchZoonChange(BASE_SCALE_RATIO - scaleStep);
   };
-
   var onRotateRight = function onRotateRight() {
@@ -96,3 +86,2 @@ updateTransform({
   };
-
   var onRotateLeft = function onRotateLeft() {
@@ -103,7 +92,5 @@ updateTransform({
   };
-
   var onSwitchLeft = function onSwitchLeft(event) {
     event.preventDefault();
     event.stopPropagation();
-
     if (currentPreviewIndex > 0) {
@@ -113,7 +100,5 @@ setCurrent(previewUrlsKeys[currentPreviewIndex - 1]);
   };
-
   var onSwitchRight = function onSwitchRight(event) {
     event.preventDefault();
     event.stopPropagation();
-
     if (currentPreviewIndex < previewGroupCount - 1) {
@@ -123,27 +108,22 @@ setCurrent(previewUrlsKeys[currentPreviewIndex + 1]);
   };
-
   var onMouseUp = function onMouseUp() {
     if (visible && isMoving) {
       setMoving(false);
+
       /** No need to restore the position when the picture is not moved, So as not to interfere with the click */
-
       var _downPositionRef$curr = downPositionRef.current,
-          transformX = _downPositionRef$curr.transformX,
-          transformY = _downPositionRef$curr.transformY;
+        transformX = _downPositionRef$curr.transformX,
+        transformY = _downPositionRef$curr.transformY;
       var hasChangedPosition = transform.x !== transformX && transform.y !== transformY;
-
       if (!hasChangedPosition) {
         return;
       }
-
       var width = imgRef.current.offsetWidth * scale;
-      var height = imgRef.current.offsetHeight * scale; // eslint-disable-next-line @typescript-eslint/no-shadow
-
+      var height = imgRef.current.offsetHeight * scale;
+      // eslint-disable-next-line @typescript-eslint/no-shadow
       var _imgRef$current$getBo = imgRef.current.getBoundingClientRect(),
-          left = _imgRef$current$getBo.left,
-          top = _imgRef$current$getBo.top;
-
+        left = _imgRef$current$getBo.left,
+        top = _imgRef$current$getBo.top;
       var isRotate = rotate % 180 !== 0;
       var fixState = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, left, top);
-
       if (fixState) {
@@ -154,3 +134,2 @@ updateTransform(_objectSpread({}, fixState));
   };
-
   var onMouseDown = function onMouseDown(event) {
@@ -169,3 +148,2 @@ // Only allow main button
   };
-
   var onMouseMove = function onMouseMove(event) {
@@ -179,22 +157,17 @@ if (visible && isMoving) {
   };
-
   var onWheel = function onWheel(event) {
-    if (!visible || event.deltaY == 0) return; // Scale ratio depends on the deltaY size
-
-    var scaleRatio = Math.abs(event.deltaY / 100); // Limit the maximum scale ratio
-
-    var mergedScaleRatio = Math.min(scaleRatio, WHEEL_MAX_SCALE_RATIO); // Scale the ratio each time
-
+    if (!visible || event.deltaY == 0) return;
+    // Scale ratio depends on the deltaY size
+    var scaleRatio = Math.abs(event.deltaY / 100);
+    // Limit the maximum scale ratio
+    var mergedScaleRatio = Math.min(scaleRatio, WHEEL_MAX_SCALE_RATIO);
+    // Scale the ratio each time
     var ratio = BASE_SCALE_RATIO + mergedScaleRatio * scaleStep;
-
     if (event.deltaY > 0) {
       ratio = BASE_SCALE_RATIO / ratio;
     }
-
     dispatchZoonChange(ratio, event.clientX, event.clientY);
   };
-
   var onKeyDown = useCallback(function (event) {
     if (!visible || !showLeftOrRightSwitches) return;
-
     if (event.keyCode === KeyCode.LEFT) {
@@ -210,3 +183,2 @@ if (currentPreviewIndex > 0) {
   }, [currentPreviewIndex, previewGroupCount, previewUrlsKeys, setCurrent, showLeftOrRightSwitches, visible]);
-
   var onDoubleClick = function onDoubleClick(event) {
@@ -225,3 +197,2 @@ if (visible) {
   };
-
   useEffect(function () {
@@ -233,6 +204,4 @@ var onTopMouseUpListener;
     var onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);
-
     try {
       // Resolve if in iframe lost event
-
       /* istanbul ignore next */
@@ -247,6 +216,4 @@ if (window.top !== window.self) {
     }
-
     return function () {
       var _onTopMouseUpListener, _onTopMouseMoveListen;
-
       onMouseUpListener.remove();
@@ -256,6 +223,4 @@ onMouseMoveListener.remove();
       /* istanbul ignore next */
-
       (_onTopMouseUpListener = onTopMouseUpListener) === null || _onTopMouseUpListener === void 0 ? void 0 : _onTopMouseUpListener.remove();
       /* istanbul ignore next */
-
       (_onTopMouseMoveListen = onTopMouseMoveListener) === null || _onTopMouseMoveListen === void 0 ? void 0 : _onTopMouseMoveListen.remove();
@@ -313,3 +278,2 @@ };
 };
-
 export default Preview;

es/previewConfig.js

 /** Minimum scale */
 export var MIN_SCALE = 1;
 /** Maximum Scale */
+export var MAX_SCALE = 50;
 
-export var MAX_SCALE = 50;
 /** Scale the ratio base */
-
 export var BASE_SCALE_RATIO = 1;
 /** The maximum zoom ratio when the mouse zooms in, adjustable */
-
 export var WHEEL_MAX_SCALE_RATIO = 0.2;

es/PreviewGroup.d.ts

@@ -11,2 +11,3 @@ import * as React from 'react';
     countRender?: (current: number, total: number) => string;
+    onChange?: (current: number, prevCurrent: number) => void;
 }
@@ -13,0 +14,0 @@ export interface GroupConsumerProps {

es/PreviewGroup.js

@@ -5,8 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "countRender"];
+var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "countRender", "onChange"];
+import useMergedState from "rc-util/es/hooks/useMergedState";
 import * as React from 'react';
 import { useState } from 'react';
-import useMergedState from "rc-util/es/hooks/useMergedState";
 import Preview from "./Preview";
-
 /* istanbul ignore next */
@@ -36,47 +35,51 @@ export var context = /*#__PURE__*/React.createContext({
 var Provider = context.Provider;
-
 var Group = function Group(_ref) {
   var _ref$previewPrefixCls = _ref.previewPrefixCls,
-      previewPrefixCls = _ref$previewPrefixCls === void 0 ? 'rc-image-preview' : _ref$previewPrefixCls,
-      children = _ref.children,
-      _ref$icons = _ref.icons,
-      icons = _ref$icons === void 0 ? {} : _ref$icons,
-      preview = _ref.preview;
-
+    previewPrefixCls = _ref$previewPrefixCls === void 0 ? 'rc-image-preview' : _ref$previewPrefixCls,
+    children = _ref.children,
+    _ref$icons = _ref.icons,
+    icons = _ref$icons === void 0 ? {} : _ref$icons,
+    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,
-      dialogProps = _objectWithoutProperties(_ref2, _excluded);
-
+    _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,
+    dialogProps = _objectWithoutProperties(_ref2, _excluded);
   var _useState = useState(new Map()),
-      _useState2 = _slicedToArray(_useState, 2),
-      previewUrls = _useState2[0],
-      setPreviewUrls = _useState2[1];
-
-  var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      current = _useState4[0],
-      setCurrent = _useState4[1];
-
-  var _useMergedState = useMergedState(!!previewVisible, {
-    value: previewVisible,
-    onChange: onPreviewVisibleChange
-  }),
-      _useMergedState2 = _slicedToArray(_useMergedState, 2),
-      isShowPreview = _useMergedState2[0],
-      setShowPreview = _useMergedState2[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      mousePosition = _useState6[0],
-      setMousePosition = _useState6[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    previewUrls = _useState2[0],
+    setPreviewUrls = _useState2[1];
+  var prevCurrent = React.useRef();
+  var _useMergedState = useMergedState(undefined, {
+      onChange: function onChange(val, prev) {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(val, prev);
+        prevCurrent.current = prev;
+      }
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    current = _useMergedState2[0],
+    setCurrent = _useMergedState2[1];
+  var _useMergedState3 = useMergedState(!!previewVisible, {
+      value: previewVisible,
+      onChange: function onChange(val, prevVal) {
+        onPreviewVisibleChange === null || onPreviewVisibleChange === void 0 ? void 0 : onPreviewVisibleChange(val, prevVal);
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(current, prevCurrent.current);
+      }
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    isShowPreview = _useMergedState4[0],
+    setShowPreview = _useMergedState4[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mousePosition = _useState4[0],
+    setMousePosition = _useState4[1];
   var isControlled = previewVisible !== undefined;
@@ -87,16 +90,12 @@ var previewUrlsKeys = Array.from(previewUrls.keys());
     var _ref4 = _slicedToArray(_ref3, 2),
-        canPreview = _ref4[1].canPreview;
-
+      canPreview = _ref4[1].canPreview;
     return !!canPreview;
   }).map(function (_ref5) {
     var _ref6 = _slicedToArray(_ref5, 2),
-        id = _ref6[0],
-        url = _ref6[1].url;
-
+      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() {
@@ -109,3 +108,2 @@ setPreviewUrls(function (oldPreviewUrls) {
     };
-
     setPreviewUrls(function (oldPreviewUrls) {
@@ -119,3 +117,2 @@ return new Map(oldPreviewUrls).set(id, {
   };
-
   var onPreviewClose = function onPreviewClose(e) {
@@ -126,3 +123,2 @@ e.stopPropagation();
   };
-
   React.useEffect(function () {
@@ -159,3 +155,2 @@ setCurrent(currentControlledKey);
 };
-
 export default Group;

lib/getFixScaleEleTransPosition.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,13 +8,8 @@ value: true
 exports.default = getFixScaleEleTransPosition;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _css = require("rc-util/lib/Dom/css");
-
 function fixPoint(key, start, width, clientWidth) {
   var startAddWidth = start + width;
   var offsetStart = (width - clientWidth) / 2;
-
   if (width > clientWidth) {
@@ -25,3 +19,2 @@ if (start > 0) {
     }
-
     if (start < 0 && startAddWidth < clientWidth) {
@@ -33,5 +26,5 @@ return (0, _defineProperty2.default)({}, key, -offsetStart);
   }
-
   return {};
 }
+
 /**
@@ -49,11 +42,7 @@ * Fix positon x,y point when
  */
-
-
 function getFixScaleEleTransPosition(width, height, left, top) {
   var _getClientSize = (0, _css.getClientSize)(),
-      clientWidth = _getClientSize.width,
-      clientHeight = _getClientSize.height;
-
+    clientWidth = _getClientSize.width,
+    clientHeight = _getClientSize.height;
   var fixPos = null;
-
   if (width <= clientWidth && height <= clientHeight) {
@@ -67,4 +56,3 @@ fixPos = {
   }
-
   return fixPos;
 }

lib/hooks/useImageTransform.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,15 +8,8 @@ value: true
 exports.default = useImageTransform;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 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 = {
@@ -29,18 +21,14 @@ x: 0,
 };
-
 function useImageTransform(imgRef) {
   var frame = (0, _react.useRef)(null);
   var queue = (0, _react.useRef)([]);
-
   var _useState = (0, _react.useState)(initialTransform),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      transform = _useState2[0],
-      setTransform = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    transform = _useState2[0],
+    setTransform = _useState2[1];
   var resetTransform = function resetTransform() {
     setTransform(initialTransform);
   };
+
   /** Direct update transform */
-
-
   var updateTransform = function updateTransform(newTransform) {
@@ -60,19 +48,16 @@ if (frame.current === null) {
     }
-
     queue.current.push((0, _objectSpread2.default)((0, _objectSpread2.default)({}, transform), newTransform));
   };
+
   /** Scale according to the position of clientX and clientY */
-
-
   var dispatchZoonChange = function dispatchZoonChange(ratio, clientX, clientY) {
     var _imgRef$current = imgRef.current,
-        width = _imgRef$current.width,
-        height = _imgRef$current.height,
-        offsetWidth = _imgRef$current.offsetWidth,
-        offsetHeight = _imgRef$current.offsetHeight,
-        offsetLeft = _imgRef$current.offsetLeft,
-        offsetTop = _imgRef$current.offsetTop;
+      width = _imgRef$current.width,
+      height = _imgRef$current.height,
+      offsetWidth = _imgRef$current.offsetWidth,
+      offsetHeight = _imgRef$current.offsetHeight,
+      offsetLeft = _imgRef$current.offsetLeft,
+      offsetTop = _imgRef$current.offsetTop;
     var newRatio = ratio;
     var newScale = transform.scale * ratio;
-
     if (newScale > _previewConfig.MAX_SCALE) {
@@ -85,5 +70,4 @@ newRatio = _previewConfig.MAX_SCALE / transform.scale;
     }
+
     /** Default center point scaling */
-
-
     var mergedClientX = clientX !== null && clientX !== void 0 ? clientX : innerWidth / 2;
@@ -93,13 +77,11 @@ var mergedClientY = clientY !== null && clientY !== void 0 ? clientY : innerHeight / 2;
     /** Deviation calculated from image size */
-
     var diffImgX = diffRatio * width * 0.5;
     var diffImgY = diffRatio * height * 0.5;
     /** The difference between the click position and the edge of the document */
-
     var diffOffsetLeft = diffRatio * (mergedClientX - transform.x - offsetLeft);
     var diffOffsetTop = diffRatio * (mergedClientY - transform.y - offsetTop);
     /** Final positioning */
-
     var newX = transform.x - (diffOffsetLeft - diffImgX);
     var newY = transform.y - (diffOffsetTop - diffImgY);
+
     /**
@@ -109,11 +91,8 @@ * When zooming the image
      */
-
     if (ratio < 1 && newScale === 1) {
       var mergedWidth = offsetWidth * newScale;
       var mergedHeight = offsetHeight * newScale;
-
       var _getClientSize = (0, _css.getClientSize)(),
-          clientWidth = _getClientSize.width,
-          clientHeight = _getClientSize.height;
-
+        clientWidth = _getClientSize.width,
+        clientHeight = _getClientSize.height;
       if (mergedWidth <= clientWidth && mergedHeight <= clientHeight) {
@@ -124,3 +103,2 @@ newX = 0;
     }
-
     updateTransform({
@@ -132,3 +110,2 @@ x: newX,
   };
-
   return {
@@ -141,3 +118,2 @@ transform: transform,
 }
-
 ;

lib/Image.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,128 +9,99 @@ value: true
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 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 _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"];
-
+  _excluded2 = ["src", "visible", "onVisibleChange", "getContainer", "mask", "maskClassName", "icons", "scaleStep"];
 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 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,
-      onImageError = _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);
+    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,
+    onImageError = _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 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);
-
+    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 src = previewSrc !== null && previewSrc !== void 0 ? previewSrc : imgSrc;
   var isControlled = previewVisible !== undefined;
-
   var _useMergedState = (0, _useMergedState3.default)(!!previewVisible, {
-    value: previewVisible,
-    onChange: onPreviewVisibleChange
-  }),
-      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-      isShowPreview = _useMergedState2[0],
-      setShowPreview = _useMergedState2[1];
-
+      value: previewVisible,
+      onChange: onPreviewVisibleChange
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    isShowPreview = _useMergedState2[0],
+    setShowPreview = _useMergedState2[1];
   var _useState = (0, React.useState)(isCustomPlaceholder ? 'loading' : 'normal'),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      status = _useState2[0],
-      setStatus = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
   var _useState3 = (0, React.useState)(null),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      mousePosition = _useState4[0],
-      setMousePosition = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    mousePosition = _useState4[0],
+    setMousePosition = _useState4[1];
   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;
-
+    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];
-
+      uuid += 1;
+      return uuid;
+    }),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
+    currentId = _React$useState2[0];
   var canPreview = !!preview;
   var isLoaded = React.useRef(false);
-
   var onLoad = function onLoad() {
     setStatus('normal');
   };
-
   var onError = function onError(e) {
@@ -142,12 +111,9 @@ if (onImageError) {
     }
-
     setStatus('error');
   };
-
   var onPreview = function onPreview(e) {
     if (!isControlled) {
       var _getOffset = (0, _css.getOffset)(e.target),
-          left = _getOffset.left,
-          top = _getOffset.top;
-
+        left = _getOffset.left,
+        top = _getOffset.top;
       if (isPreviewGroup) {
@@ -166,3 +132,2 @@ setCurrent(currentId);
     }
-
     if (isPreviewGroup) {
@@ -173,10 +138,7 @@ setGroupShowPreview(true);
     }
-
     if (onClick) onClick(e);
   };
-
   var onPreviewClose = function onPreviewClose(e) {
     e.stopPropagation();
     setShowPreview(false);
-
     if (!isControlled) {
@@ -186,7 +148,5 @@ setMousePosition(null);
   };
-
   var getImgRef = function getImgRef(img) {
     isLoaded.current = false;
     if (status !== 'loading') return;
-
     if (img !== null && img !== void 0 && img.complete && (img.naturalWidth || img.naturalHeight)) {
@@ -196,7 +156,7 @@ isLoaded.current = true;
     }
-  }; // Keep order start
+  };
+
+  // Keep order start
   // Resolve https://github.com/ant-design/ant-design/issues/28881
   // Only need unRegister when component unMount
-
-
   React.useEffect(function () {
@@ -208,3 +168,4 @@ var unRegister = registerImage(currentId, src);
     registerImage(currentId, src, canPreview);
-  }, [src, canPreview]); // Keep order end
+  }, [src, canPreview]);
+  // Keep order end
 
@@ -215,3 +176,2 @@ React.useEffect(function () {
     }
-
     if (isCustomPlaceholder && !isLoaded.current) {
@@ -278,3 +238,2 @@ setStatus('loading');
 };
-
 ImageInternal.PreviewGroup = _PreviewGroup.default;
@@ -281,0 +240,0 @@ ImageInternal.displayName = 'Image';

lib/index.js

 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -10,5 +9,3 @@ value: true
 exports.default = void 0;
-
 var _Image = _interopRequireWildcard(require("./Image"));
-
 Object.keys(_Image).forEach(function (key) {
@@ -25,8 +22,5 @@ if (key === "default" || key === "__esModule") return;
 });
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var _default = _Image.default;
 exports.default = _default;

lib/Operations.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,48 +9,38 @@ value: true
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _classnames4 = _interopRequireDefault(require("classnames"));
-
 var _rcMotion = _interopRequireDefault(require("rc-motion"));
-
 var _portal = _interopRequireDefault(require("@rc-component/portal"));
-
 var _previewConfig = require("./previewConfig");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var Operations = function Operations(props) {
   var _countRender;
-
   var visible = props.visible,
-      maskTransitionName = props.maskTransitionName,
-      getContainer = props.getContainer,
-      prefixCls = props.prefixCls,
-      rootClassName = props.rootClassName,
-      icons = props.icons,
-      countRender = props.countRender,
-      showSwitch = props.showSwitch,
-      showProgress = props.showProgress,
-      current = props.current,
-      count = props.count,
-      scale = props.scale,
-      onSwitchLeft = props.onSwitchLeft,
-      onSwitchRight = props.onSwitchRight,
-      onClose = props.onClose,
-      onZoomIn = props.onZoomIn,
-      onZoomOut = props.onZoomOut,
-      onRotateRight = props.onRotateRight,
-      onRotateLeft = props.onRotateLeft;
+    maskTransitionName = props.maskTransitionName,
+    getContainer = props.getContainer,
+    prefixCls = props.prefixCls,
+    rootClassName = props.rootClassName,
+    icons = props.icons,
+    countRender = props.countRender,
+    showSwitch = props.showSwitch,
+    showProgress = props.showProgress,
+    current = props.current,
+    count = props.count,
+    scale = props.scale,
+    onSwitchLeft = props.onSwitchLeft,
+    onSwitchRight = props.onSwitchRight,
+    onClose = props.onClose,
+    onZoomIn = props.onZoomIn,
+    onZoomOut = props.onZoomOut,
+    onRotateRight = props.onRotateRight,
+    onRotateLeft = props.onRotateLeft;
   var rotateLeft = icons.rotateLeft,
-      rotateRight = icons.rotateRight,
-      zoomIn = icons.zoomIn,
-      zoomOut = icons.zoomOut,
-      close = icons.close,
-      left = icons.left,
-      right = icons.right;
+    rotateRight = icons.rotateRight,
+    zoomIn = icons.zoomIn,
+    zoomOut = icons.zoomOut,
+    close = icons.close,
+    left = icons.left,
+    right = icons.right;
   var toolClassName = "".concat(prefixCls, "-operations-operation");
@@ -95,7 +83,6 @@ var iconClassName = "".concat(prefixCls, "-operations-icon");
     var _classnames3;
-
     var icon = _ref.icon,
-        onClick = _ref.onClick,
-        type = _ref.type,
-        disabled = _ref.disabled;
+      onClick = _ref.onClick,
+      type = _ref.type,
+      disabled = _ref.disabled;
     return /*#__PURE__*/React.createElement("li", {
@@ -114,3 +101,3 @@ 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)),
     var className = _ref2.className,
-        style = _ref2.style;
+      style = _ref2.style;
     return /*#__PURE__*/React.createElement(_portal.default, {
@@ -125,4 +112,3 @@ open: true,
 };
-
 var _default = Operations;
 exports.default = _default;

lib/Preview.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,60 +9,41 @@ value: true
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _rcDialog = _interopRequireDefault(require("rc-dialog"));
-
 var _classnames2 = _interopRequireDefault(require("classnames"));
-
 var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
-
 var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
-
 var _warning = require("rc-util/lib/warning");
-
 var _PreviewGroup = require("./PreviewGroup");
-
 var _Operations = _interopRequireDefault(require("./Operations"));
-
 var _useImageTransform2 = _interopRequireDefault(require("./hooks/useImageTransform"));
-
 var _getFixScaleEleTransPosition = _interopRequireDefault(require("./getFixScaleEleTransPosition"));
-
 var _previewConfig = require("./previewConfig");
-
-var _excluded = ["prefixCls", "src", "alt", "onClose", "afterClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
-
+var _excluded = ["prefixCls", "src", "alt", "onClose", "afterClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName", "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); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var Preview = function Preview(props) {
   var prefixCls = props.prefixCls,
-      src = props.src,
-      alt = props.alt,
-      onClose = props.onClose,
-      afterClose = props.afterClose,
-      visible = props.visible,
-      _props$icons = props.icons,
-      icons = _props$icons === void 0 ? {} : _props$icons,
-      rootClassName = props.rootClassName,
-      getContainer = props.getContainer,
-      countRender = props.countRender,
-      _props$scaleStep = props.scaleStep,
-      scaleStep = _props$scaleStep === void 0 ? 0.5 : _props$scaleStep,
-      _props$transitionName = props.transitionName,
-      transitionName = _props$transitionName === void 0 ? 'zoom' : _props$transitionName,
-      _props$maskTransition = props.maskTransitionName,
-      maskTransitionName = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
-      restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    src = props.src,
+    alt = props.alt,
+    onClose = props.onClose,
+    afterClose = props.afterClose,
+    visible = props.visible,
+    _props$icons = props.icons,
+    icons = _props$icons === void 0 ? {} : _props$icons,
+    rootClassName = props.rootClassName,
+    getContainer = props.getContainer,
+    countRender = props.countRender,
+    _props$scaleStep = props.scaleStep,
+    scaleStep = _props$scaleStep === void 0 ? 0.5 : _props$scaleStep,
+    _props$transitionName = props.transitionName,
+    transitionName = _props$transitionName === void 0 ? 'zoom' : _props$transitionName,
+    _props$maskTransition = props.maskTransitionName,
+    maskTransitionName = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
+    onChange = props.onChange,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var imgRef = (0, _react.useRef)();
@@ -77,14 +56,11 @@ var downPositionRef = (0, _react.useRef)({
   });
-
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isMoving = _useState2[0],
-      setMoving = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isMoving = _useState2[0],
+    setMoving = _useState2[1];
   var _useContext = (0, _react.useContext)(_PreviewGroup.context),
-      previewUrls = _useContext.previewUrls,
-      current = _useContext.current,
-      isPreviewGroup = _useContext.isPreviewGroup,
-      setCurrent = _useContext.setCurrent;
-
+    previewUrls = _useContext.previewUrls,
+    current = _useContext.current,
+    isPreviewGroup = _useContext.isPreviewGroup,
+    setCurrent = _useContext.setCurrent;
   var previewGroupCount = previewUrls.size;
@@ -96,25 +72,19 @@ var previewUrlsKeys = Array.from(previewUrls.keys());
   var showOperationsProgress = isPreviewGroup && previewGroupCount >= 1;
-
   var _useImageTransform = (0, _useImageTransform2.default)(imgRef),
-      transform = _useImageTransform.transform,
-      resetTransform = _useImageTransform.resetTransform,
-      updateTransform = _useImageTransform.updateTransform,
-      dispatchZoonChange = _useImageTransform.dispatchZoonChange;
-
+    transform = _useImageTransform.transform,
+    resetTransform = _useImageTransform.resetTransform,
+    updateTransform = _useImageTransform.updateTransform,
+    dispatchZoonChange = _useImageTransform.dispatchZoonChange;
   var rotate = transform.rotate,
-      scale = transform.scale;
+    scale = transform.scale;
   var wrapClassName = (0, _classnames2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-moving"), isMoving));
-
   var onAfterClose = function onAfterClose() {
     resetTransform();
   };
-
   var onZoomIn = function onZoomIn() {
     dispatchZoonChange(_previewConfig.BASE_SCALE_RATIO + scaleStep);
   };
-
   var onZoomOut = function onZoomOut() {
     dispatchZoonChange(_previewConfig.BASE_SCALE_RATIO - scaleStep);
   };
-
   var onRotateRight = function onRotateRight() {
@@ -125,3 +95,2 @@ updateTransform({
   };
-
   var onRotateLeft = function onRotateLeft() {
@@ -132,7 +101,5 @@ updateTransform({
   };
-
   var onSwitchLeft = function onSwitchLeft(event) {
     event.preventDefault();
     event.stopPropagation();
-
     if (currentPreviewIndex > 0) {
@@ -142,7 +109,5 @@ setCurrent(previewUrlsKeys[currentPreviewIndex - 1]);
   };
-
   var onSwitchRight = function onSwitchRight(event) {
     event.preventDefault();
     event.stopPropagation();
-
     if (currentPreviewIndex < previewGroupCount - 1) {
@@ -152,27 +117,22 @@ setCurrent(previewUrlsKeys[currentPreviewIndex + 1]);
   };
-
   var onMouseUp = function onMouseUp() {
     if (visible && isMoving) {
       setMoving(false);
+
       /** No need to restore the position when the picture is not moved, So as not to interfere with the click */
-
       var _downPositionRef$curr = downPositionRef.current,
-          transformX = _downPositionRef$curr.transformX,
-          transformY = _downPositionRef$curr.transformY;
+        transformX = _downPositionRef$curr.transformX,
+        transformY = _downPositionRef$curr.transformY;
       var hasChangedPosition = transform.x !== transformX && transform.y !== transformY;
-
       if (!hasChangedPosition) {
         return;
       }
-
       var width = imgRef.current.offsetWidth * scale;
-      var height = imgRef.current.offsetHeight * scale; // eslint-disable-next-line @typescript-eslint/no-shadow
-
+      var height = imgRef.current.offsetHeight * scale;
+      // eslint-disable-next-line @typescript-eslint/no-shadow
       var _imgRef$current$getBo = imgRef.current.getBoundingClientRect(),
-          left = _imgRef$current$getBo.left,
-          top = _imgRef$current$getBo.top;
-
+        left = _imgRef$current$getBo.left,
+        top = _imgRef$current$getBo.top;
       var isRotate = rotate % 180 !== 0;
       var fixState = (0, _getFixScaleEleTransPosition.default)(isRotate ? height : width, isRotate ? width : height, left, top);
-
       if (fixState) {
@@ -183,3 +143,2 @@ updateTransform((0, _objectSpread2.default)({}, fixState));
   };
-
   var onMouseDown = function onMouseDown(event) {
@@ -198,3 +157,2 @@ // Only allow main button
   };
-
   var onMouseMove = function onMouseMove(event) {
@@ -208,22 +166,17 @@ if (visible && isMoving) {
   };
-
   var onWheel = function onWheel(event) {
-    if (!visible || event.deltaY == 0) return; // Scale ratio depends on the deltaY size
-
-    var scaleRatio = Math.abs(event.deltaY / 100); // Limit the maximum scale ratio
-
-    var mergedScaleRatio = Math.min(scaleRatio, _previewConfig.WHEEL_MAX_SCALE_RATIO); // Scale the ratio each time
-
+    if (!visible || event.deltaY == 0) return;
+    // Scale ratio depends on the deltaY size
+    var scaleRatio = Math.abs(event.deltaY / 100);
+    // Limit the maximum scale ratio
+    var mergedScaleRatio = Math.min(scaleRatio, _previewConfig.WHEEL_MAX_SCALE_RATIO);
+    // Scale the ratio each time
     var ratio = _previewConfig.BASE_SCALE_RATIO + mergedScaleRatio * scaleStep;
-
     if (event.deltaY > 0) {
       ratio = _previewConfig.BASE_SCALE_RATIO / ratio;
     }
-
     dispatchZoonChange(ratio, event.clientX, event.clientY);
   };
-
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (!visible || !showLeftOrRightSwitches) return;
-
     if (event.keyCode === _KeyCode.default.LEFT) {
@@ -239,3 +192,2 @@ if (currentPreviewIndex > 0) {
   }, [currentPreviewIndex, previewGroupCount, previewUrlsKeys, setCurrent, showLeftOrRightSwitches, visible]);
-
   var onDoubleClick = function onDoubleClick(event) {
@@ -254,3 +206,2 @@ if (visible) {
   };
-
   (0, _react.useEffect)(function () {
@@ -262,6 +213,4 @@ var onTopMouseUpListener;
     var onKeyDownListener = (0, _addEventListener.default)(window, 'keydown', onKeyDown, false);
-
     try {
       // Resolve if in iframe lost event
-
       /* istanbul ignore next */
@@ -276,6 +225,4 @@ if (window.top !== window.self) {
     }
-
     return function () {
       var _onTopMouseUpListener, _onTopMouseMoveListen;
-
       onMouseUpListener.remove();
@@ -285,6 +232,4 @@ onMouseMoveListener.remove();
       /* istanbul ignore next */
-
       (_onTopMouseUpListener = onTopMouseUpListener) === null || _onTopMouseUpListener === void 0 ? void 0 : _onTopMouseUpListener.remove();
       /* istanbul ignore next */
-
       (_onTopMouseMoveListen = onTopMouseMoveListener) === null || _onTopMouseMoveListen === void 0 ? void 0 : _onTopMouseMoveListen.remove();
@@ -342,4 +287,3 @@ };
 };
-
 var _default = Preview;
 exports.default = _default;

lib/previewConfig.js

@@ -7,17 +7,14 @@ "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;
+
 /** Scale the ratio base */
-
 exports.MAX_SCALE = MAX_SCALE;
 var BASE_SCALE_RATIO = 1;
 /** The maximum zoom ratio when the mouse zooms in, adjustable */
-
 exports.BASE_SCALE_RATIO = BASE_SCALE_RATIO;
 var WHEEL_MAX_SCALE_RATIO = 0.2;
 exports.WHEEL_MAX_SCALE_RATIO = WHEEL_MAX_SCALE_RATIO;

lib/PreviewGroup.d.ts

@@ -11,2 +11,3 @@ import * as React from 'react';
     countRender?: (current: number, total: number) => string;
+    onChange?: (current: number, prevCurrent: number) => void;
 }
@@ -13,0 +14,0 @@ export interface GroupConsumerProps {

lib/PreviewGroup.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,23 +9,12 @@ value: true
 exports.default = exports.context = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
+var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 var React = _interopRequireWildcard(require("react"));
-
-var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
-
 var _Preview = _interopRequireDefault(require("./Preview"));
-
-var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "countRender"];
-
+var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "countRender", "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); }
-
 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 */
@@ -58,47 +45,51 @@ var context = /*#__PURE__*/React.createContext({
 var Provider = context.Provider;
-
 var Group = function Group(_ref) {
   var _ref$previewPrefixCls = _ref.previewPrefixCls,
-      previewPrefixCls = _ref$previewPrefixCls === void 0 ? 'rc-image-preview' : _ref$previewPrefixCls,
-      children = _ref.children,
-      _ref$icons = _ref.icons,
-      icons = _ref$icons === void 0 ? {} : _ref$icons,
-      preview = _ref.preview;
-
+    previewPrefixCls = _ref$previewPrefixCls === void 0 ? 'rc-image-preview' : _ref$previewPrefixCls,
+    children = _ref.children,
+    _ref$icons = _ref.icons,
+    icons = _ref$icons === void 0 ? {} : _ref$icons,
+    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,
-      dialogProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-
+    _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,
+    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 _useState3 = (0, React.useState)(),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      current = _useState4[0],
-      setCurrent = _useState4[1];
-
-  var _useMergedState = (0, _useMergedState3.default)(!!previewVisible, {
-    value: previewVisible,
-    onChange: onPreviewVisibleChange
-  }),
-      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-      isShowPreview = _useMergedState2[0],
-      setShowPreview = _useMergedState2[1];
-
-  var _useState5 = (0, React.useState)(null),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      mousePosition = _useState6[0],
-      setMousePosition = _useState6[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    previewUrls = _useState2[0],
+    setPreviewUrls = _useState2[1];
+  var prevCurrent = React.useRef();
+  var _useMergedState = (0, _useMergedState5.default)(undefined, {
+      onChange: function onChange(val, prev) {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(val, prev);
+        prevCurrent.current = prev;
+      }
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    current = _useMergedState2[0],
+    setCurrent = _useMergedState2[1];
+  var _useMergedState3 = (0, _useMergedState5.default)(!!previewVisible, {
+      value: previewVisible,
+      onChange: function onChange(val, prevVal) {
+        onPreviewVisibleChange === null || onPreviewVisibleChange === void 0 ? void 0 : onPreviewVisibleChange(val, prevVal);
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(current, prevCurrent.current);
+      }
+    }),
+    _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
+    isShowPreview = _useMergedState4[0],
+    setShowPreview = _useMergedState4[1];
+  var _useState3 = (0, React.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    mousePosition = _useState4[0],
+    setMousePosition = _useState4[1];
   var isControlled = previewVisible !== undefined;
@@ -109,16 +100,12 @@ var previewUrlsKeys = Array.from(previewUrls.keys());
     var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-        canPreview = _ref4[1].canPreview;
-
+      canPreview = _ref4[1].canPreview;
     return !!canPreview;
   }).map(function (_ref5) {
     var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-        id = _ref6[0],
-        url = _ref6[1].url;
-
+      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() {
@@ -131,3 +118,2 @@ setPreviewUrls(function (oldPreviewUrls) {
     };
-
     setPreviewUrls(function (oldPreviewUrls) {
@@ -141,3 +127,2 @@ return new Map(oldPreviewUrls).set(id, {
   };
-
   var onPreviewClose = function onPreviewClose(e) {
@@ -148,3 +133,2 @@ e.stopPropagation();
   };
-
   React.useEffect(function () {
@@ -181,4 +165,3 @@ setCurrent(currentControlledKey);
 };
-
 var _default = Group;
 exports.default = _default;

package.json

 {
   "name": "rc-image",
-  "version": "5.13.0",
+  "version": "5.14.0",
   "description": "React easy to use image component",
@@ -62,3 +62,3 @@ "keywords": [
     "cross-env": "^7.0.2",
-    "dumi": "^1.1.4",
+    "dumi": "^2.1.4",
     "eslint": "^7.6.0",
@@ -65,0 +65,0 @@ "father": "^4.0.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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

106196

increased by0.57%

Lines of code

2484

increased by1.55%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes