react-spring-carousel 3.0.0-beta090.5 → 3.0.0-beta090.51

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