feat: support movable (#271)

Author: linxianxi

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 |

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}

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);

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}