yet-another-react-lightbox-lite 1.4.1 → 1.6.0

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;
@@ -261,7 +261,7 @@ function useSensors() {
     const wheelCooldownMomentum = useRef(null);
     const activePointers = useRef([]);
     const pinchZoomDistance = useRef();
-    const { zoom, changeZoom, changeOffsets } = useZoom();
+    const { zoom, maxZoom, changeZoom, changeOffsets } = useZoom();
     const { carouselRef } = useZoomInternal();
     const { prev, next, close } = useController();
     const { closeOnPullUp, closeOnPullDown, closeOnBackdropClick } = {
@@ -423,6 +423,9 @@ function useSensors() {
                 wheelCooldownMomentum.current = event.deltaX;
             }
         };
+        const onDoubleClick = (event) => {
+            changeZoom(zoom < maxZoom ? scaleZoom(zoom, 2, 1) : 1, event);
+        };
         return {
             onKeyDown,
             onPointerDown,
@@ -430,6 +433,7 @@ function useSensors() {
             onPointerUp,
             onPointerLeave: onPointerUp,
             onPointerCancel: onPointerUp,
+            onDoubleClick,
             onWheel,
         };
     }, [
@@ -437,6 +441,7 @@ function useSensors() {
         next,
         close,
         zoom,
+        maxZoom,
         changeZoom,
         changeOffsets,
         carouselRef,

package/package.json

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