react-spring-carousel 3.0.0-beta090.11 → 3.0.0-beta090.12

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