yet-another-react-lightbox 1.9.0 → 1.9.3

package/README.md

@@ -136,7 +136,7 @@ The following plugins come bundled in the package:
 - [Slideshow](https://yet-another-react-lightbox.vercel.app/plugins/slideshow) - adds slideshow autoplay feature
 - [Thumbnails](https://yet-another-react-lightbox.vercel.app/plugins/thumbnails) - adds thumbnails track
 - [Video](https://yet-another-react-lightbox.vercel.app/plugins/video) - adds support for video slides
-- [Zoom](https://yet-another-react-lightbox.vercel.app/plugins/zoom) - adds zoom feature
+- [Zoom](https://yet-another-react-lightbox.vercel.app/plugins/zoom) - adds image zoom feature
 
 ## License
 

package/dist/plugins/Zoom.js

@@ -92,12 +92,12 @@ const ZoomButtonsGroup = ({ labels, render }) => {
         React.createElement(ZoomButton, { ref: zoomOutRef, key: "zoomOut", labels: labels, render: render, onLoseFocus: focusZoomIn })));
 };
 const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
-    var _a, _b;
+    var _a, _b, _c;
     let slideRect = { width: 0, height: 0 };
     let maxSlideRect = { width: 0, height: 0 };
     if (rect && !("type" in slide) && "src" in slide) {
-        const width = Math.max(...(((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) || []), ...[...(slide.width ? [slide.width] : [])]);
-        const height = Math.max(...(((_b = slide.srcSet) === null || _b === void 0 ? void 0 : _b.map((x) => x.width)) || (slide.aspectRatio ? [width / slide.aspectRatio] : [])), ...[...(slide.height ? [slide.height] : [])]);
+        const width = Math.max(...(((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) || []).concat(slide.width ? [slide.width] : []));
+        const height = Math.max(...((_c = (_b = slide.srcSet) === null || _b === void 0 ? void 0 : _b.map((x) => x.height).filter((x) => Boolean(x))) !== null && _c !== void 0 ? _c : (slide.aspectRatio ? [width / slide.aspectRatio] : [])).concat(slide.height ? [slide.height] : []));
         if (width > 0 && height > 0 && rect.width > 0 && rect.height > 0) {
             maxSlideRect = cover
                 ? {
@@ -132,7 +132,9 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
     const { subscribe } = useEvents();
     const currentReduceMotion = useMotionPreference();
     const { slideRect: currentSlideRect, maxSlideRect: currentMaxSlideRect } = getSlideRects(slide, carousel.imageFit === "cover" || ("imageFit" in slide && slide.imageFit === "cover"), zoomProps.maxZoomPixelRatio, currentContainerRect);
-    const currentMaxZoom = currentSlideRect.width ? round(currentMaxSlideRect.width / currentSlideRect.width, 3) : 1;
+    const currentMaxZoom = currentSlideRect.width
+        ? Math.max(round(currentMaxSlideRect.width / currentSlideRect.width, 5), 1)
+        : 1;
     const [state, setState] = React.useState({ zoom: 1, offsetX: 0, offsetY: 0 });
     const refs = React.useRef({
         state,
@@ -202,13 +204,6 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
             }
         }
     }, [state.zoom, state.offsetX, state.offsetY]);
-    useEnhancedEffect(() => {
-        if (offset === 0) {
-            const { setMinZoom, setMaxZoom, maxZoom } = refs.current;
-            setMinZoom(state.zoom <= 1);
-            setMaxZoom(state.zoom >= maxZoom);
-        }
-    }, [offset, state.zoom]);
     useEnhancedEffect(() => {
         if (offset === 0) {
             const { setMinZoom, setMaxZoom } = refs.current;
@@ -224,12 +219,19 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
         }
         return () => { };
     }, [offset]);
+    useEnhancedEffect(() => {
+        if (offset === 0) {
+            const { setMinZoom, setMaxZoom } = refs.current;
+            setMinZoom(state.zoom <= 1);
+            setMaxZoom(state.zoom >= currentMaxZoom);
+        }
+    }, [offset, state.zoom, currentMaxZoom]);
     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, 1), maxZoom), 5);
+        const newZoom = round(Math.min(Math.max(value + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
         if (newZoom === zoom)
             return;
         if (!rapid) {
@@ -377,7 +379,7 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
             ? { style: { transform: `scale(${zoom}) translate3d(${offsetX}px, ${offsetY}px, 0)` } }
             : null) }, rendered)) : null;
 };
-const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation }) => {
+const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation, zoom }) => {
     var _a;
     const { setZoomSupported } = useZoom();
     const imageSlide = !("type" in slide);
@@ -388,7 +390,7 @@ const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation }) => {
         }
     }, [offset, zoomSupported, setZoomSupported]);
     if (zoomSupported) {
-        return (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation }));
+        return (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation, zoom: zoom }));
     }
     const rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
     if (rendered) {
@@ -408,7 +410,7 @@ export const Zoom = ({ augment, append }) => {
         },
         render: {
             ...render,
-            slide: (slide, offset, rect) => (React.createElement(ZoomWrapper, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation })),
+            slide: (slide, offset, rect) => (React.createElement(ZoomWrapper, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation, zoom: zoom })),
         },
         zoom: {
             ...defaultZoomProps,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.9.0",
+    "version": "1.9.3",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",