yet-another-react-lightbox 3.0.0 → 3.1.0

package/README.md

@@ -129,6 +129,7 @@ The following plugins come bundled in the package:
 
 - [Captions](https://yet-another-react-lightbox.com/plugins/captions) - adds support for slide title and
   description
+- [Counter](https://yet-another-react-lightbox.com/plugins/counter) - adds slides counter
 - [Fullscreen](https://yet-another-react-lightbox.com/plugins/fullscreen) - adds support for fullscreen mode
 - [Inline](https://yet-another-react-lightbox.com/plugins/inline) - adds support for inline rendering mode
 - [Slideshow](https://yet-another-react-lightbox.com/plugins/slideshow) - adds slideshow autoplay feature

package/dist/core/consts.d.ts

@@ -5,6 +5,7 @@ export declare const MODULE_NO_SCROLL = "no-scroll";
 export declare const MODULE_PORTAL = "portal";
 export declare const MODULE_ROOT = "root";
 export declare const MODULE_TOOLBAR = "toolbar";
+export declare const PLUGIN_COUNTER = "counter";
 export declare const PLUGIN_FULLSCREEN = "fullscreen";
 export declare const PLUGIN_INLINE = "inline";
 export declare const PLUGIN_SLIDESHOW = "slideshow";

package/dist/core/consts.js

@@ -5,6 +5,7 @@ export const MODULE_NO_SCROLL = "no-scroll";
 export const MODULE_PORTAL = "portal";
 export const MODULE_ROOT = "root";
 export const MODULE_TOOLBAR = "toolbar";
+export const PLUGIN_COUNTER = "counter";
 export const PLUGIN_FULLSCREEN = "fullscreen";
 export const PLUGIN_INLINE = "inline";
 export const PLUGIN_SLIDESHOW = "slideshow";

package/dist/core/modules/Controller.d.ts

@@ -2,13 +2,17 @@ import * as React from "react";
 import { Callback, ComponentProps, ContainerRect, ControllerRef, NavigationAction } from "../../types.js";
 import { SubscribeSensors } from "../hooks/index.js";
 import { LightboxStateSwipeAction } from "../contexts/index.js";
-import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE } from "../consts.js";
+import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING } from "../consts.js";
 declare module "../index.js" {
     interface EventTypes {
         [ACTION_PREV]: NavigationAction | void;
         [ACTION_NEXT]: NavigationAction | void;
         [ACTION_SWIPE]: LightboxStateSwipeAction;
         [ACTION_CLOSE]: void;
+        [ACTIVE_SLIDE_LOADING]: void;
+        [ACTIVE_SLIDE_PLAYING]: void;
+        [ACTIVE_SLIDE_COMPLETE]: void;
+        [ACTIVE_SLIDE_ERROR]: void;
     }
 }
 export type ControllerContextType = Pick<ControllerRef, "prev" | "next" | "close"> & {

package/dist/core/modules/Controller.js

@@ -4,7 +4,7 @@ import { cleanup, clsx, computeSlideRect, cssClass, cssVar, makeComposePrefix, m
 import { useAnimation, useContainerRect, useDelay, useEventCallback, useForkRef, useRTL, useSensors, } from "../hooks/index.js";
 import { useEvents, useLightboxState } from "../contexts/index.js";
 import { SwipeState, usePointerSwipe, usePreventSwipeNavigation, useWheelSwipe } from "./controller/index.js";
-import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, EVENT_ON_KEY_UP, MODULE_CONTROLLER, VK_ESCAPE, } from "../consts.js";
+import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, EVENT_ON_KEY_UP, MODULE_CONTROLLER, VK_ESCAPE, } from "../consts.js";
 const cssContainerPrefix = makeComposePrefix("container");
 export const ControllerContext = React.createContext(null);
 export const useController = makeUseContext("useController", "ControllerContext", ControllerContext);

package/dist/plugins/counter/Counter.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentProps, PluginProps } from "../../types.js";
+export declare function CounterComponent({ counter: { className, ...rest } }: ComponentProps): JSX.Element | null;
+/** Counter plugin */
+export declare function Counter({ addChild }: PluginProps): void;

package/dist/plugins/counter/Counter.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { clsx, createModule, cssClass, MODULE_CONTROLLER, PLUGIN_COUNTER, useLightboxState } from "../../core/index.js";
+export function CounterComponent({ counter: { className, ...rest } = {} }) {
+    const { slides, currentIndex } = useLightboxState().state;
+    if (slides.length === 0)
+        return null;
+    return (React.createElement("div", { className: clsx(cssClass("counter"), className), ...rest },
+        currentIndex + 1,
+        " / ",
+        slides.length));
+}
+export function Counter({ addChild }) {
+    addChild(MODULE_CONTROLLER, createModule(PLUGIN_COUNTER, CounterComponent));
+}

package/dist/plugins/counter/counter.css

@@ -0,0 +1,16 @@
+.yarl__counter {
+  position: var(--yarl__counter_position, absolute);
+  top: var(--yarl__counter_top, 0);
+  left: var(--yarl__counter_left, 0);
+  bottom: var(--yarl__counter_bottom, unset);
+  right: var(--yarl__counter_right, unset);
+  color: var(--yarl__counter_color, var(--yarl__color_button, rgba(255, 255, 255, 0.8)));
+  -webkit-filter: var(--yarl__counter_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
+          filter: var(--yarl__counter_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
+  margin: var(--yarl__counter_margin, var(--yarl__toolbar_padding, 8px));
+  padding: var(--yarl__counter_padding, var(--yarl__button_padding, 8px));
+  line-height: var(--yarl__counter_line_height, var(--yarl__icon_size, 32px));
+  -webkit-user-select: var(--yarl__counter_user_select, none);
+     -moz-user-select: var(--yarl__counter_user_select, none);
+          user-select: var(--yarl__counter_user_select, none);
+}

package/dist/plugins/counter/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Counter } from "./Counter.js";
+declare module "../../types.js" {
+    interface LightboxProps {
+        /** HTML div element attributes to be passed to the Counter plugin container */
+        counter?: React.HTMLAttributes<HTMLDivElement>;
+    }
+}
+export default Counter;

package/dist/plugins/counter/index.js

@@ -0,0 +1,2 @@
+import { Counter } from "./Counter.js";
+export default Counter;

package/dist/plugins/fullscreen/FullscreenButton.js

@@ -12,5 +12,5 @@ export function FullscreenButton() {
     if (render.buttonFullscreen) {
         return React.createElement(React.Fragment, null, (_a = render.buttonFullscreen) === null || _a === void 0 ? void 0 : _a.call(render, { fullscreen, disabled, enter, exit }));
     }
-    return (React.createElement(IconButton, { disabled: disabled, label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: () => (fullscreen ? exit : enter)() }));
+    return (React.createElement(IconButton, { disabled: disabled, label: label(labels, fullscreen ? "Exit Fullscreen" : "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: fullscreen ? exit : enter }));
 }

package/dist/plugins/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Captions } from "./captions/index.js";
+export { default as Counter } from "./counter/index.js";
 export { default as Fullscreen } from "./fullscreen/index.js";
 export { default as Inline } from "./inline/index.js";
 export { default as Slideshow } from "./slideshow/index.js";

package/dist/plugins/index.js

@@ -1,4 +1,5 @@
 export { default as Captions } from "./captions/index.js";
+export { default as Counter } from "./counter/index.js";
 export { default as Fullscreen } from "./fullscreen/index.js";
 export { default as Inline } from "./inline/index.js";
 export { default as Slideshow } from "./slideshow/index.js";

package/dist/plugins/slideshow/SlideshowButton.js

@@ -10,5 +10,5 @@ export function SlideshowButton() {
     if (render.buttonSlideshow) {
         return React.createElement(React.Fragment, null, render.buttonSlideshow({ playing, disabled, play, pause }));
     }
-    return (React.createElement(IconButton, { label: playing ? label(labels, "Pause") : label(labels, "Play"), icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: () => (playing ? pause : play)(), disabled: disabled, ...focusListeners }));
+    return (React.createElement(IconButton, { label: label(labels, playing ? "Pause" : "Play"), icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: playing ? pause : play, disabled: disabled, ...focusListeners }));
 }

package/dist/plugins/video/index.d.ts

@@ -1,5 +1,4 @@
 import { Video } from "./Video.js";
-import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING } from "../../core/consts.js";
 declare module "../../types.js" {
     interface SlideTypes {
         /** video slide type */
@@ -46,12 +45,4 @@ declare module "../../types.js" {
         video?: Pick<SlideVideo, "autoPlay" | "controls" | "controlsList" | "crossOrigin" | "preload" | "loop" | "muted" | "playsInline" | "disablePictureInPicture" | "disableRemotePlayback">;
     }
 }
-declare module "../../core/index.js" {
-    interface EventTypes {
-        [ACTIVE_SLIDE_LOADING]: void;
-        [ACTIVE_SLIDE_PLAYING]: void;
-        [ACTIVE_SLIDE_COMPLETE]: void;
-        [ACTIVE_SLIDE_ERROR]: void;
-    }
-}
 export default Video;

package/dist/plugins/video/index.js

@@ -1,3 +1,2 @@
 import { Video } from "./Video.js";
-import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, } from "../../core/consts.js";
 export default Video;

package/dist/plugins/zoom/ZoomButton.js

@@ -19,7 +19,7 @@ export const ZoomButton = React.forwardRef(({ zoomIn, onLoseFocus }, ref) => {
             wasEnabled.current = true;
         }
     }, [disabled, onLoseFocus]);
-    return (React.createElement(IconButton, { ref: ref, disabled: disabled, label: label(labels, zoomIn ? "Zoom in" : "Zoom out"), icon: zoomIn ? ZoomInIcon : ZoomOutIcon, renderIcon: zoomIn ? render.iconZoomIn : render.iconZoomOut, onClick: () => (zoomIn ? zoomInCallback : zoomOutCallback)(), onFocus: () => {
+    return (React.createElement(IconButton, { ref: ref, disabled: disabled, label: label(labels, zoomIn ? "Zoom in" : "Zoom out"), icon: zoomIn ? ZoomInIcon : ZoomOutIcon, renderIcon: zoomIn ? render.iconZoomIn : render.iconZoomOut, onClick: zoomIn ? zoomInCallback : zoomOutCallback, onFocus: () => {
             wasFocused.current = true;
         }, onBlur: () => {
             wasFocused.current = false;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "3.0.0",
+    "version": "3.1.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -25,6 +25,11 @@
             "types": "./dist/plugins/captions/index.d.ts",
             "default": "./dist/plugins/captions/index.js"
         },
+        "./plugins/counter.css": "./dist/plugins/counter/counter.css",
+        "./plugins/counter": {
+            "types": "./dist/plugins/counter/index.d.ts",
+            "default": "./dist/plugins/counter/index.js"
+        },
         "./plugins/fullscreen": {
             "types": "./dist/plugins/fullscreen/index.d.ts",
             "default": "./dist/plugins/fullscreen/index.js"
@@ -66,6 +71,9 @@
             "plugins/captions": [
                 "dist/plugins/captions/index.d.ts"
             ],
+            "plugins/counter": [
+                "dist/plugins/counter/index.d.ts"
+            ],
             "plugins/fullscreen": [
                 "dist/plugins/fullscreen/index.d.ts"
             ],