yet-another-react-lightbox 3.17.1 → 3.17.2
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.
- package/dist/index.d.ts +16 -16
- package/dist/index.js +59 -26
- package/dist/plugins/inline/index.js +2 -2
- package/dist/styles.css +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -7,18 +7,18 @@ declare function Lightbox({ carousel, animation, render, toolbar, controller, no
|
|
|
7
7
|
|
|
8
8
|
declare const LightboxDefaultProps: LightboxProps;
|
|
9
9
|
|
|
10
|
-
declare
|
|
11
|
-
declare
|
|
12
|
-
declare
|
|
13
|
-
declare
|
|
14
|
-
declare
|
|
15
|
-
declare
|
|
16
|
-
declare
|
|
17
|
-
declare
|
|
18
|
-
declare
|
|
10
|
+
declare function clsx(...classes: (string | boolean | undefined)[]): string;
|
|
11
|
+
declare function cssClass(name: string): string;
|
|
12
|
+
declare function cssVar(name: string): string;
|
|
13
|
+
declare function composePrefix(base: string, prefix?: string): string;
|
|
14
|
+
declare function makeComposePrefix(base: string): (prefix?: string) => string;
|
|
15
|
+
declare function label(labels: Labels | undefined, defaultLabel: string): string;
|
|
16
|
+
declare function cleanup(...cleaners: (() => void)[]): () => void;
|
|
17
|
+
declare function makeUseContext<T>(name: string, contextName: string, context: React.Context<T | null>): () => NonNullable<T>;
|
|
18
|
+
declare function hasWindow(): boolean;
|
|
19
19
|
declare function round(value: number, decimals?: number): number;
|
|
20
|
-
declare
|
|
21
|
-
declare
|
|
20
|
+
declare function isImageSlide(slide: Slide): slide is SlideImage;
|
|
21
|
+
declare function isImageFitCover(image: SlideImage, imageFit?: LightboxProps["carousel"]["imageFit"]): boolean;
|
|
22
22
|
declare function parseInt(value: string | number): number;
|
|
23
23
|
declare function parseLengthPercentage(input: LengthOrPercentage): {
|
|
24
24
|
pixel: number;
|
|
@@ -31,11 +31,11 @@ declare function computeSlideRect(containerRect: ContainerRect, padding: LengthO
|
|
|
31
31
|
width: number;
|
|
32
32
|
height: number;
|
|
33
33
|
};
|
|
34
|
-
declare
|
|
35
|
-
declare
|
|
36
|
-
declare
|
|
37
|
-
declare
|
|
38
|
-
declare
|
|
34
|
+
declare function devicePixelRatio(): number;
|
|
35
|
+
declare function getSlideIndex(index: number, slidesCount: number): number;
|
|
36
|
+
declare function hasSlides(slides: Slide[]): slides is [Slide, ...Slide[]];
|
|
37
|
+
declare function getSlide(slides: [Slide, ...Slide[]], index: number): SlideImage;
|
|
38
|
+
declare function getSlideIfPresent(slides: Slide[], index: number): SlideImage | undefined;
|
|
39
39
|
declare function addToolbarButton(toolbar: ToolbarSettings, key: string, button: React.ReactNode): ToolbarSettings;
|
|
40
40
|
declare function stopNavigationEventsPropagation(): {
|
|
41
41
|
onPointerDown: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
|
package/dist/index.js
CHANGED
|
@@ -4,32 +4,55 @@ import { IMAGE_FIT_COVER, IMAGE_FIT_CONTAIN, ACTION_CLOSE, MODULE_CONTROLLER, UN
|
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
5
5
|
export { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FULLSIZE, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_PLAYING } from './types.js';
|
|
6
6
|
|
|
7
|
-
const clsx = (...classes) => [...classes].filter((cls) => Boolean(cls)).join(" ");
|
|
8
7
|
const cssPrefix$3 = "yarl__";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
8
|
+
function clsx(...classes) {
|
|
9
|
+
return [...classes].filter(Boolean).join(" ");
|
|
10
|
+
}
|
|
11
|
+
function cssClass(name) {
|
|
12
|
+
return `${cssPrefix$3}${name}`;
|
|
13
|
+
}
|
|
14
|
+
function cssVar(name) {
|
|
15
|
+
return `--${cssPrefix$3}${name}`;
|
|
16
|
+
}
|
|
17
|
+
function composePrefix(base, prefix) {
|
|
18
|
+
return `${base}${prefix ? `_${prefix}` : ""}`;
|
|
19
|
+
}
|
|
20
|
+
function makeComposePrefix(base) {
|
|
21
|
+
return (prefix) => composePrefix(base, prefix);
|
|
22
|
+
}
|
|
23
|
+
function label(labels, defaultLabel) {
|
|
24
|
+
var _a;
|
|
25
|
+
return (_a = labels === null || labels === void 0 ? void 0 : labels[defaultLabel]) !== null && _a !== void 0 ? _a : defaultLabel;
|
|
26
|
+
}
|
|
27
|
+
function cleanup(...cleaners) {
|
|
28
|
+
return () => {
|
|
29
|
+
cleaners.forEach((cleaner) => {
|
|
30
|
+
cleaner();
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
function makeUseContext(name, contextName, context) {
|
|
35
|
+
return () => {
|
|
36
|
+
const ctx = React.useContext(context);
|
|
37
|
+
if (!ctx) {
|
|
38
|
+
throw new Error(`${name} must be used within a ${contextName}.Provider`);
|
|
39
|
+
}
|
|
40
|
+
return ctx;
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
function hasWindow() {
|
|
44
|
+
return typeof window !== "undefined";
|
|
45
|
+
}
|
|
27
46
|
function round(value, decimals = 0) {
|
|
28
47
|
const factor = 10 ** decimals;
|
|
29
48
|
return Math.round((value + Number.EPSILON) * factor) / factor;
|
|
30
49
|
}
|
|
31
|
-
|
|
32
|
-
|
|
50
|
+
function isImageSlide(slide) {
|
|
51
|
+
return slide.type === undefined || slide.type === "image";
|
|
52
|
+
}
|
|
53
|
+
function isImageFitCover(image, imageFit) {
|
|
54
|
+
return image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
|
|
55
|
+
}
|
|
33
56
|
function parseInt(value) {
|
|
34
57
|
return typeof value === "string" ? Number.parseInt(value, 10) : value;
|
|
35
58
|
}
|
|
@@ -51,11 +74,21 @@ function computeSlideRect(containerRect, padding) {
|
|
|
51
74
|
height: Math.max(containerRect.height - 2 * paddingPixels, 0),
|
|
52
75
|
};
|
|
53
76
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
77
|
+
function devicePixelRatio() {
|
|
78
|
+
return (hasWindow() ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
|
|
79
|
+
}
|
|
80
|
+
function getSlideIndex(index, slidesCount) {
|
|
81
|
+
return slidesCount > 0 ? ((index % slidesCount) + slidesCount) % slidesCount : 0;
|
|
82
|
+
}
|
|
83
|
+
function hasSlides(slides) {
|
|
84
|
+
return slides.length > 0;
|
|
85
|
+
}
|
|
86
|
+
function getSlide(slides, index) {
|
|
87
|
+
return slides[getSlideIndex(index, slides.length)];
|
|
88
|
+
}
|
|
89
|
+
function getSlideIfPresent(slides, index) {
|
|
90
|
+
return hasSlides(slides) ? getSlide(slides, index) : undefined;
|
|
91
|
+
}
|
|
59
92
|
function addToolbarButton(toolbar, key, button) {
|
|
60
93
|
if (!button)
|
|
61
94
|
return toolbar;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { clsx, cssClass, createModule } from '../../index.js';
|
|
1
|
+
import { clsx, cssClass, cssVar, createModule } from '../../index.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { ACTION_CLOSE, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE } from '../../types.js';
|
|
4
4
|
|
|
5
5
|
function InlineContainer({ inline: { className, style, ...rest } = {}, styles, children }) {
|
|
6
|
-
return (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), style: { ...styles.root, ...style }, ...rest }, children));
|
|
6
|
+
return (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), style: { [cssVar("controller_overscroll_behavior")]: "contain auto", ...styles.root, ...style }, ...rest }, children));
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
function Inline({ augment, replace, remove }) {
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:none;overflow:hidden;overscroll-behavior:var(--
|
|
1
|
+
.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain);position:absolute;right:0;top:0;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}@media screen and (min-width:800px){.yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_image_cover{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}
|
package/dist/types.d.ts
CHANGED
|
@@ -225,7 +225,7 @@ interface ControllerSettings {
|
|
|
225
225
|
ref: React.ForwardedRef<ControllerRef>;
|
|
226
226
|
/** @deprecated for internal use only */
|
|
227
227
|
focus: boolean;
|
|
228
|
-
/**
|
|
228
|
+
/** @deprecated for internal use only */
|
|
229
229
|
touchAction: "none" | "pan-y";
|
|
230
230
|
/** if `true`, set ARIA attributes on the controller div */
|
|
231
231
|
aria: boolean;
|