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

Comparing version 2.6.1 to 2.6.2

dist/core/components/ImageSlide.js

 import * as React from "react";
-import { clsx, cssClass, hasWindow, makeComposePrefix } from "../utils.js";
+import { clsx, cssClass, hasWindow, isImageFitCover, makeComposePrefix } from "../utils.js";
 import { useEventCallback } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
 import { ErrorIcon, LoadingIcon } from "./Icons.js";
-import { activeSlideStatus, ELEMENT_ICON, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, } from "../consts.js";
+import { activeSlideStatus, ELEMENT_ICON, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, } from "../consts.js";
 const slidePrefix = makeComposePrefix("slide");
@@ -48,3 +48,3 @@ const slideImagePrefix = makeComposePrefix("slide_image");
     }, []);
-    const cover = image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
+    const cover = isImageFitCover(image, imageFit);
     const nonInfinite = (value, fallback) => (Number.isFinite(value) ? value : fallback);
@@ -51,0 +51,0 @@ const maxWidth = nonInfinite(Math.max(...((_b = (_a = image.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) !== null && _b !== void 0 ? _b : []).concat(image.width ? [image.width] : [])), ((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth) || 0);

dist/core/utils.d.ts

 import * as React from "react";
-import { AnimationSettings, AnimationSpec, Labels, Slide, SlideImage } from "../types.js";
+import { AnimationSettings, AnimationSpec, Labels, LightboxProps, Slide, SlideImage } from "../types.js";
 export declare const clsx: (...classes: (string | boolean | undefined)[]) => string;
@@ -16,2 +16,3 @@ export declare const cssClass: (name: string) => string;
 export declare const isImageSlide: (slide: Slide) => slide is SlideImage;
+export declare const isImageFitCover: (image: SlideImage, imageFit?: LightboxProps["carousel"]["imageFit"]) => boolean;
 export declare const parseLengthPercentage: (input: unknown) => {
@@ -18,0 +19,0 @@ pixel: number;

dist/core/utils.js

 import * as React from "react";
 import { AnimationDefaultProps } from "../props.js";
+import { IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER } from "./consts.js";
 export const clsx = (...classes) => [...classes].filter((cls) => Boolean(cls)).join(" ");
@@ -30,2 +31,3 @@ const cssPrefix = "yarl__";
 export const isImageSlide = (slide) => !isDefined(slide.type) || slide.type === "image";
+export const isImageFitCover = (image, imageFit) => image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
 export const parseLengthPercentage = (input) => {
@@ -32,0 +34,0 @@ if (typeof input === "number") {

dist/plugins/zoom/ResponsiveImage.js

 import * as React from "react";
-import { devicePixelRatio, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageSlide, useEventCallback, useLayoutEffect, } from "../../core/index.js";
+import { devicePixelRatio, ImageSlide, isImageFitCover, useEventCallback, useLayoutEffect, } from "../../core/index.js";
 export function isResponsiveImageSlide(slide) {
@@ -15,3 +15,3 @@ var _a;
     const height = (_b = image.height) !== null && _b !== void 0 ? _b : srcSet[srcSet.length - 1].height;
-    const cover = image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
+    const cover = isImageFitCover(image, imageFit);
     const maxWidth = Math.max(...srcSet.map((x) => x.width));
@@ -18,0 +18,0 @@ const targetWidth = Math.min((cover ? Math.max : Math.min)(rect.width, width * (rect.height / height)), maxWidth);

dist/plugins/zoom/ZoomContainer.js

 import * as React from "react";
-import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, cleanup, clsx, cssClass, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, IMAGE_FIT_COVER, ImageSlide, isImageSlide, round, useContainerRect, useController, useEventCallback, useEvents, useLayoutEffect, useLightboxState, useMotionPreference, } from "../../core/index.js";
+import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, cleanup, clsx, cssClass, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ImageSlide, isImageFitCover, isImageSlide, round, useContainerRect, useController, useEventCallback, useEvents, useLayoutEffect, useLightboxState, useMotionPreference, } from "../../core/index.js";
 import { useZoom } from "./ZoomContext.js";
@@ -59,3 +59,3 @@ import { defaultZoomProps } from "./Zoom.js";
     const reduceMotion = useMotionPreference();
-    const { slideRect, maxSlideRect } = getSlideRects({ ...slide, ...imageDimensions }, carousel.imageFit === IMAGE_FIT_COVER || ("imageFit" in slide && slide.imageFit === IMAGE_FIT_COVER), zoomProps.maxZoomPixelRatio, containerRect);
+    const { slideRect, maxSlideRect } = getSlideRects({ ...slide, ...imageDimensions }, isImageSlide(slide) && isImageFitCover(slide, carousel.imageFit), zoomProps.maxZoomPixelRatio, containerRect);
     const maxZoom = slideRect.width ? Math.max(round(maxSlideRect.width / slideRect.width, 5), 1) : 1;
@@ -302,9 +302,3 @@ const changeOffsets = useEventCallback((dx, dy, targetZoom) => {
     ]);
-    const scaledRect = offset === 0
-        ? {
-            width: rect.width * zoom,
-            height: rect.height * zoom,
-        }
-        : rect;
-    let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, scaledRect);
+    let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
     if (!rendered && isImageSlide(slide)) {
@@ -319,3 +313,3 @@ const slideProps = {
         };
-        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { ...slideProps, slide: slide, rect: scaledRect })) : (React.createElement(ImageSlide, { 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 }));
     }
@@ -322,0 +316,0 @@ return rendered ? (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass(CLASS_FULLSIZE), cssClass(CLASS_FLEX_CENTER)), ...(offset === 0

package.json

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

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

193132

increased by0.02%

Worsened metrics

Lines of code

4042

decreased by-0.05%

No dependency changes