yet-another-react-lightbox 1.13.4 → 2.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.13.4",
+    "version": "2.0.0-rc.1",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -10,15 +10,15 @@
         ".": "./dist/index.js",
         "./core": "./dist/core/index.js",
         "./plugins": "./dist/plugins/index.js",
-        "./plugins/captions": "./dist/plugins/Captions.js",
-        "./plugins/captions.css": "./dist/plugins/captions.css",
-        "./plugins/fullscreen": "./dist/plugins/Fullscreen.js",
-        "./plugins/inline": "./dist/plugins/Inline.js",
-        "./plugins/slideshow": "./dist/plugins/Slideshow.js",
-        "./plugins/thumbnails": "./dist/plugins/Thumbnails.js",
-        "./plugins/thumbnails.css": "./dist/plugins/thumbnails.css",
-        "./plugins/video": "./dist/plugins/Video.js",
-        "./plugins/zoom": "./dist/plugins/Zoom.js",
+        "./plugins/captions": "./dist/plugins/captions/index.js",
+        "./plugins/captions.css": "./dist/plugins/captions/captions.css",
+        "./plugins/fullscreen": "./dist/plugins/fullscreen/index.js",
+        "./plugins/inline": "./dist/plugins/inline/index.js",
+        "./plugins/slideshow": "./dist/plugins/slideshow/index.js",
+        "./plugins/thumbnails": "./dist/plugins/thumbnails/index.js",
+        "./plugins/thumbnails.css": "./dist/plugins/thumbnails/thumbnails.css",
+        "./plugins/video": "./dist/plugins/video/index.js",
+        "./plugins/zoom": "./dist/plugins/zoom/index.js",
         "./styles.css": "./dist/styles.css"
     },
     "types": "dist/index.d.ts",
@@ -34,25 +34,25 @@
                 "dist/plugins/index.d.ts"
             ],
             "plugins/captions": [
-                "dist/plugins/Captions.d.ts"
+                "dist/plugins/captions/index.d.ts"
             ],
             "plugins/fullscreen": [
-                "dist/plugins/Fullscreen.d.ts"
+                "dist/plugins/fullscreen/index.d.ts"
             ],
             "plugins/inline": [
-                "dist/plugins/Inline.d.ts"
+                "dist/plugins/inline/index.d.ts"
             ],
             "plugins/slideshow": [
-                "dist/plugins/Slideshow.d.ts"
+                "dist/plugins/slideshow/index.d.ts"
             ],
             "plugins/thumbnails": [
-                "dist/plugins/Thumbnails.d.ts"
+                "dist/plugins/thumbnails/index.d.ts"
             ],
             "plugins/video": [
-                "dist/plugins/Video.d.ts"
+                "dist/plugins/video/index.d.ts"
             ],
             "plugins/zoom": [
-                "dist/plugins/Zoom.d.ts"
+                "dist/plugins/zoom/index.d.ts"
             ]
         }
     },

package/dist/core/hooks/useLatest.d.ts

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

package/dist/core/hooks/useLatest.js

@@ -1,6 +0,0 @@
-import * as React from "react";
-export const useLatest = (value) => {
-    const ref = React.useRef(value);
-    ref.current = value;
-    return ref;
-};

package/dist/plugins/Captions.js

@@ -1,58 +0,0 @@
-import * as React from "react";
-import { clsx, cssClass, cssVar, isDefined, makeUseContext } from "../core/utils.js";
-import { useEvents } from "../core/contexts/Events.js";
-import { createModule } from "../core/index.js";
-const defaultTextAlign = "start";
-const defaultMaxLines = 3;
-const cssPrefix = (className) => cssClass(`slide_${className}`);
-const hasTitle = (slide) => "title" in slide ? typeof slide.title === "string" : false;
-const hasDescription = (slide) => "description" in slide ? typeof slide.description === "string" : false;
-const CaptionsContext = React.createContext(null);
-const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
-const Title = ({ title, styles }) => {
-    const { toolbarWidth } = useCaptions();
-    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)));
-};
-const Description = ({ description, align, maxLines, styles }) => (React.createElement("div", { style: styles.captionsDescriptionContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
-    React.createElement("div", { className: cssPrefix("description"), style: {
-            ...(align !== defaultTextAlign || maxLines !== defaultMaxLines
-                ? {
-                    style: {
-                        [cssVar("slide_description_text_align")]: align,
-                        [cssVar("slide_description_max_lines")]: maxLines,
-                    },
-                }
-                : null),
-            ...styles.captionsDescription,
-        } }, description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line]))));
-export const CaptionsComponent = ({ children }) => {
-    const { subscribe } = useEvents();
-    const [toolbarWidth, setToolbarWidth] = React.useState();
-    React.useEffect(() => subscribe("toolbar-width", (topic, event) => {
-        if (!isDefined(event) || typeof event === "number") {
-            setToolbarWidth(event);
-        }
-    }), [subscribe]);
-    const context = React.useMemo(() => ({ toolbarWidth }), [toolbarWidth]);
-    return React.createElement(CaptionsContext.Provider, { value: context }, children);
-};
-export const CaptionsModule = createModule("captions", CaptionsComponent);
-export const Captions = ({ augment, addParent }) => {
-    addParent("controller", CaptionsModule);
-    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, styles, ...restProps }) => ({
-        render: {
-            slideFooter: (slide) => {
-                var _a, _b;
-                return (React.createElement(React.Fragment, null, renderFooter === null || renderFooter === void 0 ? void 0 :
-                    renderFooter(slide),
-                    hasTitle(slide) && React.createElement(Title, { styles: styles, title: slide.title }),
-                    hasDescription(slide) && (React.createElement(Description, { styles: styles, description: slide.description, align: (_a = captions === null || captions === void 0 ? void 0 : captions.descriptionTextAlign) !== null && _a !== void 0 ? _a : defaultTextAlign, maxLines: (_b = captions === null || captions === void 0 ? void 0 : captions.descriptionMaxLines) !== null && _b !== void 0 ? _b : defaultMaxLines }))));
-            },
-            ...restRender,
-        },
-        styles,
-        ...restProps,
-    }));
-};
-export default Captions;

package/dist/plugins/Inline.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-import { Component, Plugin } from "../types.js";
-declare module "../types.js" {
-    interface LightboxProps {
-        /** HTML div element attributes to be passed to the Inline plugin container */
-        inline?: React.HTMLAttributes<HTMLDivElement>;
-    }
-}
-/** Inline plugin container */
-export declare const InlineContainer: Component;
-/** Inline plugin module */
-export declare const InlineModule: import("../types.js").Module;
-/** Inline plugin */
-export declare const Inline: Plugin;
-export default Inline;

package/dist/plugins/Thumbnails.js

@@ -1,243 +0,0 @@
-import * as React from "react";
-import { clsx, createIcon, createModule, cssClass, cssVar, ImageSlide, useEvents, useLatest, useLayoutEffect, useMotionPreference, useRTL, } from "../core/index.js";
-const defaultThumbnailsProps = {
-    position: "bottom",
-    width: 120,
-    height: 80,
-    border: 1,
-    borderRadius: 4,
-    padding: 4,
-    gap: 16,
-    imageFit: "contain",
-};
-const VideoThumbnailIcon = createIcon("VideoThumbnail", React.createElement("path", { d: "M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }));
-const UnknownThumbnailIcon = createIcon("UnknownThumbnail", React.createElement("path", { d: "M23 18V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zM8.5 12.5l2.5 3.01L14.5 11l4.5 6H5l3.5-4.5z" }));
-const cssPrefix = (value) => `thumbnails${value ? `_${value}` : ""}`;
-const cssThumbnailPrefix = (value) => cssPrefix(`thumbnail${value ? `_${value}` : ""}`);
-const getSlide = (slides, index) => slides[((index % slides.length) + slides.length) % slides.length];
-const isHorizontal = (position) => ["top", "bottom"].includes(position);
-const boxSize = (thumbnails, dimension, includeGap) => dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
-const renderThumbnail = ({ slide, render, rect, imageFit }) => {
-    var _a;
-    const customThumbnail = (_a = render.thumbnail) === null || _a === void 0 ? void 0 : _a.call(render, { slide, render, rect, imageFit });
-    if (customThumbnail) {
-        return customThumbnail;
-    }
-    const thumbnailIconClass = cssClass(cssThumbnailPrefix("icon"));
-    if ("type" in slide) {
-        if (slide.type === "video") {
-            return (React.createElement(React.Fragment, null,
-                "poster" in slide && (React.createElement("img", { alt: "", src: slide.poster, className: clsx(cssClass("fullsize"), cssClass(cssPrefix("contain_image"))) })),
-                React.createElement(VideoThumbnailIcon, { className: thumbnailIconClass })));
-        }
-    }
-    else if ("src" in slide) {
-        return React.createElement(ImageSlide, { slide: slide, render: render, rect: rect, imageFit: imageFit });
-    }
-    return React.createElement(UnknownThumbnailIcon, { className: thumbnailIconClass });
-};
-const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }) => (React.createElement("button", { type: "button", className: clsx(cssClass("flex_center"), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix("active")), fadeIn && cssClass(cssThumbnailPrefix("fadein")), fadeOut && cssClass(cssThumbnailPrefix("fadeout")), placeholder && cssClass(cssThumbnailPrefix("placeholder"))), style: {
-        ...(fadeIn
-            ? {
-                [cssVar(cssThumbnailPrefix("fadein_duration"))]: `${fadeIn.duration}ms`,
-                [cssVar(cssThumbnailPrefix("fadein_delay"))]: `${fadeIn.delay}ms`,
-            }
-            : null),
-        ...(fadeOut
-            ? {
-                [cssVar(cssThumbnailPrefix("fadeout_duration"))]: `${fadeOut.duration}ms`,
-                [cssVar(cssThumbnailPrefix("fadeout_delay"))]: `${fadeOut.delay}ms`,
-            }
-            : null),
-        ...style,
-    }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
-export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, animation, render, thumbnails, thumbnailRect, styles, }) => {
-    const track = React.useRef(null);
-    const [state, setState] = React.useState({
-        index: startingIndex,
-        offset: 0,
-    });
-    const { publish, subscribe } = useEvents();
-    const reduceMotion = useLatest(useMotionPreference());
-    const isRTL = useLatest(useRTL());
-    const refs = React.useRef({
-        state,
-        thumbnails,
-        carousel,
-        animation,
-        animationOffset: 0,
-    });
-    refs.current.state = state;
-    refs.current.thumbnails = thumbnails;
-    refs.current.carousel = carousel;
-    refs.current.animation = animation;
-    const animationRef = React.useRef();
-    React.useEffect(() => subscribe("controller-swipe", (_, event) => {
-        if (event && typeof event === "object" && "globalIndex" in event) {
-            const { current } = refs;
-            if (container.current && track.current) {
-                const containerRect = container.current.getBoundingClientRect();
-                const trackRect = track.current.getBoundingClientRect();
-                current.animationOffset = isHorizontal(refs.current.thumbnails.position)
-                    ? trackRect.left - (containerRect.width - trackRect.width) / 2
-                    : trackRect.top - (containerRect.height - trackRect.height) / 2;
-            }
-            else {
-                current.animationOffset = 0;
-            }
-            current.animationOverride =
-                "animationDuration" in event
-                    ? event.animationDuration
-                    : undefined;
-            const newIndex = event.globalIndex;
-            setState({
-                index: newIndex,
-                offset: newIndex - current.state.index,
-            });
-        }
-    }), [container, subscribe]);
-    useLayoutEffect(() => {
-        var _a, _b, _c, _d;
-        if (track.current && state.offset) {
-            const { current } = refs;
-            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
-            const animationDuration = (_b = current.animationOverride) !== null && _b !== void 0 ? _b : current.animation.swipe;
-            animationRef.current = (_d = (_c = track.current).animate) === null || _d === void 0 ? void 0 : _d.call(_c, isHorizontal(current.thumbnails.position)
-                ? [
-                    {
-                        transform: `translate3d(${(isRTL.current ? -1 : 1) *
-                            boxSize(current.thumbnails, current.thumbnails.width, true) *
-                            state.offset +
-                            current.animationOffset}px, 0, 0)`,
-                    },
-                    { transform: "translate3d(0, 0, 0)" },
-                ]
-                : [
-                    {
-                        transform: `translate3d(0, ${boxSize(current.thumbnails, current.thumbnails.height, true) * state.offset +
-                            current.animationOffset}px, 0)`,
-                    },
-                    { transform: "translate3d(0, 0, 0)" },
-                ], reduceMotion.current ? 0 : animationDuration);
-            if (animationRef.current) {
-                animationRef.current.onfinish = () => {
-                    animationRef.current = undefined;
-                    if (refs.current.state.index === state.index) {
-                        setState({ index: state.index, offset: 0 });
-                    }
-                };
-            }
-            current.animationOffset = 0;
-        }
-    }, [state.index, state.offset, isRTL, reduceMotion]);
-    const { index, offset } = state;
-    const { finite, preload } = carousel;
-    const items = [];
-    if (slides.length > 0) {
-        if (offset < 0) {
-            for (let i = index - preload + offset; i < index - preload; i += 1) {
-                items.push({ slide: null, index: i, placeholder: true });
-            }
-        }
-        for (let i = index - preload - (offset > 0 ? offset : 0); i < index; i += 1) {
-            if (!(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 - (offset < 0 ? offset : 0); i += 1) {
-            if (!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("next", slideIndex - index);
-        }
-        else if (slideIndex < index) {
-            publish("prev", index - slideIndex);
-        }
-    };
-    const { width, height, border, borderRadius, padding, gap, imageFit } = thumbnails;
-    return (React.createElement("div", { className: clsx(cssClass(cssPrefix("container")), cssClass("flex_center")), style: {
-            ...(width !== defaultThumbnailsProps.width
-                ? { [cssVar(cssThumbnailPrefix("width"))]: `${boxSize(thumbnails, width)}px` }
-                : null),
-            ...(height !== defaultThumbnailsProps.height
-                ? { [cssVar(cssThumbnailPrefix("height"))]: `${boxSize(thumbnails, height)}px` }
-                : null),
-            ...(border !== defaultThumbnailsProps.border
-                ? { [cssVar(cssThumbnailPrefix("border"))]: `${border}px` }
-                : null),
-            ...(borderRadius !== defaultThumbnailsProps.borderRadius
-                ? { [cssVar(cssThumbnailPrefix("border_radius"))]: `${borderRadius}px` }
-                : null),
-            ...(padding !== defaultThumbnailsProps.padding
-                ? { [cssVar(cssThumbnailPrefix("padding"))]: `${padding}px` }
-                : null),
-            ...(gap !== defaultThumbnailsProps.gap ? { [cssVar(cssThumbnailPrefix("gap"))]: `${gap}px` } : null),
-            ...styles.thumbnailsContainer,
-        } },
-        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: cssClass(cssPrefix("track")) }, items.map(({ slide, index: slideIndex, placeholder }) => {
-            var _a;
-            const fadeAnimationDuration = ((_a = refs.current.animationOverride) !== null && _a !== void 0 ? _a : animation.swipe) / Math.abs(offset || 1);
-            const fadeIn = (offset > 0 && slideIndex > index + preload - offset && slideIndex <= index + preload) ||
-                (offset < 0 && slideIndex < index - preload - offset && slideIndex >= index - preload)
-                ? {
-                    duration: fadeAnimationDuration,
-                    delay: ((offset > 0
-                        ? slideIndex - (index + preload - offset)
-                        : index - preload - offset - slideIndex) -
-                        1) *
-                        fadeAnimationDuration,
-                }
-                : undefined;
-            const fadeOut = (offset > 0 && slideIndex < index - preload) || (offset < 0 && slideIndex > index + preload)
-                ? {
-                    duration: fadeAnimationDuration,
-                    delay: (offset > 0
-                        ? offset - (index - preload - slideIndex)
-                        : -offset - (slideIndex - (index + preload))) * fadeAnimationDuration,
-                }
-                : undefined;
-            return (React.createElement(Thumbnail, { key: slideIndex, rect: thumbnailRect, slide: slide, imageFit: imageFit, render: render, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex), style: styles.thumbnail }));
-        }))));
-};
-export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, index, carousel, animation, render, styles, children, }) => {
-    const thumbnails = { ...defaultThumbnailsProps, ...thumbnailsProps };
-    const ref = React.useRef(null);
-    const track = (React.createElement(ThumbnailsTrack, { container: ref, slides: slides, thumbnails: thumbnails, carousel: carousel, animation: animation, render: render, startingIndex: index, thumbnailRect: { width: thumbnails.width, height: thumbnails.height }, styles: styles }));
-    return (React.createElement("div", { ref: ref, className: clsx(cssClass(cssPrefix()), cssClass(cssPrefix(`${thumbnails.position}`)), cssClass("fullsize")) },
-        (thumbnails.position === "start" || thumbnails.position === "top") && track,
-        React.createElement("div", { className: cssClass(cssPrefix("wrapper")) }, children),
-        (thumbnails.position === "end" || thumbnails.position === "bottom") && track));
-};
-export const Thumbnails = ({ augment, contains, append, addParent }) => {
-    augment(({ thumbnails, ...restProps }) => ({
-        thumbnails: {
-            ...defaultThumbnailsProps,
-            ...thumbnails,
-        },
-        ...restProps,
-    }));
-    const module = createModule("thumbnails", ThumbnailsComponent);
-    if (contains("fullscreen")) {
-        append("fullscreen", module);
-    }
-    else {
-        addParent("controller", module);
-    }
-};
-export default Thumbnails;