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

Comparing version 3.16.0 to 3.17.0

dist/plugins/counter/index.js

 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';
@@ -4,0 +4,0 @@

dist/plugins/fullscreen/index.d.ts

@@ -25,2 +25,8 @@ import * as React from 'react';
     }
+    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 {
@@ -27,0 +33,0 @@ [PLUGIN_FULLSCREEN]: null;

dist/plugins/fullscreen/index.js

@@ -1,2 +0,2 @@
-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';
@@ -16,7 +16,8 @@ import { PLUGIN_FULLSCREEN, CLASS_FULLSIZE, PLUGIN_THUMBNAILS, MODULE_CONTROLLER } from '../../types.js';
 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 [disabled, setDisabled] = React.useState();
     const [fullscreen, setFullscreen] = React.useState(false);
-    const [disabled, setDisabled] = React.useState();
+    const wasFullscreen = React.useRef(false);
     useLayoutEffect(() => {
@@ -71,12 +72,7 @@ var _a, _b, _c, _d;
     }, [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) => {
@@ -90,3 +86,13 @@ document.addEventListener(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(); });
@@ -93,0 +99,0 @@ React.useEffect(() => {

dist/plugins/inline/index.js

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

dist/plugins/video/index.js

 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';
@@ -4,0 +4,0 @@

dist/plugins/zoom/index.js

@@ -1,2 +0,2 @@
-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';
@@ -79,7 +79,7 @@ import { EVENT_ON_KEY_DOWN, EVENT_ON_WHEEL, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, PLUGIN_ZOOM } from '../../types.js';
     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)) {
@@ -269,10 +269,2 @@ const cover = isImageFitCover(slide, imageFit);
 
-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) {
@@ -283,6 +275,6 @@ const [zoom, setZoom] = React.useState(1);
     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);
@@ -289,0 +281,0 @@ useLayoutEffect(() => {

package.json

 {
   "name": "yet-another-react-lightbox",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "Modern React lightbox component",
@@ -5,0 +5,0 @@ "author": "Igor Danchenko",

README.md

@@ -37,2 +37,6 @@ # Yet Another React Lightbox
 
+## Changelog
+
+[https://github.com/igordanchenko/yet-another-react-lightbox/releases](https://github.com/igordanchenko/yet-another-react-lightbox/releases)
+
 ## Installation
@@ -39,0 +43,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

218402

increased by0.31%

Lines of code

4076

increased by0.1%

Number of lines in readme file

161

increased by2.55%

No dependency changes