yet-another-react-lightbox - npm Package Compare versions

Comparing version 1.11.0 to 1.11.1

dist/plugins/Zoom.js

@@ -176,7 +176,25 @@ import * as React from "react";
     }, []);
+    const changeZoom = React.useCallback((value, rapid, dx, dy) => {
+        const { current } = refs;
+        const { state: { zoom }, containerRef, containerRect, maxZoom, } = current;
+        if (!containerRef.current || !containerRect)
+            return;
+        const newZoom = round(Math.min(Math.max(value + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
+        if (newZoom === zoom)
+            return;
+        if (!rapid) {
+            current.zoomAnimationStart = window.getComputedStyle(containerRef.current).transform;
+        }
+        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
+        setState((prev) => ({ ...prev, zoom: newZoom }));
+    }, [changeOffsets]);
     useLayoutEffect(() => {
         if (refs.current.state.zoom > 1) {
+            const { maxZoom, state: { zoom: currentZoom }, } = refs.current;
+            if (currentZoom > maxZoom) {
+                changeZoom(maxZoom, true);
+            }
             changeOffsets();
         }
-    }, [currentControllerRect.width, currentControllerRect.height, changeOffsets]);
+    }, [currentControllerRect.width, currentControllerRect.height, changeOffsets, changeZoom]);
     useLayoutEffect(() => {
@@ -231,16 +249,2 @@ var _a, _b;
     }, [offset, state.zoom, currentMaxZoom, isMinZoom, isMaxZoom, setIsMinZoom, setIsMaxZoom]);
-    const changeZoom = React.useCallback((value, rapid, dx, dy) => {
-        const { current } = refs;
-        const { state: { zoom }, containerRef, containerRect, maxZoom, } = current;
-        if (!containerRef.current || !containerRect)
-            return;
-        const newZoom = round(Math.min(Math.max(value + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
-        if (newZoom === zoom)
-            return;
-        if (!rapid) {
-            current.zoomAnimationStart = window.getComputedStyle(containerRef.current).transform;
-        }
-        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
-        setState((prev) => ({ ...prev, zoom: newZoom }));
-    }, [changeOffsets]);
     const translateCoordinates = React.useCallback((event) => {
@@ -258,5 +262,9 @@ const { controllerRef } = refs.current;
         const { state: { zoom }, zoomProps: { keyboardMoveDistance, zoomInMultiplier }, } = refs.current;
+        const preventDefault = () => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
         if (zoom > 1) {
             const move = (deltaX, deltaY) => {
-                event.stopPropagation();
+                preventDefault();
                 changeOffsets(deltaX, deltaY);
@@ -277,10 +285,15 @@ };
         }
-        if (event.key === "+" || (event.key === "=" && event.metaKey)) {
-            changeZoom(zoom * zoomInMultiplier);
+        const handleChangeZoom = (zoomValue) => {
+            preventDefault();
+            changeZoom(zoomValue);
+        };
+        const hasMeta = () => event.getModifierState("Meta") || event.getModifierState("OS");
+        if (event.key === "+" || (event.key === "=" && hasMeta())) {
+            handleChangeZoom(zoom * zoomInMultiplier);
         }
-        else if (event.key === "-" || (event.key === "_" && event.metaKey)) {
-            changeZoom(zoom / zoomInMultiplier);
+        else if (event.key === "-" || (event.key === "_" && hasMeta())) {
+            handleChangeZoom(zoom / zoomInMultiplier);
         }
-        else if (event.key === "0" && event.metaKey) {
-            changeZoom(1);
+        else if (event.key === "0" && hasMeta()) {
+            handleChangeZoom(1);
         }
@@ -287,0 +300,0 @@ }, [changeZoom, changeOffsets]);

package.json

 {
     "name": "yet-another-react-lightbox",
-    "version": "1.11.0",
+    "version": "1.11.1",
     "description": "Modern React lightbox component",
@@ -99,10 +99,10 @@ "author": "Igor Danchenko",
         "@testing-library/react": "^13.3.0",
-        "@testing-library/user-event": "^14.2.3",
-        "@types/jest": "^28.1.5",
+        "@testing-library/user-event": "^14.3.0",
+        "@types/jest": "^28.1.6",
         "@types/react": "^18.0.15",
         "@types/react-dom": "^18.0.6",
-        "@typescript-eslint/eslint-plugin": "^5.30.6",
-        "@typescript-eslint/parser": "^5.30.6",
-        "autoprefixer": "^10.4.7",
-        "eslint": "^8.19.0",
+        "@typescript-eslint/eslint-plugin": "^5.31.0",
+        "@typescript-eslint/parser": "^5.31.0",
+        "autoprefixer": "^10.4.8",
+        "eslint": "^8.20.0",
         "eslint-config-airbnb": "^19.0.4",
@@ -112,3 +112,3 @@ "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsx-a11y": "^6.6.0",
+        "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-prettier": "^4.2.1",
@@ -128,4 +128,4 @@ "eslint-plugin-react": "^7.30.1",
         "rimraf": "^3.0.2",
-        "sass": "^1.53.0",
-        "ts-jest": "^28.0.6",
+        "sass": "^1.54.0",
+        "ts-jest": "^28.0.7",
         "typescript": "^4.7.4"
@@ -132,0 +132,0 @@ },

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

158505

increased by0.33%

Lines of code

3268

increased by0.4%

Number of versions

133

increased by0.76%

Published versions last months

1

increased byInfinity%

Published versions last two months

2

increased by100%

Published versions last week

1

increased byInfinity%

Worsened metrics

Number of downloads

105026

decreased by-0.14%

No dependency changes