react-motion-gallery 2.0.6 → 2.0.8
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/README.md +1029 -29
- package/dist/chunk-2AHLR3V4.mjs +1 -0
- package/dist/chunk-2UHS4WYL.mjs +5 -0
- package/dist/chunk-3HPXMD5O.mjs +10 -0
- package/dist/chunk-4JEELX5B.mjs +2 -0
- package/dist/chunk-A6MPGIEJ.mjs +1 -0
- package/dist/chunk-ESF6XBYF.mjs +1 -0
- package/dist/chunk-EV6ZK4QI.mjs +1 -0
- package/dist/chunk-H4BEIJAD.mjs +5 -0
- package/dist/chunk-HL75KJY3.mjs +2 -0
- package/dist/chunk-JYKEA7LO.mjs +1 -0
- package/dist/chunk-KA2TOUNO.mjs +59 -0
- package/dist/chunk-LPIHQAND.mjs +1 -0
- package/dist/chunk-LVYED5ZM.mjs +1 -0
- package/dist/chunk-NKBEYOBF.mjs +1 -0
- package/dist/chunk-P2GQPFSL.mjs +1 -0
- package/dist/chunk-TZGAHWM7.mjs +1 -0
- package/dist/chunk-UYTKRIYQ.mjs +1 -0
- package/dist/chunk-V35ILQJ4.mjs +4 -0
- package/dist/chunk-X4HEGEZV.mjs +1 -0
- package/dist/chunk-XO5LPPN6.mjs +2 -0
- package/dist/core.d.mts +86 -0
- package/dist/core.mjs +1 -0
- package/dist/elements-Bd1vm4Uk.d.mts +37 -0
- package/dist/entries.css +1 -0
- package/dist/entries.d.mts +77 -0
- package/dist/entries.mjs +1 -0
- package/dist/fullscreen.css +1 -0
- package/dist/fullscreen.d.mts +281 -0
- package/dist/fullscreen.mjs +1 -0
- package/dist/fullscreenThumbnails.css +1 -0
- package/dist/fullscreenThumbnails.d.mts +10 -0
- package/dist/fullscreenThumbnails.mjs +1 -0
- package/dist/grid.css +1 -0
- package/dist/grid.d.mts +126 -0
- package/dist/grid.mjs +1 -0
- package/dist/index-Bpj0ZM8C.d.mts +38 -0
- package/dist/index.css +1 -1
- package/dist/index.d.mts +23 -1164
- package/dist/index.mjs +1 -65
- package/dist/lazy-dGoYpcRa.d.mts +14 -0
- package/dist/masonry.css +1 -0
- package/dist/masonry.d.mts +73 -0
- package/dist/masonry.mjs +1 -0
- package/dist/media-moIXOhT1.d.mts +36 -0
- package/dist/metafile-esm.json +1 -1
- package/dist/plyrTypes-CmP9NWvX.d.mts +8 -0
- package/dist/responsive-CvE5dTnP.d.mts +5 -0
- package/dist/slider.css +1 -0
- package/dist/slider.d.mts +80 -0
- package/dist/slider.mjs +1 -0
- package/dist/sliderSub-DNikv2lm.d.mts +76 -0
- package/dist/thumbnails.css +1 -0
- package/dist/thumbnails.d.mts +68 -0
- package/dist/thumbnails.mjs +1 -0
- package/dist/types-Bi2iBbyG.d.mts +85 -0
- package/dist/types-CQ6I3EfZ.d.mts +109 -0
- package/dist/types-ChjyCquV.d.mts +158 -0
- package/dist/types-Dqm2ynv2.d.mts +262 -0
- package/dist/video.css +1 -0
- package/dist/video.d.mts +38 -0
- package/dist/video.mjs +1 -0
- package/package.json +34 -14
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { a as BreakpointMap } from './responsive-CvE5dTnP.mjs';
|
|
3
|
+
import { S as SliderOptions, a as SliderHandle } from './types-Dqm2ynv2.mjs';
|
|
4
|
+
export { R as ResponsiveHeightRule } from './types-Dqm2ynv2.mjs';
|
|
5
|
+
import { S as SliderIndexChannel } from './sliderSub-DNikv2lm.mjs';
|
|
6
|
+
export { I as IndexMode, c as createSliderIndexChannel } from './sliderSub-DNikv2lm.mjs';
|
|
7
|
+
import './elements-Bd1vm4Uk.mjs';
|
|
8
|
+
|
|
9
|
+
declare const Slider: React.ForwardRefExoticComponent<SliderOptions & {
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
breakpoints?: BreakpointMap;
|
|
12
|
+
expandableImageRefs?: React.RefObject<Array<HTMLImageElement | null>>;
|
|
13
|
+
indexChannel?: SliderIndexChannel;
|
|
14
|
+
} & React.RefAttributes<SliderHandle>>;
|
|
15
|
+
|
|
16
|
+
declare const DEFAULT_SLIDER: {
|
|
17
|
+
readonly layout: {
|
|
18
|
+
readonly gap: 20;
|
|
19
|
+
};
|
|
20
|
+
readonly direction: {
|
|
21
|
+
readonly dir: "ltr";
|
|
22
|
+
readonly axis: "x";
|
|
23
|
+
};
|
|
24
|
+
readonly align: "start";
|
|
25
|
+
readonly scroll: {
|
|
26
|
+
readonly groupCells: false;
|
|
27
|
+
readonly skipSnaps: false;
|
|
28
|
+
readonly freeScroll: false;
|
|
29
|
+
readonly loop: false;
|
|
30
|
+
};
|
|
31
|
+
readonly lazyLoad: {
|
|
32
|
+
readonly enabled: false;
|
|
33
|
+
readonly spinner: true;
|
|
34
|
+
readonly spinnerClassName: "";
|
|
35
|
+
readonly spinnerStyle: {};
|
|
36
|
+
};
|
|
37
|
+
readonly controls: {
|
|
38
|
+
readonly arrows: {
|
|
39
|
+
readonly enabled: true;
|
|
40
|
+
readonly arrow: {};
|
|
41
|
+
readonly prev: {};
|
|
42
|
+
readonly next: {};
|
|
43
|
+
};
|
|
44
|
+
readonly dots: {
|
|
45
|
+
readonly enabled: true;
|
|
46
|
+
readonly root: {};
|
|
47
|
+
readonly dot: {};
|
|
48
|
+
};
|
|
49
|
+
readonly progress: {
|
|
50
|
+
readonly enabled: false;
|
|
51
|
+
readonly root: {};
|
|
52
|
+
readonly bar: {};
|
|
53
|
+
};
|
|
54
|
+
readonly ripple: {
|
|
55
|
+
readonly enabled: true;
|
|
56
|
+
readonly className: "";
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
readonly auto: {
|
|
60
|
+
readonly play: {
|
|
61
|
+
readonly enabled: false;
|
|
62
|
+
readonly speedMs: 3000;
|
|
63
|
+
readonly pauseMs: 1000;
|
|
64
|
+
readonly pauseOnHover: true;
|
|
65
|
+
};
|
|
66
|
+
readonly scroll: {
|
|
67
|
+
readonly enabled: false;
|
|
68
|
+
readonly speedMs: 3000;
|
|
69
|
+
readonly pauseMs: 1000;
|
|
70
|
+
readonly pauseOnHover: true;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
readonly motion: {
|
|
74
|
+
readonly selectDuration: 25;
|
|
75
|
+
readonly freeScrollDuration: 43;
|
|
76
|
+
readonly friction: 0.68;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
export { DEFAULT_SLIDER, Slider, SliderHandle, SliderIndexChannel, SliderOptions, Slider as default };
|
package/dist/slider.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{a as DEFAULT_SLIDER,b as Slider,b as default}from'./chunk-KA2TOUNO.mjs';import'./chunk-UYTKRIYQ.mjs';import'./chunk-LPIHQAND.mjs';import'./chunk-JYKEA7LO.mjs';export{a as createSliderIndexChannel}from'./chunk-H4BEIJAD.mjs';import'./chunk-TZGAHWM7.mjs';import'./chunk-ESF6XBYF.mjs';import'./chunk-NKBEYOBF.mjs';import'./chunk-EV6ZK4QI.mjs';import'./chunk-X4HEGEZV.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-2AHLR3V4.mjs';
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
type IndexMode = "animated" | "instant";
|
|
2
|
+
type FullscreenOpenMethod = "fade" | "scale";
|
|
3
|
+
type OpenFullscreenAtArgs = {
|
|
4
|
+
index: number;
|
|
5
|
+
method?: FullscreenOpenMethod;
|
|
6
|
+
event?: Event;
|
|
7
|
+
};
|
|
8
|
+
type FullscreenOpenSource = "slider" | "grid" | "masonry" | "entries" | "api";
|
|
9
|
+
type FullscreenOpenRequest = {
|
|
10
|
+
source: FullscreenOpenSource;
|
|
11
|
+
index: number;
|
|
12
|
+
image: HTMLImageElement | null;
|
|
13
|
+
method?: FullscreenOpenMethod;
|
|
14
|
+
requestedMethod?: FullscreenOpenMethod;
|
|
15
|
+
event?: Event;
|
|
16
|
+
};
|
|
17
|
+
interface GalleryApi {
|
|
18
|
+
rootNode(): HTMLElement | null;
|
|
19
|
+
containerNode(): HTMLElement | null;
|
|
20
|
+
getViewportNode: () => HTMLDivElement | null;
|
|
21
|
+
slideNodes(): HTMLElement[];
|
|
22
|
+
onReady?(cb: (nodes: HTMLElement[]) => void): () => void;
|
|
23
|
+
whenReady?(): Promise<HTMLElement[]>;
|
|
24
|
+
isReady?(): boolean;
|
|
25
|
+
scrollTo(index: number, jump?: boolean): void;
|
|
26
|
+
scrollNext(jump?: boolean): void;
|
|
27
|
+
scrollPrev(jump?: boolean): void;
|
|
28
|
+
canScrollNext(): boolean;
|
|
29
|
+
canScrollPrev(): boolean;
|
|
30
|
+
getIndex(): number;
|
|
31
|
+
selectCell(index: number, jump?: boolean): void;
|
|
32
|
+
scrollProgress(): number;
|
|
33
|
+
cellsInView(): number[];
|
|
34
|
+
append(nodes: React.ReactNode | React.ReactNode[]): number;
|
|
35
|
+
prepend(nodes: React.ReactNode | React.ReactNode[]): number;
|
|
36
|
+
insert(index: number, nodes: React.ReactNode | React.ReactNode[]): number;
|
|
37
|
+
remove(indexOrPredicate: number | ((i: number) => boolean)): number;
|
|
38
|
+
replace(index: number, node: React.ReactNode): void;
|
|
39
|
+
setItems(nodes: React.ReactNode[]): number;
|
|
40
|
+
onIndexChange(cb: (i: number, meta: {
|
|
41
|
+
mode: IndexMode;
|
|
42
|
+
}) => void): () => void;
|
|
43
|
+
openFullscreenAt: (args: OpenFullscreenAtArgs) => void;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
type IndexListener = () => void;
|
|
47
|
+
type IndexEvent = {
|
|
48
|
+
type: "set";
|
|
49
|
+
index: number;
|
|
50
|
+
mode: IndexMode;
|
|
51
|
+
} | {
|
|
52
|
+
type: "bump";
|
|
53
|
+
delta: number;
|
|
54
|
+
mode: IndexMode;
|
|
55
|
+
};
|
|
56
|
+
type EventListener = (ev: IndexEvent) => void;
|
|
57
|
+
type BasePointerDownListener = () => void;
|
|
58
|
+
type SliderIndexChannel = ReturnType<typeof createSliderIndexChannel>;
|
|
59
|
+
declare function createSliderIndexChannel(initialIndex?: number, initialMode?: IndexMode): {
|
|
60
|
+
get(): {
|
|
61
|
+
index: number;
|
|
62
|
+
mode: IndexMode;
|
|
63
|
+
};
|
|
64
|
+
set(next: number, m?: IndexMode, opts?: {
|
|
65
|
+
silent?: boolean;
|
|
66
|
+
}): void;
|
|
67
|
+
bump(delta: number, m?: IndexMode, opts?: {
|
|
68
|
+
silent?: boolean;
|
|
69
|
+
}): void;
|
|
70
|
+
subscribe(fn: IndexListener): () => void;
|
|
71
|
+
onEvent(fn: EventListener): () => void;
|
|
72
|
+
onBasePointerDown(fn: BasePointerDownListener): () => void;
|
|
73
|
+
emitBasePointerDown: () => void;
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export { type FullscreenOpenRequest as F, type GalleryApi as G, type IndexMode as I, type OpenFullscreenAtArgs as O, type SliderIndexChannel as S, type FullscreenOpenMethod as a, createSliderIndexChannel as c };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.thumbShell{position:relative}.thumbContentLayer{position:relative;z-index:1}.thumbContentBlocked{pointer-events:none}.thumbLoadingLayer{position:absolute;inset:0;z-index:5;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.thumbLoadingLayerExit{opacity:0}.thumbSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center}.thumbSkeletonRow{display:flex;width:100%;height:100%}.thumbSkeleton{border-radius:6px;overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgThumbShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}@keyframes rmgThumbShimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.thumbLoadingLayer{transition:none}}.thumb{position:relative;overflow:hidden;box-sizing:border-box}.thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px #111 inset;opacity:0;transition:opacity .12s ease;z-index:1}.thumb[data-active=true]:after{opacity:1}.fadeInStart{opacity:0}.fadeInActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.fadeInActive{transition:none}}.fade_container [data-rmg-thumb-index]>*{opacity:0;transform:translateY(var(--rmg-intro-transform, 10px));transition:opacity var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-thumb-index]>*{opacity:1;transform:translateY(0)}.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#0000004d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { S as SliderIndexChannel, I as IndexMode } from './sliderSub-DNikv2lm.mjs';
|
|
3
|
+
import { a as BreakpointMap } from './responsive-CvE5dTnP.mjs';
|
|
4
|
+
import { a as ThumbnailsOptions } from './types-Bi2iBbyG.mjs';
|
|
5
|
+
export { R as ResponsivePosition, e as ThumbnailContainerLayout, c as ThumbnailIntroOptions, d as ThumbnailLayout, b as ThumbnailLoadingOptions, T as ThumbnailPosition, k as ThumbnailsControls, g as ThumbnailsElements, f as ThumbnailsLayout, i as ThumbnailsMotion, j as ThumbnailsRipple, h as ThumbnailsScroll, l as ThumbnailsTransitions } from './types-Bi2iBbyG.mjs';
|
|
6
|
+
import './elements-Bd1vm4Uk.mjs';
|
|
7
|
+
|
|
8
|
+
type Props = {
|
|
9
|
+
options?: ThumbnailsOptions;
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
indexChannel?: SliderIndexChannel;
|
|
12
|
+
breakpoints?: BreakpointMap;
|
|
13
|
+
onThumbnailClick?: (index: number) => void;
|
|
14
|
+
onReadyChange?: (ready: boolean) => void;
|
|
15
|
+
direction?: "ltr" | "rtl";
|
|
16
|
+
};
|
|
17
|
+
declare const ThumbnailSlider: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
|
|
19
|
+
type SliderIndexEvent = {
|
|
20
|
+
type: "set";
|
|
21
|
+
index: number;
|
|
22
|
+
mode: IndexMode;
|
|
23
|
+
} | {
|
|
24
|
+
type: "bump";
|
|
25
|
+
delta: number;
|
|
26
|
+
mode: IndexMode;
|
|
27
|
+
};
|
|
28
|
+
type SliderIndexChannelLike = {
|
|
29
|
+
get: () => {
|
|
30
|
+
index: number;
|
|
31
|
+
mode: IndexMode;
|
|
32
|
+
};
|
|
33
|
+
set: (index: number, mode?: IndexMode, opts?: {
|
|
34
|
+
silent?: boolean;
|
|
35
|
+
}) => void;
|
|
36
|
+
bump: (delta: number, mode?: IndexMode, opts?: {
|
|
37
|
+
silent?: boolean;
|
|
38
|
+
}) => void;
|
|
39
|
+
onEvent?: (fn: (event: SliderIndexEvent) => void) => () => void;
|
|
40
|
+
subscribe?: (fn: () => void) => () => void;
|
|
41
|
+
onBasePointerDown?: (fn: () => void) => () => void;
|
|
42
|
+
emitBasePointerDown?: () => void;
|
|
43
|
+
};
|
|
44
|
+
type CreateThumbnailSyncBridgeArgs = {
|
|
45
|
+
localChannel: SliderIndexChannelLike;
|
|
46
|
+
externalChannel?: SliderIndexChannelLike | null;
|
|
47
|
+
clampIndex?: (index: number) => number;
|
|
48
|
+
};
|
|
49
|
+
type ThumbnailSyncBridge = {
|
|
50
|
+
start: () => () => void;
|
|
51
|
+
stop: () => void;
|
|
52
|
+
publishThumbnailClick: (index: number, mode?: IndexMode) => void;
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* Bridge local thumbnails index state with an optional external slider channel.
|
|
56
|
+
*
|
|
57
|
+
* Intended integration pattern:
|
|
58
|
+
* - Create/own a local channel for ThumbnailSlider internals.
|
|
59
|
+
* - Create this bridge with { localChannel, externalChannel }.
|
|
60
|
+
* - Call bridge.start() inside an effect and clean it up on unmount.
|
|
61
|
+
* - Call bridge.publishThumbnailClick(index) from thumbnail click handler only.
|
|
62
|
+
* - Keep wheel/drag/arrows local by never publishing them externally.
|
|
63
|
+
*/
|
|
64
|
+
declare function createThumbnailSyncBridge(args: CreateThumbnailSyncBridgeArgs): ThumbnailSyncBridge;
|
|
65
|
+
|
|
66
|
+
declare const DEFAULT_THUMBNAILS: Required<Pick<ThumbnailsOptions, "layout" | "scroll" | "motion">>;
|
|
67
|
+
|
|
68
|
+
export { DEFAULT_THUMBNAILS, ThumbnailSlider, type ThumbnailSyncBridge, ThumbnailsOptions, createThumbnailSyncBridge, ThumbnailSlider as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{a as DEFAULT_THUMBNAILS,c as ThumbnailSlider,b as createThumbnailSyncBridge,c as default}from'./chunk-2UHS4WYL.mjs';import'./chunk-P2GQPFSL.mjs';import'./chunk-H4BEIJAD.mjs';import'./chunk-TZGAHWM7.mjs';import'./chunk-ESF6XBYF.mjs';import'./chunk-X4HEGEZV.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-2AHLR3V4.mjs';
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { R as ResponsiveNumber, a as BreakpointMap } from './responsive-CvE5dTnP.mjs';
|
|
3
|
+
import { E as ElementStyle, A as ArrowRenderArgs } from './elements-Bd1vm4Uk.mjs';
|
|
4
|
+
|
|
5
|
+
type ThumbnailPosition = "top" | "right" | "bottom" | "left";
|
|
6
|
+
type ResponsivePosition = ThumbnailPosition | Array<ThumbnailPosition> | Record<string, ThumbnailPosition>;
|
|
7
|
+
type ThumbnailLoadingOptions = {
|
|
8
|
+
enabled?: boolean;
|
|
9
|
+
force?: boolean;
|
|
10
|
+
skeletonCount?: ResponsiveNumber;
|
|
11
|
+
renderLoading?: () => React.ReactNode;
|
|
12
|
+
};
|
|
13
|
+
type ThumbnailIntroOptions = {
|
|
14
|
+
renderIntro?: (args: {
|
|
15
|
+
active: boolean;
|
|
16
|
+
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
17
|
+
}, inner: React.ReactNode) => React.ReactNode;
|
|
18
|
+
staggerMs?: number;
|
|
19
|
+
transform?: string;
|
|
20
|
+
durationMs?: number;
|
|
21
|
+
easing?: string;
|
|
22
|
+
};
|
|
23
|
+
type ThumbnailLayout = {
|
|
24
|
+
width?: number | string;
|
|
25
|
+
height?: number | string;
|
|
26
|
+
};
|
|
27
|
+
type ThumbnailContainerLayout = {
|
|
28
|
+
width?: number | string;
|
|
29
|
+
height?: number | string;
|
|
30
|
+
};
|
|
31
|
+
type ThumbnailsLayout = {
|
|
32
|
+
position?: ResponsivePosition;
|
|
33
|
+
gap?: number;
|
|
34
|
+
center?: boolean;
|
|
35
|
+
thumbnail?: ThumbnailLayout;
|
|
36
|
+
container?: ThumbnailContainerLayout;
|
|
37
|
+
};
|
|
38
|
+
type ThumbnailsElements = {
|
|
39
|
+
container?: ElementStyle;
|
|
40
|
+
thumbnail?: ElementStyle;
|
|
41
|
+
};
|
|
42
|
+
type ThumbnailsScroll = {
|
|
43
|
+
freeScroll?: boolean;
|
|
44
|
+
groupCells?: boolean;
|
|
45
|
+
loop?: boolean;
|
|
46
|
+
skipSnaps?: boolean;
|
|
47
|
+
centerActiveThumb?: boolean;
|
|
48
|
+
};
|
|
49
|
+
type ThumbnailsMotion = {
|
|
50
|
+
selectDuration?: number;
|
|
51
|
+
freeScrollDuration?: number;
|
|
52
|
+
friction?: number;
|
|
53
|
+
};
|
|
54
|
+
type ThumbnailsRipple = {
|
|
55
|
+
enabled?: boolean;
|
|
56
|
+
className?: string;
|
|
57
|
+
};
|
|
58
|
+
type ThumbnailsControls = {
|
|
59
|
+
enabled?: boolean;
|
|
60
|
+
arrow?: ElementStyle;
|
|
61
|
+
prev?: ElementStyle;
|
|
62
|
+
next?: ElementStyle;
|
|
63
|
+
render?: (args: ArrowRenderArgs & {
|
|
64
|
+
dir: "prev" | "next";
|
|
65
|
+
}) => React.ReactNode;
|
|
66
|
+
renderPrev?: (args: ArrowRenderArgs) => React.ReactNode;
|
|
67
|
+
renderNext?: (args: ArrowRenderArgs) => React.ReactNode;
|
|
68
|
+
ripple?: ThumbnailsRipple;
|
|
69
|
+
};
|
|
70
|
+
type ThumbnailsTransitions = {
|
|
71
|
+
loading?: ThumbnailLoadingOptions;
|
|
72
|
+
intro?: ThumbnailIntroOptions;
|
|
73
|
+
};
|
|
74
|
+
type ThumbnailsOptions = {
|
|
75
|
+
children?: React.ReactNode;
|
|
76
|
+
layout?: ThumbnailsLayout;
|
|
77
|
+
elements?: ThumbnailsElements;
|
|
78
|
+
scroll?: ThumbnailsScroll;
|
|
79
|
+
controls?: ThumbnailsControls;
|
|
80
|
+
motion?: ThumbnailsMotion;
|
|
81
|
+
transitions?: ThumbnailsTransitions;
|
|
82
|
+
breakpointMap?: BreakpointMap;
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
export type { ResponsivePosition as R, ThumbnailPosition as T, ThumbnailsOptions as a, ThumbnailLoadingOptions as b, ThumbnailIntroOptions as c, ThumbnailLayout as d, ThumbnailContainerLayout as e, ThumbnailsLayout as f, ThumbnailsElements as g, ThumbnailsScroll as h, ThumbnailsMotion as i, ThumbnailsRipple as j, ThumbnailsControls as k, ThumbnailsTransitions as l };
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { a as BreakpointMap } from './responsive-CvE5dTnP.mjs';
|
|
3
|
+
import { T as ThumbnailPosition } from './types-Bi2iBbyG.mjs';
|
|
4
|
+
|
|
5
|
+
type JumpMode = 'instant' | 'animated';
|
|
6
|
+
type FSRequest = {
|
|
7
|
+
type: 'requestSet';
|
|
8
|
+
index: number;
|
|
9
|
+
mode?: JumpMode;
|
|
10
|
+
} | {
|
|
11
|
+
type: 'requestNext';
|
|
12
|
+
} | {
|
|
13
|
+
type: 'requestPrev';
|
|
14
|
+
} | {
|
|
15
|
+
type: 'center';
|
|
16
|
+
};
|
|
17
|
+
type FSEvent = {
|
|
18
|
+
type: 'internalIndex';
|
|
19
|
+
index: number;
|
|
20
|
+
} | {
|
|
21
|
+
type: 'mounted';
|
|
22
|
+
} | {
|
|
23
|
+
type: 'unmounted';
|
|
24
|
+
};
|
|
25
|
+
type FullscreenSliderSub = {
|
|
26
|
+
get: () => number;
|
|
27
|
+
requestSet: (index: number, mode?: JumpMode) => void;
|
|
28
|
+
requestPrev: () => void;
|
|
29
|
+
requestNext: () => void;
|
|
30
|
+
requestCenter: () => void;
|
|
31
|
+
onEvent: (fn: (evt: FSEvent) => void) => () => void;
|
|
32
|
+
onRequest: (fn: (req: FSRequest) => void) => () => void;
|
|
33
|
+
setLocalIndex: (index: number) => void;
|
|
34
|
+
destroy: () => void;
|
|
35
|
+
onBasePointerDown: (fn: () => void) => () => void;
|
|
36
|
+
emitBasePointerDown: () => void;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
type ArrowRenderArgs = {
|
|
40
|
+
ref: React.RefObject<HTMLDivElement | null>;
|
|
41
|
+
onClick: () => void;
|
|
42
|
+
hidden: boolean;
|
|
43
|
+
disabled: boolean;
|
|
44
|
+
createRipple: (el: HTMLElement) => void;
|
|
45
|
+
className?: string;
|
|
46
|
+
};
|
|
47
|
+
type FSItem = {
|
|
48
|
+
thumbSrc: string;
|
|
49
|
+
alt?: string;
|
|
50
|
+
};
|
|
51
|
+
type FullscreenThumbnailSlotLayout = {
|
|
52
|
+
position: ThumbnailPosition;
|
|
53
|
+
className?: string;
|
|
54
|
+
style?: React.CSSProperties;
|
|
55
|
+
fadeDurationMs?: number;
|
|
56
|
+
fadeEasing?: string;
|
|
57
|
+
};
|
|
58
|
+
type FullscreenThumbnailBridge = {
|
|
59
|
+
mountEl: HTMLDivElement | null;
|
|
60
|
+
fsSub: FullscreenSliderSub;
|
|
61
|
+
visible: boolean;
|
|
62
|
+
invisible: boolean;
|
|
63
|
+
direction: 'ltr' | 'rtl';
|
|
64
|
+
registerLayout: (layout: FullscreenThumbnailSlotLayout) => void;
|
|
65
|
+
clearLayout: () => void;
|
|
66
|
+
};
|
|
67
|
+
type FullscreenThumbnailSliderProps = {
|
|
68
|
+
bridge: FullscreenThumbnailBridge;
|
|
69
|
+
items: FSItem[];
|
|
70
|
+
position: ThumbnailPosition;
|
|
71
|
+
containerClassName?: string;
|
|
72
|
+
containerStyle?: React.CSSProperties;
|
|
73
|
+
thumbnailWidth?: number | string;
|
|
74
|
+
thumbnailHeight?: number | string;
|
|
75
|
+
thumbnailsCenter?: boolean;
|
|
76
|
+
thumbnailsContainerWidth?: number | string;
|
|
77
|
+
thumbnailsContainerHeight?: number | string;
|
|
78
|
+
fadeDurationMs?: number;
|
|
79
|
+
fadeEasing?: string;
|
|
80
|
+
thumbnailItemClassName?: string;
|
|
81
|
+
thumbnailItemStyle?: React.CSSProperties;
|
|
82
|
+
gap?: number;
|
|
83
|
+
freeScroll?: boolean;
|
|
84
|
+
groupCells?: boolean;
|
|
85
|
+
loop?: boolean;
|
|
86
|
+
axis?: 'x' | 'y';
|
|
87
|
+
skipSnaps?: boolean;
|
|
88
|
+
centerActiveThumb?: boolean;
|
|
89
|
+
selectDuration?: number;
|
|
90
|
+
freeScrollDuration?: number;
|
|
91
|
+
sliderFriction?: number;
|
|
92
|
+
breakpointMap?: BreakpointMap;
|
|
93
|
+
rippleEnabled?: boolean;
|
|
94
|
+
rippleClassName?: string;
|
|
95
|
+
showArrows?: boolean;
|
|
96
|
+
arrowStyles?: React.CSSProperties;
|
|
97
|
+
arrowClassName?: string;
|
|
98
|
+
prevArrowStyles?: React.CSSProperties;
|
|
99
|
+
prevArrowClassName?: string;
|
|
100
|
+
nextArrowStyles?: React.CSSProperties;
|
|
101
|
+
nextArrowClassName?: string;
|
|
102
|
+
renderArrows?: (args: ArrowRenderArgs & {
|
|
103
|
+
dir: 'prev' | 'next';
|
|
104
|
+
}) => React.ReactNode;
|
|
105
|
+
renderPrevArrow?: (args: ArrowRenderArgs) => React.ReactNode;
|
|
106
|
+
renderNextArrow?: (args: ArrowRenderArgs) => React.ReactNode;
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export type { FSItem as F, FullscreenThumbnailBridge as a, FullscreenThumbnailSliderProps as b, FullscreenThumbnailSlotLayout as c };
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import { E as ElementStyle } from './elements-Bd1vm4Uk.mjs';
|
|
2
|
+
import { M as MediaItem } from './media-moIXOhT1.mjs';
|
|
3
|
+
import * as React$1 from 'react';
|
|
4
|
+
|
|
5
|
+
type SkeletonLength = number | string;
|
|
6
|
+
type SkeletonShimmer = {
|
|
7
|
+
enabled?: boolean;
|
|
8
|
+
durationMs?: number;
|
|
9
|
+
angleDeg?: number;
|
|
10
|
+
opacity?: number;
|
|
11
|
+
blurPx?: number;
|
|
12
|
+
timing?: string;
|
|
13
|
+
c1?: string;
|
|
14
|
+
c2?: string;
|
|
15
|
+
c3?: string;
|
|
16
|
+
};
|
|
17
|
+
type SkeletonBaseStyle = {
|
|
18
|
+
width?: SkeletonLength;
|
|
19
|
+
maxWidth?: SkeletonLength;
|
|
20
|
+
height?: SkeletonLength;
|
|
21
|
+
maxHeight?: SkeletonLength;
|
|
22
|
+
backgroundColor?: string;
|
|
23
|
+
borderRadius?: SkeletonLength;
|
|
24
|
+
marginTop?: SkeletonLength;
|
|
25
|
+
marginRight?: SkeletonLength;
|
|
26
|
+
marginBottom?: SkeletonLength;
|
|
27
|
+
marginLeft?: SkeletonLength;
|
|
28
|
+
alignSelf?: React$1.CSSProperties["alignSelf"];
|
|
29
|
+
aspectRatio?: number | string;
|
|
30
|
+
};
|
|
31
|
+
type SkeletonContainerStyle = {
|
|
32
|
+
gap?: SkeletonLength;
|
|
33
|
+
padding?: SkeletonLength;
|
|
34
|
+
align?: React$1.CSSProperties["alignItems"];
|
|
35
|
+
justify?: React$1.CSSProperties["justifyContent"];
|
|
36
|
+
wrap?: boolean;
|
|
37
|
+
width?: SkeletonLength;
|
|
38
|
+
maxWidth?: SkeletonLength;
|
|
39
|
+
};
|
|
40
|
+
type SkeletonContainerStyleResponsive = SkeletonContainerStyle | Record<string, SkeletonContainerStyle>;
|
|
41
|
+
type SkeletonNode = {
|
|
42
|
+
kind: "stack" | "row" | "col";
|
|
43
|
+
style?: SkeletonContainerStyleResponsive;
|
|
44
|
+
children: SkeletonNode[];
|
|
45
|
+
} | {
|
|
46
|
+
kind: "rect" | "square" | "circle";
|
|
47
|
+
style?: SkeletonBaseStyle;
|
|
48
|
+
shimmer?: SkeletonShimmer;
|
|
49
|
+
} | {
|
|
50
|
+
kind: "media";
|
|
51
|
+
count: number;
|
|
52
|
+
direction?: "row" | "col";
|
|
53
|
+
style?: SkeletonContainerStyleResponsive;
|
|
54
|
+
tile?: {
|
|
55
|
+
shape?: "rect" | "square" | "circle";
|
|
56
|
+
style?: SkeletonBaseStyle;
|
|
57
|
+
shimmer?: SkeletonShimmer;
|
|
58
|
+
};
|
|
59
|
+
} | {
|
|
60
|
+
kind: "text";
|
|
61
|
+
fontSize: number;
|
|
62
|
+
lineHeight: number;
|
|
63
|
+
lines?: number;
|
|
64
|
+
style?: SkeletonBaseStyle;
|
|
65
|
+
shimmer?: SkeletonShimmer;
|
|
66
|
+
};
|
|
67
|
+
type EntrySkeletonSpec = {
|
|
68
|
+
layout?: SkeletonNode;
|
|
69
|
+
variant?: "solid";
|
|
70
|
+
minHeight?: SkeletonLength;
|
|
71
|
+
defaults?: {
|
|
72
|
+
backgroundColor?: string;
|
|
73
|
+
highlightColor?: string;
|
|
74
|
+
radius?: SkeletonLength;
|
|
75
|
+
shimmer?: SkeletonShimmer;
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
type EntryItem = {
|
|
80
|
+
media?: MediaItem[];
|
|
81
|
+
[key: string]: any;
|
|
82
|
+
};
|
|
83
|
+
type EntryMediaRenderArgs = {
|
|
84
|
+
entry: EntryItem;
|
|
85
|
+
entryIndex: number;
|
|
86
|
+
media: MediaItem;
|
|
87
|
+
mediaIndex: number;
|
|
88
|
+
};
|
|
89
|
+
type MediaEntryLink = {
|
|
90
|
+
entryIndex: number;
|
|
91
|
+
mediaIndex: number;
|
|
92
|
+
};
|
|
93
|
+
type EntryOverlayRenderArgs = {
|
|
94
|
+
entry: EntryItem;
|
|
95
|
+
entryIndex: number;
|
|
96
|
+
mediaIndex: number | null;
|
|
97
|
+
link: MediaEntryLink | null;
|
|
98
|
+
opacity: number;
|
|
99
|
+
fsIndex: number;
|
|
100
|
+
style: React.CSSProperties;
|
|
101
|
+
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
102
|
+
};
|
|
103
|
+
type EntryMediaLayout = "slider" | "grid" | "masonry";
|
|
104
|
+
type EntryCardRenderArgs = {
|
|
105
|
+
entry: EntryItem;
|
|
106
|
+
entryIndex: number;
|
|
107
|
+
media: React.ReactNode;
|
|
108
|
+
};
|
|
109
|
+
type EntrySkeletonResolverArgs = {
|
|
110
|
+
entry: EntryItem;
|
|
111
|
+
entryIndex: number;
|
|
112
|
+
};
|
|
113
|
+
type EntriesLoadingOptions = {
|
|
114
|
+
enabled?: boolean;
|
|
115
|
+
force?: boolean;
|
|
116
|
+
skeleton?: EntrySkeletonSpec | ((args: EntrySkeletonResolverArgs) => EntrySkeletonSpec | null | undefined);
|
|
117
|
+
minHeight?: SkeletonLength;
|
|
118
|
+
nearMargin?: string;
|
|
119
|
+
viewMargin?: string;
|
|
120
|
+
threshold?: number;
|
|
121
|
+
waitForDecode?: boolean;
|
|
122
|
+
decodeTimeoutMs?: number;
|
|
123
|
+
skeletonWrap?: ElementStyle;
|
|
124
|
+
};
|
|
125
|
+
type IntroOptions = {
|
|
126
|
+
renderIntro?: (args: {
|
|
127
|
+
active: boolean;
|
|
128
|
+
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
129
|
+
}, content: React.ReactNode) => React.ReactNode;
|
|
130
|
+
staggerMs?: number;
|
|
131
|
+
durationMs?: number;
|
|
132
|
+
easing?: string;
|
|
133
|
+
staggerLimit?: number;
|
|
134
|
+
};
|
|
135
|
+
type EntrySkeletonRenderArgs = {
|
|
136
|
+
entry: EntryItem;
|
|
137
|
+
entryIndex: number;
|
|
138
|
+
};
|
|
139
|
+
type EntriesOptions = {
|
|
140
|
+
items?: EntryItem[];
|
|
141
|
+
mediaLayout?: EntryMediaLayout;
|
|
142
|
+
render?: {
|
|
143
|
+
card?: (args: EntryCardRenderArgs) => React.ReactNode;
|
|
144
|
+
media?: (args: EntryMediaRenderArgs) => React.ReactNode;
|
|
145
|
+
overlay?: (args: EntryOverlayRenderArgs) => React.ReactNode;
|
|
146
|
+
skeleton?: (args: EntrySkeletonRenderArgs) => React.ReactNode;
|
|
147
|
+
};
|
|
148
|
+
overlay?: ElementStyle;
|
|
149
|
+
loading?: EntriesLoadingOptions;
|
|
150
|
+
intro?: IntroOptions;
|
|
151
|
+
entryList?: ElementStyle;
|
|
152
|
+
entryRow?: ElementStyle;
|
|
153
|
+
};
|
|
154
|
+
type SlideOwner = {
|
|
155
|
+
entryIndex: number;
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
export type { EntriesOptions as E, IntroOptions as I, MediaEntryLink as M, SlideOwner as S, EntryItem as a, EntryMediaRenderArgs as b, EntryOverlayRenderArgs as c, EntryMediaLayout as d, EntryCardRenderArgs as e, EntrySkeletonResolverArgs as f, EntriesLoadingOptions as g, EntrySkeletonRenderArgs as h };
|