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

Comparing version 1.10.0 to 1.11.0

dist/core/components/ImageSlide.d.ts

@@ -10,3 +10,4 @@ /// <reference types="react" />
     imageFit?: ImageFit;
+    onClick?: () => void;
 };
-export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit }: ImageSlideProps) => JSX.Element;
+export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit, onClick }: ImageSlideProps) => JSX.Element;

dist/core/components/ImageSlide.js

@@ -7,3 +7,3 @@ import * as React from "react";
 import { activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, } from "../consts.js";
-export const ImageSlide = ({ slide: image, offset, render, rect, imageFit }) => {
+export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onClick }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -65,3 +65,3 @@ const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, className: clsx(cssClass("slide_image"), cssClass("fullsize"), cover && cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
+        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, onClick: onClick, className: clsx(cssClass("slide_image"), cssClass("fullsize"), cover && cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
         status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass("slide_placeholder") },
@@ -68,0 +68,0 @@ status === SLIDE_STATUS_LOADING &&

dist/core/hooks/useLatest.d.ts

 import * as React from "react";
+/** @deprecated migrate to useEventCallback */
 export declare const useLatest: <T>(value: T) => React.MutableRefObject<T>;

dist/core/modules/Carousel.js

@@ -10,3 +10,3 @@ import * as React from "react";
     const { setContainerRef, containerRect } = useContainerRect();
-    const { latestProps } = useController();
+    const { latestProps, currentIndex } = useController();
     const { render } = latestProps.current;
@@ -17,3 +17,8 @@ const renderSlide = (rect) => {
         if (!rendered && "src" in slide) {
-            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect, imageFit: latestProps.current.carousel.imageFit }));
+            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect, imageFit: latestProps.current.carousel.imageFit, onClick: latestProps.current.on.click && offset === 0
+                    ? () => {
+                        var _a, _b;
+                        (_b = (_a = latestProps.current.on).click) === null || _b === void 0 ? void 0 : _b.call(_a, currentIndex);
+                    }
+                    : undefined }));
         }
@@ -20,0 +25,0 @@ return rendered ? (React.createElement(React.Fragment, null, (_b = render.slideHeader) === null || _b === void 0 ? void 0 :

dist/plugins/Video.js

@@ -42,5 +42,8 @@ import * as React from "react";
         const widthBound = width / height > containerRect.width / containerRect.height;
+        const elementWidth = widthBound ? containerRect.width : Math.round((containerRect.height / height) * width);
+        const elementHeight = !widthBound ? containerRect.height : Math.round((containerRect.width / width) * height);
         return {
-            width: widthBound ? containerRect.width : Math.round((containerRect.height / height) * width),
-            height: !widthBound ? containerRect.height : Math.round((containerRect.width / width) * height),
+            width: elementWidth,
+            height: elementHeight,
+            style: { width: elementWidth, height: elementHeight, maxWidth: "100%", maxHeight: "100%" },
         };
@@ -47,0 +50,0 @@ };

dist/plugins/Zoom.d.ts

@@ -31,2 +31,4 @@ import * as React from "react";
             pinchZoomDistanceFactor?: number;
+            /** if `true`, enables image zoom via scroll gestures for mouse and trackpad users */
+            scrollToZoom?: boolean;
         };
@@ -33,0 +35,0 @@ }

dist/plugins/Zoom.js

 import * as React from "react";
-import { cleanup, clsx, createIcon, createModule, cssClass, IconButton, ImageSlide, label, makeUseContext, round, useContainerRect, useController, useLayoutEffect, useEvents, useMotionPreference, } from "../core/index.js";
+import { cleanup, clsx, createIcon, createModule, cssClass, IconButton, ImageSlide, label, makeUseContext, round, useContainerRect, useController, useEvents, useLayoutEffect, useMotionPreference, } from "../core/index.js";
 const defaultZoomProps = {
@@ -12,2 +12,3 @@ maxZoomPixelRatio: 1,
     pinchZoomDistanceFactor: 100,
+    scrollToZoom: false,
 };
@@ -285,13 +286,15 @@ const ZoomInIcon = createIcon("ZoomIn", React.createElement(React.Fragment, null,
     const onWheel = React.useCallback((event) => {
-        const { state: { zoom }, zoomProps: { wheelZoomDistanceFactor }, } = refs.current;
-        if (event.ctrlKey) {
-            event.stopPropagation();
+        const { state: { zoom }, zoomProps: { wheelZoomDistanceFactor, scrollToZoom }, } = refs.current;
+        if (event.ctrlKey || scrollToZoom) {
             if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                event.stopPropagation();
                 changeZoom(zoom * (1 - event.deltaY / wheelZoomDistanceFactor), true, ...translateCoordinates(event));
+                return;
             }
-            return;
         }
         if (zoom > 1) {
             event.stopPropagation();
-            changeOffsets(event.deltaX, event.deltaY);
+            if (!scrollToZoom) {
+                changeOffsets(event.deltaX, event.deltaY);
+            }
         }
@@ -298,0 +301,0 @@ }, [changeZoom, changeOffsets, translateCoordinates]);

dist/types.d.ts

@@ -102,2 +102,4 @@ import * as React from "react";
     view?: (index: number) => void;
+    /** a callback called when a slide is clicked */
+    click?: (index: number) => void;
     /** a callback called when the portal starts opening */
@@ -104,0 +106,0 @@ entering?: () => void;

package.json

 {
     "name": "yet-another-react-lightbox",
-    "version": "1.10.0",
+    "version": "1.11.0",
     "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

157976

increased by0.61%

Lines of code

3255

increased by0.53%

No dependency changes