yet-another-react-lightbox 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/core/components/ImageSlide.d.ts +5 -3
  2. package/dist/core/components/ImageSlide.js +5 -3
  3. package/dist/core/config.d.ts +2 -2
  4. package/dist/core/hooks/useSensors.d.ts +1 -1
  5. package/dist/core/hooks/useSensors.js +1 -2
  6. package/dist/core/modules/Carousel.js +8 -5
  7. package/dist/plugins/Fullscreen.d.ts +12 -3
  8. package/dist/plugins/Fullscreen.js +3 -3
  9. package/dist/plugins/Inline.js +1 -0
  10. package/dist/styles.css +1 -1
  11. package/dist/types.d.ts +2 -0
  12. package/package.json +25 -14
package/dist/core/components/ImageSlide.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  /// <reference types="react" />
2
- import { SlideImage } from "../../types.js";
3
- export declare const ImageSlide: ({ slide: image }: {
2
+ import { Render, SlideImage } from "../../types.js";
3
+ export declare type ImageSlideProps = {
4
4
  slide: SlideImage;
5
- }) => JSX.Element;
5
+ render: Render;
6
+ };
7
+ export declare const ImageSlide: ({ slide: image, render }: ImageSlideProps) => JSX.Element;
package/dist/core/components/ImageSlide.js CHANGED
@@ -3,7 +3,7 @@ import { clsx, cssClass } from "../utils.js";
3
3
  import { useLatest } from "../hooks/index.js";
4
4
  import { ErrorIcon, LoadingIcon } from "./Icons.js";
5
5
  import { useController } from "../modules/Controller.js";
6
- export const ImageSlide = ({ slide: image }) => {
6
+ export const ImageSlide = ({ slide: image, render }) => {
7
7
  var _a, _b, _c;
8
8
  const [state, setState] = React.useState("loading");
9
9
  const latestState = useLatest(state);
@@ -56,6 +56,8 @@ export const ImageSlide = ({ slide: image }) => {
56
56
  : undefined,
57
57
  }), src: image.src }),
58
58
  state !== "complete" && (React.createElement("div", { className: cssClass("slide_placeholder") },
59
- state === "loading" && (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) })),
60
- state === "error" && React.createElement(ErrorIcon, { className: clsx(cssClass("icon"), cssClass("slide_error")) })))));
59
+ state === "loading" &&
60
+ (render.iconLoading ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) }))),
61
+ state === "error" &&
62
+ (render.iconError ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass("icon"), cssClass("slide_error")) })))))));
61
63
  };
package/dist/core/config.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Augmentation, Component, Module, Node, Plugin } from "../types.js";
2
2
  export declare const createModule: (name: string, component: Component) => Module;
3
- export declare const createNode: (module: Module, children?: Node[] | undefined) => Node;
4
- export declare const withPlugins: (root: Node[], plugins?: Plugin[] | undefined) => {
3
+ export declare const createNode: (module: Module, children?: Node[]) => Node;
4
+ export declare const withPlugins: (root: Node[], plugins?: Plugin[]) => {
5
5
  config: Node[];
6
6
  augmentation: Augmentation;
7
7
  };
package/dist/core/hooks/useSensors.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare type TouchEventType = "onTouchStart" | "onTouchMove" | "onTouchEn
4
4
  export declare type KeyboardEventType = "onKeyDown" | "onKeyUp";
5
5
  export declare type WheelEventType = "onWheel";
6
6
  export declare type SupportedEventType = PointerEventType | TouchEventType | KeyboardEventType | WheelEventType;
7
- export declare type ReactEventType<T, K extends SupportedEventType> = K extends TouchEventType ? React.TouchEvent<T> : K extends KeyboardEventType ? React.KeyboardEvent<T> : K extends WheelEventType ? React.WheelEvent<T> : K extends PointerEventType ? React.PointerEvent<T> : never;
7
+ export declare type ReactEventType<T, K> = K extends TouchEventType ? React.TouchEvent<T> : K extends KeyboardEventType ? React.KeyboardEvent<T> : K extends WheelEventType ? React.WheelEvent<T> : K extends PointerEventType ? React.PointerEvent<T> : never;
8
8
  export declare type EventCallback<T, P extends React.PointerEvent<T> | React.TouchEvent<T> | React.KeyboardEvent<T> | React.WheelEvent<T>> = (event: P) => void;
9
9
  export declare type SubscribeSensors<T> = <ET extends SupportedEventType>(type: ET, callback: EventCallback<T, ReactEventType<T, ET>>) => () => void;
10
10
  export declare type RegisterSensors<T> = Required<Pick<React.HTMLAttributes<T>, PointerEventType>> & Required<Pick<React.HTMLAttributes<T>, TouchEventType>> & Required<Pick<React.HTMLAttributes<T>, KeyboardEventType>> & Required<Pick<React.HTMLAttributes<T>, WheelEventType>>;
package/dist/core/hooks/useSensors.js CHANGED
@@ -22,11 +22,10 @@ export const useSensors = () => {
22
22
  onWheel: (event) => notifySubscribers("onWheel", event),
23
23
  },
24
24
  subscribeSensors: (type, callback) => {
25
- var _a;
26
25
  if (!subscribers[type]) {
27
26
  subscribers[type] = [];
28
27
  }
29
- (_a = subscribers[type]) === null || _a === void 0 ? void 0 : _a.push(callback);
28
+ subscribers[type].push(callback);
30
29
  return () => {
31
30
  const listeners = subscribers[type];
32
31
  if (listeners) {
package/dist/core/modules/Carousel.js CHANGED
@@ -4,21 +4,24 @@ import { createModule } from "../config.js";
4
4
  import { clsx, cssClass, cssVar } from "../utils.js";
5
5
  import { ImageSlide } from "../components/index.js";
6
6
  import { useController } from "./Controller.js";
7
- 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 }))));
7
+ const CarouselSlide = ({ slide, offset, render }) => {
8
+ var _a;
9
+ 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 }))));
10
+ };
8
11
  export const Carousel = (props) => {
9
- const { slides, carousel: { finite, preload, padding, spacing }, render: { slide: renderSlide }, } = props;
12
+ const { slides, carousel: { finite, preload, padding, spacing }, render, } = props;
10
13
  const { currentIndex, globalIndex } = useController();
11
14
  const items = [];
12
15
  if ((slides === null || slides === void 0 ? void 0 : slides.length) > 0) {
13
16
  for (let i = currentIndex - preload; i < currentIndex; i += 1) {
14
17
  if (!finite || i >= 0) {
15
- items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex, renderSlide: renderSlide }));
18
+ items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex, render: render }));
16
19
  }
17
20
  }
18
- items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0, renderSlide: renderSlide }));
21
+ items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0, render: render }));
19
22
  for (let i = currentIndex + 1; i <= currentIndex + preload; i += 1) {
20
23
  if (!finite || i <= slides.length - 1) {
21
- items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[i % slides.length], offset: i - currentIndex, renderSlide: renderSlide }));
24
+ items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[i % slides.length], offset: i - currentIndex, render: render }));
22
25
  }
23
26
  }
24
27
  }
package/dist/plugins/Fullscreen.d.ts CHANGED
@@ -1,9 +1,17 @@
1
- /// <reference types="react" />
2
- import { LightboxProps, Plugin } from "../types.js";
1
+ import * as React from "react";
2
+ import { LightboxProps, Plugin, Render } from "../types.js";
3
3
  declare module "../types.js" {
4
4
  interface LightboxProps {
5
5
  fullscreen?: boolean;
6
6
  }
7
+ interface Render {
8
+ buttonFullscreen?: ({ fullscreen, toggleFullscreen, }: {
9
+ fullscreen: boolean;
10
+ toggleFullscreen: () => void;
11
+ }) => React.ReactNode;
12
+ iconEnterFullscreen?: () => React.ReactNode;
13
+ iconExitFullscreen?: () => React.ReactNode;
14
+ }
7
15
  }
8
16
  declare global {
9
17
  interface Document {
@@ -25,6 +33,7 @@ declare global {
25
33
  }
26
34
  export declare type FullscreenButtonProps = Pick<LightboxProps, "labels"> & {
27
35
  auto: boolean;
36
+ render: Render;
28
37
  };
29
- export declare const FullscreenButton: ({ auto, labels }: FullscreenButtonProps) => JSX.Element | null;
38
+ export declare const FullscreenButton: ({ auto, labels, render }: FullscreenButtonProps) => JSX.Element | null;
30
39
  export declare const Fullscreen: Plugin;
package/dist/plugins/Fullscreen.js CHANGED
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { createIcon, IconButton, label, useController, useLatest } from "../core/index.js";
3
3
  const EnterFullscreenIcon = createIcon("EnterFullscreen", React.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
4
4
  const ExitFullscreenIcon = createIcon("ExitFullscreen", React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
5
- export const FullscreenButton = ({ auto, labels }) => {
5
+ export const FullscreenButton = ({ auto, labels, render }) => {
6
6
  const [fullscreen, setFullscreen] = React.useState(false);
7
7
  const latestAuto = useLatest(auto);
8
8
  const { containerRef } = useController();
@@ -90,13 +90,13 @@ export const FullscreenButton = ({ auto, labels }) => {
90
90
  }, [latestAuto, requestFullscreen]);
91
91
  if (!isFullscreenEnabled())
92
92
  return null;
93
- return (React.createElement(IconButton, { label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, onClick: toggleFullscreen }));
93
+ 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 }));
94
94
  };
95
95
  export const Fullscreen = ({ augment }) => {
96
96
  augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
97
97
  toolbar: {
98
98
  buttons: [
99
- React.createElement(FullscreenButton, { key: "fullscreen", auto: Boolean(restProps.fullscreen), labels: restProps.labels }),
99
+ React.createElement(FullscreenButton, { key: "fullscreen", auto: Boolean(restProps.fullscreen), labels: restProps.labels, render: restProps.render }),
100
100
  ...buttons,
101
101
  ],
102
102
  ...restToolbar,
package/dist/plugins/Inline.js CHANGED
@@ -10,6 +10,7 @@ export const Inline = ({ augment, replace, remove }) => {
10
10
  buttons: buttons.filter((button) => button !== "close"),
11
11
  ...restToolbar,
12
12
  },
13
+ inline: { style: { width: "100%", height: "100%" } },
13
14
  ...restProps,
14
15
  }));
15
16
  remove("no-scroll");
package/dist/styles.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .yarl__portal {
2
2
  position: fixed;
3
3
  inset: 0;
4
- z-index: 1000;
4
+ z-index: 9999;
5
5
  overflow: hidden;
6
6
  opacity: 0;
7
7
  transition: opacity var(--yarl__fade_animation_duration, 250ms) ease;
package/dist/types.d.ts CHANGED
@@ -28,6 +28,8 @@ export interface Render {
28
28
  iconPrev?: () => React.ReactNode;
29
29
  iconNext?: () => React.ReactNode;
30
30
  iconClose?: () => React.ReactNode;
31
+ iconLoading?: () => React.ReactNode;
32
+ iconError?: () => React.ReactNode;
31
33
  buttonPrev?: () => React.ReactNode;
32
34
  buttonNext?: () => React.ReactNode;
33
35
  buttonClose?: () => React.ReactNode;
package/package.json CHANGED
@@ -1,18 +1,20 @@
1
1
  {
2
2
  "name": "yet-another-react-lightbox",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "Modern lightbox component for React",
5
5
  "author": "Igor Danchenko",
6
6
  "license": "MIT",
7
7
  "type": "module",
8
- "main": "dist/index.js",
9
- "types": "dist/index.d.ts",
10
8
  "exports": {
11
9
  ".": "./dist/index.js",
12
- "./styles.css": "./dist/styles.css",
13
10
  "./core": "./dist/core/index.js",
14
- "./plugins": "./dist/plugins/index.js"
11
+ "./plugins": "./dist/plugins/index.js",
12
+ "./plugins/fullscreen": "./dist/plugins/Fullscreen.js",
13
+ "./plugins/inline": "./dist/plugins/Inline.js",
14
+ "./plugins/video": "./dist/plugins/Video.js",
15
+ "./styles.css": "./dist/styles.css"
15
16
  },
17
+ "types": "dist/index.d.ts",
16
18
  "typesVersions": {
17
19
  "*": {
18
20
  "*": [
@@ -23,6 +25,15 @@
23
25
  ],
24
26
  "plugins": [
25
27
  "dist/plugins/index.d.ts"
28
+ ],
29
+ "plugins/fullscreen": [
30
+ "dist/plugins/Fullscreen.d.ts"
31
+ ],
32
+ "plugins/inline": [
33
+ "dist/plugins/Inline.d.ts"
34
+ ],
35
+ "plugins/video": [
36
+ "dist/plugins/Video.d.ts"
26
37
  ]
27
38
  }
28
39
  },
@@ -60,7 +71,7 @@
60
71
  "react-dom": ">=16.8.0"
61
72
  },
62
73
  "devDependencies": {
63
- "@commitlint/cli": "^17.0.0",
74
+ "@commitlint/cli": "^17.0.1",
64
75
  "@commitlint/config-conventional": "^17.0.0",
65
76
  "@semantic-release/changelog": "^6.0.1",
66
77
  "@semantic-release/github": "^8.0.4",
@@ -69,11 +80,11 @@
69
80
  "@testing-library/user-event": "^14.2.0",
70
81
  "@types/jest": "^27.5.1",
71
82
  "@types/react": "^18.0.9",
72
- "@types/react-dom": "^18.0.4",
73
- "@typescript-eslint/eslint-plugin": "^5.25.0",
74
- "@typescript-eslint/parser": "^5.25.0",
83
+ "@types/react-dom": "^18.0.5",
84
+ "@typescript-eslint/eslint-plugin": "^5.26.0",
85
+ "@typescript-eslint/parser": "^5.26.0",
75
86
  "autoprefixer": "^10.4.7",
76
- "eslint": "^8.15.0",
87
+ "eslint": "^8.16.0",
77
88
  "eslint-config-airbnb": "^19.0.4",
78
89
  "eslint-config-airbnb-typescript": "^17.0.0",
79
90
  "eslint-config-prettier": "^8.5.0",
@@ -85,7 +96,7 @@
85
96
  "husky": "^8.0.1",
86
97
  "jest": "^28.1.0",
87
98
  "jest-environment-jsdom": "^28.1.0",
88
- "lint-staged": "^12.4.1",
99
+ "lint-staged": "^12.4.2",
89
100
  "npm-run-all": "^4.1.5",
90
101
  "postcss": "^8.4.14",
91
102
  "postcss-cli": "^9.1.0",
@@ -93,9 +104,9 @@
93
104
  "react": "^18.1.0",
94
105
  "react-dom": "^18.1.0",
95
106
  "rimraf": "^3.0.2",
96
- "sass": "^1.52.0",
97
- "ts-jest": "^28.0.2",
98
- "typescript": "^4.6.4"
107
+ "sass": "^1.52.1",
108
+ "ts-jest": "^28.0.3",
109
+ "typescript": "^4.7.2"
99
110
  },
100
111
  "keywords": [
101
112
  "react",