react-motion-gallery 2.0.7 → 2.0.9
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 +1030 -30
- 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 -1178
- package/dist/index.mjs +1 -66
- 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 +35 -15
package/dist/index.d.mts
CHANGED
|
@@ -1,1067 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
classNameDot?: string;
|
|
24
|
-
};
|
|
25
|
-
type ProgressRenderArgs = {
|
|
26
|
-
ref: React.Ref<HTMLDivElement>;
|
|
27
|
-
innerRef?: React.Ref<HTMLDivElement>;
|
|
28
|
-
hidden: boolean;
|
|
29
|
-
progress: number;
|
|
30
|
-
axis: 'x' | 'y';
|
|
31
|
-
className?: string;
|
|
32
|
-
style?: React.CSSProperties;
|
|
33
|
-
innerClassName?: string;
|
|
34
|
-
innerStyle?: React.CSSProperties;
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
type ElementStyle = {
|
|
38
|
-
className?: string;
|
|
39
|
-
style?: React.CSSProperties;
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
type ThumbnailPosition = "top" | "right" | "bottom" | "left";
|
|
43
|
-
type ResponsivePosition = ThumbnailPosition | Array<ThumbnailPosition> | Record<string, ThumbnailPosition>;
|
|
44
|
-
type ThumbnailLoadingOptions = {
|
|
45
|
-
enabled?: boolean;
|
|
46
|
-
force?: boolean;
|
|
47
|
-
skeletonCount?: ResponsiveNumber;
|
|
48
|
-
renderLoading?: () => React$1.ReactNode;
|
|
49
|
-
};
|
|
50
|
-
type ThumbnailIntroOptions = {
|
|
51
|
-
renderIntro?: (args: {
|
|
52
|
-
active: boolean;
|
|
53
|
-
containerProps: React$1.HTMLAttributes<HTMLDivElement>;
|
|
54
|
-
}, inner: React$1.ReactNode) => React$1.ReactNode;
|
|
55
|
-
staggerMs?: number;
|
|
56
|
-
transform?: number;
|
|
57
|
-
durationMs?: number;
|
|
58
|
-
easing?: string;
|
|
59
|
-
};
|
|
60
|
-
type ThumbnailLayout = {
|
|
61
|
-
width?: number | string;
|
|
62
|
-
height?: number | string;
|
|
63
|
-
};
|
|
64
|
-
type ThumbnailContainerLayout = {
|
|
65
|
-
width?: number | string;
|
|
66
|
-
height?: number | string;
|
|
67
|
-
};
|
|
68
|
-
type ThumbnailsLayout = {
|
|
69
|
-
position?: ResponsivePosition;
|
|
70
|
-
gap?: number;
|
|
71
|
-
center?: boolean;
|
|
72
|
-
thumbnail?: ThumbnailLayout;
|
|
73
|
-
container?: ThumbnailContainerLayout;
|
|
74
|
-
};
|
|
75
|
-
type ThumbnailsElements = {
|
|
76
|
-
container?: ElementStyle;
|
|
77
|
-
thumbnail?: ElementStyle;
|
|
78
|
-
};
|
|
79
|
-
type ThumbnailsScroll = {
|
|
80
|
-
freeScroll?: boolean;
|
|
81
|
-
groupCells?: boolean;
|
|
82
|
-
loop?: boolean;
|
|
83
|
-
skipSnaps?: boolean;
|
|
84
|
-
centerActiveThumb?: boolean;
|
|
85
|
-
};
|
|
86
|
-
type ThumbnailsMotion = {
|
|
87
|
-
selectDuration?: number;
|
|
88
|
-
freeScrollDuration?: number;
|
|
89
|
-
friction?: number;
|
|
90
|
-
};
|
|
91
|
-
type ThumbnailsRipple = {
|
|
92
|
-
enabled?: boolean;
|
|
93
|
-
className?: string;
|
|
94
|
-
};
|
|
95
|
-
type ThumbnailsControls = {
|
|
96
|
-
enabled?: boolean;
|
|
97
|
-
arrow?: ElementStyle;
|
|
98
|
-
prev?: ElementStyle;
|
|
99
|
-
next?: ElementStyle;
|
|
100
|
-
render?: (args: ArrowRenderArgs & {
|
|
101
|
-
dir: "prev" | "next";
|
|
102
|
-
}) => React$1.ReactNode;
|
|
103
|
-
renderPrev?: (args: ArrowRenderArgs) => React$1.ReactNode;
|
|
104
|
-
renderNext?: (args: ArrowRenderArgs) => React$1.ReactNode;
|
|
105
|
-
ripple?: ThumbnailsRipple;
|
|
106
|
-
};
|
|
107
|
-
type ThumbnailsTransitions = {
|
|
108
|
-
loading?: ThumbnailLoadingOptions;
|
|
109
|
-
intro?: ThumbnailIntroOptions;
|
|
110
|
-
};
|
|
111
|
-
type ThumbnailsOptions = {
|
|
112
|
-
children?: React$1.ReactNode;
|
|
113
|
-
layout?: ThumbnailsLayout;
|
|
114
|
-
elements?: ThumbnailsElements;
|
|
115
|
-
scroll?: ThumbnailsScroll;
|
|
116
|
-
controls?: ThumbnailsControls;
|
|
117
|
-
motion?: ThumbnailsMotion;
|
|
118
|
-
transitions?: ThumbnailsTransitions;
|
|
119
|
-
breakpointMap?: BreakpointMap;
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
declare const BREAKPOINT_MAP: Record<string, number>;
|
|
123
|
-
type BreakpointMap = Record<string, number>;
|
|
124
|
-
type ResponsiveNumber = number | string | Array<number | string> | Record<string, number | string>;
|
|
125
|
-
|
|
126
|
-
type MediaItem = {
|
|
127
|
-
kind: "image";
|
|
128
|
-
src: string;
|
|
129
|
-
alt?: string;
|
|
130
|
-
caption?: React.ReactNode;
|
|
131
|
-
srcSet?: string;
|
|
132
|
-
sizes?: string;
|
|
133
|
-
width?: number;
|
|
134
|
-
height?: number;
|
|
135
|
-
} | {
|
|
136
|
-
kind: "video";
|
|
137
|
-
src: string;
|
|
138
|
-
alt?: string;
|
|
139
|
-
thumb?: string;
|
|
140
|
-
caption?: React.ReactNode;
|
|
141
|
-
};
|
|
142
|
-
declare const toMediaItems: (urls: string[]) => MediaItem[];
|
|
143
|
-
|
|
144
|
-
type IndexMode = "instant" | "animated";
|
|
145
|
-
interface GalleryApi {
|
|
146
|
-
rootNode(): HTMLElement | null;
|
|
147
|
-
containerNode(): HTMLElement | null;
|
|
148
|
-
slideNodes(): HTMLElement[];
|
|
149
|
-
onReady?(cb: (nodes: HTMLElement[]) => void): () => void;
|
|
150
|
-
whenReady?(): Promise<HTMLElement[]>;
|
|
151
|
-
isReady?(): boolean;
|
|
152
|
-
scrollTo(index: number, jump?: boolean): void;
|
|
153
|
-
scrollNext(jump?: boolean): void;
|
|
154
|
-
scrollPrev(jump?: boolean): void;
|
|
155
|
-
canScrollNext(): boolean;
|
|
156
|
-
canScrollPrev(): boolean;
|
|
157
|
-
getIndex(): number;
|
|
158
|
-
selectCell(index: number, jump?: boolean): void;
|
|
159
|
-
scrollProgress(): number;
|
|
160
|
-
cellsInView(): number[];
|
|
161
|
-
append(nodes: React.ReactNode | React.ReactNode[]): number;
|
|
162
|
-
prepend(nodes: React.ReactNode | React.ReactNode[]): number;
|
|
163
|
-
insert(index: number, nodes: React.ReactNode | React.ReactNode[]): number;
|
|
164
|
-
remove(indexOrPredicate: number | ((i: number) => boolean)): number;
|
|
165
|
-
replace(index: number, node: React.ReactNode): void;
|
|
166
|
-
setItems(nodes: React.ReactNode[]): number;
|
|
167
|
-
onIndexChange(cb: (i: number, meta: {
|
|
168
|
-
mode: IndexMode;
|
|
169
|
-
}) => void): () => void;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
type SkeletonLength$3 = number | string;
|
|
173
|
-
type SkeletonShimmer$3 = {
|
|
174
|
-
enabled?: boolean;
|
|
175
|
-
durationMs?: number;
|
|
176
|
-
angleDeg?: number;
|
|
177
|
-
opacity?: number;
|
|
178
|
-
blurPx?: number;
|
|
179
|
-
timing?: string;
|
|
180
|
-
c1?: string;
|
|
181
|
-
c2?: string;
|
|
182
|
-
c3?: string;
|
|
183
|
-
};
|
|
184
|
-
type SkeletonBaseStyle$2 = {
|
|
185
|
-
width?: SkeletonLength$3;
|
|
186
|
-
maxWidth?: SkeletonLength$3;
|
|
187
|
-
height?: SkeletonLength$3;
|
|
188
|
-
maxHeight?: SkeletonLength$3;
|
|
189
|
-
backgroundColor?: string;
|
|
190
|
-
borderRadius?: SkeletonLength$3;
|
|
191
|
-
marginTop?: SkeletonLength$3;
|
|
192
|
-
marginRight?: SkeletonLength$3;
|
|
193
|
-
marginBottom?: SkeletonLength$3;
|
|
194
|
-
marginLeft?: SkeletonLength$3;
|
|
195
|
-
alignSelf?: React$1.CSSProperties["alignSelf"];
|
|
196
|
-
aspectRatio?: SkeletonLength$3;
|
|
197
|
-
};
|
|
198
|
-
type SkeletonContainerStyle$2 = {
|
|
199
|
-
gap?: SkeletonLength$3;
|
|
200
|
-
padding?: SkeletonLength$3;
|
|
201
|
-
align?: React$1.CSSProperties["alignItems"];
|
|
202
|
-
justify?: React$1.CSSProperties["justifyContent"];
|
|
203
|
-
wrap?: boolean;
|
|
204
|
-
width?: SkeletonLength$3;
|
|
205
|
-
maxWidth?: SkeletonLength$3;
|
|
206
|
-
};
|
|
207
|
-
type SkeletonContainerStyleResponsive$2 = SkeletonContainerStyle$2 | Record<string, SkeletonContainerStyle$2>;
|
|
208
|
-
type SliderSkeletonNode = {
|
|
209
|
-
kind: "slider";
|
|
210
|
-
style?: SkeletonContainerStyleResponsive$2;
|
|
211
|
-
count?: number;
|
|
212
|
-
item: SkeletonNode$2;
|
|
213
|
-
itemWrapStyle?: SkeletonBaseStyle$2;
|
|
214
|
-
direction?: "row" | "col";
|
|
215
|
-
} | SkeletonNode$2;
|
|
216
|
-
type SkeletonNode$2 = {
|
|
217
|
-
kind: "stack" | "row" | "col";
|
|
218
|
-
style?: SkeletonContainerStyleResponsive$2;
|
|
219
|
-
children: SkeletonNode$2[];
|
|
220
|
-
} | {
|
|
221
|
-
kind: "rect" | "square" | "circle";
|
|
222
|
-
style?: SkeletonBaseStyle$2;
|
|
223
|
-
shimmer?: SkeletonShimmer$3;
|
|
224
|
-
} | {
|
|
225
|
-
kind: "media";
|
|
226
|
-
count: number;
|
|
227
|
-
direction?: "row" | "col";
|
|
228
|
-
style?: SkeletonContainerStyleResponsive$2;
|
|
229
|
-
tile?: {
|
|
230
|
-
shape?: "rect" | "square" | "circle";
|
|
231
|
-
style?: SkeletonBaseStyle$2;
|
|
232
|
-
shimmer?: SkeletonShimmer$3;
|
|
233
|
-
};
|
|
234
|
-
};
|
|
235
|
-
type SliderSkeletonSpec = {
|
|
236
|
-
className?: string;
|
|
237
|
-
layout?: SliderSkeletonNode;
|
|
238
|
-
defaults?: {
|
|
239
|
-
backgroundColor?: string;
|
|
240
|
-
highlightColor?: string;
|
|
241
|
-
radius?: SkeletonLength$3;
|
|
242
|
-
shimmer?: SkeletonShimmer$3;
|
|
243
|
-
};
|
|
244
|
-
};
|
|
245
|
-
|
|
246
|
-
type ResponsiveHeightRule = {
|
|
247
|
-
query: string;
|
|
248
|
-
height: string;
|
|
249
|
-
};
|
|
250
|
-
type SliderLayout = {
|
|
251
|
-
gap?: number;
|
|
252
|
-
cellsPerSlide?: ResponsiveNumber;
|
|
253
|
-
};
|
|
254
|
-
type SliderDirection = {
|
|
255
|
-
dir?: "ltr" | "rtl";
|
|
256
|
-
axis?: "x" | "y";
|
|
257
|
-
};
|
|
258
|
-
type SliderSize = {
|
|
259
|
-
height?: string;
|
|
260
|
-
heightRules?: ResponsiveHeightRule[];
|
|
261
|
-
initialHeight?: number | string;
|
|
262
|
-
initialHeightRules?: ResponsiveHeightRule[];
|
|
263
|
-
aspectRatio?: number | `${number}/${number}` | `${number} / ${number}`;
|
|
264
|
-
};
|
|
265
|
-
type SliderElements = {
|
|
266
|
-
viewport?: ElementStyle;
|
|
267
|
-
container?: ElementStyle;
|
|
268
|
-
};
|
|
269
|
-
type SliderScroll = {
|
|
270
|
-
groupCells?: boolean;
|
|
271
|
-
skipSnaps?: boolean;
|
|
272
|
-
freeScroll?: boolean;
|
|
273
|
-
loop?: boolean;
|
|
274
|
-
};
|
|
275
|
-
type SliderArrows = {
|
|
276
|
-
enabled?: boolean;
|
|
277
|
-
arrow?: ElementStyle;
|
|
278
|
-
prev?: ElementStyle;
|
|
279
|
-
next?: ElementStyle;
|
|
280
|
-
render?: (args: ArrowRenderArgs & {
|
|
281
|
-
dir: "prev" | "next";
|
|
282
|
-
}) => React.ReactNode;
|
|
283
|
-
renderPrev?: (args: ArrowRenderArgs) => React.ReactNode;
|
|
284
|
-
renderNext?: (args: ArrowRenderArgs) => React.ReactNode;
|
|
285
|
-
};
|
|
286
|
-
type SliderDots = {
|
|
287
|
-
enabled?: boolean;
|
|
288
|
-
root?: ElementStyle;
|
|
289
|
-
dot?: ElementStyle;
|
|
290
|
-
render?: (args: DotsRenderArgs) => React.ReactNode;
|
|
291
|
-
};
|
|
292
|
-
type SliderProgress = {
|
|
293
|
-
enabled?: boolean;
|
|
294
|
-
root?: ElementStyle;
|
|
295
|
-
bar?: ElementStyle;
|
|
296
|
-
render?: (args: ProgressRenderArgs) => React.ReactNode;
|
|
297
|
-
};
|
|
298
|
-
type SliderRipple = {
|
|
299
|
-
enabled?: boolean;
|
|
300
|
-
className?: string;
|
|
301
|
-
};
|
|
302
|
-
type SliderControls = {
|
|
303
|
-
arrows?: SliderArrows;
|
|
304
|
-
dots?: SliderDots;
|
|
305
|
-
progress?: SliderProgress;
|
|
306
|
-
ripple?: SliderRipple;
|
|
307
|
-
};
|
|
308
|
-
type SliderAutoPlay = {
|
|
309
|
-
enabled?: boolean;
|
|
310
|
-
speedMs?: number;
|
|
311
|
-
pauseMs?: number;
|
|
312
|
-
pauseOnHover?: boolean;
|
|
313
|
-
};
|
|
314
|
-
type SliderAutoScroll = {
|
|
315
|
-
enabled?: boolean;
|
|
316
|
-
speedMs?: number;
|
|
317
|
-
pauseMs?: number;
|
|
318
|
-
pauseOnHover?: boolean;
|
|
319
|
-
};
|
|
320
|
-
type SliderAuto = {
|
|
321
|
-
play?: SliderAutoPlay;
|
|
322
|
-
scroll?: SliderAutoScroll;
|
|
323
|
-
};
|
|
324
|
-
type SliderLoadingOptions = {
|
|
325
|
-
enabled?: boolean;
|
|
326
|
-
force?: boolean;
|
|
327
|
-
skeletonCount?: ResponsiveNumber;
|
|
328
|
-
renderLoading?: (args: {
|
|
329
|
-
count: number;
|
|
330
|
-
}) => React.ReactNode;
|
|
331
|
-
skeleton?: SliderSkeletonSpec;
|
|
332
|
-
};
|
|
333
|
-
type SliderIntroOptions = {
|
|
334
|
-
renderIntro?: (args: {
|
|
335
|
-
active: boolean;
|
|
336
|
-
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
337
|
-
}, content: React.ReactNode) => React.ReactNode;
|
|
338
|
-
staggerMs?: number;
|
|
339
|
-
transform?: number | string;
|
|
340
|
-
durationMs?: number;
|
|
341
|
-
easing?: string;
|
|
342
|
-
};
|
|
343
|
-
type SliderTransitions = {
|
|
344
|
-
loading?: SliderLoadingOptions;
|
|
345
|
-
intro?: SliderIntroOptions;
|
|
346
|
-
};
|
|
347
|
-
type SliderParallax = {
|
|
348
|
-
enabled?: boolean;
|
|
349
|
-
bleedPct?: string;
|
|
350
|
-
borderRadius?: string;
|
|
351
|
-
sideWidth?: string;
|
|
352
|
-
};
|
|
353
|
-
type SliderScale = {
|
|
354
|
-
enabled?: boolean;
|
|
355
|
-
amount?: number;
|
|
356
|
-
};
|
|
357
|
-
type SliderFade = {
|
|
358
|
-
enabled?: boolean;
|
|
359
|
-
};
|
|
360
|
-
type SliderEffects = {
|
|
361
|
-
parallax?: SliderParallax;
|
|
362
|
-
scale?: SliderScale;
|
|
363
|
-
fade?: SliderFade;
|
|
364
|
-
};
|
|
365
|
-
type SliderMotion = {
|
|
366
|
-
selectDuration?: number;
|
|
367
|
-
freeScrollDuration?: number;
|
|
368
|
-
friction?: number;
|
|
369
|
-
};
|
|
370
|
-
type SliderOptions = {
|
|
371
|
-
layout?: SliderLayout;
|
|
372
|
-
direction?: SliderDirection;
|
|
373
|
-
size?: SliderSize;
|
|
374
|
-
align?: "start" | "center";
|
|
375
|
-
scroll?: SliderScroll;
|
|
376
|
-
elements?: SliderElements;
|
|
377
|
-
lazyLoad?: boolean;
|
|
378
|
-
controls?: SliderControls;
|
|
379
|
-
thumbnails?: ThumbnailsOptions;
|
|
380
|
-
auto?: SliderAuto;
|
|
381
|
-
transitions?: SliderTransitions;
|
|
382
|
-
motion?: SliderMotion;
|
|
383
|
-
effects?: SliderEffects;
|
|
384
|
-
};
|
|
385
|
-
interface SliderHandle {
|
|
386
|
-
centerSlider: () => void;
|
|
387
|
-
getIndex: () => number;
|
|
388
|
-
setIndex: (i: number, mode?: IndexMode) => void;
|
|
389
|
-
subscribeIndex: (fn: () => void) => () => void;
|
|
390
|
-
slideIndexForCell: (cellIndex: number) => number;
|
|
391
|
-
getRootNode(): HTMLElement | null;
|
|
392
|
-
getContainerNode(): HTMLElement | null;
|
|
393
|
-
getSlideNodes(): HTMLElement[];
|
|
394
|
-
onSlidesBuilt(cb: (nodes: HTMLElement[]) => void): () => void;
|
|
395
|
-
whenSlidesBuilt(): Promise<HTMLElement[]>;
|
|
396
|
-
isSlidesBuilt(): boolean;
|
|
397
|
-
scrollNext: (mode?: IndexMode) => void;
|
|
398
|
-
scrollPrev: (mode?: IndexMode) => void;
|
|
399
|
-
canScrollNext: () => boolean;
|
|
400
|
-
canScrollPrev: () => boolean;
|
|
401
|
-
scrollProgress: () => number;
|
|
402
|
-
cellsInView: () => number[];
|
|
403
|
-
getInternals(): {
|
|
404
|
-
slides: RefObject<{
|
|
405
|
-
cells: {
|
|
406
|
-
element: HTMLElement;
|
|
407
|
-
index: number;
|
|
408
|
-
}[];
|
|
409
|
-
target: number;
|
|
410
|
-
}[]>;
|
|
411
|
-
slider: RefObject<HTMLDivElement | null>;
|
|
412
|
-
visibleImages: RefObject<number>;
|
|
413
|
-
selectedIndex: RefObject<number>;
|
|
414
|
-
sliderX: RefObject<number>;
|
|
415
|
-
sliderVelocity: RefObject<number>;
|
|
416
|
-
isWrapping: RefObject<boolean>;
|
|
417
|
-
};
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
type SkeletonLength$2 = number | string;
|
|
421
|
-
type SkeletonShimmer$2 = {
|
|
422
|
-
enabled?: boolean;
|
|
423
|
-
durationMs?: number;
|
|
424
|
-
angleDeg?: number;
|
|
425
|
-
opacity?: number;
|
|
426
|
-
blurPx?: number;
|
|
427
|
-
timing?: string;
|
|
428
|
-
c1?: string;
|
|
429
|
-
c2?: string;
|
|
430
|
-
c3?: string;
|
|
431
|
-
};
|
|
432
|
-
type SkeletonBaseStyle$1 = {
|
|
433
|
-
width?: SkeletonLength$2;
|
|
434
|
-
maxWidth?: SkeletonLength$2;
|
|
435
|
-
height?: SkeletonLength$2;
|
|
436
|
-
maxHeight?: SkeletonLength$2;
|
|
437
|
-
backgroundColor?: string;
|
|
438
|
-
borderRadius?: SkeletonLength$2;
|
|
439
|
-
marginTop?: SkeletonLength$2;
|
|
440
|
-
marginRight?: SkeletonLength$2;
|
|
441
|
-
marginBottom?: SkeletonLength$2;
|
|
442
|
-
marginLeft?: SkeletonLength$2;
|
|
443
|
-
alignSelf?: React$1.CSSProperties["alignSelf"];
|
|
444
|
-
aspectRatio?: number | string;
|
|
445
|
-
};
|
|
446
|
-
type SkeletonContainerStyle$1 = {
|
|
447
|
-
gap?: SkeletonLength$2;
|
|
448
|
-
padding?: SkeletonLength$2;
|
|
449
|
-
align?: React$1.CSSProperties["alignItems"];
|
|
450
|
-
justify?: React$1.CSSProperties["justifyContent"];
|
|
451
|
-
wrap?: boolean;
|
|
452
|
-
width?: SkeletonLength$2;
|
|
453
|
-
maxWidth?: SkeletonLength$2;
|
|
454
|
-
};
|
|
455
|
-
type SkeletonContainerStyleResponsive$1 = SkeletonContainerStyle$1 | Record<string, SkeletonContainerStyle$1>;
|
|
456
|
-
type SkeletonNode$1 = {
|
|
457
|
-
kind: "stack" | "row" | "col";
|
|
458
|
-
style?: SkeletonContainerStyleResponsive$1;
|
|
459
|
-
children: SkeletonNode$1[];
|
|
460
|
-
} | {
|
|
461
|
-
kind: "rect" | "square" | "circle";
|
|
462
|
-
style?: SkeletonBaseStyle$1;
|
|
463
|
-
shimmer?: SkeletonShimmer$2;
|
|
464
|
-
} | {
|
|
465
|
-
kind: "media";
|
|
466
|
-
count: number;
|
|
467
|
-
direction?: "row" | "col";
|
|
468
|
-
style?: SkeletonContainerStyleResponsive$1;
|
|
469
|
-
tile?: {
|
|
470
|
-
shape?: "rect" | "square" | "circle";
|
|
471
|
-
style?: SkeletonBaseStyle$1;
|
|
472
|
-
shimmer?: SkeletonShimmer$2;
|
|
473
|
-
};
|
|
474
|
-
};
|
|
475
|
-
type EntrySkeletonSpec = {
|
|
476
|
-
layout?: SkeletonNode$1;
|
|
477
|
-
variant?: "solid";
|
|
478
|
-
minHeight?: SkeletonLength$2;
|
|
479
|
-
defaults?: {
|
|
480
|
-
backgroundColor?: string;
|
|
481
|
-
highlightColor?: string;
|
|
482
|
-
radius?: SkeletonLength$2;
|
|
483
|
-
shimmer?: SkeletonShimmer$2;
|
|
484
|
-
};
|
|
485
|
-
};
|
|
486
|
-
|
|
487
|
-
type EntryItem = {
|
|
488
|
-
media?: MediaItem[];
|
|
489
|
-
[key: string]: any;
|
|
490
|
-
};
|
|
491
|
-
type EntryMediaRenderArgs = {
|
|
492
|
-
entry: EntryItem;
|
|
493
|
-
entryIndex: number;
|
|
494
|
-
media: MediaItem;
|
|
495
|
-
mediaIndex: number;
|
|
496
|
-
};
|
|
497
|
-
type MediaEntryLink = {
|
|
498
|
-
entryIndex: number;
|
|
499
|
-
mediaIndex: number;
|
|
500
|
-
};
|
|
501
|
-
type EntryOverlayRenderArgs = {
|
|
502
|
-
entry: EntryItem;
|
|
503
|
-
entryIndex: number;
|
|
504
|
-
mediaIndex: number | null;
|
|
505
|
-
link: MediaEntryLink | null;
|
|
506
|
-
opacity: number;
|
|
507
|
-
fsIndex: number;
|
|
508
|
-
style: React.CSSProperties;
|
|
509
|
-
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
510
|
-
};
|
|
511
|
-
type EntryMediaLayout = "slider" | "grid" | "masonry";
|
|
512
|
-
type EntryCardRenderArgs = {
|
|
513
|
-
entry: EntryItem;
|
|
514
|
-
entryIndex: number;
|
|
515
|
-
media: React.ReactNode;
|
|
516
|
-
};
|
|
517
|
-
type EntrySkeletonResolverArgs = {
|
|
518
|
-
entry: EntryItem;
|
|
519
|
-
entryIndex: number;
|
|
520
|
-
};
|
|
521
|
-
type EntriesLoadingOptions = {
|
|
522
|
-
enabled?: boolean;
|
|
523
|
-
force?: boolean;
|
|
524
|
-
skeleton?: EntrySkeletonSpec | ((args: EntrySkeletonResolverArgs) => EntrySkeletonSpec | null | undefined);
|
|
525
|
-
minHeight?: SkeletonLength$2;
|
|
526
|
-
nearMargin?: string;
|
|
527
|
-
viewMargin?: string;
|
|
528
|
-
threshold?: number;
|
|
529
|
-
waitForDecode?: boolean;
|
|
530
|
-
decodeTimeoutMs?: number;
|
|
531
|
-
skeletonWrap?: ElementStyle;
|
|
532
|
-
};
|
|
533
|
-
type IntroOptions$2 = {
|
|
534
|
-
renderIntro?: (args: {
|
|
535
|
-
active: boolean;
|
|
536
|
-
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
537
|
-
}, content: React.ReactNode) => React.ReactNode;
|
|
538
|
-
staggerMs?: number;
|
|
539
|
-
durationMs?: number;
|
|
540
|
-
easing?: string;
|
|
541
|
-
staggerLimit?: number;
|
|
542
|
-
};
|
|
543
|
-
type EntrySkeletonRenderArgs = {
|
|
544
|
-
entry: EntryItem;
|
|
545
|
-
entryIndex: number;
|
|
546
|
-
};
|
|
547
|
-
type EntriesOptions = {
|
|
548
|
-
items?: EntryItem[];
|
|
549
|
-
mediaLayout?: EntryMediaLayout;
|
|
550
|
-
render?: {
|
|
551
|
-
card?: (args: EntryCardRenderArgs) => React.ReactNode;
|
|
552
|
-
media?: (args: EntryMediaRenderArgs) => React.ReactNode;
|
|
553
|
-
overlay?: (args: EntryOverlayRenderArgs) => React.ReactNode;
|
|
554
|
-
skeleton?: (args: EntrySkeletonRenderArgs) => React.ReactNode;
|
|
555
|
-
};
|
|
556
|
-
overlay?: ElementStyle;
|
|
557
|
-
loading?: EntriesLoadingOptions;
|
|
558
|
-
intro?: IntroOptions$2;
|
|
559
|
-
entryList?: ElementStyle;
|
|
560
|
-
entryRow?: ElementStyle;
|
|
561
|
-
};
|
|
562
|
-
type SlideOwner = {
|
|
563
|
-
entryIndex: number;
|
|
564
|
-
};
|
|
565
|
-
|
|
566
|
-
declare const DEFAULT_ENTRIES: Required<Pick<EntriesOptions, "mediaLayout">>;
|
|
567
|
-
|
|
568
|
-
type EntriesMediaContainerRender = (args: {
|
|
569
|
-
entryIndex: number;
|
|
570
|
-
mediaNodes: React$1.ReactNode[];
|
|
571
|
-
entrySliderRefs?: React$1.RefObject<Array<SliderHandle | null>>;
|
|
572
|
-
}) => React$1.ReactNode;
|
|
573
|
-
type FullscreenItemsInput = MediaItem[] | string[];
|
|
574
|
-
declare function flattenEntries(items: EntryItem[] | undefined): {
|
|
575
|
-
flattenedMedia: MediaItem[];
|
|
576
|
-
flattenedMap: MediaEntryLink[];
|
|
577
|
-
entryFlatIndex: number[][] | null;
|
|
578
|
-
owners: SlideOwner[];
|
|
579
|
-
};
|
|
580
|
-
type EntriesProps = {
|
|
581
|
-
enabled?: boolean;
|
|
582
|
-
entries: EntriesOptions;
|
|
583
|
-
fullscreen?: {
|
|
584
|
-
enabled?: boolean;
|
|
585
|
-
items?: FullscreenItemsInput;
|
|
586
|
-
};
|
|
587
|
-
renderMediaContainer: EntriesMediaContainerRender;
|
|
588
|
-
nodeFromMedia?: (m: MediaItem) => React$1.ReactNode;
|
|
589
|
-
entryFlatIndexRef?: React$1.RefObject<number[][] | null>;
|
|
590
|
-
entryMapRef?: React$1.RefObject<MediaEntryLink[] | null>;
|
|
591
|
-
fsOwnersRef?: React$1.RefObject<SlideOwner[]>;
|
|
592
|
-
entrySliderRefs?: React$1.RefObject<Array<SliderHandle | null>>;
|
|
593
|
-
onOpenFullscreen?: (args: {
|
|
594
|
-
index: number;
|
|
595
|
-
img: HTMLImageElement;
|
|
596
|
-
event?: Event;
|
|
597
|
-
}) => void;
|
|
598
|
-
};
|
|
599
|
-
declare function Entries(props: EntriesProps): react_jsx_runtime.JSX.Element;
|
|
600
|
-
|
|
601
|
-
type FullscreenOpenRequest = {
|
|
602
|
-
source: "slider";
|
|
603
|
-
index: number;
|
|
604
|
-
img: HTMLImageElement | null;
|
|
605
|
-
event?: Event;
|
|
606
|
-
} | {
|
|
607
|
-
source: "grid" | "masonry" | "entries";
|
|
608
|
-
index: number;
|
|
609
|
-
img: HTMLImageElement | null;
|
|
610
|
-
event?: Event;
|
|
611
|
-
};
|
|
612
|
-
type CoreLayout = "slider" | "grid" | "masonry" | "entries";
|
|
613
|
-
type Cell = {
|
|
614
|
-
id: string;
|
|
615
|
-
node: React$1.ReactNode;
|
|
616
|
-
};
|
|
617
|
-
type FullscreenSource = FullscreenOpenRequest["source"];
|
|
618
|
-
type FullscreenEntryContext = {
|
|
619
|
-
entryMapRef?: React$1.RefObject<MediaEntryLink[] | null>;
|
|
620
|
-
entryMediaLayout?: "slider" | "grid" | "masonry";
|
|
621
|
-
entriesObject?: any;
|
|
622
|
-
entrySliderRefs?: React$1.RefObject<Array<SliderHandle | null>>;
|
|
623
|
-
expandableImgRefs?: React$1.RefObject<Array<HTMLImageElement | null>>;
|
|
624
|
-
};
|
|
625
|
-
type FullscreenSourceAdapter = {
|
|
626
|
-
getOwnerSliderHandle?: (index: number) => SliderHandle | null;
|
|
627
|
-
syncBeforeOpen?: (index: number) => void;
|
|
628
|
-
closestSelector?: string;
|
|
629
|
-
getEntryContext?: () => FullscreenEntryContext;
|
|
630
|
-
};
|
|
631
|
-
type GalleryCoreProps = {
|
|
632
|
-
children?: React$1.ReactNode;
|
|
633
|
-
layout: CoreLayout;
|
|
634
|
-
breakpoints?: BreakpointMap;
|
|
635
|
-
fullscreenItems?: MediaItem[] | string[];
|
|
636
|
-
nodes?: React$1.ReactNode | React$1.ReactNode[];
|
|
637
|
-
};
|
|
638
|
-
declare function GalleryCoreProvider(props: GalleryCoreProps): react_jsx_runtime.JSX.Element;
|
|
639
|
-
type GalleryCore = {
|
|
640
|
-
layout: CoreLayout;
|
|
641
|
-
effectiveBreakpoints: BreakpointMap;
|
|
642
|
-
cellsState: Cell[];
|
|
643
|
-
cellsRef: React$1.RefObject<Cell[]>;
|
|
644
|
-
normalizedItems: MediaItem[];
|
|
645
|
-
setNormalizedItems: React$1.Dispatch<React$1.SetStateAction<MediaItem[]>>;
|
|
646
|
-
sliderApiRef: React$1.RefObject<SliderHandle | null>;
|
|
647
|
-
append: (nodes: React$1.ReactNode | React$1.ReactNode[]) => number;
|
|
648
|
-
prepend: (nodes: React$1.ReactNode | React$1.ReactNode[]) => number;
|
|
649
|
-
insert: (index: number, nodes: React$1.ReactNode | React$1.ReactNode[]) => number;
|
|
650
|
-
remove: (index: number) => number;
|
|
651
|
-
replace: (index: number, node: React$1.ReactNode) => void;
|
|
652
|
-
setItems: (nodes: React$1.ReactNode[]) => number;
|
|
653
|
-
requestFullscreenOpen: (req: FullscreenOpenRequest) => void;
|
|
654
|
-
fsOpenSub: {
|
|
655
|
-
emit(v: FullscreenOpenRequest): void;
|
|
656
|
-
subscribe(fn: (v: FullscreenOpenRequest) => void): () => void;
|
|
657
|
-
};
|
|
658
|
-
isFullscreenOpen: boolean;
|
|
659
|
-
isFullscreenOpenRef: React$1.RefObject<boolean>;
|
|
660
|
-
setFullscreenOpen: (open: boolean) => void;
|
|
661
|
-
registerFullscreenAdapter: (source: FullscreenSource, a: FullscreenSourceAdapter) => void;
|
|
662
|
-
getFullscreenAdapter: (source: FullscreenSource) => FullscreenSourceAdapter | null;
|
|
663
|
-
expandableImgRefs: React$1.RefObject<Array<HTMLImageElement | null>>;
|
|
664
|
-
registerExpandableImg: (index: number, node: HTMLElement | null) => void;
|
|
665
|
-
};
|
|
666
|
-
declare const GalleryCore: typeof GalleryCoreProvider;
|
|
667
|
-
|
|
668
|
-
type FsCounterArgs = {
|
|
669
|
-
index: number;
|
|
670
|
-
count: number;
|
|
671
|
-
};
|
|
672
|
-
type FsCaptionPlacement = "top" | "right" | "bottom" | "left";
|
|
673
|
-
type FsIntroRequest = null | {
|
|
674
|
-
origImg: HTMLImageElement;
|
|
675
|
-
index: number;
|
|
676
|
-
closestSelector?: string;
|
|
677
|
-
};
|
|
678
|
-
type FSImageRender = (args: {
|
|
679
|
-
item: Extract<MediaItem, {
|
|
680
|
-
kind: "image";
|
|
681
|
-
}>;
|
|
682
|
-
index: number;
|
|
683
|
-
isZoomed: boolean;
|
|
684
|
-
className: string;
|
|
685
|
-
baseStyle: React$1.CSSProperties;
|
|
686
|
-
}) => React$1.ReactNode;
|
|
687
|
-
type PlyrSourceBuilder = (item: MediaItem, index: number) => Plyr.SourceInfo;
|
|
688
|
-
type PlyrOptionsResolver = Plyr.Options | ((item: MediaItem, index: number) => Plyr.Options);
|
|
689
|
-
type FullscreenArrows = {
|
|
690
|
-
enabled?: boolean;
|
|
691
|
-
arrow?: ElementStyle;
|
|
692
|
-
prev?: ElementStyle;
|
|
693
|
-
next?: ElementStyle;
|
|
694
|
-
render?: (args: {
|
|
695
|
-
dir: "prev" | "next";
|
|
696
|
-
}) => React$1.ReactNode;
|
|
697
|
-
renderPrev?: () => React$1.ReactNode;
|
|
698
|
-
renderNext?: () => React$1.ReactNode;
|
|
699
|
-
};
|
|
700
|
-
type FullscreenClose = {
|
|
701
|
-
enabled?: boolean;
|
|
702
|
-
style?: React$1.CSSProperties;
|
|
703
|
-
className?: string;
|
|
704
|
-
render?: () => React$1.ReactNode;
|
|
705
|
-
};
|
|
706
|
-
type FullscreenCounter = {
|
|
707
|
-
enabled?: boolean;
|
|
708
|
-
style?: React$1.CSSProperties;
|
|
709
|
-
className?: string;
|
|
710
|
-
render?: (args: FsCounterArgs) => React$1.ReactNode;
|
|
711
|
-
};
|
|
712
|
-
type FullscreenControlsOptions = {
|
|
713
|
-
close?: FullscreenClose;
|
|
714
|
-
arrows?: FullscreenArrows;
|
|
715
|
-
counter?: FullscreenCounter;
|
|
716
|
-
};
|
|
717
|
-
type FsCaptionRenderArgs = {
|
|
718
|
-
item: MediaItem;
|
|
719
|
-
index: number;
|
|
720
|
-
isZoomed: boolean;
|
|
721
|
-
};
|
|
722
|
-
type FullscreenCaptionOptions = {
|
|
723
|
-
className?: string;
|
|
724
|
-
style?: React$1.CSSProperties;
|
|
725
|
-
placement?: FsCaptionPlacement;
|
|
726
|
-
width?: number;
|
|
727
|
-
height?: number;
|
|
728
|
-
breakpoint?: number;
|
|
729
|
-
render?: (args: FsCaptionRenderArgs) => React$1.ReactNode;
|
|
730
|
-
};
|
|
731
|
-
type FullscreenEffectsOptions = {
|
|
732
|
-
introDuration?: number;
|
|
733
|
-
introEasing?: string;
|
|
734
|
-
introFade?: boolean;
|
|
735
|
-
slideFade?: boolean;
|
|
736
|
-
slideFadeDuration?: number;
|
|
737
|
-
slideFadeEasing?: string;
|
|
738
|
-
thumbnailsFadeDuration?: number;
|
|
739
|
-
thumbnailsFadeEasing?: string;
|
|
740
|
-
};
|
|
741
|
-
type FullscreenSliderOptions = {
|
|
742
|
-
duration?: number;
|
|
743
|
-
friction?: number;
|
|
744
|
-
};
|
|
745
|
-
type FullscreenZoomPanOptions = {
|
|
746
|
-
clickZoomLevel?: number;
|
|
747
|
-
maxZoomLevel?: number;
|
|
748
|
-
panDuration?: number;
|
|
749
|
-
panFriction?: number;
|
|
750
|
-
};
|
|
751
|
-
type FullscreenVideoOptions = {
|
|
752
|
-
source?: PlyrSourceBuilder;
|
|
753
|
-
options?: PlyrOptionsResolver;
|
|
754
|
-
style?: React$1.CSSProperties;
|
|
755
|
-
className?: string;
|
|
756
|
-
};
|
|
757
|
-
type FullscreenOptions = {
|
|
758
|
-
enabled?: boolean;
|
|
759
|
-
items?: MediaItem[] | string[];
|
|
760
|
-
renderImage?: FSImageRender;
|
|
761
|
-
video?: FullscreenVideoOptions;
|
|
762
|
-
thumbnails?: ThumbnailsOptions;
|
|
763
|
-
controls?: FullscreenControlsOptions;
|
|
764
|
-
caption?: FullscreenCaptionOptions;
|
|
765
|
-
slider?: FullscreenSliderOptions;
|
|
766
|
-
zoom?: FullscreenZoomPanOptions;
|
|
767
|
-
effects?: FullscreenEffectsOptions;
|
|
768
|
-
};
|
|
769
|
-
|
|
770
|
-
type UseFullscreenArgs = {
|
|
771
|
-
fullscreen?: FullscreenOptions;
|
|
772
|
-
slider?: SliderOptions;
|
|
773
|
-
sliderObject: any;
|
|
774
|
-
cellsStateLength: number;
|
|
775
|
-
};
|
|
776
|
-
declare function useFullscreenController(args: UseFullscreenArgs): {
|
|
777
|
-
fs: {
|
|
778
|
-
slider: {
|
|
779
|
-
duration: number;
|
|
780
|
-
friction: number;
|
|
781
|
-
};
|
|
782
|
-
zoom: {
|
|
783
|
-
clickZoomLevel: number;
|
|
784
|
-
maxZoomLevel: number;
|
|
785
|
-
panDuration: number;
|
|
786
|
-
panFriction: number;
|
|
787
|
-
};
|
|
788
|
-
effects: {
|
|
789
|
-
introDuration: number;
|
|
790
|
-
introEasing: string;
|
|
791
|
-
introFade: boolean;
|
|
792
|
-
slideFade: boolean;
|
|
793
|
-
slideFadeDuration: number;
|
|
794
|
-
slideFadeEasing: string;
|
|
795
|
-
thumbnailsFadeDuration: number;
|
|
796
|
-
thumbnailsFadeEasing: string;
|
|
797
|
-
};
|
|
798
|
-
controls: {
|
|
799
|
-
close?: FullscreenClose;
|
|
800
|
-
arrows?: FullscreenArrows;
|
|
801
|
-
counter?: FullscreenCounter;
|
|
802
|
-
};
|
|
803
|
-
caption: {
|
|
804
|
-
className?: string;
|
|
805
|
-
style?: React__default.CSSProperties;
|
|
806
|
-
placement?: FsCaptionPlacement;
|
|
807
|
-
width?: number;
|
|
808
|
-
height?: number;
|
|
809
|
-
breakpoint?: number;
|
|
810
|
-
render?: (args: FsCaptionRenderArgs) => React__default.ReactNode;
|
|
811
|
-
};
|
|
812
|
-
thumbnails: {
|
|
813
|
-
children?: React__default.ReactNode;
|
|
814
|
-
layout?: ThumbnailsLayout;
|
|
815
|
-
elements?: ThumbnailsElements;
|
|
816
|
-
scroll?: ThumbnailsScroll;
|
|
817
|
-
controls?: ThumbnailsControls;
|
|
818
|
-
motion?: ThumbnailsMotion;
|
|
819
|
-
transitions?: ThumbnailsTransitions;
|
|
820
|
-
breakpointMap?: BreakpointMap;
|
|
821
|
-
};
|
|
822
|
-
enabled: boolean;
|
|
823
|
-
items?: MediaItem[] | string[];
|
|
824
|
-
renderImage?: FSImageRender;
|
|
825
|
-
video?: FullscreenVideoOptions;
|
|
826
|
-
};
|
|
827
|
-
fullscreenNode: react_jsx_runtime.JSX.Element | null;
|
|
828
|
-
openFullscreenAt: (source: FullscreenOpenRequest["source"], gridIndex: number, originEl?: HTMLElement | null) => void;
|
|
829
|
-
isClick: React__default.RefObject<boolean>;
|
|
830
|
-
expandableImgRefs: React__default.RefObject<(HTMLImageElement | null)[]>;
|
|
831
|
-
overlayDivRef: React__default.RefObject<HTMLDivElement | null>;
|
|
832
|
-
duplicateImgRef: React__default.RefObject<HTMLElement | null>;
|
|
833
|
-
closeButtonRef: React__default.RefObject<HTMLElement | null>;
|
|
834
|
-
counterRef: React__default.RefObject<HTMLElement | null>;
|
|
835
|
-
leftChevronRef: React__default.RefObject<HTMLElement | null>;
|
|
836
|
-
rightChevronRef: React__default.RefObject<HTMLElement | null>;
|
|
837
|
-
sliderForFullscreen: React__default.RefObject<HTMLDivElement | null>;
|
|
838
|
-
slidesForFullscreen: React__default.RefObject<{
|
|
839
|
-
cells: {
|
|
840
|
-
element: HTMLElement;
|
|
841
|
-
index: number;
|
|
842
|
-
}[];
|
|
843
|
-
target: number;
|
|
844
|
-
}[]>;
|
|
845
|
-
visibleImagesForFullscreen: React__default.RefObject<number>;
|
|
846
|
-
selectedIndexForFullscreen: React__default.RefObject<number>;
|
|
847
|
-
sliderXForFullscreen: React__default.RefObject<number>;
|
|
848
|
-
sliderVelocityForFullscreen: React__default.RefObject<number>;
|
|
849
|
-
isWrappingForFullscreen: React__default.RefObject<boolean>;
|
|
850
|
-
fsThumbContainerRef: React__default.RefObject<HTMLDivElement | null>;
|
|
851
|
-
cells: React__default.RefObject<{
|
|
852
|
-
element: HTMLElement;
|
|
853
|
-
index: number;
|
|
854
|
-
}[]>;
|
|
855
|
-
setSlideIndex: React__default.Dispatch<React__default.SetStateAction<number>>;
|
|
856
|
-
setShowFullscreenModal: React__default.Dispatch<React__default.SetStateAction<boolean>>;
|
|
857
|
-
setShowFullscreenSlider: React__default.Dispatch<React__default.SetStateAction<boolean>>;
|
|
858
|
-
setFsFadeOpening: React__default.Dispatch<React__default.SetStateAction<boolean>>;
|
|
859
|
-
showFullscreenModal: boolean;
|
|
860
|
-
showFullscreenSlider: boolean;
|
|
861
|
-
fsFadeOpening: boolean;
|
|
862
|
-
closingModal: boolean;
|
|
863
|
-
};
|
|
864
|
-
|
|
865
|
-
declare const Slider: React$1.ForwardRefExoticComponent<SliderOptions & {
|
|
866
|
-
children?: React$1.ReactNode;
|
|
867
|
-
breakpoints?: BreakpointMap;
|
|
868
|
-
expandableImgRefs?: React$1.RefObject<Array<HTMLImageElement | null>>;
|
|
869
|
-
} & React$1.RefAttributes<SliderHandle>>;
|
|
870
|
-
|
|
871
|
-
type SkeletonLength$1 = number | string;
|
|
872
|
-
type SkeletonShimmer$1 = {
|
|
873
|
-
enabled?: boolean;
|
|
874
|
-
durationMs?: number;
|
|
875
|
-
angleDeg?: number;
|
|
876
|
-
opacity?: number;
|
|
877
|
-
blurPx?: number;
|
|
878
|
-
timing?: string;
|
|
879
|
-
c1?: string;
|
|
880
|
-
c2?: string;
|
|
881
|
-
c3?: string;
|
|
882
|
-
};
|
|
883
|
-
type SkeletonBaseStyle = {
|
|
884
|
-
width?: SkeletonLength$1;
|
|
885
|
-
maxWidth?: SkeletonLength$1;
|
|
886
|
-
height?: SkeletonLength$1;
|
|
887
|
-
maxHeight?: SkeletonLength$1;
|
|
888
|
-
backgroundColor?: string;
|
|
889
|
-
borderRadius?: SkeletonLength$1;
|
|
890
|
-
marginTop?: SkeletonLength$1;
|
|
891
|
-
marginRight?: SkeletonLength$1;
|
|
892
|
-
marginBottom?: SkeletonLength$1;
|
|
893
|
-
marginLeft?: SkeletonLength$1;
|
|
894
|
-
alignSelf?: React$1.CSSProperties["alignSelf"];
|
|
895
|
-
aspectRatio?: SkeletonLength$1;
|
|
896
|
-
};
|
|
897
|
-
type SkeletonContainerStyle = {
|
|
898
|
-
gap?: SkeletonLength$1;
|
|
899
|
-
padding?: SkeletonLength$1;
|
|
900
|
-
align?: React$1.CSSProperties["alignItems"];
|
|
901
|
-
justify?: React$1.CSSProperties["justifyContent"];
|
|
902
|
-
wrap?: boolean;
|
|
903
|
-
width?: SkeletonLength$1;
|
|
904
|
-
maxWidth?: SkeletonLength$1;
|
|
905
|
-
};
|
|
906
|
-
type SkeletonContainerStyleResponsive = SkeletonContainerStyle | Record<string, SkeletonContainerStyle>;
|
|
907
|
-
type GridSkeletonNode = {
|
|
908
|
-
kind: "grid";
|
|
909
|
-
style?: SkeletonContainerStyleResponsive;
|
|
910
|
-
count?: number;
|
|
911
|
-
item: SkeletonNode;
|
|
912
|
-
itemWrapStyle?: SkeletonBaseStyle;
|
|
913
|
-
} | SkeletonNode;
|
|
914
|
-
type SkeletonNode = {
|
|
915
|
-
kind: "stack" | "row" | "col";
|
|
916
|
-
style?: SkeletonContainerStyleResponsive;
|
|
917
|
-
children: SkeletonNode[];
|
|
918
|
-
} | {
|
|
919
|
-
kind: "rect" | "square" | "circle";
|
|
920
|
-
style?: SkeletonBaseStyle;
|
|
921
|
-
shimmer?: SkeletonShimmer$1;
|
|
922
|
-
} | {
|
|
923
|
-
kind: "media";
|
|
924
|
-
count: number;
|
|
925
|
-
direction?: "row" | "col";
|
|
926
|
-
style?: SkeletonContainerStyleResponsive;
|
|
927
|
-
tile?: {
|
|
928
|
-
shape?: "rect" | "square" | "circle";
|
|
929
|
-
style?: SkeletonBaseStyle;
|
|
930
|
-
shimmer?: SkeletonShimmer$1;
|
|
931
|
-
};
|
|
932
|
-
};
|
|
933
|
-
type GridSkeletonSpec = {
|
|
934
|
-
className?: string;
|
|
935
|
-
layout?: GridSkeletonNode;
|
|
936
|
-
backgroundColor?: string;
|
|
937
|
-
radius?: SkeletonLength$1;
|
|
938
|
-
shimmer?: SkeletonShimmer$1;
|
|
939
|
-
};
|
|
940
|
-
|
|
941
|
-
type LoadingOptions$1 = {
|
|
942
|
-
enabled?: boolean;
|
|
943
|
-
force?: boolean;
|
|
944
|
-
renderLoading?: (args: {
|
|
945
|
-
count: number;
|
|
946
|
-
}) => React.ReactNode;
|
|
947
|
-
skeleton?: GridSkeletonSpec;
|
|
948
|
-
};
|
|
949
|
-
type IntroOptions$1 = {
|
|
950
|
-
renderIntro?: (args: {
|
|
951
|
-
active: boolean;
|
|
952
|
-
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
953
|
-
}, content: React.ReactNode) => React.ReactNode;
|
|
954
|
-
staggerMs?: number;
|
|
955
|
-
transform?: string;
|
|
956
|
-
durationMs?: number;
|
|
957
|
-
easing?: string;
|
|
958
|
-
staggerLimit?: number;
|
|
959
|
-
};
|
|
960
|
-
type GridOptions = {
|
|
961
|
-
columns?: ResponsiveNumber;
|
|
962
|
-
minColumnWidth?: number | string;
|
|
963
|
-
gap?: ResponsiveNumber;
|
|
964
|
-
rootClassName?: string;
|
|
965
|
-
itemClassName?: string;
|
|
966
|
-
loading?: LoadingOptions$1;
|
|
967
|
-
intro?: IntroOptions$1;
|
|
968
|
-
};
|
|
969
|
-
|
|
970
|
-
type Props$1 = GridOptions & {
|
|
971
|
-
children?: React$1.ReactNode;
|
|
972
|
-
breakpoints?: BreakpointMap;
|
|
973
|
-
gridItemBaseClass?: string;
|
|
974
|
-
renderMode?: "wrap" | "passthrough";
|
|
975
|
-
};
|
|
976
|
-
declare function GridLayoutRuntime(props: Props$1): react_jsx_runtime.JSX.Element;
|
|
977
|
-
|
|
978
|
-
type SkeletonLength = number | string;
|
|
979
|
-
type SkeletonShimmer = {
|
|
980
|
-
enabled?: boolean;
|
|
981
|
-
durationMs?: number;
|
|
982
|
-
angleDeg?: number;
|
|
983
|
-
opacity?: number;
|
|
984
|
-
blurPx?: number;
|
|
985
|
-
timing?: string;
|
|
986
|
-
c1?: string;
|
|
987
|
-
c2?: string;
|
|
988
|
-
c3?: string;
|
|
989
|
-
};
|
|
990
|
-
type MasonrySkeletonSpec = {
|
|
991
|
-
className?: string;
|
|
992
|
-
ratios?: number[];
|
|
993
|
-
heightsPx?: number[];
|
|
994
|
-
backgroundColor?: string;
|
|
995
|
-
highlightColor?: string;
|
|
996
|
-
radius?: SkeletonLength;
|
|
997
|
-
shimmer?: SkeletonShimmer;
|
|
998
|
-
};
|
|
999
|
-
|
|
1000
|
-
type LoadingOptions = {
|
|
1001
|
-
enabled?: boolean;
|
|
1002
|
-
force?: boolean;
|
|
1003
|
-
renderLoading?: (args: {
|
|
1004
|
-
count: number;
|
|
1005
|
-
}) => React.ReactNode;
|
|
1006
|
-
skeleton?: MasonrySkeletonSpec;
|
|
1007
|
-
};
|
|
1008
|
-
type IntroOptions = {
|
|
1009
|
-
renderIntro?: (args: {
|
|
1010
|
-
active: boolean;
|
|
1011
|
-
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
1012
|
-
}, content: React.ReactNode) => React.ReactNode;
|
|
1013
|
-
staggerMs?: number;
|
|
1014
|
-
transform?: string;
|
|
1015
|
-
durationMs?: number;
|
|
1016
|
-
easing?: string;
|
|
1017
|
-
staggerLimit?: number;
|
|
1018
|
-
};
|
|
1019
|
-
type MasonryOptions = {
|
|
1020
|
-
columns?: ResponsiveNumber;
|
|
1021
|
-
gap?: ResponsiveNumber;
|
|
1022
|
-
placement?: "balanced" | "roundRobin";
|
|
1023
|
-
estimatedItemHeight?: number;
|
|
1024
|
-
as?: React.ElementType;
|
|
1025
|
-
rootRef?: React.Ref<HTMLDivElement>;
|
|
1026
|
-
classNames?: {
|
|
1027
|
-
root?: string;
|
|
1028
|
-
column?: string;
|
|
1029
|
-
item?: string;
|
|
1030
|
-
};
|
|
1031
|
-
loading?: LoadingOptions;
|
|
1032
|
-
intro?: IntroOptions;
|
|
1033
|
-
};
|
|
1034
|
-
|
|
1035
|
-
type Props = MasonryOptions & {
|
|
1036
|
-
children?: React$1.ReactNode;
|
|
1037
|
-
breakpoints?: BreakpointMap;
|
|
1038
|
-
};
|
|
1039
|
-
declare function Masonry(props: Props): react_jsx_runtime.JSX.Element;
|
|
1040
|
-
|
|
1041
|
-
type RmgPlyrSourceBuilder = (args: {
|
|
1042
|
-
src: string;
|
|
1043
|
-
poster?: string;
|
|
1044
|
-
}) => any;
|
|
1045
|
-
type RmgPlyrOptionsResolver = any | ((args: {
|
|
1046
|
-
src: string;
|
|
1047
|
-
poster?: string;
|
|
1048
|
-
index: number;
|
|
1049
|
-
}) => any);
|
|
1050
|
-
type VideoProps = {
|
|
1051
|
-
src: string;
|
|
1052
|
-
poster?: string;
|
|
1053
|
-
alt?: string;
|
|
1054
|
-
source?: any;
|
|
1055
|
-
sourceBuilder?: RmgPlyrSourceBuilder;
|
|
1056
|
-
options?: RmgPlyrOptionsResolver;
|
|
1057
|
-
className?: string;
|
|
1058
|
-
style?: React$1.CSSProperties;
|
|
1059
|
-
posterClassName?: string;
|
|
1060
|
-
posterStyle?: React$1.CSSProperties;
|
|
1061
|
-
onApi?: (api: APITypes | null) => void;
|
|
1062
|
-
registerApiByIndex?: (index: number, api: APITypes | null) => void;
|
|
1063
|
-
};
|
|
1064
|
-
declare function Video(props: VideoProps): react_jsx_runtime.JSX.Element;
|
|
1
|
+
export { CoreLayout, GalleryCore, GalleryCoreProps, useGalleryCore } from './core.mjs';
|
|
2
|
+
export { D as DEFAULT_ENTRIES, E as Entries, f as flattenEntries } from './index-Bpj0ZM8C.mjs';
|
|
3
|
+
export { DEFAULT_FULLSCREEN, FsCaptionPlacement, FsIntroRequest, FullscreenOptions, useFullscreenController } from './fullscreen.mjs';
|
|
4
|
+
export { FullscreenThumbnailSlider } from './fullscreenThumbnails.mjs';
|
|
5
|
+
export { F as FSItem, a as FullscreenThumbnailBridge, b as FullscreenThumbnailSliderProps, c as FullscreenThumbnailSlotLayout } from './types-CQ6I3EfZ.mjs';
|
|
6
|
+
export { DEFAULT_SLIDER, Slider } from './slider.mjs';
|
|
7
|
+
export { DEFAULT_GRID, default as Grid, GridLazyLoadOptions, GridOptions } from './grid.mjs';
|
|
8
|
+
export { DEFAULT_MASONRY, default as Masonry, MasonryLazyLoadOptions, MasonryOptions } from './masonry.mjs';
|
|
9
|
+
export { DEFAULT_THUMBNAILS, ThumbnailSlider, ThumbnailSyncBridge, createThumbnailSyncBridge } from './thumbnails.mjs';
|
|
10
|
+
export { RmgPlyrOptionsResolver, RmgPlyrSourceBuilder, RmgVideoLazyLoadOptions, Video, VideoProps } from './video.mjs';
|
|
11
|
+
export { G as GalleryApi, I as IndexMode, S as SliderIndexChannel, c as createSliderIndexChannel } from './sliderSub-DNikv2lm.mjs';
|
|
12
|
+
export { M as MediaItem, t as toMediaItems } from './media-moIXOhT1.mjs';
|
|
13
|
+
export { E as ElementStyle } from './elements-Bd1vm4Uk.mjs';
|
|
14
|
+
export { R as ResponsiveHeightRule, a as SliderHandle, S as SliderOptions } from './types-Dqm2ynv2.mjs';
|
|
15
|
+
export { R as ResponsivePosition, T as ThumbnailPosition, a as ThumbnailsOptions } from './types-Bi2iBbyG.mjs';
|
|
16
|
+
export { B as BREAKPOINT_MAP } from './responsive-CvE5dTnP.mjs';
|
|
17
|
+
export { E as EntriesOptions, M as MediaEntryLink, S as SlideOwner } from './types-ChjyCquV.mjs';
|
|
18
|
+
import 'react/jsx-runtime';
|
|
19
|
+
import 'react';
|
|
20
|
+
import './plyrTypes-CmP9NWvX.mjs';
|
|
21
|
+
import './lazy-dGoYpcRa.mjs';
|
|
22
|
+
import 'plyr-react';
|
|
1065
23
|
|
|
1066
24
|
declare function PanAxis(): {
|
|
1067
25
|
scroll: "x";
|
|
@@ -1070,117 +28,4 @@ declare function PanAxis(): {
|
|
|
1070
28
|
};
|
|
1071
29
|
type PanAxisType = ReturnType<typeof PanAxis>;
|
|
1072
30
|
|
|
1073
|
-
|
|
1074
|
-
readonly layout: {
|
|
1075
|
-
readonly gap: 20;
|
|
1076
|
-
};
|
|
1077
|
-
readonly direction: {
|
|
1078
|
-
readonly dir: "ltr";
|
|
1079
|
-
readonly axis: "x";
|
|
1080
|
-
};
|
|
1081
|
-
readonly align: "start";
|
|
1082
|
-
readonly scroll: {
|
|
1083
|
-
readonly groupCells: false;
|
|
1084
|
-
readonly skipSnaps: false;
|
|
1085
|
-
readonly freeScroll: false;
|
|
1086
|
-
readonly loop: false;
|
|
1087
|
-
};
|
|
1088
|
-
readonly lazyLoad: false;
|
|
1089
|
-
readonly controls: {
|
|
1090
|
-
readonly arrows: {
|
|
1091
|
-
readonly enabled: true;
|
|
1092
|
-
readonly arrow: {};
|
|
1093
|
-
readonly prev: {};
|
|
1094
|
-
readonly next: {};
|
|
1095
|
-
};
|
|
1096
|
-
readonly dots: {
|
|
1097
|
-
readonly enabled: true;
|
|
1098
|
-
readonly root: {};
|
|
1099
|
-
readonly dot: {};
|
|
1100
|
-
};
|
|
1101
|
-
readonly progress: {
|
|
1102
|
-
readonly enabled: false;
|
|
1103
|
-
readonly root: {};
|
|
1104
|
-
readonly bar: {};
|
|
1105
|
-
};
|
|
1106
|
-
readonly ripple: {
|
|
1107
|
-
readonly enabled: true;
|
|
1108
|
-
readonly className: "";
|
|
1109
|
-
};
|
|
1110
|
-
};
|
|
1111
|
-
readonly thumbnails: Required<Pick<ThumbnailsOptions, "scroll" | "layout" | "motion">>;
|
|
1112
|
-
readonly auto: {
|
|
1113
|
-
readonly play: {
|
|
1114
|
-
readonly enabled: false;
|
|
1115
|
-
readonly speedMs: 3000;
|
|
1116
|
-
readonly pauseMs: 1000;
|
|
1117
|
-
readonly pauseOnHover: true;
|
|
1118
|
-
};
|
|
1119
|
-
readonly scroll: {
|
|
1120
|
-
readonly enabled: false;
|
|
1121
|
-
readonly speedMs: 3000;
|
|
1122
|
-
readonly pauseMs: 1000;
|
|
1123
|
-
readonly pauseOnHover: true;
|
|
1124
|
-
};
|
|
1125
|
-
};
|
|
1126
|
-
readonly motion: {
|
|
1127
|
-
readonly selectDuration: 25;
|
|
1128
|
-
readonly freeScrollDuration: 43;
|
|
1129
|
-
readonly friction: 0.68;
|
|
1130
|
-
};
|
|
1131
|
-
};
|
|
1132
|
-
|
|
1133
|
-
declare const DEFAULT_GRID: Required<Pick<GridOptions, "minColumnWidth" | "gap">>;
|
|
1134
|
-
|
|
1135
|
-
declare const DEFAULT_MASONRY: Required<Pick<MasonryOptions, "placement">>;
|
|
1136
|
-
|
|
1137
|
-
declare const DEFAULT_FULLSCREEN: {
|
|
1138
|
-
readonly enabled: false;
|
|
1139
|
-
readonly controls: {
|
|
1140
|
-
readonly close: {
|
|
1141
|
-
readonly enabled: true;
|
|
1142
|
-
readonly style: {};
|
|
1143
|
-
readonly className: "";
|
|
1144
|
-
readonly render: undefined;
|
|
1145
|
-
};
|
|
1146
|
-
readonly arrows: {
|
|
1147
|
-
readonly enabled: true;
|
|
1148
|
-
readonly arrow: {};
|
|
1149
|
-
readonly prev: {};
|
|
1150
|
-
readonly next: {};
|
|
1151
|
-
readonly render: undefined;
|
|
1152
|
-
readonly renderPrev: undefined;
|
|
1153
|
-
readonly renderNext: undefined;
|
|
1154
|
-
};
|
|
1155
|
-
readonly counter: {
|
|
1156
|
-
readonly enabled: true;
|
|
1157
|
-
readonly style: {};
|
|
1158
|
-
readonly className: "";
|
|
1159
|
-
readonly render: undefined;
|
|
1160
|
-
};
|
|
1161
|
-
};
|
|
1162
|
-
readonly effects: {
|
|
1163
|
-
readonly introDuration: 300;
|
|
1164
|
-
readonly introEasing: "cubic-bezier(.4,0,.22,1)";
|
|
1165
|
-
readonly introFade: false;
|
|
1166
|
-
readonly slideFade: false;
|
|
1167
|
-
readonly slideFadeDuration: 120;
|
|
1168
|
-
readonly slideFadeEasing: "cubic-bezier(.4,0,.22,1)";
|
|
1169
|
-
readonly thumbnailsFadeDuration: 300;
|
|
1170
|
-
readonly thumbnailsFadeEasing: "cubic-bezier(.4,0,.22,1)";
|
|
1171
|
-
};
|
|
1172
|
-
readonly thumbnails: {};
|
|
1173
|
-
readonly slider: {
|
|
1174
|
-
readonly duration: 25;
|
|
1175
|
-
readonly friction: 0.68;
|
|
1176
|
-
};
|
|
1177
|
-
readonly zoom: {
|
|
1178
|
-
readonly clickZoomLevel: 2.5;
|
|
1179
|
-
readonly maxZoomLevel: 3;
|
|
1180
|
-
readonly panDuration: 43;
|
|
1181
|
-
readonly panFriction: 0.68;
|
|
1182
|
-
};
|
|
1183
|
-
readonly caption: {};
|
|
1184
|
-
};
|
|
1185
|
-
|
|
1186
|
-
export { BREAKPOINT_MAP, DEFAULT_ENTRIES, DEFAULT_FULLSCREEN, DEFAULT_GRID, DEFAULT_MASONRY, DEFAULT_SLIDER, type ElementStyle, Entries, type EntriesOptions, type FsCaptionPlacement, type FsIntroRequest, type FullscreenOptions, type GalleryApi, GalleryCore, GridLayoutRuntime as Grid, type GridOptions, type IndexMode, Masonry, type MasonryOptions, type MediaEntryLink, type MediaItem, type PanAxisType, type ResponsiveHeightRule, type SlideOwner, Slider, type SliderHandle, type SliderOptions, Video, flattenEntries, toMediaItems, useFullscreenController };
|
|
31
|
+
export type { PanAxisType };
|