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

Comparing version 1.1.0 to 1.1.1

dist/core/components/ImageSlide.d.ts

 /// <reference types="react" />
-import { SlideImage } from "../../types.js";
-export declare const ImageSlide: ({ slide: image }: {
+import { Render, SlideImage } from "../../types.js";
+export declare type ImageSlideProps = {
     slide: SlideImage;
-}) => JSX.Element;
+    render: Render;
+};
+export declare const ImageSlide: ({ slide: image, render }: ImageSlideProps) => JSX.Element;

dist/core/components/ImageSlide.js

@@ -6,3 +6,3 @@ import * as React from "react";
 import { useController } from "../modules/Controller.js";
-export const ImageSlide = ({ slide: image }) => {
+export const ImageSlide = ({ slide: image, render }) => {
     var _a, _b, _c;
@@ -60,4 +60,6 @@ const [state, setState] = React.useState("loading");
         state !== "complete" && (React.createElement("div", { className: cssClass("slide_placeholder") },
-            state === "loading" && (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) })),
-            state === "error" && React.createElement(ErrorIcon, { className: clsx(cssClass("icon"), cssClass("slide_error")) })))));
+            state === "loading" &&
+                (render.iconLoading ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) }))),
+            state === "error" &&
+                (render.iconError ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass("icon"), cssClass("slide_error")) })))))));
 };

dist/core/modules/Carousel.js

@@ -7,5 +7,8 @@ import * as React from "react";
 import { useController } from "./Controller.js";
-const CarouselSlide = ({ slide, offset, renderSlide }) => (React.createElement("div", { className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset } }, (renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide(slide)) || ("src" in slide && React.createElement(ImageSlide, { slide: slide }))));
+const CarouselSlide = ({ slide, offset, render }) => {
+    var _a;
+    return (React.createElement("div", { className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset } }, ((_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide)) || ("src" in slide && React.createElement(ImageSlide, { slide: slide, render: render }))));
+};
 export const Carousel = (props) => {
-    const { slides, carousel: { finite, preload, padding, spacing }, render: { slide: renderSlide }, } = props;
+    const { slides, carousel: { finite, preload, padding, spacing }, render, } = props;
     const { currentIndex, globalIndex } = useController();
@@ -16,9 +19,9 @@ const items = [];
             if (!finite || i >= 0) {
-                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex, renderSlide: renderSlide }));
+                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex, render: render }));
             }
         }
-        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0, renderSlide: renderSlide }));
+        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0, render: render }));
         for (let i = currentIndex + 1; i <= currentIndex + preload; i += 1) {
             if (!finite || i <= slides.length - 1) {
-                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[i % slides.length], offset: i - currentIndex, renderSlide: renderSlide }));
+                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[i % slides.length], offset: i - currentIndex, render: render }));
             }
@@ -25,0 +28,0 @@ }

dist/plugins/Fullscreen.d.ts

@@ -1,3 +0,3 @@
-/// <reference types="react" />
-import { LightboxProps, Plugin } from "../types.js";
+import * as React from "react";
+import { LightboxProps, Plugin, Render } from "../types.js";
 declare module "../types.js" {
@@ -7,2 +7,10 @@ interface LightboxProps {
     }
+    interface Render {
+        buttonFullscreen?: ({ fullscreen, toggleFullscreen, }: {
+            fullscreen: boolean;
+            toggleFullscreen: () => void;
+        }) => React.ReactNode;
+        iconEnterFullscreen?: () => React.ReactNode;
+        iconExitFullscreen?: () => React.ReactNode;
+    }
 }
@@ -29,4 +37,5 @@ declare global {
     auto: boolean;
+    render: Render;
 };
-export declare const FullscreenButton: ({ auto, labels }: FullscreenButtonProps) => JSX.Element | null;
+export declare const FullscreenButton: ({ auto, labels, render }: FullscreenButtonProps) => JSX.Element | null;
 export declare const Fullscreen: Plugin;

dist/plugins/Fullscreen.js

@@ -5,3 +5,3 @@ import * as React from "react";
 const ExitFullscreenIcon = createIcon("ExitFullscreen", React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
-export const FullscreenButton = ({ auto, labels }) => {
+export const FullscreenButton = ({ auto, labels, render }) => {
     const [fullscreen, setFullscreen] = React.useState(false);
@@ -94,3 +94,3 @@ const latestAuto = useLatest(auto);
         return null;
-    return (React.createElement(IconButton, { label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, onClick: toggleFullscreen }));
+    return render.buttonFullscreen ? (React.createElement(React.Fragment, null, render.buttonFullscreen({ fullscreen, toggleFullscreen }))) : (React.createElement(IconButton, { label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: toggleFullscreen }));
 };
@@ -101,3 +101,3 @@ export const Fullscreen = ({ augment }) => {
             buttons: [
-                React.createElement(FullscreenButton, { key: "fullscreen", auto: Boolean(restProps.fullscreen), labels: restProps.labels }),
+                React.createElement(FullscreenButton, { key: "fullscreen", auto: Boolean(restProps.fullscreen), labels: restProps.labels, render: restProps.render }),
                 ...buttons,
@@ -104,0 +104,0 @@ ],

dist/types.d.ts

@@ -31,2 +31,4 @@ import * as React from "react";
     iconClose?: () => React.ReactNode;
+    iconLoading?: () => React.ReactNode;
+    iconError?: () => React.ReactNode;
     buttonPrev?: () => React.ReactNode;
@@ -33,0 +35,0 @@ buttonNext?: () => React.ReactNode;

package.json

 {
     "name": "yet-another-react-lightbox",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "description": "Modern lightbox component for React",
@@ -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

76783

increased by1.16%

Lines of code

1685

increased by1.14%

No dependency changes