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

Comparing version 3.1.0 to 3.2.0

dist/core/components/Icons.d.ts

@@ -6,2 +6,6 @@ import * as React from "react";
 };
+export declare function createIconDisabled(name: string, glyph: React.ReactNode): {
+    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+};
 export declare const CloseIcon: {
@@ -8,0 +12,0 @@ (props: React.SVGProps<SVGSVGElement>): JSX.Element;

dist/core/components/Icons.js

 import * as React from "react";
+function svgIcon(name, children) {
+    const icon = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", ...props }, children));
+    icon.displayName = name;
+    return icon;
+}
 export function createIcon(name, glyph) {
-    const icon = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", ...props },
-        React.createElement("g", { fill: "currentColor" },
+    return svgIcon(name, React.createElement("g", { fill: "currentColor" },
+        React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
+        glyph));
+}
+export function createIconDisabled(name, glyph) {
+    return svgIcon(name, React.createElement(React.Fragment, null,
+        React.createElement("defs", null,
+            React.createElement("mask", { id: "strike" },
+                React.createElement("path", { d: "M0 0h24v24H0z", fill: "white" }),
+                React.createElement("path", { d: "M0 0L24 24", stroke: "black", strokeWidth: 4 }))),
+        React.createElement("path", { d: "M0.70707 2.121320L21.878680 23.292883", stroke: "currentColor", strokeWidth: 2 }),
+        React.createElement("g", { fill: "currentColor", mask: "url(#strike)" },
             React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
             glyph)));
-    icon.displayName = name;
-    return icon;
 }
@@ -10,0 +23,0 @@ export const CloseIcon = createIcon("Close", React.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));

dist/core/consts.d.ts

@@ -8,2 +8,3 @@ export declare const MODULE_CAROUSEL = "carousel";
 export declare const MODULE_TOOLBAR = "toolbar";
+export declare const PLUGIN_CAPTIONS = "captions";
 export declare const PLUGIN_COUNTER = "counter";
@@ -10,0 +11,0 @@ export declare const PLUGIN_FULLSCREEN = "fullscreen";

dist/core/consts.js

@@ -8,2 +8,3 @@ export const MODULE_CAROUSEL = "carousel";
 export const MODULE_TOOLBAR = "toolbar";
+export const PLUGIN_CAPTIONS = "captions";
 export const PLUGIN_COUNTER = "counter";
@@ -10,0 +11,0 @@ export const PLUGIN_FULLSCREEN = "fullscreen";

dist/plugins/captions/Captions.d.ts

 import { PluginProps } from "../../types.js";
 /** Captions plugin */
-export declare function Captions({ augment }: PluginProps): void;
+export declare function Captions({ augment, addModule }: PluginProps): void;

dist/plugins/captions/Captions.js

 import * as React from "react";
+import { createModule, PLUGIN_CAPTIONS } from "../../core/index.js";
+import { Title } from "./Title.js";
+import { Description } from "./Description.js";
+import { CaptionsButton } from "./CaptionsButton.js";
+import { CaptionsContextProvider } from "./CaptionsContext.js";
 import { resolveCaptionsProps } from "./props.js";
-import { Description } from "./Description.js";
-import { Title } from "./Title.js";
-export function Captions({ augment }) {
-    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, styles, ...restProps }) => {
+export function Captions({ augment, addModule }) {
+    augment(({ render: { slideFooter: renderFooter, ...restRender }, toolbar: { buttons, ...restToolbar }, captions: captionsProps, ...restProps }) => {
+        const captions = resolveCaptionsProps(captionsProps);
         return {
@@ -11,11 +15,15 @@ render: {
                     renderFooter({ slide }),
-                    slide.title && React.createElement(Title, { styles: styles, title: slide.title }),
-                    slide.description && React.createElement(Description, { styles: styles, description: slide.description }))),
+                    slide.title && React.createElement(Title, { title: slide.title }),
+                    slide.description && React.createElement(Description, { description: slide.description }))),
                 ...restRender,
             },
-            captions: resolveCaptionsProps(captions),
-            styles,
+            toolbar: {
+                buttons: [...(captions.showToggle ? [React.createElement(CaptionsButton, { key: PLUGIN_CAPTIONS })] : []), ...buttons],
+                ...restToolbar,
+            },
+            captions,
             ...restProps,
         };
     });
+    addModule(createModule(PLUGIN_CAPTIONS, CaptionsContextProvider));
 }

dist/plugins/captions/Description.d.ts

 /// <reference types="react" />
-import { LightboxProps, Slide } from "../../types.js";
-export type DescriptionProps = Required<Pick<Slide, "description">> & Pick<LightboxProps, "styles">;
-export declare function Description({ description, styles }: DescriptionProps): JSX.Element;
+import { Slide } from "../../types.js";
+export type DescriptionProps = Pick<Slide, "description">;
+export declare function Description({ description }: DescriptionProps): JSX.Element | null;

dist/plugins/captions/Description.js

 import * as React from "react";
 import { clsx, cssVar, useLightboxProps } from "../../core/index.js";
-import { defaultCaptionsProps, resolveCaptionsProps } from "./props.js";
 import { cssPrefix } from "./utils.js";
-export function Description({ description, styles }) {
-    const { captions } = useLightboxProps();
-    const { descriptionTextAlign, descriptionMaxLines } = resolveCaptionsProps(captions);
+import { defaultCaptionsProps, useCaptionsProps } from "./props.js";
+import { useCaptions } from "./CaptionsContext.js";
+export function Description({ description }) {
+    const { descriptionTextAlign, descriptionMaxLines } = useCaptionsProps();
+    const { styles } = useLightboxProps();
+    const { visible } = useCaptions();
+    if (!visible)
+        return null;
     return (React.createElement("div", { style: styles.captionsDescriptionContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
@@ -9,0 +13,0 @@ React.createElement("div", { className: cssPrefix("description"), style: {

dist/plugins/captions/index.d.ts

@@ -14,2 +14,6 @@ import * as React from "react";
         captions?: {
+            /** Captions plugin ref */
+            ref?: React.ForwardedRef<CaptionsRef>;
+            /** if `true`, show Captions Toggle button in the toolbar */
+            showToggle?: boolean;
             /** description text alignment */
@@ -31,3 +35,20 @@ descriptionTextAlign?: TextAlignment;
     }
+    interface Render {
+        /** render custom Captions Visible icon */
+        iconCaptionsVisible?: RenderFunction;
+        /** render custom Captions Hidden icon */
+        iconCaptionsHidden?: RenderFunction;
+        /** render custom Captions button */
+        buttonCaptions?: RenderFunction<CaptionsRef>;
+    }
+    /** Captions plugin ref */
+    interface CaptionsRef {
+        /** if `true`, captions are visible */
+        visible: boolean;
+        /** show captions */
+        show: Callback;
+        /** hide captions */
+        hide: Callback;
+    }
 }
 export default Captions;

dist/plugins/captions/props.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { LightboxProps } from "../../types.js";
@@ -5,6 +6,15 @@ export declare const defaultCaptionsProps: {
     descriptionMaxLines: number;
+    showToggle: boolean;
 };
 export declare const resolveCaptionsProps: (captions: LightboxProps["captions"]) => {
+    ref?: import("react").ForwardedRef<import("../../types.js").CaptionsRef> | undefined;
+    showToggle: boolean;
     descriptionTextAlign: import("../../types.js").TextAlignment;
     descriptionMaxLines: number;
 };
+export declare function useCaptionsProps(): {
+    ref?: import("react").ForwardedRef<import("../../types.js").CaptionsRef> | undefined;
+    showToggle: boolean;
+    descriptionTextAlign: import("../../types.js").TextAlignment;
+    descriptionMaxLines: number;
+};

dist/plugins/captions/props.js

@@ -0,4 +1,6 @@
+import { useLightboxProps } from "../../core/index.js";
 export const defaultCaptionsProps = {
     descriptionTextAlign: "start",
     descriptionMaxLines: 3,
+    showToggle: false,
 };
@@ -9,1 +11,5 @@ export const resolveCaptionsProps = (captions) => ({
 });
+export function useCaptionsProps() {
+    const { captions } = useLightboxProps();
+    return resolveCaptionsProps(captions);
+}

dist/plugins/captions/Title.d.ts

 /// <reference types="react" />
-import { LightboxProps, Slide } from "../../types.js";
-export type TitleProps = Pick<LightboxProps, "styles"> & Pick<Slide, "title">;
-export declare function Title({ title, styles }: TitleProps): JSX.Element;
+import { Slide } from "../../types.js";
+export type TitleProps = Pick<Slide, "title">;
+export declare function Title({ title }: TitleProps): JSX.Element | null;

dist/plugins/captions/Title.js

 import * as React from "react";
-import { clsx, cssVar, useController } from "../../core/index.js";
+import { clsx, cssVar, useController, useLightboxProps } from "../../core/index.js";
 import { cssPrefix } from "./utils.js";
-export function Title({ title, styles }) {
+import { useCaptions } from "./CaptionsContext.js";
+export function Title({ title }) {
     const { toolbarWidth } = useController();
+    const { styles } = useLightboxProps();
+    const { visible } = useCaptions();
+    if (!visible)
+        return null;
     return (React.createElement("div", { style: styles.captionsTitleContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
-        React.createElement("div", { style: styles.captionsTitle, className: cssPrefix("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
+        React.createElement("div", { className: cssPrefix("title"), style: {
+                ...(toolbarWidth ? { [cssVar("toolbar_width")]: `${toolbarWidth}px` } : null),
+                ...styles.captionsTitle,
+            } }, title)));
 }

dist/plugins/thumbnails/index.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { Thumbnails } from "./Thumbnails.js";
@@ -7,2 +8,4 @@ type Position = "top" | "bottom" | "start" | "end";
         thumbnails?: {
+            /** Thumbnails plugin ref */
+            ref?: React.ForwardedRef<ThumbnailsRef>;
             /** thumbnails position */
@@ -24,4 +27,6 @@ position?: Position;
             imageFit?: ImageFit;
-            /** vignette effect on the edges of the thumbnails track */
+            /** if `true`, show the vignette effect on the edges of the thumbnails track */
             vignette?: boolean;
+            /** if `true`, show the Toggle Thumbnails button in the toolbar */
+            showToggle?: boolean;
         };
@@ -32,2 +37,8 @@ }
         thumbnail?: RenderFunction<RenderThumbnailProps>;
+        /** render custom Thumbnails Visible icon */
+        iconThumbnailsVisible?: RenderFunction;
+        /** render custom Thumbnails Hidden icon */
+        iconThumbnailsHidden?: RenderFunction;
+        /** render custom Thumbnails button */
+        buttonThumbnails?: RenderFunction<ThumbnailsRef>;
     }
@@ -49,3 +60,12 @@ /** `render.thumbnail` render function props */
     }
+    /** Thumbnails plugin ref */
+    interface ThumbnailsRef {
+        /** if `true`, thumbnails are visible */
+        visible: boolean;
+        /** show thumbnails */
+        show: Callback;
+        /** hide thuumbnails */
+        hide: Callback;
+    }
 }
 export default Thumbnails;

dist/plugins/thumbnails/props.d.ts

@@ -0,3 +1,5 @@
+/// <reference types="react" />
 import { LightboxProps } from "../../types.js";
 export declare const defaultThumbnailsProps: {
+    ref: null;
     position: "bottom";
@@ -14,2 +16,3 @@ width: number;
 export declare const resolveThumbnailsProps: (thumbnails: LightboxProps["thumbnails"]) => {
+    ref: import("react").ForwardedRef<import("../../types.js").ThumbnailsRef>;
     position: "end" | "start" | "bottom" | "top";
@@ -24,4 +27,6 @@ width: number;
     vignette: boolean;
+    showToggle?: boolean | undefined;
 };
 export declare function useThumbnailsProps(): {
+    ref: import("react").ForwardedRef<import("../../types.js").ThumbnailsRef>;
     position: "end" | "start" | "bottom" | "top";
@@ -36,2 +41,3 @@ width: number;
     vignette: boolean;
+    showToggle?: boolean | undefined;
 };

dist/plugins/thumbnails/props.js

 import { useLightboxProps } from "../../core/index.js";
 export const defaultThumbnailsProps = {
+    ref: null,
     position: "bottom",
@@ -4,0 +5,0 @@ width: 120,

dist/plugins/thumbnails/Thumbnails.js

@@ -0,10 +1,19 @@
+import * as React from "react";
 import { createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS } from "../../core/index.js";
 import { resolveThumbnailsProps } from "./props.js";
-import { ThumbnailsContainer } from "./ThumbnailsContainer.js";
+import { ThumbnailsContextProvider } from "./ThumbnailsContext.js";
+import { ThumbnailsButton } from "./ThumbnailsButton.js";
 export function Thumbnails({ augment, contains, append, addParent }) {
-    augment(({ thumbnails, ...restProps }) => ({
-        thumbnails: resolveThumbnailsProps(thumbnails),
-        ...restProps,
-    }));
-    const module = createModule(PLUGIN_THUMBNAILS, ThumbnailsContainer);
+    augment(({ thumbnails: thumbnailsProps, toolbar: { buttons, ...restToolbar }, ...restProps }) => {
+        const thumbnails = resolveThumbnailsProps(thumbnailsProps);
+        return {
+            toolbar: {
+                buttons: [...(thumbnails.showToggle ? [React.createElement(ThumbnailsButton, { key: PLUGIN_THUMBNAILS })] : []), ...buttons],
+                ...restToolbar,
+            },
+            thumbnails,
+            ...restProps,
+        };
+    });
+    const module = createModule(PLUGIN_THUMBNAILS, ThumbnailsContextProvider);
     if (contains(PLUGIN_FULLSCREEN)) {
@@ -11,0 +20,0 @@ append(PLUGIN_FULLSCREEN, module);

dist/plugins/thumbnails/ThumbnailsTrack.d.ts

 import * as React from "react";
-import { DeepNonNullable, LightboxProps } from "../../types.js";
-export type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
 export type ThumbnailsTrackProps = {
@@ -5,0 +3,0 @@ containerRef: React.RefObject<HTMLDivElement>;

dist/plugins/thumbnails/ThumbnailsTrack.js

@@ -6,2 +6,3 @@ import * as React from "react";
 import { defaultThumbnailsProps, useThumbnailsProps } from "./props.js";
+import { useThumbnails } from "./ThumbnailsContext.js";
 function isHorizontal(position) {
@@ -15,2 +16,3 @@ return ["top", "bottom"].includes(position);
     const track = React.useRef(null);
+    const { visible } = useThumbnails();
     const { carousel, styles } = useLightboxProps();
@@ -98,2 +100,3 @@ const { slides, globalIndex, animation } = useLightboxState().state;
     return (React.createElement("div", { className: clsx(cssClass(cssPrefix("container")), cssClass(CLASS_FLEX_CENTER)), style: {
+            ...(!visible ? { display: "none" } : null),
             ...(width !== defaultThumbnailsProps.width
@@ -100,0 +103,0 @@ ? { [cssVar(cssThumbnailPrefix("width"))]: `${boxSize(thumbnails, width)}px` }

package.json

 {
     "name": "yet-another-react-lightbox",
-    "version": "3.1.0",
+    "version": "3.2.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

218146

increased by4.46%

Number of package files

193

increased by3.21%

Lines of code

4585

increased by4.13%

No dependency changes