@para-ui/core 4.0.22 → 4.0.24

package/Image/index.js

@@ -0,0 +1,1485 @@
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { useState, useRef, useEffect, useContext, useMemo } from 'react';
+import { i as warningOnce, d as wrapperRaf, _ as _objectSpread2, w as warning, c as clsx, P as Portal, K as KeyCode, b as _objectWithoutProperties, a as _extends, j as useMergedState } from '../_verture/Portal-5bd49559.js';
+import { _ as _defineProperty } from '../_verture/defineProperty-6f62bb2a.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
+import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
+import Dialog from 'rc-dialog';
+import ReactDOM from 'react-dom';
+import CSSMotion from 'rc-motion';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import Sort from '@para-ui/icons/Sort';
+import Switch from '@para-ui/icons/Switch';
+import TurnRight from '@para-ui/icons/TurnRight';
+import TurnLeft from '@para-ui/icons/TurnLeft';
+import MinusCircle from '@para-ui/icons/MinusCircle';
+import PlusCircle from '@para-ui/icons/PlusCircle';
+import LeftCircleF from '@para-ui/icons/LeftCircleF';
+import RightCircleF from '@para-ui/icons/RightCircleF';
+import CloseCircleF from '@para-ui/icons/CloseCircleF';
+import PreviewOpen from '@para-ui/icons/PreviewOpen';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+
+/* eslint-disable no-nested-ternary */
+function getClientSize() {
+  var width = document.documentElement.clientWidth;
+  var height = window.innerHeight || document.documentElement.clientHeight;
+  return {
+    width: width,
+    height: height
+  };
+}
+function getOffset(node) {
+  var box = node.getBoundingClientRect();
+  var docElem = document.documentElement;
+
+  // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft
+  return {
+    left: box.left + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || document.body.clientLeft || 0),
+    top: box.top + (window.pageYOffset || docElem.scrollTop) - (docElem.clientTop || document.body.clientTop || 0)
+  };
+}
+
+var COMMON_PROPS = ['crossOrigin', 'decoding', 'draggable', 'loading', 'referrerPolicy', 'sizes', 'srcSet', 'useMap', 'alt'];
+
+var PreviewGroupContext = /*#__PURE__*/React.createContext(null);
+
+var uid = 0;
+function useRegisterImage(canPreview, data) {
+  var _React$useState = React.useState(function () {
+      uid += 1;
+      return String(uid);
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 1),
+    id = _React$useState2[0];
+  var groupContext = React.useContext(PreviewGroupContext);
+  var registerData = {
+    data: data,
+    canPreview: canPreview
+  };
+
+  // Keep order start
+  // Resolve https://github.com/ant-design/ant-design/issues/28881
+  // Only need unRegister when component unMount
+  React.useEffect(function () {
+    if (groupContext) {
+      return groupContext.register(id, registerData);
+    }
+  }, []);
+  React.useEffect(function () {
+    if (groupContext) {
+      groupContext.register(id, registerData);
+    }
+  }, [canPreview, data]);
+  return id;
+}
+
+function isImageValid(src) {
+  return new Promise(function (resolve) {
+    var img = document.createElement('img');
+    img.onerror = function () {
+      return resolve(false);
+    };
+    img.onload = function () {
+      return resolve(true);
+    };
+    img.src = src;
+  });
+}
+
+function useStatus(_ref) {
+  var src = _ref.src,
+    isCustomPlaceholder = _ref.isCustomPlaceholder,
+    fallback = _ref.fallback;
+  var _useState = useState(isCustomPlaceholder ? 'loading' : 'normal'),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var isLoaded = useRef(false);
+  var isError = status === 'error';
+
+  // https://github.com/react-component/image/pull/187
+  useEffect(function () {
+    var isCurrentSrc = true;
+    isImageValid(src).then(function (isValid) {
+      // https://github.com/ant-design/ant-design/issues/44948
+      // If src changes, the previous setStatus should not be triggered
+      if (!isValid && isCurrentSrc) {
+        setStatus('error');
+      }
+    });
+    return function () {
+      isCurrentSrc = false;
+    };
+  }, [src]);
+  useEffect(function () {
+    if (isCustomPlaceholder && !isLoaded.current) {
+      setStatus('loading');
+    } else if (isError) {
+      setStatus('normal');
+    }
+  }, [src]);
+  var onLoad = function onLoad() {
+    setStatus('normal');
+  };
+  var getImgRef = function getImgRef(img) {
+    isLoaded.current = false;
+    if (status === 'loading' && img !== null && img !== void 0 && img.complete && (img.naturalWidth || img.naturalHeight)) {
+      isLoaded.current = true;
+      onLoad();
+    }
+  };
+  var srcAndOnload = isError && fallback ? {
+    src: fallback
+  } : {
+    onLoad: onLoad,
+    src: src
+  };
+  return [getImgRef, srcAndOnload, status];
+}
+
+function addEventListenerWrap(target, eventType, cb, option) {
+  /* eslint camelcase: 2 */
+  var callback = ReactDOM.unstable_batchedUpdates ? function run(e) {
+    ReactDOM.unstable_batchedUpdates(cb, e);
+  } : cb;
+  if (target !== null && target !== void 0 && target.addEventListener) {
+    target.addEventListener(eventType, callback, option);
+  }
+  return {
+    remove: function remove() {
+      if (target !== null && target !== void 0 && target.removeEventListener) {
+        target.removeEventListener(eventType, callback, option);
+      }
+    }
+  };
+}
+
+/**
+ * Deeply compares two object literals.
+ * @param obj1 object 1
+ * @param obj2 object 2
+ * @param shallow shallow compare
+ * @returns
+ */
+function isEqual(obj1, obj2) {
+  var shallow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  // https://github.com/mapbox/mapbox-gl-js/pull/5979/files#diff-fde7145050c47cc3a306856efd5f9c3016e86e859de9afbd02c879be5067e58f
+  var refSet = new Set();
+  function deepEqual(a, b) {
+    var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+    var circular = refSet.has(a);
+    warningOnce(!circular, 'Warning: There may be circular references');
+    if (circular) {
+      return false;
+    }
+    if (a === b) {
+      return true;
+    }
+    if (shallow && level > 1) {
+      return false;
+    }
+    refSet.add(a);
+    var newLevel = level + 1;
+    if (Array.isArray(a)) {
+      if (!Array.isArray(b) || a.length !== b.length) {
+        return false;
+      }
+      for (var i = 0; i < a.length; i++) {
+        if (!deepEqual(a[i], b[i], newLevel)) {
+          return false;
+        }
+      }
+      return true;
+    }
+    if (a && b && _typeof(a) === 'object' && _typeof(b) === 'object') {
+      var keys = Object.keys(a);
+      if (keys.length !== Object.keys(b).length) {
+        return false;
+      }
+      return keys.every(function (key) {
+        return deepEqual(a[key], b[key], newLevel);
+      });
+    }
+    // other
+    return false;
+  }
+  return deepEqual(obj1, obj2);
+}
+
+var initialTransform = {
+  x: 0,
+  y: 0,
+  rotate: 0,
+  scale: 1,
+  flipX: false,
+  flipY: false
+};
+function useImageTransform(imgRef, minScale, maxScale, onTransform) {
+  var frame = useRef(null);
+  var queue = useRef([]);
+  var _useState = useState(initialTransform),
+    _useState2 = _slicedToArray(_useState, 2),
+    transform = _useState2[0],
+    setTransform = _useState2[1];
+  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, action) {
+    if (frame.current === null) {
+      queue.current = [];
+      frame.current = wrapperRaf(function () {
+        setTransform(function (preState) {
+          var memoState = preState;
+          queue.current.forEach(function (queueState) {
+            memoState = _objectSpread2(_objectSpread2({}, memoState), queueState);
+          });
+          frame.current = null;
+          onTransform === null || onTransform === void 0 || onTransform({
+            transform: memoState,
+            action: action
+          });
+          return memoState;
+        });
+      });
+    }
+    queue.current.push(_objectSpread2(_objectSpread2({}, transform), newTransform));
+  };
+
+  /** Scale according to the position of centerX and centerY */
+  var dispatchZoomChange = function dispatchZoomChange(ratio, action, centerX, centerY, isTouch) {
+    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;
+    var newRatio = ratio;
+    var newScale = transform.scale * ratio;
+    if (newScale > maxScale) {
+      newScale = maxScale;
+      newRatio = maxScale / transform.scale;
+    } else if (newScale < minScale) {
+      // For mobile interactions, allow scaling down to the minimum scale.
+      newScale = isTouch ? newScale : minScale;
+      newRatio = newScale / transform.scale;
+    }
+
+    /** Default center point scaling */
+    var mergedCenterX = centerX !== null && centerX !== void 0 ? centerX : innerWidth / 2;
+    var mergedCenterY = centerY !== null && centerY !== void 0 ? centerY : innerHeight / 2;
+    var diffRatio = newRatio - 1;
+    /** 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 * (mergedCenterX - transform.x - offsetLeft);
+    var diffOffsetTop = diffRatio * (mergedCenterY - transform.y - offsetTop);
+    /** Final positioning */
+    var newX = transform.x - (diffOffsetLeft - diffImgX);
+    var newY = transform.y - (diffOffsetTop - diffImgY);
+
+    /**
+     * When zooming the image
+     * When the image size is smaller than the width and height of the window, the position is initialized
+     */
+    if (ratio < 1 && newScale === 1) {
+      var mergedWidth = offsetWidth * newScale;
+      var mergedHeight = offsetHeight * newScale;
+      var _getClientSize = getClientSize(),
+        clientWidth = _getClientSize.width,
+        clientHeight = _getClientSize.height;
+      if (mergedWidth <= clientWidth && mergedHeight <= clientHeight) {
+        newX = 0;
+        newY = 0;
+      }
+    }
+    updateTransform({
+      x: newX,
+      y: newY,
+      scale: newScale
+    }, action);
+  };
+  return {
+    transform: transform,
+    resetTransform: resetTransform,
+    updateTransform: updateTransform,
+    dispatchZoomChange: dispatchZoomChange
+  };
+}
+
+function fixPoint(key, start, width, clientWidth) {
+  var startAddWidth = start + width;
+  var offsetStart = (width - clientWidth) / 2;
+  if (width > clientWidth) {
+    if (start > 0) {
+      return _defineProperty({}, key, offsetStart);
+    }
+    if (start < 0 && startAddWidth < clientWidth) {
+      return _defineProperty({}, key, -offsetStart);
+    }
+  } else if (start < 0 || startAddWidth > clientWidth) {
+    return _defineProperty({}, key, start < 0 ? offsetStart : -offsetStart);
+  }
+  return {};
+}
+
+/**
+ * Fix positon x,y point when
+ *
+ * Ele width && height < client
+ * - Back origin
+ *
+ * - Ele width | height > clientWidth | clientHeight
+ * - left | top > 0 -> Back 0
+ * - left | top + width | height < clientWidth | clientHeight -> Back left | top + width | height === clientWidth | clientHeight
+ *
+ * Regardless of other
+ */
+function getFixScaleEleTransPosition(width, height, left, top) {
+  var _getClientSize = getClientSize(),
+    clientWidth = _getClientSize.width,
+    clientHeight = _getClientSize.height;
+  var fixPos = null;
+  if (width <= clientWidth && height <= clientHeight) {
+    fixPos = {
+      x: 0,
+      y: 0
+    };
+  } else if (width > clientWidth || height > clientHeight) {
+    fixPos = _objectSpread2(_objectSpread2({}, fixPoint('x', left, width, clientWidth)), fixPoint('y', top, height, clientHeight));
+  }
+  return fixPos;
+}
+
+/** Scale the ratio base */
+var BASE_SCALE_RATIO = 1;
+/** The maximum zoom ratio when the mouse zooms in, adjustable */
+var WHEEL_MAX_SCALE_RATIO = 1;
+
+function useMouseEvent(imgRef, movable, visible, scaleStep, transform, updateTransform, dispatchZoomChange) {
+  var rotate = transform.rotate,
+    scale = transform.scale,
+    x = transform.x,
+    y = transform.y;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMoving = _useState2[0],
+    setMoving = _useState2[1];
+  var startPositionInfo = useRef({
+    diffX: 0,
+    diffY: 0,
+    transformX: 0,
+    transformY: 0
+  });
+  var onMouseDown = function onMouseDown(event) {
+    // Only allow main button
+    if (!movable || event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    startPositionInfo.current = {
+      diffX: event.pageX - x,
+      diffY: event.pageY - y,
+      transformX: x,
+      transformY: y
+    };
+    setMoving(true);
+  };
+  var onMouseMove = function onMouseMove(event) {
+    if (visible && isMoving) {
+      updateTransform({
+        x: event.pageX - startPositionInfo.current.diffX,
+        y: event.pageY - startPositionInfo.current.diffY
+      }, 'move');
+    }
+  };
+  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 _startPositionInfo$cu = startPositionInfo.current,
+        transformX = _startPositionInfo$cu.transformX,
+        transformY = _startPositionInfo$cu.transformY;
+      var hasChangedPosition = x !== transformX && 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 _imgRef$current$getBo = imgRef.current.getBoundingClientRect(),
+        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) {
+        updateTransform(_objectSpread2({}, fixState), 'dragRebound');
+      }
+    }
+  };
+  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
+    var ratio = BASE_SCALE_RATIO + mergedScaleRatio * scaleStep;
+    if (event.deltaY > 0) {
+      ratio = BASE_SCALE_RATIO / ratio;
+    }
+    dispatchZoomChange(ratio, 'wheel', event.clientX, event.clientY);
+  };
+  useEffect(function () {
+    var onTopMouseUpListener;
+    var onTopMouseMoveListener;
+    var onMouseUpListener;
+    var onMouseMoveListener;
+    if (movable) {
+      onMouseUpListener = addEventListenerWrap(window, 'mouseup', onMouseUp, false);
+      onMouseMoveListener = addEventListenerWrap(window, 'mousemove', onMouseMove, false);
+      try {
+        // Resolve if in iframe lost event
+        /* istanbul ignore next */
+        if (window.top !== window.self) {
+          onTopMouseUpListener = addEventListenerWrap(window.top, 'mouseup', onMouseUp, false);
+          onTopMouseMoveListener = addEventListenerWrap(window.top, 'mousemove', onMouseMove, false);
+        }
+      } catch (error) {
+        /* istanbul ignore next */
+        warning(false, "[rc-image] ".concat(error));
+      }
+    }
+    return function () {
+      var _onMouseUpListener, _onMouseMoveListener, _onTopMouseUpListener, _onTopMouseMoveListen;
+      (_onMouseUpListener = onMouseUpListener) === null || _onMouseUpListener === void 0 || _onMouseUpListener.remove();
+      (_onMouseMoveListener = onMouseMoveListener) === null || _onMouseMoveListener === void 0 || _onMouseMoveListener.remove();
+      /* istanbul ignore next */
+      (_onTopMouseUpListener = onTopMouseUpListener) === null || _onTopMouseUpListener === void 0 || _onTopMouseUpListener.remove();
+      /* istanbul ignore next */
+      (_onTopMouseMoveListen = onTopMouseMoveListener) === null || _onTopMouseMoveListen === void 0 || _onTopMouseMoveListen.remove();
+    };
+  }, [visible, isMoving, x, y, rotate, movable]);
+  return {
+    isMoving: isMoving,
+    onMouseDown: onMouseDown,
+    onMouseMove: onMouseMove,
+    onMouseUp: onMouseUp,
+    onWheel: onWheel
+  };
+}
+
+function getDistance(a, b) {
+  var x = a.x - b.x;
+  var y = a.y - b.y;
+  return Math.hypot(x, y);
+}
+function getCenter(oldPoint1, oldPoint2, newPoint1, newPoint2) {
+  // Calculate the distance each point has moved
+  var distance1 = getDistance(oldPoint1, newPoint1);
+  var distance2 = getDistance(oldPoint2, newPoint2);
+
+  // If both distances are 0, return the original points
+  if (distance1 === 0 && distance2 === 0) {
+    return [oldPoint1.x, oldPoint1.y];
+  }
+
+  // Calculate the ratio of the distances
+  var ratio = distance1 / (distance1 + distance2);
+
+  // Calculate the new center point based on the ratio
+  var x = oldPoint1.x + ratio * (oldPoint2.x - oldPoint1.x);
+  var y = oldPoint1.y + ratio * (oldPoint2.y - oldPoint1.y);
+  return [x, y];
+}
+function useTouchEvent(imgRef, movable, visible, minScale, transform, updateTransform, dispatchZoomChange) {
+  var rotate = transform.rotate,
+    scale = transform.scale,
+    x = transform.x,
+    y = transform.y;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTouching = _useState2[0],
+    setIsTouching = _useState2[1];
+  var touchPointInfo = useRef({
+    point1: {
+      x: 0,
+      y: 0
+    },
+    point2: {
+      x: 0,
+      y: 0
+    },
+    eventType: 'none'
+  });
+  var updateTouchPointInfo = function updateTouchPointInfo(values) {
+    touchPointInfo.current = _objectSpread2(_objectSpread2({}, touchPointInfo.current), values);
+  };
+  var onTouchStart = function onTouchStart(event) {
+    if (!movable) return;
+    event.stopPropagation();
+    setIsTouching(true);
+    var _event$touches = event.touches,
+      touches = _event$touches === void 0 ? [] : _event$touches;
+    if (touches.length > 1) {
+      // touch zoom
+      updateTouchPointInfo({
+        point1: {
+          x: touches[0].clientX,
+          y: touches[0].clientY
+        },
+        point2: {
+          x: touches[1].clientX,
+          y: touches[1].clientY
+        },
+        eventType: 'touchZoom'
+      });
+    } else {
+      // touch move
+      updateTouchPointInfo({
+        point1: {
+          x: touches[0].clientX - x,
+          y: touches[0].clientY - y
+        },
+        eventType: 'move'
+      });
+    }
+  };
+  var onTouchMove = function onTouchMove(event) {
+    var _event$touches2 = event.touches,
+      touches = _event$touches2 === void 0 ? [] : _event$touches2;
+    var _touchPointInfo$curre = touchPointInfo.current,
+      point1 = _touchPointInfo$curre.point1,
+      point2 = _touchPointInfo$curre.point2,
+      eventType = _touchPointInfo$curre.eventType;
+    if (touches.length > 1 && eventType === 'touchZoom') {
+      // touch zoom
+      var newPoint1 = {
+        x: touches[0].clientX,
+        y: touches[0].clientY
+      };
+      var newPoint2 = {
+        x: touches[1].clientX,
+        y: touches[1].clientY
+      };
+      var _getCenter = getCenter(point1, point2, newPoint1, newPoint2),
+        _getCenter2 = _slicedToArray(_getCenter, 2),
+        centerX = _getCenter2[0],
+        centerY = _getCenter2[1];
+      var ratio = getDistance(newPoint1, newPoint2) / getDistance(point1, point2);
+      dispatchZoomChange(ratio, 'touchZoom', centerX, centerY, true);
+      updateTouchPointInfo({
+        point1: newPoint1,
+        point2: newPoint2,
+        eventType: 'touchZoom'
+      });
+    } else if (eventType === 'move') {
+      // touch move
+      updateTransform({
+        x: touches[0].clientX - point1.x,
+        y: touches[0].clientY - point1.y
+      }, 'move');
+      updateTouchPointInfo({
+        eventType: 'move'
+      });
+    }
+  };
+  var onTouchEnd = function onTouchEnd() {
+    if (!visible) return;
+    if (isTouching) {
+      setIsTouching(false);
+    }
+    updateTouchPointInfo({
+      eventType: 'none'
+    });
+    if (minScale > scale) {
+      /** When the scaling ratio is less than the minimum scaling ratio, reset the scaling ratio */
+      return updateTransform({
+        x: 0,
+        y: 0,
+        scale: minScale
+      }, 'touchZoom');
+    }
+    var width = imgRef.current.offsetWidth * scale;
+    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;
+    var isRotate = rotate % 180 !== 0;
+    var fixState = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, left, top);
+    if (fixState) {
+      updateTransform(_objectSpread2({}, fixState), 'dragRebound');
+    }
+  };
+  useEffect(function () {
+    var onTouchMoveListener;
+    if (visible && movable) {
+      onTouchMoveListener = addEventListenerWrap(window, 'touchmove', function (e) {
+        return e.preventDefault();
+      }, {
+        passive: false
+      });
+    }
+    return function () {
+      var _onTouchMoveListener;
+      (_onTouchMoveListener = onTouchMoveListener) === null || _onTouchMoveListener === void 0 || _onTouchMoveListener.remove();
+    };
+  }, [visible, movable]);
+  return {
+    isTouching: isTouching,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd
+  };
+}
+
+var Operations = function Operations(props) {
+  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,
+    transform = props.transform,
+    count = props.count,
+    scale = props.scale,
+    minScale = props.minScale,
+    maxScale = props.maxScale,
+    closeIcon = props.closeIcon,
+    onSwitchLeft = props.onSwitchLeft,
+    onSwitchRight = props.onSwitchRight,
+    onClose = props.onClose,
+    onZoomIn = props.onZoomIn,
+    onZoomOut = props.onZoomOut,
+    onRotateRight = props.onRotateRight,
+    onRotateLeft = props.onRotateLeft,
+    onFlipX = props.onFlipX,
+    onFlipY = props.onFlipY,
+    toolbarRender = props.toolbarRender,
+    zIndex = props.zIndex;
+  var groupContext = useContext(PreviewGroupContext);
+  var rotateLeft = icons.rotateLeft,
+    rotateRight = icons.rotateRight,
+    zoomIn = icons.zoomIn,
+    zoomOut = icons.zoomOut,
+    close = icons.close,
+    left = icons.left,
+    right = icons.right,
+    flipX = icons.flipX,
+    flipY = icons.flipY;
+  var toolClassName = "".concat(prefixCls, "-operations-operation");
+  React.useEffect(function () {
+    var onKeyDown = function onKeyDown(e) {
+      if (e.keyCode === KeyCode.ESC) {
+        onClose();
+      }
+    };
+    if (visible) {
+      window.addEventListener('keydown', onKeyDown);
+    }
+    return function () {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [visible]);
+  var tools = [{
+    icon: flipY,
+    onClick: onFlipY,
+    type: 'flipY'
+  }, {
+    icon: flipX,
+    onClick: onFlipX,
+    type: 'flipX'
+  }, {
+    icon: rotateLeft,
+    onClick: onRotateLeft,
+    type: 'rotateLeft'
+  }, {
+    icon: rotateRight,
+    onClick: onRotateRight,
+    type: 'rotateRight'
+  }, {
+    icon: zoomOut,
+    onClick: onZoomOut,
+    type: 'zoomOut',
+    disabled: scale <= minScale
+  }, {
+    icon: zoomIn,
+    onClick: onZoomIn,
+    type: 'zoomIn',
+    disabled: scale === maxScale
+  }];
+  var toolsNode = tools.map(function (_ref) {
+    var _classnames;
+    var icon = _ref.icon,
+      onClick = _ref.onClick,
+      type = _ref.type,
+      disabled = _ref.disabled;
+    return /*#__PURE__*/React.createElement("div", {
+      className: clsx(toolClassName, (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-operations-operation-").concat(type), true), _defineProperty(_classnames, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames)),
+      onClick: onClick,
+      key: type
+    }, icon);
+  });
+  var toolbarNode = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-operations")
+  }, toolsNode);
+  return /*#__PURE__*/React.createElement(CSSMotion, {
+    visible: visible,
+    motionName: maskTransitionName
+  }, function (_ref2) {
+    var className = _ref2.className,
+      style = _ref2.style;
+    return /*#__PURE__*/React.createElement(Portal, {
+      open: true,
+      getContainer: getContainer !== null && getContainer !== void 0 ? getContainer : document.body
+    }, /*#__PURE__*/React.createElement("div", {
+      className: clsx("".concat(prefixCls, "-operations-wrapper"), className, rootClassName),
+      style: _objectSpread2(_objectSpread2({}, style), {}, {
+        zIndex: zIndex
+      })
+    }, closeIcon === null ? null : /*#__PURE__*/React.createElement("button", {
+      className: "".concat(prefixCls, "-close"),
+      onClick: onClose
+    }, closeIcon || close), showSwitch && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: clsx("".concat(prefixCls, "-switch-left"), _defineProperty({}, "".concat(prefixCls, "-switch-left-disabled"), current === 0)),
+      onClick: onSwitchLeft
+    }, left), /*#__PURE__*/React.createElement("div", {
+      className: clsx("".concat(prefixCls, "-switch-right"), _defineProperty({}, "".concat(prefixCls, "-switch-right-disabled"), current === count - 1)),
+      onClick: onSwitchRight
+    }, right)), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-footer")
+    }, showProgress && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-progress")
+    }, countRender ? countRender(current + 1, count) : "".concat(current + 1, " / ").concat(count)), toolbarRender ? toolbarRender(toolbarNode, _objectSpread2({
+      icons: {
+        flipYIcon: toolsNode[0],
+        flipXIcon: toolsNode[1],
+        rotateLeftIcon: toolsNode[2],
+        rotateRightIcon: toolsNode[3],
+        zoomOutIcon: toolsNode[4],
+        zoomInIcon: toolsNode[5]
+      },
+      actions: {
+        onFlipY: onFlipY,
+        onFlipX: onFlipX,
+        onRotateLeft: onRotateLeft,
+        onRotateRight: onRotateRight,
+        onZoomOut: onZoomOut,
+        onZoomIn: onZoomIn
+      },
+      transform: transform
+    }, groupContext ? {
+      current: current,
+      total: count
+    } : {})) : toolbarNode)));
+  });
+};
+
+var _excluded$2 = ["fallback", "src", "imgRef"],
+  _excluded2$2 = ["prefixCls", "src", "alt", "fallback", "movable", "onClose", "visible", "icons", "rootClassName", "closeIcon", "getContainer", "current", "count", "countRender", "scaleStep", "minScale", "maxScale", "transitionName", "maskTransitionName", "imageRender", "imgCommonProps", "toolbarRender", "onTransform", "onChange"];
+var PreviewImage = function PreviewImage(_ref) {
+  var fallback = _ref.fallback,
+    src = _ref.src,
+    imgRef = _ref.imgRef,
+    props = _objectWithoutProperties(_ref, _excluded$2);
+  var _useStatus = useStatus({
+      src: src,
+      fallback: fallback
+    }),
+    _useStatus2 = _slicedToArray(_useStatus, 2),
+    getImgRef = _useStatus2[0],
+    srcAndOnload = _useStatus2[1];
+  return /*#__PURE__*/React__default.createElement("img", _extends({
+    ref: function ref(_ref2) {
+      imgRef.current = _ref2;
+      getImgRef(_ref2);
+    }
+  }, props, srcAndOnload));
+};
+var Preview = function Preview(props) {
+  var prefixCls = props.prefixCls,
+    src = props.src,
+    alt = props.alt,
+    fallback = props.fallback,
+    _props$movable = props.movable,
+    movable = _props$movable === void 0 ? true : _props$movable,
+    onClose = props.onClose,
+    visible = props.visible,
+    _props$icons = props.icons,
+    icons = _props$icons === void 0 ? {} : _props$icons,
+    rootClassName = props.rootClassName,
+    closeIcon = props.closeIcon,
+    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,
+    transitionName = _props$transitionName === void 0 ? 'zoom' : _props$transitionName,
+    _props$maskTransition = props.maskTransitionName,
+    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, _excluded2$2);
+  var imgRef = useRef();
+  var groupContext = useContext(PreviewGroupContext);
+  var showLeftOrRightSwitches = groupContext && count > 1;
+  var showOperationsProgress = groupContext && count >= 1;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    enableTransition = _useState2[0],
+    setEnableTransition = _useState2[1];
+  var _useImageTransform = useImageTransform(imgRef, minScale, maxScale, onTransform),
+    transform = _useImageTransform.transform,
+    resetTransform = _useImageTransform.resetTransform,
+    updateTransform = _useImageTransform.updateTransform,
+    dispatchZoomChange = _useImageTransform.dispatchZoomChange;
+  var _useMouseEvent = useMouseEvent(imgRef, movable, visible, scaleStep, transform, updateTransform, dispatchZoomChange),
+    isMoving = _useMouseEvent.isMoving,
+    onMouseDown = _useMouseEvent.onMouseDown,
+    onWheel = _useMouseEvent.onWheel;
+  var _useTouchEvent = useTouchEvent(imgRef, movable, visible, minScale, transform, updateTransform, dispatchZoomChange),
+    isTouching = _useTouchEvent.isTouching,
+    onTouchStart = _useTouchEvent.onTouchStart,
+    onTouchMove = _useTouchEvent.onTouchMove,
+    onTouchEnd = _useTouchEvent.onTouchEnd;
+  var rotate = transform.rotate,
+    scale = transform.scale;
+  var wrapClassName = clsx(_defineProperty({}, "".concat(prefixCls, "-moving"), isMoving));
+  useEffect(function () {
+    if (!enableTransition) {
+      setEnableTransition(true);
+    }
+  }, [enableTransition]);
+  var onAfterClose = function onAfterClose() {
+    resetTransform('close');
+  };
+  var onZoomIn = function onZoomIn() {
+    dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, 'zoomIn');
+  };
+  var onZoomOut = function onZoomOut() {
+    dispatchZoomChange(BASE_SCALE_RATIO / (BASE_SCALE_RATIO + scaleStep), 'zoomOut');
+  };
+  var onRotateRight = function onRotateRight() {
+    updateTransform({
+      rotate: rotate + 90
+    }, 'rotateRight');
+  };
+  var onRotateLeft = function onRotateLeft() {
+    updateTransform({
+      rotate: rotate - 90
+    }, 'rotateLeft');
+  };
+  var onFlipX = function onFlipX() {
+    updateTransform({
+      flipX: !transform.flipX
+    }, 'flipX');
+  };
+  var onFlipY = function onFlipY() {
+    updateTransform({
+      flipY: !transform.flipY
+    }, 'flipY');
+  };
+  var onSwitchLeft = function onSwitchLeft(event) {
+    event === null || event === void 0 || event.preventDefault();
+    event === null || event === void 0 || event.stopPropagation();
+    if (current > 0) {
+      setEnableTransition(false);
+      resetTransform('prev');
+      onChange === null || onChange === void 0 || onChange(current - 1, current);
+    }
+  };
+  var onSwitchRight = function onSwitchRight(event) {
+    event === null || event === void 0 || event.preventDefault();
+    event === null || event === void 0 || event.stopPropagation();
+    if (current < count - 1) {
+      setEnableTransition(false);
+      resetTransform('next');
+      onChange === null || onChange === void 0 || onChange(current + 1, current);
+    }
+  };
+  var onKeyDown = function onKeyDown(event) {
+    if (!visible || !showLeftOrRightSwitches) return;
+    if (event.keyCode === KeyCode.LEFT) {
+      onSwitchLeft();
+    } else if (event.keyCode === KeyCode.RIGHT) {
+      onSwitchRight();
+    }
+  };
+  var onDoubleClick = function onDoubleClick(event) {
+    if (visible) {
+      if (scale !== 1) {
+        updateTransform({
+          x: 0,
+          y: 0,
+          scale: 1
+        }, 'doubleClick');
+      } else {
+        dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, 'doubleClick', event.clientX, event.clientY);
+      }
+    }
+  };
+  useEffect(function () {
+    var onKeyDownListener = addEventListenerWrap(window, 'keydown', onKeyDown, false);
+    return function () {
+      onKeyDownListener.remove();
+    };
+  }, [visible, showLeftOrRightSwitches, current]);
+  var imgNode = /*#__PURE__*/React__default.createElement(PreviewImage, _extends({}, imgCommonProps, {
+    width: props.width,
+    height: props.height,
+    imgRef: imgRef,
+    className: "".concat(prefixCls, "-img"),
+    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 || isTouching) && '0s'
+    },
+    fallback: fallback,
+    src: src,
+    onWheel: onWheel,
+    onMouseDown: onMouseDown,
+    onDoubleClick: onDoubleClick,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    onTouchCancel: onTouchEnd
+  }));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Dialog, _extends({
+    transitionName: transitionName,
+    maskTransitionName: maskTransitionName,
+    closable: false,
+    keyboard: true,
+    prefixCls: prefixCls,
+    onClose: onClose,
+    visible: visible,
+    classNames: {
+      wrapper: wrapClassName
+    },
+    rootClassName: rootClassName,
+    getContainer: getContainer
+  }, restProps, {
+    afterClose: onAfterClose
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefixCls, "-img-wrapper")
+  }, imageRender ? imageRender(imgNode, _objectSpread2({
+    transform: transform
+  }, groupContext ? {
+    current: current
+  } : {})) : imgNode)), /*#__PURE__*/React__default.createElement(Operations, {
+    visible: visible,
+    transform: transform,
+    maskTransitionName: maskTransitionName,
+    closeIcon: closeIcon,
+    getContainer: getContainer,
+    prefixCls: prefixCls,
+    rootClassName: rootClassName,
+    icons: icons,
+    countRender: countRender,
+    showSwitch: showLeftOrRightSwitches,
+    showProgress: showOperationsProgress,
+    current: current,
+    count: count,
+    scale: scale,
+    minScale: minScale,
+    maxScale: maxScale,
+    toolbarRender: toolbarRender,
+    onSwitchLeft: onSwitchLeft,
+    onSwitchRight: onSwitchRight,
+    onZoomIn: onZoomIn,
+    onZoomOut: onZoomOut,
+    onRotateRight: onRotateRight,
+    onRotateLeft: onRotateLeft,
+    onFlipX: onFlipX,
+    onFlipY: onFlipY,
+    onClose: onClose,
+    zIndex: restProps.zIndex !== undefined ? restProps.zIndex + 1 : undefined
+  }));
+};
+
+/**
+ * Merge props provided `items` or context collected images
+ */
+function usePreviewItems(items) {
+  // Context collection image data
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    images = _React$useState2[0],
+    setImages = _React$useState2[1];
+  var registerImage = React.useCallback(function (id, data) {
+    setImages(function (imgs) {
+      return _objectSpread2(_objectSpread2({}, imgs), {}, _defineProperty({}, id, data));
+    });
+    return function () {
+      setImages(function (imgs) {
+        var cloneImgs = _objectSpread2({}, imgs);
+        delete cloneImgs[id];
+        return cloneImgs;
+      });
+    };
+  }, []);
+
+  // items
+  var mergedItems = React.useMemo(function () {
+    if (items) {
+      return items.map(function (item) {
+        if (typeof item === 'string') {
+          return {
+            data: {
+              src: item
+            }
+          };
+        }
+        var data = {};
+        Object.keys(item).forEach(function (key) {
+          if (['src'].concat(_toConsumableArray(COMMON_PROPS)).includes(key)) {
+            data[key] = item[key];
+          }
+        });
+        return {
+          data: data
+        };
+      });
+    }
+    return Object.keys(images).reduce(function (total, id) {
+      var _images$id = images[id],
+        canPreview = _images$id.canPreview,
+        data = _images$id.data;
+      if (canPreview) {
+        total.push({
+          data: data,
+          id: id
+        });
+      }
+      return total;
+    }, []);
+  }, [items, images]);
+  return [mergedItems, registerImage];
+}
+
+var _excluded$1 = ["visible", "onVisibleChange", "getContainer", "current", "movable", "minScale", "maxScale", "countRender", "closeIcon", "onChange", "onTransform", "toolbarRender", "imageRender"],
+  _excluded2$1 = ["src"];
+var Group = function Group(_ref) {
+  var _mergedItems$current;
+  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,
+    items = _ref.items,
+    preview = _ref.preview,
+    fallback = _ref.fallback;
+  var _ref2 = _typeof(preview) === 'object' ? preview : {},
+    previewVisible = _ref2.visible,
+    onVisibleChange = _ref2.onVisibleChange,
+    getContainer = _ref2.getContainer,
+    currentIndex = _ref2.current,
+    movable = _ref2.movable,
+    minScale = _ref2.minScale,
+    maxScale = _ref2.maxScale,
+    countRender = _ref2.countRender,
+    closeIcon = _ref2.closeIcon,
+    onChange = _ref2.onChange,
+    onTransform = _ref2.onTransform,
+    toolbarRender = _ref2.toolbarRender,
+    imageRender = _ref2.imageRender,
+    dialogProps = _objectWithoutProperties(_ref2, _excluded$1);
+
+  // ========================== Items ===========================
+  var _usePreviewItems = usePreviewItems(items),
+    _usePreviewItems2 = _slicedToArray(_usePreviewItems, 2),
+    mergedItems = _usePreviewItems2[0],
+    register = _usePreviewItems2[1];
+
+  // ========================= Preview ==========================
+  // >>> Index
+  var _useMergedState = useMergedState(0, {
+      value: currentIndex
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    current = _useMergedState2[0],
+    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$1);
+  // >>> Visible
+  var _useMergedState3 = useMergedState(!!previewVisible, {
+      value: previewVisible,
+      onChange: function onChange(val, prevVal) {
+        onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(val, prevVal, current);
+      }
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    isShowPreview = _useMergedState4[0],
+    setShowPreview = _useMergedState4[1];
+
+  // >>> Position
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mousePosition = _useState4[0],
+    setMousePosition = _useState4[1];
+  var onPreviewFromImage = React.useCallback(function (id, mouseX, mouseY) {
+    var index = mergedItems.findIndex(function (item) {
+      return item.id === id;
+    });
+    setShowPreview(true);
+    setMousePosition({
+      x: mouseX,
+      y: mouseY
+    });
+    setCurrent(index < 0 ? 0 : index);
+    setKeepOpenIndex(true);
+  }, [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 || onChange(next, prev);
+  };
+  var onPreviewClose = function onPreviewClose() {
+    setShowPreview(false);
+    setMousePosition(null);
+  };
+
+  // ========================= 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({
+    "aria-hidden": !isShowPreview,
+    movable: movable,
+    visible: isShowPreview,
+    prefixCls: previewPrefixCls,
+    closeIcon: closeIcon,
+    onClose: onPreviewClose,
+    mousePosition: mousePosition,
+    imgCommonProps: imgCommonProps,
+    src: src,
+    fallback: fallback,
+    icons: icons,
+    minScale: minScale,
+    maxScale: maxScale,
+    getContainer: getContainer,
+    current: current,
+    count: mergedItems.length,
+    countRender: countRender,
+    onTransform: onTransform,
+    toolbarRender: toolbarRender,
+    imageRender: imageRender,
+    onChange: onInternalChange
+  }, dialogProps)));
+};
+
+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", "movable", "icons", "scaleStep", "minScale", "maxScale", "imageRender", "toolbarRender"];
+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 _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,
+    movable = _ref.movable,
+    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 _useMergedState = useMergedState(!!previewVisible, {
+      value: previewVisible,
+      onChange: onPreviewVisibleChange
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    isShowPreview = _useMergedState2[0],
+    setShowPreview = _useMergedState2[1];
+  var _useStatus = useStatus({
+      src: imgSrc,
+      isCustomPlaceholder: isCustomPlaceholder,
+      fallback: fallback
+    }),
+    _useStatus2 = _slicedToArray(_useStatus, 3),
+    getImgRef = _useStatus2[0],
+    srcAndOnload = _useStatus2[1],
+    status = _useStatus2[2];
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    mousePosition = _useState2[0],
+    setMousePosition = _useState2[1];
+  var groupContext = useContext(PreviewGroupContext);
+  var canPreview = !!preview;
+  var onPreviewClose = function onPreviewClose() {
+    setShowPreview(false);
+    setMousePosition(null);
+  };
+  var wrapperClass = clsx(prefixCls, wrapperClassName, rootClassName, _defineProperty({}, "".concat(prefixCls, "-error"), status === 'error'));
+
+  // ========================= 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 _objectSpread2(_objectSpread2({}, 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 || onClick(e);
+  };
+
+  // =========================== Render ===========================
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, otherProps, {
+    className: wrapperClass,
+    onClick: canPreview ? onPreview : onClick,
+    style: _objectSpread2({
+      width: width,
+      height: height
+    }, wrapperStyle)
+  }), /*#__PURE__*/React.createElement("img", _extends({}, imgCommonProps, {
+    className: clsx("".concat(prefixCls, "-img"), _defineProperty({}, "".concat(prefixCls, "-img-placeholder"), placeholder === true), className),
+    style: _objectSpread2({
+      height: height
+    }, style),
+    ref: getImgRef
+  }, srcAndOnload, {
+    width: width,
+    height: height,
+    onError: onError
+  })), status === 'loading' && /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: "".concat(prefixCls, "-placeholder")
+  }, placeholder), previewMask && canPreview && /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-mask"), maskClassName),
+    style: {
+      display: (style === null || style === void 0 ? void 0 : style.display) === 'none' ? 'none' : undefined
+    }
+  }, previewMask)), !groupContext && canPreview && /*#__PURE__*/React.createElement(Preview, _extends({
+    "aria-hidden": !isShowPreview,
+    visible: isShowPreview,
+    prefixCls: previewPrefixCls,
+    onClose: onPreviewClose,
+    mousePosition: mousePosition,
+    src: src,
+    alt: alt,
+    fallback: fallback,
+    getContainer: getPreviewContainer,
+    icons: icons,
+    movable: movable,
+    scaleStep: scaleStep,
+    minScale: minScale,
+    maxScale: maxScale,
+    rootClassName: rootClassName,
+    imageRender: imageRender,
+    imgCommonProps: imgCommonProps,
+    toolbarRender: toolbarRender
+  }, dialogProps)));
+};
+ImageInternal.PreviewGroup = Group;
+ImageInternal.displayName = 'Image';
+
+const icons = {
+  rotateLeft: jsx(TurnLeft, {
+    size: 'large'
+  }),
+  rotateRight: jsx(TurnRight, {
+    size: 'large'
+  }),
+  zoomIn: jsx(PlusCircle, {
+    size: 'large'
+  }),
+  zoomOut: jsx(MinusCircle, {
+    size: 'large'
+  }),
+  close: jsx(CloseCircleF, {
+    size: 'large'
+  }),
+  left: jsx(LeftCircleF, {}),
+  right: jsx(RightCircleF, {}),
+  flipX: jsx(Switch, {
+    size: 'large'
+  }),
+  flipY: jsx(Sort, {
+    size: 'large'
+  })
+};
+const InternalPreviewGroup = _a => {
+  var {
+      previewPrefixCls: customizePrefixCls,
+      preview,
+      children = null
+    } = _a,
+    props = __rest(_a, ["previewPrefixCls", "preview", "children"]);
+  const imagePrefixCls = "".concat($prefixCls, "-image");
+  const previewPrefixCls = "".concat(imagePrefixCls, "-preview");
+  const mergedPreview = React.useMemo(() => {
+    var _a;
+    if (preview === false) {
+      return preview;
+    }
+    const _preview = typeof preview === 'object' ? preview : {};
+    const mergedRootClassName = clsx((_a = _preview.rootClassName) !== null && _a !== void 0 ? _a : '');
+    return Object.assign(Object.assign({}, _preview), {
+      rootClassName: mergedRootClassName
+    });
+  }, [preview]);
+  return jsx(ImageInternal.PreviewGroup, Object.assign({
+    preview: mergedPreview,
+    previewPrefixCls: previewPrefixCls,
+    icons: icons
+  }, props, {
+    children: children
+  }));
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-image {\n  display: inline-flex;\n  position: relative;\n}\n.paraui-v4-image-img {\n  width: 100%;\n  height: auto;\n}\n.paraui-v4-image-img-placeholder {\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjggMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1LjIgKDc4MTgxKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5pbWFnZS1maWxs5aSH5Lu9PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Iuafpeeci+WbvueJh+S8mOWMljQuMCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IuWKoOi9veWbvueJhyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU3Mi4wMDAwMDAsIC01MDYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJpbWFnZS1maWxs5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NzAuMDAwMDAwLCA1MDEuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjMDAwMDAwIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yOSw1IEwzLDUgQzIuNDQ2ODc1LDUgMiw1LjQ0Njg3NSAyLDYgTDIsMjYgQzIsMjYuNTUzMTI1IDIuNDQ2ODc1LDI3IDMsMjcgTDI5LDI3IEMyOS41NTMxMjUsMjcgMzAsMjYuNTUzMTI1IDMwLDI2IEwzMCw2IEMzMCw1LjQ0Njg3NSAyOS41NTMxMjUsNSAyOSw1IFogTTEwLjU2MjUsOS41IEMxMS42NjU2MjUsOS41IDEyLjU2MjUsMTAuMzk2ODc1IDEyLjU2MjUsMTEuNSBDMTIuNTYyNSwxMi42MDMxMjUgMTEuNjY1NjI1LDEzLjUgMTAuNTYyNSwxMy41IEM5LjQ1OTM3NSwxMy41IDguNTYyNSwxMi42MDMxMjUgOC41NjI1LDExLjUgQzguNTYyNSwxMC4zOTY4NzUgOS40NTkzNzUsOS41IDEwLjU2MjUsOS41IFogTTI2LjYyMTg3NSwyMy4xNTkzNzUgQzI2LjU3ODEyNSwyMy4xOTY4NzUgMjYuNTE4NzUsMjMuMjE4NzUgMjYuNDU5Mzc1LDIzLjIxODc1IEw1LjUzNzUsMjMuMjE4NzUgQzUuNCwyMy4yMTg3NSA1LjI4NzUsMjMuMTA2MjUgNS4yODc1LDIyLjk2ODc1IEM1LjI4NzUsMjIuOTA5Mzc1IDUuMzA5Mzc1LDIyLjg1MzEyNSA1LjM0Njg3NSwyMi44MDYyNSBMMTAuNjY4NzUsMTYuNDkzNzUgQzEwLjc1NjI1LDE2LjM4NzUgMTAuOTE1NjI1LDE2LjM3NSAxMS4wMjE4NzUsMTYuNDYyNSBDMTEuMDMxMjUsMTYuNDcxODc1IDExLjA0Mzc1LDE2LjQ4MTI1IDExLjA1MzEyNSwxNi40OTM3NSBMMTQuMTU5Mzc1LDIwLjE4MTI1IEwxOS4xLDE0LjMyMTg3NSBDMTkuMTg3NSwxNC4yMTU2MjUgMTkuMzQ2ODc1LDE0LjIwMzEyNSAxOS40NTMxMjUsMTQuMjkwNjI1IEMxOS40NjI1LDE0LjMgMTkuNDc1LDE0LjMwOTM3NSAxOS40ODQzNzUsMTQuMzIxODc1IEwyNi42NTkzNzUsMjIuODA5Mzc1IEMyNi43NDA2MjUsMjIuOTEyNSAyNi43MjgxMjUsMjMuMDcxODc1IDI2LjYyMTg3NSwyMy4xNTkzNzUgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRThFOEU4Ij48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);\n}\n.paraui-v4-image-placeholder {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n.paraui-v4-image-mask {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  opacity: 0;\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  transition: opacity 0.3s;\n}\n.paraui-v4-image:hover .paraui-v4-image-mask {\n  opacity: 1;\n}\n.paraui-v4-image-preview {\n  text-align: center;\n  height: 100%;\n  pointer-events: none;\n}\n.paraui-v4-image-preview-body {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: hidden;\n}\n.paraui-v4-image-preview.zoom-enter, .paraui-v4-image-preview.zoom-appear {\n  transform: none;\n  opacity: 0;\n  animation-duration: 0.3s;\n}\n.paraui-v4-image-preview-mask {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 100%;\n  background-color: rgba(29, 33, 38, 0.4);\n}\n.paraui-v4-image-preview-mask-hidden {\n  display: none;\n}\n.paraui-v4-image-preview-img {\n  cursor: grab;\n  transform: scale3d(1, 1, 1);\n  transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;\n  user-select: none;\n  vertical-align: middle;\n  max-width: 100%;\n  max-height: 70%;\n}\n.paraui-v4-image-preview-img-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-image-preview-img-wrapper > * {\n  pointer-events: auto;\n}\n.paraui-v4-image-preview-moving .paraui-v4-image-preview-img {\n  cursor: grabbing;\n}\n.paraui-v4-image-preview-moving .paraui-v4-image-preview-img-wrapper {\n  transition-duration: 0s;\n}\n.paraui-v4-image-preview-wrap {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  overflow: auto;\n  outline: 0;\n  -webkit-overflow-scrolling: touch;\n}\n.paraui-v4-image-preview-close {\n  position: fixed;\n  top: 30px;\n  right: 30px;\n  display: flex;\n  background-color: transparent;\n  outline: 0;\n  border: 0;\n  cursor: pointer;\n}\n.paraui-v4-image-preview-close svg {\n  color: rgba(255, 255, 255, 0.5);\n  font-size: 50px;\n}\n.paraui-v4-image-preview-close:hover svg {\n  color: rgba(255, 255, 255, 0.3);\n}\n.paraui-v4-image-preview-operations-wrapper {\n  position: fixed;\n  z-index: 1001;\n}\n.paraui-v4-image-preview-footer {\n  position: fixed;\n  z-index: 1001;\n  bottom: 32px;\n  left: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.paraui-v4-image-preview-progress {\n  margin-bottom: 20px;\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-image-preview-operations {\n  display: flex;\n  background: rgba(29, 33, 38, 0.9);\n  border-radius: 4px;\n  padding: 0 8px;\n}\n.paraui-v4-image-preview-operations-operation {\n  padding: 8px;\n  cursor: pointer;\n}\n.paraui-v4-image-preview-operations-operation svg {\n  color: rgb(255, 255, 255);\n  transition: all 0.3s;\n  font-size: 24px;\n  vertical-align: top;\n}\n.paraui-v4-image-preview-operations-operation:hover svg {\n  background-color: rgba(255, 255, 255, 0.3);\n  border-radius: 2px;\n}\n.paraui-v4-image-preview-operations-operation-disabled {\n  pointer-events: none;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-image-preview-operations-operation-disabled svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-image-preview-operations-operation:first-of-type {\n  margin-left: 0;\n}\n.paraui-v4-image-preview-switch-left, .paraui-v4-image-preview-switch-right {\n  width: 30px;\n  height: 30px;\n  margin-top: -15px;\n  top: 50%;\n  position: fixed;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1001;\n  cursor: pointer;\n}\n.paraui-v4-image-preview-switch-left-disabled svg:hover, .paraui-v4-image-preview-switch-right-disabled svg:hover {\n  color: rgba(29, 33, 38, 0.4);\n}\n.paraui-v4-image-preview-switch-left svg, .paraui-v4-image-preview-switch-right svg {\n  font-size: 50px;\n  color: rgba(255, 255, 255, 0.5);\n}\n.paraui-v4-image-preview-switch-left svg:hover, .paraui-v4-image-preview-switch-right svg:hover {\n  color: rgba(255, 255, 255, 0.3);\n}\n.paraui-v4-image-preview-switch-left-disabled, .paraui-v4-image-preview-switch-right-disabled {\n  cursor: not-allowed;\n}\n.paraui-v4-image-preview-switch-left-disabled > .anticon, .paraui-v4-image-preview-switch-right-disabled > .anticon {\n  cursor: not-allowed;\n}\n.paraui-v4-image-preview-switch-left > .anticon, .paraui-v4-image-preview-switch-right > .anticon {\n  font-size: 30px;\n}\n.paraui-v4-image-preview-switch-left {\n  left: 40px;\n}\n.paraui-v4-image-preview-switch-right {\n  position: fixed;\n  right: 40px;\n}\n\n.fade-enter,\n.fade-appear {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.fade-leave {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.fade-enter.fade-enter-active,\n.fade-appear.fade-appear-active {\n  animation-name: rcImageFadeIn;\n  animation-play-state: running;\n}\n\n.fade-leave.fade-leave-active {\n  animation-name: rcImageFadeOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.fade-enter,\n.fade-appear {\n  opacity: 0;\n  animation-timing-function: linear;\n}\n\n.fade-leave {\n  animation-timing-function: linear;\n}\n\n@keyframes rcImageFadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes rcImageFadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n.zoom-enter,\n.zoom-appear {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.zoom-leave {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.zoom-enter.zoom-enter-active,\n.zoom-appear.zoom-appear-active {\n  animation-name: rcImageZoomIn;\n  animation-play-state: running;\n}\n\n.zoom-leave.zoom-leave-active {\n  animation-name: rcImageZoomOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.zoom-enter,\n.zoom-appear {\n  transform: scale(0);\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n}\n\n.zoom-leave {\n  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);\n}\n\n@keyframes rcImageZoomIn {\n  0% {\n    transform: scale(0.2);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes rcImageZoomOut {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.2);\n    opacity: 0;\n  }\n}";
+styleInject(css_248z);
+
+const imagePrefixCls = "".concat($prefixCls, "-image");
+const Image = props => {
+  const {
+      prefixCls: customizePrefixCls,
+      preview,
+      className,
+      rootClassName,
+      style = {}
+    } = props,
+    otherProps = __rest(props, ["prefixCls", "preview", "className", "rootClassName", "style"]);
+  const mergedPreview = React.useMemo(() => {
+    if (preview === false) {
+      return preview;
+    }
+    const _preview = typeof preview === 'object' ? preview : {};
+    const {
+        getContainer
+      } = _preview,
+      restPreviewProps = __rest(_preview, ["getContainer"]);
+    return Object.assign(Object.assign({
+      mask: jsx("div", Object.assign({
+        className: "".concat(imagePrefixCls, "-mask-info")
+      }, {
+        children: jsx(PreviewOpen, {
+          size: 'large'
+        })
+      })),
+      icons
+    }, restPreviewProps), {
+      getContainer: getContainer
+    });
+  }, [preview]);
+  const mergedClassName = clsx(className);
+  const mergedRootClassName = clsx(rootClassName);
+  return jsx(ImageInternal, Object.assign({
+    rootClassName: mergedRootClassName,
+    prefixCls: imagePrefixCls,
+    preview: mergedPreview,
+    className: mergedClassName,
+    style: Object.assign({}, style)
+  }, otherProps));
+};
+Image.PreviewGroup = InternalPreviewGroup;
+
+export { Image as default };