yet-another-react-lightbox-lite 1.5.0 → 1.6.1

package/README.md

@@ -418,6 +418,24 @@ Type: `string`
 CSS class of the lightbox root element. You can use this class name to provide
 module-scoped style overrides.
 
+### zoom
+
+Type: `object`
+
+Zoom settings.
+
+- `disabled` - disable zoom on image slides
+- `supports` - zoom-enabled custom slide types
+
+Usage example:
+
+```tsx
+<Lightbox
+  zoom={{ supports: ["custom-slide-type"] }}
+  // ...
+/>
+```
+
 ## Custom Slide Attributes
 
 You can add custom slide attributes with the following module augmentation.

package/dist/index.d.ts

@@ -127,6 +127,8 @@ interface ControllerSettings {
 }
 /** Zoom settings */
 interface ZoomSettings {
+    /** disable zoom on image slides */
+    disabled?: boolean;
     /** zoom-enabled custom slide types */
     supports?: SlideTypeKey[];
 }

package/dist/index.js

@@ -95,7 +95,7 @@ function Zoom({ children }) {
     const [rect, setRect] = useState();
     const observer = useRef();
     const carouselRef = useRef(null);
-    const { index, slides, zoom: { supports } = {} } = useLightboxContext();
+    const { index, slides, zoom: { supports, disabled } = {} } = useLightboxContext();
     const [prevIndex, setPrevIndex] = useState(index);
     if (index !== prevIndex) {
         setZoom(1);
@@ -104,7 +104,7 @@ function Zoom({ children }) {
         setPrevIndex(index);
     }
     const slide = slides[index];
-    const maxZoom = isImageSlide(slide) || (supports || []).includes(slide.type) ? 8 : 1;
+    const maxZoom = (isImageSlide(slide) && !disabled) || (supports || []).includes(slide.type) ? 8 : 1;
     useLayoutEffect(() => {
         const carouselHalfWidth = (rect?.width || 0) / 2;
         const carouselHalfHeight = (rect?.height || 0) / 2;
@@ -272,38 +272,39 @@ function useSensors() {
     };
     return useMemo(() => {
         const onKeyDown = (event) => {
-            const meta = event.getModifierState("Meta");
+            const { key, metaKey, ctrlKey } = event;
+            const meta = metaKey || ctrlKey;
             const preventDefault = () => event.preventDefault();
             const handleChangeZoom = (newZoom) => {
                 preventDefault();
                 changeZoom(newZoom);
             };
-            if (event.key === "+" || (meta && event.key === "="))
+            if (key === "+" || (meta && key === "="))
                 handleChangeZoom(zoom * KEYBOARD_ZOOM_FACTOR);
-            if (event.key === "-" || (meta && event.key === "_"))
+            if (key === "-" || (meta && key === "_"))
                 handleChangeZoom(zoom / KEYBOARD_ZOOM_FACTOR);
-            if (meta && event.key === "0")
+            if (meta && key === "0")
                 handleChangeZoom(1);
-            if (event.key === "Escape")
+            if (key === "Escape")
                 close();
             if (zoom > 1) {
                 const move = (deltaX, deltaY) => {
                     preventDefault();
                     changeOffsets(deltaX, deltaY);
                 };
-                if (event.key === "ArrowUp")
+                if (key === "ArrowUp")
                     move(0, KEYBOARD_MOVE_DISTANCE);
-                if (event.key === "ArrowDown")
+                if (key === "ArrowDown")
                     move(0, -KEYBOARD_MOVE_DISTANCE);
-                if (event.key === "ArrowLeft")
+                if (key === "ArrowLeft")
                     move(KEYBOARD_MOVE_DISTANCE, 0);
-                if (event.key === "ArrowRight")
+                if (key === "ArrowRight")
                     move(-KEYBOARD_MOVE_DISTANCE, 0);
                 return;
             }
-            if (event.key === "ArrowLeft")
+            if (key === "ArrowLeft")
                 prev();
-            if (event.key === "ArrowRight")
+            if (key === "ArrowRight")
                 next();
         };
         const removePointer = (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox-lite",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "Lightweight React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",