react-spring-carousel 3.0.0-beta090.4 → 3.0.0-beta090.41

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.es2.js DELETED
@@ -1,698 +0,0 @@
1
- import { u as De, a as qe, j as P } from "./useThumbsModule-4e4b7969.js";
2
- import { useSpring as Be, config as Q, useIsomorphicLayoutEffect as He } from "@react-spring/web";
3
- import { useDrag as Oe } from "@use-gesture/react";
4
- import { useRef as m, useEffect as E, createContext as ze, useCallback as O, useContext as Xe } from "react";
5
- import Ye from "resize-observer-polyfill";
6
- import $ from "screenfull";
7
- function Je({
8
- mainCarouselWrapperRef: n,
9
- onFullScreenChange: v,
10
- handleResize: N
11
- }) {
12
- const U = m(!1);
13
- E(() => {
14
- function h() {
15
- document.fullscreenElement && (z(!0), v(!0), N && N()), document.fullscreenElement || (z(!1), v(!1), N && N());
16
- }
17
- if ($.isEnabled)
18
- return $.on("change", h), () => {
19
- $.isEnabled && $.off("change", h);
20
- };
21
- }, []);
22
- function z(h) {
23
- U.current = h;
24
- }
25
- function I() {
26
- return U.current;
27
- }
28
- function T(h) {
29
- $.isEnabled && $.request(h || n.current);
30
- }
31
- function u() {
32
- $.isEnabled && $.exit();
33
- }
34
- return {
35
- enterFullscreen: T,
36
- exitFullscreen: u,
37
- getIsFullscreen: I
38
- };
39
- }
40
- function et({
41
- items: n,
42
- init: v = !0,
43
- withThumbs: N,
44
- thumbsSlideAxis: U = "x",
45
- itemsPerSlide: z = 1,
46
- slideType: I = "fixed",
47
- gutter: T = 0,
48
- withLoop: u = !1,
49
- startEndGutter: h = 0,
50
- carouselSlideAxis: o = "x",
51
- disableGestures: ge = !1,
52
- draggingSlideTreshold: te,
53
- slideWhenThresholdIsReached: me = !1,
54
- freeScroll: c,
55
- enableFreeScrollDrag: re,
56
- initialStartingPosition: Z,
57
- prepareThumbsData: ye,
58
- initialActiveItem: C = 0,
59
- animateWhenActiveItemChange: Ie = !0,
60
- getControllerRef: ne
61
- }) {
62
- const w = z > n.length ? n.length : z, X = m(!1), _ = m(te ?? 0), k = m("initial"), ce = m("initial"), ue = m("initial"), p = m(C), f = m(C === 0), l = m(I === "fixed" && C === n.length - 1), a = m(null), x = m(null), oe = m(0), ie = m(0), d = m(0), be = m(u), Te = m(I), we = m(c), R = m(!1), G = O(() => u ? [
63
- ...n.map((e) => ({
64
- ...e,
65
- id: `prev-repeated-item-${e.id}`
66
- })),
67
- ...n,
68
- ...n.map((e) => ({
69
- ...e,
70
- id: `next-repeated-item-${e.id}`
71
- }))
72
- ] : [...n], [n, u])(), [W, y] = Be(
73
- () => ({
74
- val: 0,
75
- pause: !v,
76
- onChange: ({ value: e }) => {
77
- c && a.current ? (o === "x" ? a.current.scrollLeft = Math.abs(e.val) : a.current.scrollTop = Math.abs(e.val), ee()) : x.current && (o === "x" ? x.current.style.transform = `translate3d(${e.val}px, 0px,0px)` : x.current.style.transform = `translate3d(0px,${e.val}px,0px)`);
78
- }
79
- }),
80
- [c]
81
- ), { emitEvent: L, useListenToCustomEvent: A } = De(), { thumbsFragment: Me, handleScroll: Ce } = qe({
82
- withThumbs: !!N,
83
- thumbsSlideAxis: U,
84
- prepareThumbsData: ye,
85
- items: n,
86
- renderThumbFnProps: {
87
- getIsActiveItem: ae,
88
- getIsPrevItem: fe,
89
- useListenToCustomEvent: A,
90
- getIsNextItem: se
91
- }
92
- }), { enterFullscreen: he, exitFullscreen: ve, getIsFullscreen: pe } = Je({
93
- mainCarouselWrapperRef: a,
94
- handleResize: () => S(),
95
- onFullScreenChange: (e) => {
96
- L({
97
- eventName: "onFullscreenChange",
98
- isFullscreen: e
99
- });
100
- }
101
- });
102
- function ke(e) {
103
- return I === "fixed" && !c ? {
104
- marginRight: `${e ? 0 : T}px`,
105
- flex: `1 0 calc(100% / ${w} - ${T * (w - 1) / w}px)`
106
- } : {
107
- marginRight: `${e ? 0 : T}px`
108
- };
109
- }
110
- const s = O(() => {
111
- var r;
112
- const e = (r = a.current) == null ? void 0 : r.querySelector(".use-spring-carousel-item");
113
- if (!e)
114
- throw Error("No carousel items available!");
115
- return e.getBoundingClientRect()[o === "x" ? "width" : "height"] + T;
116
- }, [o, T]);
117
- function j({ from: e, to: r, nextActiveItem: t, immediate: i = !1, slideMode: M }) {
118
- ce.current = M, typeof t == "number" && (c || (p.current = t), L({
119
- eventName: "onSlideStartChange",
120
- slideActionType: k.current,
121
- slideMode: ce.current,
122
- nextItem: {
123
- startReached: f.current,
124
- endReached: l.current,
125
- index: c ? -1 : p.current,
126
- id: c ? "" : n[p.current].id
127
- }
128
- })), d.current = r, y.start({
129
- immediate: i,
130
- from: {
131
- val: e
132
- },
133
- to: {
134
- val: r
135
- },
136
- config: {
137
- ...Q.default,
138
- velocity: W.val.velocity
139
- },
140
- onRest(B) {
141
- !i && B.finished && L({
142
- eventName: "onSlideChange",
143
- slideActionType: k.current,
144
- slideMode: ce.current,
145
- currentItem: {
146
- startReached: f.current,
147
- endReached: l.current,
148
- index: c ? -1 : p.current,
149
- id: c ? "" : n[p.current].id
150
- }
151
- });
152
- }
153
- }), N && !i && Ce(p.current);
154
- }
155
- const g = O(() => {
156
- var e;
157
- return x.current ? u ? s() * n.length : Math.round(
158
- Number(
159
- (e = x.current) == null ? void 0 : e[o === "x" ? "scrollWidth" : "scrollHeight"]
160
- ) - x.current.getBoundingClientRect()[o === "x" ? "width" : "height"] - h * 2
161
- ) : 0;
162
- }, [o, s, n.length, h, u]);
163
- function Fe() {
164
- const e = `calc(100% - ${h * 2}px)`;
165
- return {
166
- width: o === "x" ? e : "100%",
167
- height: o === "y" ? e : "100%"
168
- };
169
- }
170
- const Y = O(() => {
171
- var r;
172
- const e = (r = x.current) == null ? void 0 : r.querySelector(".use-spring-carousel-item");
173
- if (!e)
174
- throw Error("No carousel items available!");
175
- return e.getBoundingClientRect()[o === "x" ? "width" : "height"] + T;
176
- }, [o, T]), J = O(
177
- (e) => {
178
- const r = o === "x" ? "left" : "top", t = x.current;
179
- t && (u ? (t.style.top = "0px", t.style.left = "0px", t.style[r] = `-${e - h}px`, f.current = !1, l.current = !1) : (t.style.left = "0px", t.style.top = "0px"));
180
- },
181
- [o, h, u]
182
- ), S = O(
183
- (e = !1) => {
184
- if (x.current && e && (x.current.style.transform = "translate3d(0px, 0px,0px)", x.current.style.left = "0", x.current.style.top = "0"), I === "fixed" && J(
185
- Z === "center" ? Y() * n.length - s() * Math.round((w - 1) / 2) : Z === "end" ? Y() * n.length - s() * Math.round(w - 1) : Y() * n.length
186
- ), I === "fluid") {
187
- if (J(Y() * n.length), l.current && g() !== Math.abs(d.current) && !u) {
188
- const r = -g();
189
- d.current = r, y.start({
190
- immediate: !0,
191
- val: d.current
192
- });
193
- return;
194
- }
195
- if (Math.abs(d.current) > 0 && g() !== Math.abs(d.current) && !u && !c && ue.current === "backward") {
196
- const r = oe.current - g(), t = d.current + r;
197
- return y.start({
198
- immediate: !0,
199
- val: t
200
- }), () => {
201
- d.current = t;
202
- };
203
- }
204
- console.log("here");
205
- return;
206
- }
207
- if (!c && I === "fixed") {
208
- const r = -(s() * p.current);
209
- if (Math.abs(r) > g() && !u) {
210
- const t = -g();
211
- l.current = !0, d.current = t, y.start({
212
- immediate: !0,
213
- val: d.current
214
- });
215
- } else
216
- d.current = r, y.start({
217
- immediate: !0,
218
- val: r
219
- });
220
- setTimeout(() => {
221
- X.current = !1;
222
- }, 0);
223
- }
224
- },
225
- [
226
- c,
227
- Y,
228
- s,
229
- g,
230
- Z,
231
- n.length,
232
- w,
233
- J,
234
- y,
235
- I,
236
- u
237
- ]
238
- );
239
- function F() {
240
- return c && a.current ? a.current[o === "x" ? "scrollLeft" : "scrollTop"] : W.val.get();
241
- }
242
- function K(e, r) {
243
- if (c && e === "next") {
244
- const t = d.current + s();
245
- return t > g() ? g() : t;
246
- }
247
- if (c && e === "prev") {
248
- const t = d.current - s();
249
- return t < 0 ? 0 : t;
250
- }
251
- return e === "next" ? typeof r == "number" ? -(r * s()) : d.current - s() : typeof r == "number" ? -(r * s()) : d.current + s();
252
- }
253
- function V({ type: e, index: r, immediate: t }) {
254
- if (!v || R.current || f.current && !u)
255
- return;
256
- l.current && (ue.current = "backward"), k.current = "prev", l.current = !1;
257
- const i = typeof r == "number" ? r : p.current - 1;
258
- if (c && ee(), !u) {
259
- const M = c ? K("prev", r) - s() / 3 < 0 : K("prev", r) + s() / 3 > 0;
260
- if (f.current)
261
- return;
262
- if (M) {
263
- f.current = !0, l.current = !1, j({
264
- slideMode: e,
265
- from: F(),
266
- to: 0,
267
- nextActiveItem: 0,
268
- immediate: t
269
- });
270
- return;
271
- }
272
- }
273
- if (u && (f.current || i < 0)) {
274
- f.current = !1, l.current = !0, j({
275
- slideMode: e,
276
- from: F() - s() * n.length,
277
- to: -(s() * n.length) + s(),
278
- nextActiveItem: n.length - 1,
279
- immediate: t
280
- });
281
- return;
282
- }
283
- i === 0 && (f.current = !0), (i === n.length - 1 || i === -1) && (l.current = !0), j({
284
- slideMode: e,
285
- from: F(),
286
- to: K("prev", r),
287
- nextActiveItem: i,
288
- immediate: t
289
- });
290
- }
291
- function D({ type: e, index: r, immediate: t }) {
292
- if (!v || R.current || l.current && !u)
293
- return;
294
- f.current && (ue.current = "forward"), k.current = "next", f.current = !1;
295
- const i = r || p.current + 1;
296
- if (c && ee(), !u) {
297
- const M = Math.abs(K("next", r)) > g() - s() / 3;
298
- if (l.current)
299
- return;
300
- if (M) {
301
- f.current = !1, l.current = !0, j({
302
- slideMode: e,
303
- from: F(),
304
- to: c ? g() : -g(),
305
- nextActiveItem: i,
306
- immediate: t
307
- });
308
- return;
309
- }
310
- }
311
- if (u && (l.current || i > n.length - 1)) {
312
- l.current = !1, f.current = !0, j({
313
- slideMode: e,
314
- from: F() + s() * n.length,
315
- to: 0,
316
- nextActiveItem: 0,
317
- immediate: t
318
- });
319
- return;
320
- }
321
- i === 0 && (f.current = !0), i === n.length - 1 && (l.current = !0), j({
322
- slideMode: e,
323
- from: F(),
324
- to: K("next", r),
325
- nextActiveItem: i,
326
- immediate: t
327
- });
328
- }
329
- function $e() {
330
- te ? _.current = te : _.current = Math.floor(s() / 2 / 2);
331
- }
332
- function xe() {
333
- x.current && (oe.current = g(), be.current = u, Te.current = I, we.current = c, ie.current = window.innerWidth, d.current = 0, le({ id: 0, immediate: !0, shouldReset: !0 }), $e(), S());
334
- }
335
- const Ee = Oe(
336
- (e) => {
337
- const r = e.dragging, t = e.offset[o === "x" ? 0 : 1], i = e.movement[o === "x" ? 0 : 1], M = e.direction[o === "x" ? 0 : 1], B = i > _.current, H = i < -_.current, Ve = g();
338
- if (r) {
339
- if (M > 0 ? k.current = "prev" : k.current = "next", L({
340
- ...e,
341
- eventName: "onDrag",
342
- slideActionType: k.current
343
- }), c) {
344
- if (t > 0) {
345
- y.start({
346
- from: {
347
- val: F()
348
- },
349
- to: {
350
- val: 0
351
- },
352
- config: {
353
- velocity: e.velocity,
354
- friction: 50,
355
- tension: 1e3
356
- }
357
- }), e.cancel();
358
- return;
359
- }
360
- y.start({
361
- from: {
362
- val: F()
363
- },
364
- to: {
365
- val: -t
366
- },
367
- config: {
368
- velocity: e.velocity,
369
- friction: 50,
370
- tension: 1e3
371
- }
372
- });
373
- return;
374
- }
375
- y.start({
376
- val: t,
377
- config: {
378
- velocity: e.velocity,
379
- friction: 50,
380
- tension: 1e3
381
- }
382
- }), me && H ? (D({ type: "drag" }), e.cancel()) : me && B && (V({ type: "drag" }), e.cancel()), Ve - Math.abs(t) < -(s() * 2) && e.cancel();
383
- return;
384
- }
385
- if (e.last && c && t > 0) {
386
- y.start({
387
- from: {
388
- val: F()
389
- },
390
- to: {
391
- val: 0
392
- },
393
- config: {
394
- velocity: e.velocity,
395
- friction: 50,
396
- tension: 1e3
397
- }
398
- });
399
- return;
400
- }
401
- e.last && !e.canceled && c && (k.current === "prev" && V({ type: "drag" }), k.current === "next" && D({ type: "drag" })), e.last && !e.canceled && !c && (H ? !u && l.current ? y.start({
402
- val: -g(),
403
- config: {
404
- ...Q.default,
405
- velocity: e.velocity
406
- }
407
- }) : D({ type: "drag" }) : B ? !u && f.current ? y.start({
408
- val: 0,
409
- config: {
410
- ...Q.default,
411
- velocity: e.velocity
412
- }
413
- }) : V({ type: "drag" }) : y.start({
414
- val: d.current,
415
- config: {
416
- ...Q.default,
417
- velocity: e.velocity
418
- }
419
- })), e.last && e.canceled && y.start({
420
- val: d.current,
421
- config: {
422
- ...Q.default,
423
- velocity: e.velocity
424
- }
425
- });
426
- },
427
- {
428
- enabled: v && !ge && !c || !!c && !!re,
429
- axis: o,
430
- from: () => c && a.current ? [
431
- -a.current.scrollLeft,
432
- -a.current.scrollTop
433
- ] : o === "x" ? [W.val.get(), W.val.get()] : [W.val.get(), W.val.get()]
434
- }
435
- );
436
- function Ne() {
437
- return c ? o === "x" ? {
438
- overflowX: "auto"
439
- } : {
440
- overflowY: "auto"
441
- } : {};
442
- }
443
- function ee() {
444
- a.current && (d.current = a.current[o === "x" ? "scrollLeft" : "scrollTop"], a.current[o === "x" ? "scrollLeft" : "scrollTop"] === 0 && (f.current = !0, l.current = !1), a.current[o === "x" ? "scrollLeft" : "scrollTop"] > 0 && a.current[o === "x" ? "scrollLeft" : "scrollTop"] < g() && (f.current = !1, l.current = !1), a.current[o === "x" ? "scrollLeft" : "scrollTop"] === g() && (f.current = !1, l.current = !0));
445
- }
446
- function We() {
447
- return c ? {
448
- onWheel() {
449
- W.val.stop(), ee();
450
- }
451
- } : {};
452
- }
453
- function q(e, r) {
454
- let t = 0;
455
- if (typeof e == "string" ? t = n.findIndex((i) => i.id === e) : t = e, t < 0 || t >= n.length) {
456
- if (r)
457
- throw new Error(r);
458
- console.error(`The item doesn't exist; check that the id provided - ${e} - is correct.`), t = -1;
459
- }
460
- return t;
461
- }
462
- function le({ id: e, immediate: r, shouldReset: t, type: i }) {
463
- if (!v || R.current)
464
- return;
465
- f.current = !1, l.current = !1;
466
- const M = q(
467
- e,
468
- "The item you want to slide to doesn't exist; check the provided id."
469
- );
470
- if (M === p.current && !t)
471
- return;
472
- const B = q(n[p.current].id), H = q(n[M].id);
473
- H > B ? D({
474
- type: i || t ? "initial" : "click",
475
- index: H,
476
- immediate: r
477
- }) : V({
478
- type: i || t ? "initial" : "click",
479
- index: H,
480
- immediate: r
481
- });
482
- }
483
- function se(e) {
484
- const r = q(e, "The item doesn't exist; check the provided id."), t = p.current;
485
- return u && t === n.length - 1 ? r === 0 : r === t + 1;
486
- }
487
- function fe(e) {
488
- const r = q(e, "The item doesn't exist; check the provided id."), t = p.current;
489
- return u && t === 0 ? r === n.length - 1 : r === t - 1;
490
- }
491
- function ae(e) {
492
- return q(e, "The item you want to check doesn't exist; check the provided id.") === p.current;
493
- }
494
- function Pe() {
495
- return ge ? "unset" : o === "x" ? "pan-y" : "pan-x";
496
- }
497
- const b = c ? {
498
- useListenToCustomEvent: A,
499
- enterFullscreen: he,
500
- exitFullscreen: ve,
501
- getIsFullscreen: pe,
502
- slideToPrevItem: (e = !0) => {
503
- V({
504
- type: "click",
505
- immediate: !e
506
- });
507
- },
508
- slideToNextItem: (e = !0) => {
509
- D({
510
- type: "click",
511
- immediate: !e
512
- });
513
- }
514
- } : {
515
- useListenToCustomEvent: A,
516
- enterFullscreen: he,
517
- exitFullscreen: ve,
518
- getIsFullscreen: pe,
519
- slideToPrevItem: (e = !0) => {
520
- V({
521
- type: "click",
522
- immediate: !e
523
- });
524
- },
525
- slideToNextItem: (e = !0) => {
526
- D({
527
- type: "click",
528
- immediate: !e
529
- });
530
- },
531
- slideToItem: (e, r = !0) => {
532
- le({ id: e, immediate: !r });
533
- },
534
- getIsNextItem: se,
535
- getIsPrevItem: fe,
536
- getIsActiveItem: ae
537
- };
538
- He(() => {
539
- x.current && v && (X.current = !0, xe());
540
- }, [v]), E(() => {
541
- p.current !== C && (X.current = !0, le({
542
- id: C,
543
- immediate: !Ie
544
- }));
545
- }, [C]), E(() => {
546
- if (v) {
547
- if (C > n.length - 1)
548
- throw new Error(
549
- `initialActiveItem (${C}) is greater than the total quantity available items (${n.length}).`
550
- );
551
- w > n.length && console.warn(
552
- `itemsPerSlide (${w}) is greater than the total quantity available items (${n.length}). Fallback to ${n.length})`
553
- );
554
- }
555
- }, [C, n.length, w, v]), E(() => {
556
- ie.current = window.innerWidth;
557
- }, []), E(() => {
558
- if (v) {
559
- if (u && c)
560
- throw new Error("`withLoop` and `freeScroll` can't be used together.");
561
- if (c && I === "fixed")
562
- throw new Error("`freeScroll` can't be used when `scrollType=fixed`.");
563
- if (re && (I !== "fluid" || !c))
564
- throw new Error(
565
- "`enableFreeScrollDrag` must be used with `slideType=fluid` and `freeScroll=true`"
566
- );
567
- X.current = !0, xe();
568
- }
569
- }, [
570
- Z,
571
- w,
572
- h,
573
- T,
574
- v,
575
- u,
576
- I,
577
- c,
578
- re
579
- ]), E(() => {
580
- if (!v)
581
- return;
582
- function e() {
583
- document.hidden ? R.current = !0 : R.current = !1;
584
- }
585
- return document.addEventListener("visibilitychange", e), () => {
586
- document.removeEventListener("visibilitychange", e);
587
- };
588
- }, [v]), E(() => {
589
- if (a.current) {
590
- let e;
591
- const r = new Ye(() => {
592
- if (!R.current && !X.current) {
593
- ie.current = window.innerWidth;
594
- const t = S();
595
- window.clearTimeout(e), e = setTimeout(() => {
596
- oe.current = g(), typeof t == "function" && t();
597
- }, 100);
598
- }
599
- });
600
- return r.observe(a.current), () => {
601
- r.disconnect();
602
- };
603
- }
604
- }, [S, g]), E(() => {
605
- ne && ne({
606
- slideToNextItem: b.slideToNextItem,
607
- slideToPrevItem: b.slideToPrevItem,
608
- slideToItem: b == null ? void 0 : b.slideToItem
609
- });
610
- }, [ne, b.slideToItem, b.slideToNextItem, b.slideToPrevItem]);
611
- const Re = /* @__PURE__ */ P.jsx(de.Provider, { value: b, children: Me }), je = /* @__PURE__ */ P.jsx(de.Provider, { value: b, children: /* @__PURE__ */ P.jsx(
612
- "div",
613
- {
614
- className: "use-spring-carousel-main-wrapper",
615
- ref: a,
616
- ...We(),
617
- style: {
618
- display: "flex",
619
- position: "relative",
620
- width: "100%",
621
- height: "100%",
622
- ...Ne()
623
- },
624
- children: /* @__PURE__ */ P.jsxs(
625
- "div",
626
- {
627
- className: "use-spring-carousel-track-wrapper",
628
- ref: x,
629
- ...Ee(),
630
- style: {
631
- position: "relative",
632
- display: "flex",
633
- flexDirection: o === "x" ? "row" : "column",
634
- touchAction: Pe(),
635
- ...Fe()
636
- },
637
- children: [
638
- (c || !u) && h ? /* @__PURE__ */ P.jsx(
639
- "div",
640
- {
641
- style: {
642
- flexShrink: 0,
643
- width: h
644
- }
645
- }
646
- ) : null,
647
- G.map((e, r) => /* @__PURE__ */ P.jsx(
648
- "div",
649
- {
650
- className: "use-spring-carousel-item",
651
- "data-testid": "use-spring-carousel-item-wrapper",
652
- style: {
653
- display: "flex",
654
- position: "relative",
655
- flex: "1",
656
- ...ke(
657
- r === G.findIndex(
658
- (t) => t.id === G[G.length - 1].id
659
- )
660
- )
661
- },
662
- children: typeof e.renderItem == "function" ? e.renderItem({
663
- getIsActiveItem: ae,
664
- getIsNextItem: se,
665
- getIsPrevItem: fe,
666
- useListenToCustomEvent: A
667
- }) : e.renderItem
668
- },
669
- `${e.id}-${r}`
670
- )),
671
- (c || !u) && h ? /* @__PURE__ */ P.jsx(
672
- "div",
673
- {
674
- style: {
675
- flexShrink: 0,
676
- width: h
677
- }
678
- }
679
- ) : null
680
- ]
681
- }
682
- )
683
- }
684
- ) });
685
- return { ...b, carouselFragment: je, thumbsFragment: Re };
686
- }
687
- const de = ze(void 0);
688
- function tt() {
689
- const n = Xe(de);
690
- if (!n)
691
- throw new Error("useSpringCarouselContext must be used within the carousel.");
692
- return n;
693
- }
694
- export {
695
- et as useSpringCarousel,
696
- tt as useSpringCarouselContext
697
- };
698
- //# sourceMappingURL=index.es2.js.map