rc-image - npm Package Compare versions

Comparing version 7.0.0 to 7.1.0

es/hooks/useImageTransform.d.ts

 /// <reference types="react" />
-export declare type TransformType = {
+export type TransformType = {
     x: number;
@@ -10,3 +10,3 @@ y: number;
 };
-export declare type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound';
+export type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound';
 export default function useImageTransform(imgRef: React.MutableRefObject<HTMLImageElement>, minScale: number, maxScale: number, onTransform: (info: {
@@ -13,0 +13,0 @@ transform: TransformType;

es/hooks/usePreviewItems.d.ts

 import type { InternalItem, RegisterImage } from '../interface';
 import type { GroupConsumerProps } from '../PreviewGroup';
-export declare type Items = Omit<InternalItem, 'canPreview'>[];
+export type Items = Omit<InternalItem, 'canPreview'>[];
 /**
@@ -5,0 +5,0 @@ * Merge props provided `items` or context collected images

es/hooks/useStatus.d.ts

@@ -1,2 +0,2 @@
-declare type ImageStatus = 'normal' | 'error' | 'loading';
+type ImageStatus = 'normal' | 'error' | 'loading';
 export default function useStatus({ src, isCustomPlaceholder, fallback, }: {
@@ -3,0 +3,0 @@ src: string;

es/Image.d.ts

@@ -18,2 +18,3 @@ import type { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
     scaleStep?: number;
+    movable?: boolean;
     imageRender?: (originalNode: React.ReactNode, info: {
@@ -20,0 +21,0 @@ transform: TransformType;

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"],
-  _excluded2 = ["src", "visible", "onVisibleChange", "getContainer", "mask", "maskClassName", "icons", "scaleStep", "minScale", "maxScale", "imageRender", "toolbarRender"];
+  _excluded2 = ["src", "visible", "onVisibleChange", "getContainer", "mask", "maskClassName", "movable", "icons", "scaleStep", "minScale", "maxScale", "imageRender", "toolbarRender"];
 import cn from 'classnames';
@@ -54,2 +54,3 @@ import { getOffset } from "rc-util/es/Dom/css";
     maskClassName = _ref.maskClassName,
+    movable = _ref.movable,
     icons = _ref.icons,
@@ -166,2 +167,3 @@ scaleStep = _ref.scaleStep,
     icons: icons,
+    movable: movable,
     scaleStep: scaleStep,
@@ -168,0 +170,0 @@ minScale: minScale,

es/interface.d.ts

@@ -5,11 +5,11 @@ /// <reference types="react" />
  */
-export declare type ImageElementProps = Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'crossOrigin' | 'decoding' | 'draggable' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap' | 'alt'>;
-export declare type PreviewImageElementProps = {
+export type ImageElementProps = Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'crossOrigin' | 'decoding' | 'draggable' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap' | 'alt'>;
+export type PreviewImageElementProps = {
     data: ImageElementProps;
     canPreview: boolean;
 };
-export declare type InternalItem = PreviewImageElementProps & {
+export type InternalItem = PreviewImageElementProps & {
     id?: string;
 };
-export declare type RegisterImage = (id: string, data: PreviewImageElementProps) => VoidFunction;
-export declare type OnGroupPreview = (id: string, mouseX: number, mouseY: number) => void;
+export type RegisterImage = (id: string, data: PreviewImageElementProps) => VoidFunction;
+export type OnGroupPreview = (id: string, mouseX: number, mouseY: number) => void;

es/Preview.d.ts

 import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
 import React from 'react';
 import type { TransformAction, TransformType } from './hooks/useImageTransform';
-export declare type ToolbarRenderInfoType = {
+export type ToolbarRenderInfoType = {
     icons: {
@@ -30,2 +30,3 @@ flipYIcon: React.ReactNode;
     fallback?: string;
+    movable?: boolean;
     rootClassName?: string;
@@ -32,0 +33,0 @@ icons?: {

es/Preview.js

@@ -7,3 +7,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 var _excluded = ["fallback", "src", "imgRef"],
-  _excluded2 = ["prefixCls", "src", "alt", "fallback", "onClose", "visible", "icons", "rootClassName", "closeIcon", "getContainer", "current", "count", "countRender", "scaleStep", "minScale", "maxScale", "transitionName", "maskTransitionName", "imageRender", "imgCommonProps", "toolbarRender", "onTransform", "onChange"];
+  _excluded2 = ["prefixCls", "src", "alt", "fallback", "movable", "onClose", "visible", "icons", "rootClassName", "closeIcon", "getContainer", "current", "count", "countRender", "scaleStep", "minScale", "maxScale", "transitionName", "maskTransitionName", "imageRender", "imgCommonProps", "toolbarRender", "onTransform", "onChange"];
 import classnames from 'classnames';
@@ -45,2 +45,4 @@ import Dialog from 'rc-dialog';
     fallback = props.fallback,
+    _props$movable = props.movable,
+    movable = _props$movable === void 0 ? true : _props$movable,
     onClose = props.onClose,
@@ -180,3 +182,3 @@ visible = props.visible,
     // Only allow main button
-    if (event.button !== 0) return;
+    if (!movable || event.button !== 0) return;
     event.preventDefault();
@@ -237,19 +239,23 @@ event.stopPropagation();
     var onTopMouseMoveListener;
-    var onMouseUpListener = addEventListener(window, 'mouseup', onMouseUp, false);
-    var 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);
+    var onMouseUpListener;
+    var 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] ".concat(error));
       }
-    } catch (error) {
-      /* istanbul ignore next */
-      warning(false, "[rc-image] ".concat(error));
     }
     return function () {
-      var _onTopMouseUpListener, _onTopMouseMoveListen;
-      onMouseUpListener.remove();
-      onMouseMoveListener.remove();
+      var _onMouseUpListener, _onMouseMoveListener, _onTopMouseUpListener, _onTopMouseMoveListen;
+      (_onMouseUpListener = onMouseUpListener) === null || _onMouseUpListener === void 0 ? void 0 : _onMouseUpListener.remove();
+      (_onMouseMoveListener = onMouseMoveListener) === null || _onMouseMoveListener === void 0 ? void 0 : _onMouseMoveListener.remove();
       /* istanbul ignore next */
@@ -260,3 +266,3 @@ (_onTopMouseUpListener = onTopMouseUpListener) === null || _onTopMouseUpListener === void 0 ? void 0 : _onTopMouseUpListener.remove();
     };
-  }, [visible, isMoving, x, y, rotate]);
+  }, [visible, isMoving, x, y, rotate, movable]);
   useEffect(function () {
@@ -263,0 +269,0 @@ var onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);

es/PreviewGroup.js

@@ -5,3 +5,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "minScale", "maxScale", "countRender", "closeIcon", "onChange", "onTransform", "toolbarRender", "imageRender"],
+var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "movable", "minScale", "maxScale", "countRender", "closeIcon", "onChange", "onTransform", "toolbarRender", "imageRender"],
   _excluded2 = ["src"];
@@ -29,2 +29,3 @@ import useMergedState from "rc-util/es/hooks/useMergedState";
     currentIndex = _ref2.current,
+    movable = _ref2.movable,
     minScale = _ref2.minScale,
@@ -126,2 +127,3 @@ maxScale = _ref2.maxScale,
     "aria-hidden": !isShowPreview,
+    movable: movable,
     visible: isShowPreview,
@@ -128,0 +130,0 @@ prefixCls: previewPrefixCls,

lib/hooks/useImageTransform.d.ts

 /// <reference types="react" />
-export declare type TransformType = {
+export type TransformType = {
     x: number;
@@ -10,3 +10,3 @@ y: number;
 };
-export declare type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound';
+export type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound';
 export default function useImageTransform(imgRef: React.MutableRefObject<HTMLImageElement>, minScale: number, maxScale: number, onTransform: (info: {
@@ -13,0 +13,0 @@ transform: TransformType;

lib/hooks/usePreviewItems.d.ts

 import type { InternalItem, RegisterImage } from '../interface';
 import type { GroupConsumerProps } from '../PreviewGroup';
-export declare type Items = Omit<InternalItem, 'canPreview'>[];
+export type Items = Omit<InternalItem, 'canPreview'>[];
 /**
@@ -5,0 +5,0 @@ * Merge props provided `items` or context collected images

lib/hooks/useStatus.d.ts

@@ -1,2 +0,2 @@
-declare type ImageStatus = 'normal' | 'error' | 'loading';
+type ImageStatus = 'normal' | 'error' | 'loading';
 export default function useStatus({ src, isCustomPlaceholder, fallback, }: {
@@ -3,0 +3,0 @@ src: string;

lib/Image.d.ts

@@ -18,2 +18,3 @@ import type { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
     scaleStep?: number;
+    movable?: boolean;
     imageRender?: (originalNode: React.ReactNode, info: {
@@ -20,0 +21,0 @@ transform: TransformType;

lib/Image.js

@@ -26,3 +26,3 @@ "use strict";
 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", "icons", "scaleStep", "minScale", "maxScale", "imageRender", "toolbarRender"];
+  _excluded2 = ["src", "visible", "onVisibleChange", "getContainer", "mask", "maskClassName", "movable", "icons", "scaleStep", "minScale", "maxScale", "imageRender", "toolbarRender"];
 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); }
@@ -63,2 +63,3 @@ 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; }
     maskClassName = _ref.maskClassName,
+    movable = _ref.movable,
     icons = _ref.icons,
@@ -175,2 +176,3 @@ scaleStep = _ref.scaleStep,
     icons: icons,
+    movable: movable,
     scaleStep: scaleStep,
@@ -177,0 +179,0 @@ minScale: minScale,

lib/interface.d.ts

@@ -5,11 +5,11 @@ /// <reference types="react" />
  */
-export declare type ImageElementProps = Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'crossOrigin' | 'decoding' | 'draggable' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap' | 'alt'>;
-export declare type PreviewImageElementProps = {
+export type ImageElementProps = Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'crossOrigin' | 'decoding' | 'draggable' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap' | 'alt'>;
+export type PreviewImageElementProps = {
     data: ImageElementProps;
     canPreview: boolean;
 };
-export declare type InternalItem = PreviewImageElementProps & {
+export type InternalItem = PreviewImageElementProps & {
     id?: string;
 };
-export declare type RegisterImage = (id: string, data: PreviewImageElementProps) => VoidFunction;
-export declare type OnGroupPreview = (id: string, mouseX: number, mouseY: number) => void;
+export type RegisterImage = (id: string, data: PreviewImageElementProps) => VoidFunction;
+export type OnGroupPreview = (id: string, mouseX: number, mouseY: number) => void;

lib/Preview.d.ts

 import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
 import React from 'react';
 import type { TransformAction, TransformType } from './hooks/useImageTransform';
-export declare type ToolbarRenderInfoType = {
+export type ToolbarRenderInfoType = {
     icons: {
@@ -30,2 +30,3 @@ flipYIcon: React.ReactNode;
     fallback?: string;
+    movable?: boolean;
     rootClassName?: string;
@@ -32,0 +33,0 @@ icons?: {

lib/Preview.js

@@ -27,3 +27,3 @@ "use strict";
 var _excluded = ["fallback", "src", "imgRef"],
-  _excluded2 = ["prefixCls", "src", "alt", "fallback", "onClose", "visible", "icons", "rootClassName", "closeIcon", "getContainer", "current", "count", "countRender", "scaleStep", "minScale", "maxScale", "transitionName", "maskTransitionName", "imageRender", "imgCommonProps", "toolbarRender", "onTransform", "onChange"];
+  _excluded2 = ["prefixCls", "src", "alt", "fallback", "movable", "onClose", "visible", "icons", "rootClassName", "closeIcon", "getContainer", "current", "count", "countRender", "scaleStep", "minScale", "maxScale", "transitionName", "maskTransitionName", "imageRender", "imgCommonProps", "toolbarRender", "onTransform", "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); }
@@ -55,2 +55,4 @@ 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; }
     fallback = props.fallback,
+    _props$movable = props.movable,
+    movable = _props$movable === void 0 ? true : _props$movable,
     onClose = props.onClose,
@@ -190,3 +192,3 @@ visible = props.visible,
     // Only allow main button
-    if (event.button !== 0) return;
+    if (!movable || event.button !== 0) return;
     event.preventDefault();
@@ -247,19 +249,23 @@ event.stopPropagation();
     var onTopMouseMoveListener;
-    var onMouseUpListener = (0, _addEventListener.default)(window, 'mouseup', onMouseUp, false);
-    var onMouseMoveListener = (0, _addEventListener.default)(window, 'mousemove', onMouseMove, false);
-    try {
-      // Resolve if in iframe lost event
-      /* istanbul ignore next */
-      if (window.top !== window.self) {
-        onTopMouseUpListener = (0, _addEventListener.default)(window.top, 'mouseup', onMouseUp, false);
-        onTopMouseMoveListener = (0, _addEventListener.default)(window.top, 'mousemove', onMouseMove, false);
+    var onMouseUpListener;
+    var onMouseMoveListener;
+    if (movable) {
+      onMouseUpListener = (0, _addEventListener.default)(window, 'mouseup', onMouseUp, false);
+      onMouseMoveListener = (0, _addEventListener.default)(window, 'mousemove', onMouseMove, false);
+      try {
+        // Resolve if in iframe lost event
+        /* istanbul ignore next */
+        if (window.top !== window.self) {
+          onTopMouseUpListener = (0, _addEventListener.default)(window.top, 'mouseup', onMouseUp, false);
+          onTopMouseMoveListener = (0, _addEventListener.default)(window.top, 'mousemove', onMouseMove, false);
+        }
+      } catch (error) {
+        /* istanbul ignore next */
+        (0, _warning.warning)(false, "[rc-image] ".concat(error));
       }
-    } catch (error) {
-      /* istanbul ignore next */
-      (0, _warning.warning)(false, "[rc-image] ".concat(error));
     }
     return function () {
-      var _onTopMouseUpListener, _onTopMouseMoveListen;
-      onMouseUpListener.remove();
-      onMouseMoveListener.remove();
+      var _onMouseUpListener, _onMouseMoveListener, _onTopMouseUpListener, _onTopMouseMoveListen;
+      (_onMouseUpListener = onMouseUpListener) === null || _onMouseUpListener === void 0 ? void 0 : _onMouseUpListener.remove();
+      (_onMouseMoveListener = onMouseMoveListener) === null || _onMouseMoveListener === void 0 ? void 0 : _onMouseMoveListener.remove();
       /* istanbul ignore next */
@@ -270,3 +276,3 @@ (_onTopMouseUpListener = onTopMouseUpListener) === null || _onTopMouseUpListener === void 0 ? void 0 : _onTopMouseUpListener.remove();
     };
-  }, [visible, isMoving, x, y, rotate]);
+  }, [visible, isMoving, x, y, rotate, movable]);
   (0, _react.useEffect)(function () {
@@ -273,0 +279,0 @@ var onKeyDownListener = (0, _addEventListener.default)(window, 'keydown', onKeyDown, false);

lib/PreviewGroup.js

@@ -18,3 +18,3 @@ "use strict";
 var _Preview = _interopRequireDefault(require("./Preview"));
-var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "minScale", "maxScale", "countRender", "closeIcon", "onChange", "onTransform", "toolbarRender", "imageRender"],
+var _excluded = ["visible", "onVisibleChange", "getContainer", "current", "movable", "minScale", "maxScale", "countRender", "closeIcon", "onChange", "onTransform", "toolbarRender", "imageRender"],
   _excluded2 = ["src"];
@@ -38,2 +38,3 @@ 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); }
     currentIndex = _ref2.current,
+    movable = _ref2.movable,
     minScale = _ref2.minScale,
@@ -135,2 +136,3 @@ maxScale = _ref2.maxScale,
     "aria-hidden": !isShowPreview,
+    movable: movable,
     visible: isShowPreview,
@@ -137,0 +139,0 @@ prefixCls: previewPrefixCls,

package.json

 {
   "name": "rc-image",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "React easy to use image component",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -83,2 +83,3 @@ # rc-image
 | src | string | - | Customize preview src |
+| movable | boolean | true | Enable drag |
 | scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
@@ -124,2 +125,3 @@ | minScale | number | 1 | Min scale |
 | visible | boolean | - | Whether the preview is open or not |
+| movable | boolean | true | Enable drag |
 | current | number | - | Current index |
@@ -126,0 +128,0 @@ | closeIcon | React.ReactNode | - | Custom close icon |

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

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

138339

increased by0.88%

Lines of code

3166

increased by0.76%

Number of lines in readme file

222

increased by0.91%

No dependency changes