yet-another-react-lightbox 3.16.0 → 3.17.0

package/README.md

@@ -34,6 +34,10 @@ extendable.
 
 [https://yet-another-react-lightbox.com/examples](https://yet-another-react-lightbox.com/examples)
 
+## Changelog
+
+[https://github.com/igordanchenko/yet-another-react-lightbox/releases](https://github.com/igordanchenko/yet-another-react-lightbox/releases)
+
 ## Installation
 
 ```shell

package/dist/plugins/counter/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLightboxState, cssClass, clsx, createModule } from '../../index.js';
+import { useLightboxState, clsx, cssClass, createModule } from '../../index.js';
 import { MODULE_CONTROLLER, PLUGIN_COUNTER } from '../../types.js';
 
 const defaultCounterProps = {

package/dist/plugins/fullscreen/index.d.ts

@@ -22,6 +22,12 @@ declare module "yet-another-react-lightbox" {
         /** render custom Exit Fullscreen icon */
         iconExitFullscreen?: RenderFunction;
     }
+    interface Callbacks {
+        /** a callback called when the lightbox enters fullscreen mode */
+        enterFullscreen?: Callback;
+        /** a callback called when the lightbox exits fullscreen mode */
+        exitFullscreen?: Callback;
+    }
     interface ToolbarButtonKeys {
         [PLUGIN_FULLSCREEN]: null;
     }

package/dist/plugins/fullscreen/index.js

@@ -1,4 +1,4 @@
-import { makeUseContext, useLayoutEffect, useEventCallback, cssClass, clsx, createIcon, useLightboxProps, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { makeUseContext, useLayoutEffect, useEventCallback, clsx, cssClass, createIcon, useLightboxProps, IconButton, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
 import { PLUGIN_FULLSCREEN, CLASS_FULLSIZE, PLUGIN_THUMBNAILS, MODULE_CONTROLLER } from '../../types.js';
 
@@ -13,11 +13,12 @@ const resolveFullscreenProps = (fullscreen) => ({
 
 const FullscreenContext = React.createContext(null);
 const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
-function FullscreenContextProvider({ fullscreen: fullscreenProps, children }) {
+function FullscreenContextProvider({ fullscreen: fullscreenProps, on, children }) {
     const { auto, ref } = resolveFullscreenProps(fullscreenProps);
     const containerRef = React.useRef(null);
-    const [fullscreen, setFullscreen] = React.useState(false);
     const [disabled, setDisabled] = React.useState();
+    const [fullscreen, setFullscreen] = React.useState(false);
+    const wasFullscreen = React.useRef(false);
     useLayoutEffect(() => {
         var _a, _b, _c, _d;
         setDisabled(!((_d = (_c = (_b = (_a = document.fullscreenEnabled) !== null && _a !== void 0 ? _a : document.webkitFullscreenEnabled) !== null && _b !== void 0 ? _b : document.mozFullScreenEnabled) !== null && _c !== void 0 ? _c : document.msFullscreenEnabled) !== null && _d !== void 0 ? _d : false));
@@ -67,16 +68,11 @@ function FullscreenContextProvider({ fullscreen: fullscreenProps, children }) {
             }
         }
     }, [getFullscreenElement]);
-    const fullscreenChangeListener = React.useCallback(() => {
-        if (getFullscreenElement() === containerRef.current) {
-            setFullscreen(true);
-        }
-        else {
-            setFullscreen(false);
-        }
-    }, [getFullscreenElement]);
     React.useEffect(() => {
         const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
+        const fullscreenChangeListener = () => {
+            setFullscreen(getFullscreenElement() === containerRef.current);
+        };
         events.forEach((event) => {
             document.addEventListener(event, fullscreenChangeListener);
         });
@@ -85,7 +81,17 @@ function FullscreenContextProvider({ fullscreen: fullscreenProps, children }) {
                 document.removeEventListener(event, fullscreenChangeListener);
             });
         };
-    }, [fullscreenChangeListener]);
+    }, [getFullscreenElement]);
+    const onEnterFullscreen = useEventCallback(() => { var _a; return (_a = on.enterFullscreen) === null || _a === void 0 ? void 0 : _a.call(on); });
+    const onExitFullscreen = useEventCallback(() => { var _a; return (_a = on.exitFullscreen) === null || _a === void 0 ? void 0 : _a.call(on); });
+    React.useEffect(() => {
+        if (fullscreen) {
+            wasFullscreen.current = true;
+        }
+        if (wasFullscreen.current) {
+            (fullscreen ? onEnterFullscreen : onExitFullscreen)();
+        }
+    }, [fullscreen, onEnterFullscreen, onExitFullscreen]);
     const handleAutoFullscreen = useEventCallback(() => { var _a; return (_a = (auto ? enter : null)) === null || _a === void 0 ? void 0 : _a(); });
     React.useEffect(() => {
         handleAutoFullscreen();

package/dist/plugins/inline/index.js

@@ -1,4 +1,4 @@
-import { cssClass, clsx, createModule } from '../../index.js';
+import { clsx, cssClass, createModule } from '../../index.js';
 import * as React from 'react';
 import { ACTION_CLOSE, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE } from '../../types.js';
 

package/dist/plugins/video/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLightboxProps, useEvents, useContainerRect, useEventCallback, cssClass, clsx } from '../../index.js';
+import { useLightboxProps, useEvents, useContainerRect, useEventCallback, clsx, cssClass } from '../../index.js';
 import { ACTIVE_SLIDE_LOADING, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, ACTIVE_SLIDE_PLAYING, ACTIVE_SLIDE_COMPLETE } from '../../types.js';
 
 const defaultVideoProps = {

package/dist/plugins/zoom/index.js

@@ -1,4 +1,4 @@
-import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffect, useLightboxState, isImageSlide, isImageFitCover, round, useController, usePointerEvents, cleanup, makeUseContext, createIcon, IconButton, devicePixelRatio, ImageSlide, cssClass, clsx, addToolbarButton, createModule } from '../../index.js';
+import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffect, useLightboxState, isImageSlide, isImageFitCover, round, useController, usePointerEvents, cleanup, makeUseContext, createIcon, IconButton, devicePixelRatio, ImageSlide, clsx, cssClass, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
 import { EVENT_ON_KEY_DOWN, EVENT_ON_WHEEL, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, PLUGIN_ZOOM } from '../../types.js';
 
@@ -76,11 +76,11 @@ function useZoomImageRect(slideRect, imageDimensions) {
     var _a, _b;
     let imageRect = { width: 0, height: 0 };
     let maxImageRect = { width: 0, height: 0 };
-    const { slides, currentIndex } = useLightboxState();
+    const { currentSlide } = useLightboxState();
     const { imageFit } = useLightboxProps().carousel;
     const { maxZoomPixelRatio } = useZoomProps();
-    if (slideRect && currentIndex < slides.length) {
-        const slide = { ...slides[currentIndex], ...imageDimensions };
+    if (slideRect && currentSlide) {
+        const slide = { ...currentSlide, ...imageDimensions };
         if (isImageSlide(slide)) {
             const cover = isImageFitCover(slide, imageFit);
             const width = Math.max(...(((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) || []).concat(slide.width ? [slide.width] : []));
@@ -265,23 +265,15 @@ function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoom
     }, [disabled, subscribeSensors, cleanupSensors, onKeyDown, onWheel]);
 }
 
-function getCurrentSource(slides, currentIndex) {
-    if (currentIndex < slides.length) {
-        const slide = slides[currentIndex];
-        if (isImageSlide(slide))
-            return slide.src;
-    }
-    return undefined;
-}
 function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
     const [zoom, setZoom] = React.useState(1);
     const [offsetX, setOffsetX] = React.useState(0);
     const [offsetY, setOffsetY] = React.useState(0);
     const animate = useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef);
-    const { slides, currentIndex, globalIndex } = useLightboxState();
+    const { currentSlide, globalIndex } = useLightboxState();
     const { containerRect, slideRect } = useController();
     const { zoomInMultiplier } = useZoomProps();
-    const currentSource = getCurrentSource(slides, currentIndex);
+    const currentSource = currentSlide && isImageSlide(currentSlide) ? currentSlide.src : undefined;
     const disabled = !currentSource || !(zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current);
     useLayoutEffect(() => {
         setZoom(1);

package/package.json

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