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