chore: rename to movable

README.md

@@ -80,7 +80,7 @@ export default () => (
 | visible | boolean | - | Whether the preview is open or not |
 | closeIcon | React.ReactNode | - | Custom close icon |
 | src | string | - | Customize preview src |
-| draggable | boolean | true | Enable drag |
+| 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 |
@@ -121,7 +121,7 @@ export default () => (
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | visible | boolean | - | Whether the preview is open or not |
-| draggable | boolean | true | Enable drag |
+| 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,7 +30,7 @@ export interface ImagePreviewType
   maskClassName?: string;
   icons?: PreviewProps['icons'];
   scaleStep?: number;
-  draggable?: boolean;
+  movable?: boolean;
   imageRender?: (
     originalNode: React.ReactNode,
     info: { transform: TransformType },
@@ -97,7 +97,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     getContainer: getPreviewContainer = undefined,
     mask: previewMask,
     maskClassName,
-    draggable,
+    movable,
     icons,
     scaleStep,
     minScale,
@@ -236,7 +236,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           fallback={fallback}
           getContainer={getPreviewContainer}
           icons={icons}
-          draggable={draggable}
+          movable={movable}
           scaleStep={scaleStep}
           minScale={minScale}
           maxScale={maxScale}

src/Preview.tsx

@@ -40,7 +40,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
   src?: string;
   alt?: string;
   fallback?: string;
-  draggable?: boolean;
+  movable?: boolean;
   rootClassName?: string;
   icons?: {
     rotateLeft?: React.ReactNode;
@@ -99,7 +99,7 @@ const Preview: React.FC<PreviewProps> = props => {
     src,
     alt,
     fallback,
-    draggable = true,
+    movable = true,
     onClose,
     visible,
     icons = {},
@@ -231,7 +231,7 @@ const Preview: React.FC<PreviewProps> = props => {
 
   const onMouseDown: React.MouseEventHandler<HTMLDivElement> = event => {
     // Only allow main button
-    if (!draggable || event.button !== 0) return;
+    if (!movable || event.button !== 0) return;
     event.preventDefault();
     event.stopPropagation();
     downPositionRef.current = {
@@ -300,7 +300,7 @@ const Preview: React.FC<PreviewProps> = props => {
     let onMouseUpListener;
     let onMouseMoveListener;
 
-    if (draggable) {
+    if (movable) {
       onMouseUpListener = addEventListener(window, 'mouseup', onMouseUp, false);
       onMouseMoveListener = addEventListener(window, 'mousemove', onMouseMove, false);
 
@@ -325,7 +325,7 @@ const Preview: React.FC<PreviewProps> = props => {
       /* istanbul ignore next */
       onTopMouseMoveListener?.remove();
     };
-  }, [visible, isMoving, x, y, rotate, draggable]);
+  }, [visible, isMoving, x, y, rotate, movable]);
 
   useEffect(() => {
     const onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);

src/PreviewGroup.tsx

@@ -51,7 +51,7 @@ const Group: React.FC<GroupConsumerProps> = ({
     onVisibleChange,
     getContainer,
     current: currentIndex,
-    draggable,
+    movable,
     minScale,
     maxScale,
     countRender,
@@ -134,7 +134,7 @@ const Group: React.FC<GroupConsumerProps> = ({
       {children}
       <Preview
         aria-hidden={!isShowPreview}
-        draggable={draggable}
+        movable={movable}
         visible={isShowPreview}
         prefixCls={previewPrefixCls}
         closeIcon={closeIcon}

src/common.ts

@@ -3,7 +3,7 @@ import type { ImageElementProps } from './interface';
 export const COMMON_PROPS: (keyof Omit<ImageElementProps, 'src'>)[] = [
   'crossOrigin',
   'decoding',
-  'draggable',
+  'movable',
   'loading',
   'referrerPolicy',
   'sizes',

src/interface.ts

@@ -6,7 +6,7 @@ export type ImageElementProps = Pick<
   | 'src'
   | 'crossOrigin'
   | 'decoding'
-  | 'draggable'
+  | 'movable'
   | 'loading'
   | 'referrerPolicy'
   | 'sizes'