From 02b5de6700c4f8889296b16b0061d734ac42a9fb Mon Sep 17 00:00:00 2001
From: daisy <47104575+linxianxi@users.noreply.github.com>
Date: Wed, 26 Jul 2023 15:20:00 +0800
Subject: [PATCH] feat: support movable (#271)

---
 README.md            |  2 ++
 src/Image.tsx        |  3 +++
 src/Preview.tsx      | 40 +++++++++++++++++++++++-----------------
 src/PreviewGroup.tsx |  2 ++
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index c29fdea..c4b2db0 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,7 @@ export default () => (
 | visible | boolean | - | Whether the preview is open or not |
 | closeIcon | React.ReactNode | - | Custom close icon |
 | src | string | - | Customize preview src |
+| movable | boolean | true | Enable drag |
 | scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
 | minScale | number | 1 | Min scale |
 | maxScale | number | 50 | Max scale |
@@ -120,6 +121,7 @@ export default () => (
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | visible | boolean | - | Whether the preview is open or not |
+| movable | boolean | true | Enable drag |
 | current | number | - | Current index |
 | closeIcon | React.ReactNode | - | Custom close icon |
 | scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
diff --git a/src/Image.tsx b/src/Image.tsx
index 380e895..f1eefd9 100644
--- a/src/Image.tsx
+++ b/src/Image.tsx
@@ -30,6 +30,7 @@ export interface ImagePreviewType
   maskClassName?: string;
   icons?: PreviewProps['icons'];
   scaleStep?: number;
+  movable?: boolean;
   imageRender?: (
     originalNode: React.ReactNode,
     info: { transform: TransformType },
@@ -96,6 +97,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     getContainer: getPreviewContainer = undefined,
     mask: previewMask,
     maskClassName,
+    movable,
     icons,
     scaleStep,
     minScale,
@@ -234,6 +236,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           fallback={fallback}
           getContainer={getPreviewContainer}
           icons={icons}
+          movable={movable}
           scaleStep={scaleStep}
           minScale={minScale}
           maxScale={maxScale}
diff --git a/src/Preview.tsx b/src/Preview.tsx
index 177666a..6856e76 100644
--- a/src/Preview.tsx
+++ b/src/Preview.tsx
@@ -40,6 +40,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
   src?: string;
   alt?: string;
   fallback?: string;
+  movable?: boolean;
   rootClassName?: string;
   icons?: {
     rotateLeft?: React.ReactNode;
@@ -98,6 +99,7 @@ const Preview: React.FC<PreviewProps> = props => {
     src,
     alt,
     fallback,
+    movable = true,
     onClose,
     visible,
     icons = {},
@@ -229,7 +231,7 @@ const Preview: React.FC<PreviewProps> = props => {
 
   const onMouseDown: React.MouseEventHandler<HTMLDivElement> = event => {
     // Only allow main button
-    if (event.button !== 0) return;
+    if (!movable || event.button !== 0) return;
     event.preventDefault();
     event.stopPropagation();
     downPositionRef.current = {
@@ -295,31 +297,35 @@ const Preview: React.FC<PreviewProps> = props => {
   useEffect(() => {
     let onTopMouseUpListener;
     let onTopMouseMoveListener;
-
-    const onMouseUpListener = addEventListener(window, 'mouseup', onMouseUp, false);
-    const onMouseMoveListener = addEventListener(window, 'mousemove', onMouseMove, false);
-
-    try {
-      // Resolve if in iframe lost event
-      /* istanbul ignore next */
-      if (window.top !== window.self) {
-        onTopMouseUpListener = addEventListener(window.top, 'mouseup', onMouseUp, false);
-        onTopMouseMoveListener = addEventListener(window.top, 'mousemove', onMouseMove, false);
+    let onMouseUpListener;
+    let onMouseMoveListener;
+
+    if (movable) {
+      onMouseUpListener = addEventListener(window, 'mouseup', onMouseUp, false);
+      onMouseMoveListener = addEventListener(window, 'mousemove', onMouseMove, false);
+
+      try {
+        // Resolve if in iframe lost event
+        /* istanbul ignore next */
+        if (window.top !== window.self) {
+          onTopMouseUpListener = addEventListener(window.top, 'mouseup', onMouseUp, false);
+          onTopMouseMoveListener = addEventListener(window.top, 'mousemove', onMouseMove, false);
+        }
+      } catch (error) {
+        /* istanbul ignore next */
+        warning(false, `[rc-image] ${error}`);
       }
-    } catch (error) {
-      /* istanbul ignore next */
-      warning(false, `[rc-image] ${error}`);
     }
 
     return () => {
-      onMouseUpListener.remove();
-      onMouseMoveListener.remove();
+      onMouseUpListener?.remove();
+      onMouseMoveListener?.remove();
       /* istanbul ignore next */
       onTopMouseUpListener?.remove();
       /* istanbul ignore next */
       onTopMouseMoveListener?.remove();
     };
-  }, [visible, isMoving, x, y, rotate]);
+  }, [visible, isMoving, x, y, rotate, movable]);
 
   useEffect(() => {
     const onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);
diff --git a/src/PreviewGroup.tsx b/src/PreviewGroup.tsx
index 7d9ad7a..3150b7f 100644
--- a/src/PreviewGroup.tsx
+++ b/src/PreviewGroup.tsx
@@ -51,6 +51,7 @@ const Group: React.FC<GroupConsumerProps> = ({
     onVisibleChange,
     getContainer,
     current: currentIndex,
+    movable,
     minScale,
     maxScale,
     countRender,
@@ -133,6 +134,7 @@ const Group: React.FC<GroupConsumerProps> = ({
       {children}
       <Preview
         aria-hidden={!isShowPreview}
+        movable={movable}
         visible={isShowPreview}
         prefixCls={previewPrefixCls}
         closeIcon={closeIcon}