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

Comparing version 3.17.4 to 3.17.5

dist/index.d.ts

@@ -39,2 +39,3 @@ import * as React from 'react';
 declare function getSlideIfPresent(slides: Slide[], index: number): SlideImage | undefined;
+declare function getSlideKey(slide: Slide): string | undefined;
 declare function addToolbarButton(toolbar: ToolbarSettings, key: string, button: React.ReactNode): ToolbarSettings;
@@ -269,2 +270,2 @@ declare function stopNavigationEventsPropagation(): {
 
-export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, type ComputeAnimation, ContainerRect, Controller, ControllerContext, type ControllerContextType, ControllerModule, ControllerRef, ControllerSettings, ErrorIcon, type Event, type EventCallback, EventTypes, EventsContext, type EventsContextType, EventsProvider, IconButton, type IconButtonProps, ImageSlide, type ImageSlideProps, type KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, type LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, type LightboxPropsContextType, LightboxPropsProvider, LightboxState, type LightboxStateAction, LightboxStateContext, type LightboxStateContextType, LightboxStateProvider, type LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, type NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, type PointerEventType, Portal, PortalModule, PreviousIcon, type Publish, type ReactEventType, type RegisterSensors, Render, RenderFunction, Root, RootModule, type SensorCallback, Slide, SlideImage, type Subscribe, type SubscribeSensors, type SupportedEventType, SwipeState, TimeoutsContext, type TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, type Topic, type Unsubscribe, type UseSensors, type WheelEventType, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseInt, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, type ComputeAnimation, ContainerRect, Controller, ControllerContext, type ControllerContextType, ControllerModule, ControllerRef, ControllerSettings, ErrorIcon, type Event, type EventCallback, EventTypes, EventsContext, type EventsContextType, EventsProvider, IconButton, type IconButtonProps, ImageSlide, type ImageSlideProps, type KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, type LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, type LightboxPropsContextType, LightboxPropsProvider, LightboxState, type LightboxStateAction, LightboxStateContext, type LightboxStateContextType, LightboxStateProvider, type LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, type NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, type PointerEventType, Portal, PortalModule, PreviousIcon, type Publish, type ReactEventType, type RegisterSensors, Render, RenderFunction, Root, RootModule, type SensorCallback, Slide, SlideImage, type Subscribe, type SubscribeSensors, type SupportedEventType, SwipeState, TimeoutsContext, type TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, type Topic, type Unsubscribe, type UseSensors, type WheelEventType, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseInt, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

dist/plugins/thumbnails/index.js

@@ -1,2 +0,2 @@
-import { useLightboxProps, composePrefix, createIcon, cssClass, isImageSlide, ImageSlide, makeComposePrefix, useEventCallback, clsx, cssVar, useRTL, useEvents, useLightboxState, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { useLightboxProps, composePrefix, createIcon, cssClass, isImageSlide, ImageSlide, makeComposePrefix, useEventCallback, clsx, cssVar, useRTL, useEvents, useLightboxState, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, getSlideKey, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
@@ -43,3 +43,3 @@ import { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
         return (React.createElement(React.Fragment, null,
-            slide.poster && React.createElement(ImageSlide, { slide: { src: slide.poster }, render: render, rect: rect, imageFit: imageFit }),
+            slide.poster && (React.createElement(ImageSlide, { key: slide.poster, slide: { src: slide.poster }, render: render, rect: rect, imageFit: imageFit })),
             React.createElement(VideoThumbnailIcon, { className: thumbnailIconClass })));
@@ -99,3 +99,2 @@ }
     const { position, width, height, border, borderStyle, borderColor, borderRadius, padding, gap, vignette } = thumbnails;
-    const index = globalIndex;
     const animationDuration = (animation === null || animation === void 0 ? void 0 : animation.duration) || 0;
@@ -135,36 +134,17 @@ const offset = (animationDuration > 0 && (animation === null || animation === void 0 ? void 0 : animation.increment)) || 0;
     if (hasSlides(slides)) {
-        if (offset < 0) {
-            for (let i = index - preload + offset; i < index - preload; i += 1) {
-                items.push({ slide: null, index: i, placeholder: true });
-            }
+        for (let index = globalIndex - preload - Math.abs(offset); index <= globalIndex + preload + Math.abs(offset); index += 1) {
+            const placeholder = (carousel.finite && (index < 0 || index > slides.length - 1)) ||
+                (offset < 0 && index < globalIndex - preload) ||
+                (offset > 0 && index > globalIndex + preload);
+            const slide = !placeholder ? getSlide(slides, index) : null;
+            const key = [`${index}`, slide ? getSlideKey(slide) : "placeholder"].filter(Boolean).join("|");
+            items.push({ key, index, slide });
         }
-        for (let i = index - preload - Math.max(offset, 0); i < index; i += 1) {
-            if (!(carousel.finite && i < 0)) {
-                items.push({ slide: getSlide(slides, i), index: i });
-            }
-            else {
-                items.push({ slide: null, index: i, placeholder: true });
-            }
-        }
-        items.push({ slide: getSlide(slides, index), index });
-        for (let i = index + 1; i <= index + preload - Math.min(offset, 0); i += 1) {
-            if (!carousel.finite || i <= slides.length - 1) {
-                items.push({ slide: getSlide(slides, i), index: i });
-            }
-            else {
-                items.push({ slide: null, index: i, placeholder: true });
-            }
-        }
-        if (offset > 0) {
-            for (let i = index + preload + 1; i <= index + preload + offset; i += 1) {
-                items.push({ slide: null, index: i, placeholder: true });
-            }
-        }
     }
     const handleClick = (slideIndex) => () => {
-        if (slideIndex > index) {
-            publish(ACTION_NEXT, { count: slideIndex - index });
+        if (slideIndex > globalIndex) {
+            publish(ACTION_NEXT, { count: slideIndex - globalIndex });
         }
-        else if (slideIndex < index) {
-            publish(ACTION_PREV, { count: index - slideIndex });
+        else if (slideIndex < globalIndex) {
+            publish(ACTION_PREV, { count: globalIndex - slideIndex });
         }
@@ -192,9 +172,9 @@ };
         } },
-        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: clsx(cssClass(cssPrefix("track")), cssClass(CLASS_FLEX_CENTER)), tabIndex: -1, ...registerSensors }, items.map(({ slide, index: slideIndex, placeholder }) => {
+        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: clsx(cssClass(cssPrefix("track")), cssClass(CLASS_FLEX_CENTER)), tabIndex: -1, ...registerSensors }, items.map(({ key, index, slide }) => {
             const fadeAnimationDuration = animationDuration / Math.abs(offset || 1);
-            const fadeIn = (offset > 0 && slideIndex > index + preload - offset && slideIndex <= index + preload) ||
-                (offset < 0 && slideIndex < index - preload - offset && slideIndex >= index - preload)
+            const fadeIn = (offset > 0 && index > globalIndex + preload - offset && index <= globalIndex + preload) ||
+                (offset < 0 && index < globalIndex - preload - offset && index >= globalIndex - preload)
                 ? {
                     duration: fadeAnimationDuration,
-                    delay: ((offset > 0 ? slideIndex - (index + preload - offset) : index - preload - offset - slideIndex) -
+                    delay: ((offset > 0 ? index - (globalIndex + preload - offset) : globalIndex - preload - offset - index) -
                         1) *
@@ -204,11 +184,11 @@ fadeAnimationDuration,
                 : undefined;
-            const fadeOut = (offset > 0 && slideIndex < index - preload) || (offset < 0 && slideIndex > index + preload)
+            const fadeOut = (offset > 0 && index < globalIndex - preload) || (offset < 0 && index > globalIndex + preload)
                 ? {
                     duration: fadeAnimationDuration,
                     delay: (offset > 0
-                        ? offset - (index - preload - slideIndex)
-                        : -offset - (slideIndex - (index + preload))) * fadeAnimationDuration,
+                        ? offset - (globalIndex - preload - index)
+                        : -offset - (index - (globalIndex + preload))) * fadeAnimationDuration,
                 }
                 : undefined;
-            return (React.createElement(Thumbnail, { key: [`${slideIndex}`, placeholder && "placeholder"].filter(Boolean).join("-"), slide: slide, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex), onLoseFocus: () => { var _a; return (_a = track.current) === null || _a === void 0 ? void 0 : _a.focus(); } }));
+            return (React.createElement(Thumbnail, { key: key, slide: slide, active: index === globalIndex, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: !slide, onClick: handleClick(index), onLoseFocus: () => { var _a; return (_a = track.current) === null || _a === void 0 ? void 0 : _a.focus(); } }));
         })),
@@ -215,0 +195,0 @@ vignette && React.createElement("div", { className: cssClass(cssPrefix("vignette")) })));

dist/plugins/video/index.js

@@ -85,3 +85,3 @@ import * as React from 'react';
             publish(ACTIVE_SLIDE_COMPLETE);
-        } }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
+        } }, sources.map(({ src, type }) => (React.createElement("source", { key: [src, type].join("|"), src: src, type: type })))))))));
 }
@@ -97,6 +97,3 @@
                 var _a;
-                if (isVideoSlide(slide)) {
-                    return (React.createElement(VideoSlide, { key: (_a = slide.sources) === null || _a === void 0 ? void 0 : _a.map((source) => source.src).join(" "), slide: slide, offset: offset }));
-                }
-                return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide({ slide, offset, rect });
+                return isVideoSlide(slide) ? (React.createElement(VideoSlide, { key: (_a = slide.sources) === null || _a === void 0 ? void 0 : _a.map((source) => source.src).join("|"), slide: slide, offset: offset })) : (renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide({ slide, offset, rect }));
             },
@@ -103,0 +100,0 @@ ...restRender,

dist/plugins/zoom/index.js

@@ -465,3 +465,3 @@ import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffect, useLightboxState, isImageSlide, isImageFitCover, round, useController, usePointerEvents, cleanup, makeUseContext, createIcon, IconButton, devicePixelRatio, ImageSlide, clsx, cssClass, addToolbarButton, createModule } from '../../index.js';
         };
-        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { key: slide.src, ...slideProps, slide: slide, rect: offset === 0 ? { width: rect.width * zoom, height: rect.height * zoom } : rect })) : (React.createElement(ImageSlide, { key: slide.src, onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
+        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { ...slideProps, slide: slide, rect: offset === 0 ? { width: rect.width * zoom, height: rect.height * zoom } : rect })) : (React.createElement(ImageSlide, { onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
     }
@@ -468,0 +468,0 @@ if (!rendered)

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

218860

decreased by-0.31%

Lines of code

4101

decreased by-0.41%

No dependency changes