react-spring-carousel 3.0.0-beta063 → 3.0.0-beta065
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/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index2.js +1 -1
- package/dist/esm/useFullscreenModule-b981f90a.js +2 -0
- package/dist/esm/useFullscreenModule-b981f90a.js.map +1 -0
- package/dist/esm/useSpringCarousel.js +1 -1
- package/dist/esm/useSpringCarousel.js.map +1 -1
- package/dist/esm/useThumbsModule-f880a8fc.js +2 -0
- package/dist/esm/useThumbsModule-f880a8fc.js.map +1 -0
- package/dist/esm/useTransitionCarousel.js +1 -1
- package/dist/esm/useTransitionCarousel.js.map +1 -1
- package/dist/types/modules/screenfull.d.ts +139 -0
- package/dist/types/types/useSpringCarousel.types.d.ts +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/index.js.map +1 -1
- package/package.json +23 -24
- package/dist/esm/useFullscreenModule-519d337d.js +0 -2
- package/dist/esm/useFullscreenModule-519d337d.js.map +0 -1
- package/dist/esm/useThumbsModule-faa196f9.js +0 -2
- package/dist/esm/useThumbsModule-faa196f9.js.map +0 -1
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
export type RawEventNames = {
|
|
2
|
+
readonly requestFullscreen: string;
|
|
3
|
+
readonly exitFullscreen: string;
|
|
4
|
+
readonly fullscreenElement: string;
|
|
5
|
+
readonly fullscreenEnabled: string;
|
|
6
|
+
readonly fullscreenchange: string;
|
|
7
|
+
readonly fullscreenerror: string;
|
|
8
|
+
};
|
|
9
|
+
export type EventName = 'change' | 'error';
|
|
10
|
+
/**
|
|
11
|
+
Simple wrapper for cross-browser usage of the JavaScript [Fullscreen API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode), which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.
|
|
12
|
+
*/
|
|
13
|
+
declare const screenfull: {
|
|
14
|
+
/**
|
|
15
|
+
Whether fullscreen is active.
|
|
16
|
+
*/
|
|
17
|
+
readonly isFullscreen: boolean;
|
|
18
|
+
/**
|
|
19
|
+
The element currently in fullscreen, otherwise `undefined`.
|
|
20
|
+
*/
|
|
21
|
+
readonly element: Element | undefined;
|
|
22
|
+
/**
|
|
23
|
+
Whether you are allowed to enter fullscreen. If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).
|
|
24
|
+
@example
|
|
25
|
+
```
|
|
26
|
+
import screenfull from 'screenfull';
|
|
27
|
+
if (screenfull.isEnabled) {
|
|
28
|
+
screenfull.request();
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
*/
|
|
32
|
+
readonly isEnabled: boolean;
|
|
33
|
+
/**
|
|
34
|
+
Exposes the raw properties (prefixed if needed) used internally.
|
|
35
|
+
*/
|
|
36
|
+
raw: RawEventNames;
|
|
37
|
+
/**
|
|
38
|
+
Make an element fullscreen.
|
|
39
|
+
If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).
|
|
40
|
+
Keep in mind that the browser will only enter fullscreen when initiated by user events like click, touch, key.
|
|
41
|
+
@param element - Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a descendant.
|
|
42
|
+
@param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
|
|
43
|
+
@returns A promise that resolves after the element enters fullscreen.
|
|
44
|
+
@example
|
|
45
|
+
```
|
|
46
|
+
import screenfull from 'screenfull';
|
|
47
|
+
// Fullscreen the page
|
|
48
|
+
document.getElementById('button').addEventListener('click', () => {
|
|
49
|
+
if (screenfull.isEnabled) {
|
|
50
|
+
screenfull.request();
|
|
51
|
+
} else {
|
|
52
|
+
// Ignore or do something else
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
// Fullscreen an element
|
|
56
|
+
const element = document.getElementById('target');
|
|
57
|
+
document.getElementById('button').addEventListener('click', () => {
|
|
58
|
+
if (screenfull.isEnabled) {
|
|
59
|
+
screenfull.request(element);
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
// Fullscreen an element with options
|
|
63
|
+
const element = document.getElementById('target');
|
|
64
|
+
document.getElementById('button').addEventListener('click', () => {
|
|
65
|
+
if (screenfull.isEnabled) {
|
|
66
|
+
screenfull.request(element, {navigationUI: 'hide'});
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
// Fullscreen an element with jQuery
|
|
70
|
+
const element = $('#target')[0]; // Get DOM element from jQuery collection
|
|
71
|
+
$('#button').on('click', () => {
|
|
72
|
+
if (screenfull.isEnabled) {
|
|
73
|
+
screenfull.request(element);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
```
|
|
77
|
+
*/
|
|
78
|
+
request(element?: Element, options?: FullscreenOptions): Promise<void>;
|
|
79
|
+
/**
|
|
80
|
+
Brings you out of fullscreen.
|
|
81
|
+
@returns A promise that resolves after the element exits fullscreen.
|
|
82
|
+
*/
|
|
83
|
+
exit(): Promise<void>;
|
|
84
|
+
/**
|
|
85
|
+
Requests fullscreen if not active, otherwise exits.
|
|
86
|
+
@param element - The default is `<html>`. If called with another element than the currently active, it will switch to that if it's a descendant.
|
|
87
|
+
@param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
|
|
88
|
+
@returns A promise that resolves after the element enters/exits fullscreen.
|
|
89
|
+
@example
|
|
90
|
+
```
|
|
91
|
+
import screenfull from 'screenfull';
|
|
92
|
+
// Toggle fullscreen on a image with jQuery
|
|
93
|
+
$('img').on('click', event => {
|
|
94
|
+
if (screenfull.isEnabled) {
|
|
95
|
+
screenfull.toggle(event.target);
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
```
|
|
99
|
+
*/
|
|
100
|
+
toggle(element?: Element, options?: FullscreenOptions): Promise<void>;
|
|
101
|
+
/**
|
|
102
|
+
Add a listener for when the browser switches in and out of fullscreen or when there is an error.
|
|
103
|
+
@example
|
|
104
|
+
```
|
|
105
|
+
import screenfull from 'screenfull';
|
|
106
|
+
// Detect fullscreen change
|
|
107
|
+
if (screenfull.isEnabled) {
|
|
108
|
+
screenfull.on('change', () => {
|
|
109
|
+
console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
// Detect fullscreen error
|
|
113
|
+
if (screenfull.isEnabled) {
|
|
114
|
+
screenfull.on('error', event => {
|
|
115
|
+
console.error('Failed to enable fullscreen', event);
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
*/
|
|
120
|
+
on(name: EventName, handler: (event: Event) => void): void;
|
|
121
|
+
/**
|
|
122
|
+
Remove a previously registered event listener.
|
|
123
|
+
@example
|
|
124
|
+
```
|
|
125
|
+
import screenfull from 'screenfull';
|
|
126
|
+
screenfull.off('change', callback);
|
|
127
|
+
```
|
|
128
|
+
*/
|
|
129
|
+
off(name: EventName, handler: (event: Event) => void): void;
|
|
130
|
+
/**
|
|
131
|
+
Alias for `.on('change', function)`.
|
|
132
|
+
*/
|
|
133
|
+
onchange(handler: (event: Event) => void): void;
|
|
134
|
+
/**
|
|
135
|
+
Alias for `.on('error', function)`.
|
|
136
|
+
*/
|
|
137
|
+
onerror(handler: (event: Event) => void): void;
|
|
138
|
+
};
|
|
139
|
+
export default screenfull;
|
|
@@ -62,7 +62,7 @@ export type SpringCarouselFreeScroll = {
|
|
|
62
62
|
freeScroll: true;
|
|
63
63
|
withLoop?: never;
|
|
64
64
|
slideType?: never;
|
|
65
|
-
enableFreeScrollDrag?: true;
|
|
65
|
+
enableFreeScrollDrag?: true | false;
|
|
66
66
|
initialActiveItem?: never;
|
|
67
67
|
itemsPerSlide?: never;
|
|
68
68
|
animateWhenActiveItemChange?: never;
|
package/dist/umd/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("@react-spring/web"),require("react"),require("@use-gesture/react"),require("screenfull"),require("resize-observer-polyfill")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","@react-spring/web","react","@use-gesture/react","screenfull","resize-observer-polyfill"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactSpringCarousel={},e.ReactJSXRuntime,e.ReactSpring,e.React,e.UseGestureReact,e.Screenfull,e.ResizeObserver)}(this,(function(e,t,n,r,i,s,c){"use strict";const o="RSC::Event";function u(){const e=r.useRef(null);return{useListenToCustomEvent:function(t){r.useEffect((()=>{function n(e){t(e.detail)}if(e.current||(e.current=document.createElement("div")),e.current)return e.current.addEventListener(o,n,!1),()=>{var t;null===(t=e.current)||void 0===t||t.removeEventListener(o,n,!1)}}),[t])},emitEvent:function(t){if(e.current){const n=new CustomEvent(o,{detail:t});e.current.dispatchEvent(n)}}}}function l({mainCarouselWrapperRef:e,onFullScreenChange:t,handleResize:n}){const i=r.useRef(!1);function c(e){i.current=e}return r.useEffect((()=>{function e(){document.fullscreenElement&&(c(!0),t(!0),n&&n()),document.fullscreenElement||(c(!1),t(!1),n&&n())}if(s.isEnabled)return s.on("change",e),()=>{s.isEnabled&&s.off("change",e)}}),[]),{enterFullscreen:function(t){s.isEnabled&&s.request(t||e.current)},exitFullscreen:function(){s.isEnabled&&s.exit()},getIsFullscreen:function(){return i.current}}}function a({thumbsSlideAxis:e="x",withThumbs:i=!1,prepareThumbsData:s,items:c,renderThumbFnProps:o}){const u=r.useRef(null),[l,a]=n.useSpring((()=>({val:0})));function d(){var t;return Math.round(Number(null===(t=u.current)||void 0===t?void 0:t["x"===e?"scrollWidth":"scrollHeight"])-u.current.getBoundingClientRect()["x"===e?"width":"height"])}return{thumbsFragment:i?t.jsx("div",Object.assign({className:"use-spring-carousel-thumbs-wrapper",ref:u,onWheel:()=>l.val.stop(),style:Object.assign({display:"flex",flex:"1",position:"relative",width:"100%",height:"100%",flexDirection:"x"===e?"row":"column"},"x"===e?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"})},{children:function(){function e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return s?s(e(c)):e(c)}().map((({id:e,renderThumb:n})=>{const r=`thumb-item-${e}`;return t.jsx("div",Object.assign({id:r,className:"thumb-item"},{children:"function"==typeof n?n(o):n}),r)}))})):null,handleScroll:function(t){var n,r;const i=u.current?u.current.querySelector(`#thumb-item-${c[t].id}`):null;if(i&&u.current&&!function(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}(i)){const t=i.offsetLeft,s=t>d()?d():t;a.start({from:{val:null!==(r=null===(n=u.current)||void 0===n?void 0:n["x"===e?"scrollLeft":"scrollTop"])&&void 0!==r?r:0},to:{val:s},onChange:({value:t})=>{u.current&&(u.current["x"===e?"scrollLeft":"scrollTop"]=Math.abs(t.val))}})}}}}const d=r.createContext(void 0);const f={initial:{opacity:1,position:"relative"},from:{opacity:0,position:"relative"},enter:{position:"relative",opacity:1},leave:{opacity:1,position:"absolute"}};const m=r.createContext(void 0);e.useEventsModule=u,e.useFullscreenModule=l,e.useSpringCarousel=function({items:e,init:s=!0,withThumbs:o,thumbsSlideAxis:f="x",itemsPerSlide:m=1,slideType:h="fixed",gutter:g=0,withLoop:v=!1,startEndGutter:p=0,carouselSlideAxis:x="x",disableGestures:b=!1,draggingSlideTreshold:y,slideWhenThresholdIsReached:T=!1,freeScroll:I,enableFreeScrollDrag:j,initialStartingPosition:w,prepareThumbsData:R,initialActiveItem:E=0,animateWhenActiveItemChange:O=!0,getControllerRef:C}){const S=m>e.length?e.length:m,M=r.useRef(!1),N=r.useRef(null!=y?y:0),F=r.useRef("initial"),L=r.useRef("initial"),k=r.useRef("initial"),A=r.useRef(E),P=r.useRef(0===E),$=r.useRef("fixed"===h&&E===e.length-1),q=r.useRef(null),W=r.useRef(null),D=r.useRef(!0),B=r.useRef(0),z=r.useRef(0),H=r.useRef(0),G=r.useRef(v),X=r.useRef(h),Y=r.useRef(I),J=r.useRef(!1),U=r.useCallback((()=>v?[...e.map((e=>Object.assign(Object.assign({},e),{id:`prev-repeated-item-${e.id}`}))),...e,...e.map((e=>Object.assign(Object.assign({},e),{id:`next-repeated-item-${e.id}`})))]:[...e]),[e,v])(),[K,Q]=n.useSpring((()=>({val:0,pause:!s,onChange:({value:e})=>{I&&q.current?("x"===x?q.current.scrollLeft=Math.abs(e.val):q.current.scrollTop=Math.abs(e.val),ve()):W.current&&(W.current.style.transform="x"===x?`translate3d(${e.val}px, 0px,0px)`:`translate3d(0px,${e.val}px,0px)`)}})),[I]),{emitEvent:V,useListenToCustomEvent:Z}=u(),{thumbsFragment:_,handleScroll:ee}=a({withThumbs:!!o,thumbsSlideAxis:f,prepareThumbsData:R,items:e,renderThumbFnProps:{getIsActiveItem:Te,getIsPrevItem:ye,useListenToCustomEvent:Z,getIsNextItem:be}}),{enterFullscreen:te,exitFullscreen:ne,getIsFullscreen:re}=l({mainCarouselWrapperRef:q,handleResize:()=>ue(),onFullScreenChange:e=>{V({eventName:"onFullscreenChange",isFullscreen:e})}});function ie(){var e;const t=null===(e=q.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===x?"width":"height"]+g}function se({from:t,to:r,nextActiveItem:i,immediate:s=!1,slideMode:c}){L.current=c,"number"==typeof i&&(I||(A.current=i),V({eventName:"onSlideStartChange",slideActionType:F.current,slideMode:L.current,nextItem:{startReached:P.current,endReached:$.current,index:I?-1:A.current,id:I?"":e[A.current].id}})),H.current=r,Q.start({immediate:s,from:{val:t},to:{val:r},config:Object.assign(Object.assign({},n.config.default),{velocity:K.val.velocity}),onRest(t){!s&&t.finished&&V({eventName:"onSlideChange",slideActionType:F.current,slideMode:L.current,currentItem:{startReached:P.current,endReached:$.current,index:I?-1:A.current,id:I?"":e[A.current].id}})}}),o&&!s&&ee(A.current)}function ce(){var t;return v?ie()*e.length:Math.round(Number(null===(t=W.current)||void 0===t?void 0:t["x"===x?"scrollWidth":"scrollHeight"])-W.current.getBoundingClientRect()["x"===x?"width":"height"]-2*p)}function oe(){var e;const t=null===(e=W.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===x?"width":"height"]+g}function ue(){const t="x"===x?"left":"top";function n(e){const n=W.current;n&&(v?(n.style.top="0px",n.style.left="0px",n.style[t]=`-${e-p}px`,P.current=!1,$.current=!1):(n.style.left="0px",n.style.top="0px"))}if("fixed"===h&&v&&n("center"===w?oe()*e.length-ie()*Math.round((S-1)/2):"end"===w?oe()*e.length-ie()*Math.round(S-1):oe()*e.length),"fluid"!==h){if(!I&&"fixed"===h){const e=-ie()*A.current;if(Math.abs(e)>ce()&&!v){const e=-ce();$.current=!0,H.current=e,Q.start({immediate:!0,val:H.current})}else H.current=e,Q.start({immediate:!0,val:e});setTimeout((()=>{M.current=!1}),0)}}else{if($.current&&ce()!==Math.abs(H.current)&&!v){const e=-ce();return H.current=e,void Q.start({immediate:!0,val:H.current})}if(Math.abs(H.current)>0&&ce()!==Math.abs(H.current)&&!v&&!I&&"backward"===k.current){const e=B.current-ce(),t=H.current+e;return Q.start({immediate:!0,val:t}),()=>{H.current=t}}}}function le(){return I&&q.current?q.current["x"===x?"scrollLeft":"scrollTop"]:K.val.get()}function ae(e,t){if(I&&"next"===e){const e=H.current+ie();return e>ce()?ce():e}if(I&&"prev"===e){const e=H.current-ie();return e<0?0:e}return"next"===e?"number"==typeof t?-t*ie():H.current-ie():"number"==typeof t?-t*ie():H.current+ie()}function de({type:t,index:n,immediate:r}){if(!s||J.current||P.current&&!v)return;$.current&&(k.current="backward"),F.current="prev",$.current=!1;const i="number"==typeof n?n:A.current-1;if(I&&ve(),!v){const e=I?ae("prev",n)-ie()/3<0:ae("prev",n)+ie()/3>0;if(P.current)return;if(e)return P.current=!0,$.current=!1,void se({slideMode:t,from:le(),to:0,nextActiveItem:0,immediate:r})}if(v&&(P.current||i<0))return P.current=!1,$.current=!0,void se({slideMode:t,from:le()-ie()*e.length,to:-ie()*e.length+ie(),nextActiveItem:e.length-1,immediate:r});0===i&&(P.current=!0),i!==e.length-1&&-1!==i||($.current=!0),se({slideMode:t,from:le(),to:ae("prev",n),nextActiveItem:i,immediate:r})}function fe({type:t,index:n,immediate:r}){if(!s||J.current||$.current&&!v)return;P.current&&(k.current="forward"),F.current="next",P.current=!1;const i=n||A.current+1;if(I&&ve(),!v){const e=Math.abs(ae("next",n))>ce()-ie()/3;if($.current)return;if(e)return P.current=!1,$.current=!0,void se({slideMode:t,from:le(),to:I?ce():-ce(),nextActiveItem:i,immediate:r})}if(v&&($.current||i>e.length-1))return $.current=!1,P.current=!0,void se({slideMode:t,from:le()+ie()*e.length,to:0,nextActiveItem:0,immediate:r});0===i&&(P.current=!0),i===e.length-1&&($.current=!0),se({slideMode:t,from:le(),to:ae("next",n),nextActiveItem:i,immediate:r})}function me(){return N.current=y||Math.floor(ie()/2/2),N.current}r.useEffect((()=>{A.current!==E&&xe({id:E,immediate:!O})}),[E]),r.useEffect((()=>{if(s){if(E>e.length-1)throw new Error(`initialActiveItem (${E}) is greater than the total quantity available items (${e.length}).`);S>e.length&&console.warn(`itemsPerSlide (${S}) is greater than the total quantity available items (${e.length}). Fallback to ${e.length})`)}}),[E,e,S,s]),r.useEffect((()=>{z.current=window.innerWidth}),[]),r.useEffect((()=>{B.current=ce(),D.current||(M.current=!0,ue())}),[w,S,p,g,s,ce]),r.useEffect((()=>{v===G.current&&h===X.current&&I===Y.current||(G.current=v,X.current=h,Y.current=I,W.current&&(W.current.style.transform="translate3d(0px, 0px,0px)",Q.start({val:0,immediate:!0})),xe({id:0,immediate:!0,shouldReset:!0}))}),[v,h,I]),n.useIsomorphicLayoutEffect((()=>{W.current&&ue()}),[]),r.useEffect((()=>{me()}),[y,S,h]),r.useEffect((()=>{if(q.current){let e;const t=new c((()=>{if(D.current)D.current=!1;else if(!J.current&&!M.current){z.current=window.innerWidth;const t=ue();window.clearTimeout(e),e=setTimeout((()=>{B.current=ce(),"function"==typeof t&&t()}),100)}}));return t.observe(q.current),()=>{t.disconnect()}}}),[ue,ce]),r.useEffect((()=>{if(s)return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)};function e(){document.hidden?J.current=!0:J.current=!1}}),[s]);const he=s&&!b&&!I||!!I&&!!j,ge=i.useDrag((e=>{const t=e.dragging,r=e.offset["x"===x?0:1],i=e.movement["x"===x?0:1],s=e.direction["x"===x?0:1],c=i>me(),o=i<-me(),u=ce();if(t){if(F.current=s>0?"prev":"next",V(Object.assign(Object.assign({},e),{eventName:"onDrag",slideActionType:F.current})),I)return r>0?(Q.start({from:{val:le()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}}),void e.cancel()):void Q.start({from:{val:le()},to:{val:-r},config:{velocity:e.velocity,friction:50,tension:1e3}});Q.start({val:r,config:{velocity:e.velocity,friction:50,tension:1e3}}),T&&o?(fe({type:"drag"}),e.cancel()):T&&c&&(de({type:"drag"}),e.cancel());u-Math.abs(r)<-2*ie()&&e.cancel()}else e.last&&I&&r>0?Q.start({from:{val:le()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}}):(e.last&&!e.canceled&&I&&("prev"===F.current&&de({type:"drag"}),"next"===F.current&&fe({type:"drag"})),!e.last||e.canceled||I||(o?!v&&$.current?Q.start({val:-ce(),config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})}):fe({type:"drag"}):c?!v&&P.current?Q.start({val:0,config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})}):de({type:"drag"}):Q.start({val:H.current,config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})})),e.last&&e.canceled&&Q.start({val:H.current,config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})}))}),{enabled:he,axis:x,from:()=>I&&q.current?[-q.current.scrollLeft,-q.current.scrollTop]:[K.val.get(),K.val.get()]});function ve(){q.current&&(H.current=q.current["x"===x?"scrollLeft":"scrollTop"],0===q.current["x"===x?"scrollLeft":"scrollTop"]&&(P.current=!0,$.current=!1),q.current["x"===x?"scrollLeft":"scrollTop"]>0&&q.current["x"===x?"scrollLeft":"scrollTop"]<ce()&&(P.current=!1,$.current=!1),q.current["x"===x?"scrollLeft":"scrollTop"]===ce()&&(P.current=!1,$.current=!0))}function pe(t,n){let r=0;if(r="string"==typeof t?e.findIndex((e=>e.id===t)):t,r<0||r>=e.length){if(n)throw new Error(n);console.error(`The item doesn't exist; check that the id provided - ${t} - is correct.`),r=-1}return r}function xe({id:t,immediate:n,shouldReset:r,type:i}){if(!s||J.current)return;P.current=!1,$.current=!1;const c=pe(t,"The item you want to slide to doesn't exist; check the provided id.");if(c===A.current&&!r)return;const o=pe(e[A.current].id),u=pe(e[c].id);u>o?fe({type:i||r?"initial":"click",index:u,immediate:n}):de({type:i||r?"initial":"click",index:u,immediate:n})}function be(t){const n=pe(t,"The item doesn't exist; check the provided id."),r=A.current;return v&&r===e.length-1?0===n:n===r+1}function ye(t){const n=pe(t,"The item doesn't exist; check the provided id."),r=A.current;return v&&0===r?n===e.length-1:n===r-1}function Te(e){return pe(e,"The item you want to check doesn't exist; check the provided id.")===A.current}const Ie=I?{useListenToCustomEvent:Z,enterFullscreen:te,exitFullscreen:ne,getIsFullscreen:re,slideToPrevItem:(e=!0)=>{de({type:"click",immediate:!e})},slideToNextItem:(e=!0)=>{fe({type:"click",immediate:!e})}}:{useListenToCustomEvent:Z,enterFullscreen:te,exitFullscreen:ne,getIsFullscreen:re,slideToPrevItem:(e=!0)=>{de({type:"click",immediate:!e})},slideToNextItem:(e=!0)=>{fe({type:"click",immediate:!e})},slideToItem:(e,t=!0)=>{xe({id:e,immediate:!t})},getIsNextItem:be,getIsPrevItem:ye,getIsActiveItem:Te};r.useEffect((()=>{C&&C({slideToNextItem:Ie.slideToNextItem,slideToPrevItem:Ie.slideToPrevItem,slideToItem:null==Ie?void 0:Ie.slideToItem})}),[C,Ie.slideToItem,Ie.slideToNextItem,Ie.slideToPrevItem]);const je=t.jsx(d.Provider,Object.assign({value:Ie},{children:_})),we=t.jsx(d.Provider,Object.assign({value:Ie},{children:t.jsx("div",Object.assign({className:"use-spring-carousel-main-wrapper",ref:q},I?{onWheel(){K.val.stop(),ve()}}:{},{style:Object.assign({display:"flex",position:"relative",width:"100%",height:"100%"},I?"x"===x?{overflowX:"auto"}:{overflowY:"auto"}:{})},{children:t.jsxs("div",Object.assign({className:"use-spring-carousel-track-wrapper",ref:W},ge(),{style:Object.assign({position:"relative",display:"flex",flexDirection:"x"===x?"row":"column",touchAction:b?"unset":"x"===x?"pan-y":"pan-x"},function(){const e=`calc(100% - ${2*p}px)`;return{width:"x"===x?e:"100%",height:"y"===x?e:"100%"}}())},{children:[!I&&v||!p?null:t.jsx("div",{style:{flexShrink:0,width:p}}),U.map(((e,n)=>{return t.jsx("div",Object.assign({className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:Object.assign({display:"flex",position:"relative",flex:"1"},(r=n===U.findIndex((e=>e.id===U[U.length-1].id)),"fixed"!==h||I?Object.assign({marginRight:`${r?0:g}px`}):{marginRight:`${r?0:g}px`,flex:`1 0 calc(100% / ${S} - ${g*(S-1)/S}px)`}))},{children:"function"==typeof e.renderItem?e.renderItem({getIsActiveItem:Te,getIsNextItem:be,getIsPrevItem:ye,useListenToCustomEvent:Z}):e.renderItem}),`${e.id}-${n}`);var r})),!I&&v||!p?null:t.jsx("div",{style:{flexShrink:0,width:p}})]}))}))}));return Object.assign(Object.assign({},Ie),{carouselFragment:we,thumbsFragment:je})},e.useSpringCarouselContext=function(){const e=r.useContext(d);if(!e)throw new Error("useSpringCarouselContext must be used within the carousel.");return e},e.useThumbsModule=a,e.useTransitionCarousel=function({init:e=!0,disableGestures:s=!1,items:c,springConfig:o=n.config.default,exitBeforeEnter:l=!1,trail:d,withLoop:h=!1,activeItem:g,toPrevItemSpringProps:v=f,toNextItemSpringProps:p=f,draggingSlideTreshold:x=50,thumbsSlideAxis:b="x"}){const y=r.useRef("next"),T=r.useRef("initial"),I=r.useRef(null),[j,w]=r.useState(null!=g?g:0),{emitEvent:R,useListenToCustomEvent:E}=u(),{handleScroll:O,thumbsFragment:C}=a({thumbsSlideAxis:b,items:c,renderThumbFnProps:{getIsNextItem:A,getIsPrevItem:P,useListenToCustomEvent:E,activeItem:{index:j,id:c[j].id}}});function S({to:e,slideType:t,slideMode:n}){y.current=t,T.current=n,R({eventName:"onSlideStartChange",slideActionType:y.current,slideMode:T.current,nextItem:{index:e,id:c[e].id,startReached:0===e,endReached:e===c.length-1}}),w(e),O(j)}function M(t){if(!e)return;const n=0===j;!h&&n||S(h&&n?{to:c.length-1,slideType:"prev",slideMode:t}:{to:j-1,slideType:"prev",slideMode:t})}function N(t){if(!e)return;const n=j===c.length-1;!h&&n||S(h&&n?{to:0,slideType:"next",slideMode:t}:{to:j+1,slideType:"next",slideMode:t})}r.useEffect((()=>{"number"==typeof g&&g!==j&&w(g)}),[g]);const F=n.useTransition(j,Object.assign(Object.assign({config:o,key:null,trail:d,exitBeforeEnter:l},"prev"===y.current?{initial:Object.assign({},v.initial),from:Object.assign({},v.from),enter:Object.assign({},v.enter),leave:Object.assign({},v.leave)}:"next"===y.current?{initial:Object.assign({},p.initial),from:Object.assign({},p.from),enter:Object.assign({},p.enter),leave:Object.assign({},p.leave)}:{initial:Object.assign({},f.initial),from:Object.assign({},f.from),enter:Object.assign({},f.enter),leave:Object.assign({},f.leave)}),{onRest(e,t,n){e.finished&&n===j&&R({eventName:"onSlideChange",slideActionType:y.current,slideMode:T.current,currentItem:{index:j,id:c[j].id,startReached:0===j,endReached:j===c.length-1}})}})),L=i.useDrag((({last:e,movement:[t]})=>{if(e){const e=t>x,n=t<-x,r=0===j,i=j===c.length-1;if(n){if(!h&&i)return;R({eventName:"onLeftSwipe"}),N("swipe")}else if(e){if(!h&&r)return;R({eventName:"onRightSwipe"}),M("swipe")}}}),{enabled:!s});function k(e,t){let n=0;if(n="string"==typeof e?c.findIndex((t=>t.id===e)):e,n<0||n>=c.length){if(t)throw new Error(t);console.error(`The item doesn't exist; check that the id provided - ${e} - is correct.`),n=-1}return n}function A(e){const t=k(e,"The item doesn't exist; check the provided id."),n=j;return h&&n===c.length-1?0===t:t===n+1}function P(e){const t=k(e,"The item doesn't exist; check the provided id."),n=j;return h&&0===n?t===c.length-1:t===n-1}const $=F(((e,r,i,s)=>{const o=c[r].renderItem;return t.jsx(n.a.div,Object.assign({id:`use-transition-carousel-item-${s}`,className:"use-transition-carousel-item",style:Object.assign(Object.assign({},e),{flex:"1 0 100%",width:"100%",height:"100%"})},{children:"function"==typeof o?o({useListenToCustomEvent:E,getIsNextItem:A,getIsPrevItem:P,activeItem:{index:j,id:c[j].id}}):o}))})),q={useListenToCustomEvent:E,slideToPrevItem:()=>M("click"),slideToNextItem:()=>N("click")},W=t.jsx(m.Provider,Object.assign({value:q},{children:C})),D=t.jsx(m.Provider,Object.assign({value:q},{children:t.jsx("div",Object.assign({ref:I},L(),{style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"}},{children:$}))}));return Object.assign(Object.assign({},q),{carouselFragment:D,thumbsFragment:W})},e.useTransitionCarouselContext=function(){const e=r.useContext(m);if(!e)throw new Error("useTransitionCarouselContext must be used within the carousel.");return e}}));
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("@react-spring/web"),require("react"),require("@use-gesture/react"),require("resize-observer-polyfill")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","@react-spring/web","react","@use-gesture/react","resize-observer-polyfill"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactSpringCarousel={},e.ReactJSXRuntime,e.ReactSpring,e.React,e.UseGestureReact,e.ResizeObserver)}(this,(function(e,t,n,r,i,s){"use strict";const c="RSC::Event";function o(){const e=r.useRef(null);return{useListenToCustomEvent:function(t){r.useEffect((()=>{function n(e){t(e.detail)}if(e.current||(e.current=document.createElement("div")),e.current)return e.current.addEventListener(c,n,!1),()=>{var t;null===(t=e.current)||void 0===t||t.removeEventListener(c,n,!1)}}),[t])},emitEvent:function(t){if(e.current){const n=new CustomEvent(c,{detail:t});e.current.dispatchEvent(n)}}}}var u=screenfull;function l({mainCarouselWrapperRef:e,onFullScreenChange:t,handleResize:n}){const i=r.useRef(!1);function s(e){i.current=e}return r.useEffect((()=>{function e(){document.fullscreenElement&&(s(!0),t(!0),n&&n()),document.fullscreenElement||(s(!1),t(!1),n&&n())}if(u.isEnabled)return u.on("change",e),()=>{u.isEnabled&&u.off("change",e)}}),[]),{enterFullscreen:function(t){u.isEnabled&&u.request(t||e.current)},exitFullscreen:function(){u.isEnabled&&u.exit()},getIsFullscreen:function(){return i.current}}}function a({thumbsSlideAxis:e="x",withThumbs:i=!1,prepareThumbsData:s,items:c,renderThumbFnProps:o}){const u=r.useRef(null),[l,a]=n.useSpring((()=>({val:0})));function d(){var t;return Math.round(Number(null===(t=u.current)||void 0===t?void 0:t["x"===e?"scrollWidth":"scrollHeight"])-u.current.getBoundingClientRect()["x"===e?"width":"height"])}return{thumbsFragment:i?t.jsx("div",Object.assign({className:"use-spring-carousel-thumbs-wrapper",ref:u,onWheel:()=>l.val.stop(),style:Object.assign({display:"flex",flex:"1",position:"relative",width:"100%",height:"100%",flexDirection:"x"===e?"row":"column"},"x"===e?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"})},{children:function(){function e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return s?s(e(c)):e(c)}().map((({id:e,renderThumb:n})=>{const r=`thumb-item-${e}`;return t.jsx("div",Object.assign({id:r,className:"thumb-item"},{children:"function"==typeof n?n(o):n}),r)}))})):null,handleScroll:function(t){var n,r;const i=u.current?u.current.querySelector(`#thumb-item-${c[t].id}`):null;if(i&&u.current&&!function(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}(i)){const t=i.offsetLeft,s=t>d()?d():t;a.start({from:{val:null!==(r=null===(n=u.current)||void 0===n?void 0:n["x"===e?"scrollLeft":"scrollTop"])&&void 0!==r?r:0},to:{val:s},onChange:({value:t})=>{u.current&&(u.current["x"===e?"scrollLeft":"scrollTop"]=Math.abs(t.val))}})}}}}const d=r.createContext(void 0);const f={initial:{opacity:1,position:"relative"},from:{opacity:0,position:"relative"},enter:{position:"relative",opacity:1},leave:{opacity:1,position:"absolute"}};const m=r.createContext(void 0);e.useEventsModule=o,e.useFullscreenModule=l,e.useSpringCarousel=function({items:e,init:c=!0,withThumbs:u,thumbsSlideAxis:f="x",itemsPerSlide:m=1,slideType:h="fixed",gutter:g=0,withLoop:v=!1,startEndGutter:p=0,carouselSlideAxis:x="x",disableGestures:b=!1,draggingSlideTreshold:y,slideWhenThresholdIsReached:T=!1,freeScroll:I,enableFreeScrollDrag:j,initialStartingPosition:w,prepareThumbsData:R,initialActiveItem:E=0,animateWhenActiveItemChange:O=!0,getControllerRef:C}){const S=m>e.length?e.length:m,M=r.useRef(!1),N=r.useRef(null!=y?y:0),F=r.useRef("initial"),L=r.useRef("initial"),k=r.useRef("initial"),A=r.useRef(E),P=r.useRef(0===E),$=r.useRef("fixed"===h&&E===e.length-1),W=r.useRef(null),q=r.useRef(null),D=r.useRef(!0),B=r.useRef(0),z=r.useRef(0),H=r.useRef(0),G=r.useRef(v),X=r.useRef(h),Y=r.useRef(I),J=r.useRef(!1),U=r.useCallback((()=>v?[...e.map((e=>Object.assign(Object.assign({},e),{id:`prev-repeated-item-${e.id}`}))),...e,...e.map((e=>Object.assign(Object.assign({},e),{id:`next-repeated-item-${e.id}`})))]:[...e]),[e,v])(),[K,Q]=n.useSpring((()=>({val:0,pause:!c,onChange:({value:e})=>{I&&W.current?("x"===x?W.current.scrollLeft=Math.abs(e.val):W.current.scrollTop=Math.abs(e.val),ve()):q.current&&(q.current.style.transform="x"===x?`translate3d(${e.val}px, 0px,0px)`:`translate3d(0px,${e.val}px,0px)`)}})),[I]),{emitEvent:V,useListenToCustomEvent:Z}=o(),{thumbsFragment:_,handleScroll:ee}=a({withThumbs:!!u,thumbsSlideAxis:f,prepareThumbsData:R,items:e,renderThumbFnProps:{getIsActiveItem:Te,getIsPrevItem:ye,useListenToCustomEvent:Z,getIsNextItem:be}}),{enterFullscreen:te,exitFullscreen:ne,getIsFullscreen:re}=l({mainCarouselWrapperRef:W,handleResize:()=>ue(),onFullScreenChange:e=>{V({eventName:"onFullscreenChange",isFullscreen:e})}});function ie(){var e;const t=null===(e=W.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===x?"width":"height"]+g}function se({from:t,to:r,nextActiveItem:i,immediate:s=!1,slideMode:c}){L.current=c,"number"==typeof i&&(I||(A.current=i),V({eventName:"onSlideStartChange",slideActionType:F.current,slideMode:L.current,nextItem:{startReached:P.current,endReached:$.current,index:I?-1:A.current,id:I?"":e[A.current].id}})),H.current=r,Q.start({immediate:s,from:{val:t},to:{val:r},config:Object.assign(Object.assign({},n.config.default),{velocity:K.val.velocity}),onRest(t){!s&&t.finished&&V({eventName:"onSlideChange",slideActionType:F.current,slideMode:L.current,currentItem:{startReached:P.current,endReached:$.current,index:I?-1:A.current,id:I?"":e[A.current].id}})}}),u&&!s&&ee(A.current)}function ce(){var t;return v?ie()*e.length:Math.round(Number(null===(t=q.current)||void 0===t?void 0:t["x"===x?"scrollWidth":"scrollHeight"])-q.current.getBoundingClientRect()["x"===x?"width":"height"]-2*p)}function oe(){var e;const t=null===(e=q.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===x?"width":"height"]+g}function ue(){const t="x"===x?"left":"top";function n(e){const n=q.current;n&&(v?(n.style.top="0px",n.style.left="0px",n.style[t]=`-${e-p}px`,P.current=!1,$.current=!1):(n.style.left="0px",n.style.top="0px"))}if("fixed"===h&&n("center"===w?oe()*e.length-ie()*Math.round((S-1)/2):"end"===w?oe()*e.length-ie()*Math.round(S-1):oe()*e.length),"fluid"!==h){if(!I&&"fixed"===h){const e=-ie()*A.current;if(Math.abs(e)>ce()&&!v){const e=-ce();$.current=!0,H.current=e,Q.start({immediate:!0,val:H.current})}else H.current=e,Q.start({immediate:!0,val:e});setTimeout((()=>{M.current=!1}),0)}}else{if($.current&&ce()!==Math.abs(H.current)&&!v){const e=-ce();return H.current=e,void Q.start({immediate:!0,val:H.current})}if(Math.abs(H.current)>0&&ce()!==Math.abs(H.current)&&!v&&!I&&"backward"===k.current){const e=B.current-ce(),t=H.current+e;return Q.start({immediate:!0,val:t}),()=>{H.current=t}}}}function le(){return I&&W.current?W.current["x"===x?"scrollLeft":"scrollTop"]:K.val.get()}function ae(e,t){if(I&&"next"===e){const e=H.current+ie();return e>ce()?ce():e}if(I&&"prev"===e){const e=H.current-ie();return e<0?0:e}return"next"===e?"number"==typeof t?-t*ie():H.current-ie():"number"==typeof t?-t*ie():H.current+ie()}function de({type:t,index:n,immediate:r}){if(!c||J.current||P.current&&!v)return;$.current&&(k.current="backward"),F.current="prev",$.current=!1;const i="number"==typeof n?n:A.current-1;if(I&&ve(),!v){const e=I?ae("prev",n)-ie()/3<0:ae("prev",n)+ie()/3>0;if(P.current)return;if(e)return P.current=!0,$.current=!1,void se({slideMode:t,from:le(),to:0,nextActiveItem:0,immediate:r})}if(v&&(P.current||i<0))return P.current=!1,$.current=!0,void se({slideMode:t,from:le()-ie()*e.length,to:-ie()*e.length+ie(),nextActiveItem:e.length-1,immediate:r});0===i&&(P.current=!0),i!==e.length-1&&-1!==i||($.current=!0),se({slideMode:t,from:le(),to:ae("prev",n),nextActiveItem:i,immediate:r})}function fe({type:t,index:n,immediate:r}){if(!c||J.current||$.current&&!v)return;P.current&&(k.current="forward"),F.current="next",P.current=!1;const i=n||A.current+1;if(I&&ve(),!v){const e=Math.abs(ae("next",n))>ce()-ie()/3;if($.current)return;if(e)return P.current=!1,$.current=!0,void se({slideMode:t,from:le(),to:I?ce():-ce(),nextActiveItem:i,immediate:r})}if(v&&($.current||i>e.length-1))return $.current=!1,P.current=!0,void se({slideMode:t,from:le()+ie()*e.length,to:0,nextActiveItem:0,immediate:r});0===i&&(P.current=!0),i===e.length-1&&($.current=!0),se({slideMode:t,from:le(),to:ae("next",n),nextActiveItem:i,immediate:r})}function me(){return N.current=y||Math.floor(ie()/2/2),N.current}r.useEffect((()=>{A.current!==E&&xe({id:E,immediate:!O})}),[E]),r.useEffect((()=>{if(c){if(E>e.length-1)throw new Error(`initialActiveItem (${E}) is greater than the total quantity available items (${e.length}).`);S>e.length&&console.warn(`itemsPerSlide (${S}) is greater than the total quantity available items (${e.length}). Fallback to ${e.length})`)}}),[E,e,S,c]),r.useEffect((()=>{z.current=window.innerWidth}),[]),r.useEffect((()=>{B.current=ce(),D.current||(M.current=!0,ue(),console.log("here"))}),[w,S,p,g,c,ce,v]),r.useEffect((()=>{v===G.current&&h===X.current&&I===Y.current||(G.current=v,X.current=h,Y.current=I,q.current&&(q.current.style.transform="translate3d(0px, 0px,0px)",Q.start({val:0,immediate:!0})),xe({id:0,immediate:!0,shouldReset:!0}))}),[v,h,I]),n.useIsomorphicLayoutEffect((()=>{q.current&&ue()}),[]),r.useEffect((()=>{me()}),[y,S,h]),r.useEffect((()=>{if(W.current){let e;const t=new s((()=>{if(D.current)D.current=!1;else if(!J.current&&!M.current){z.current=window.innerWidth;const t=ue();window.clearTimeout(e),e=setTimeout((()=>{B.current=ce(),"function"==typeof t&&t()}),100)}}));return t.observe(W.current),()=>{t.disconnect()}}}),[ue,ce]),r.useEffect((()=>{if(c)return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)};function e(){document.hidden?J.current=!0:J.current=!1}}),[c]);const he=c&&!b&&!I||!!I&&!!j,ge=i.useDrag((e=>{const t=e.dragging,r=e.offset["x"===x?0:1],i=e.movement["x"===x?0:1],s=e.direction["x"===x?0:1],c=i>me(),o=i<-me(),u=ce();if(t){if(F.current=s>0?"prev":"next",V(Object.assign(Object.assign({},e),{eventName:"onDrag",slideActionType:F.current})),I)return r>0?(Q.start({from:{val:le()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}}),void e.cancel()):void Q.start({from:{val:le()},to:{val:-r},config:{velocity:e.velocity,friction:50,tension:1e3}});Q.start({val:r,config:{velocity:e.velocity,friction:50,tension:1e3}}),T&&o?(fe({type:"drag"}),e.cancel()):T&&c&&(de({type:"drag"}),e.cancel());u-Math.abs(r)<-2*ie()&&e.cancel()}else e.last&&I&&r>0?Q.start({from:{val:le()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}}):(e.last&&!e.canceled&&I&&("prev"===F.current&&de({type:"drag"}),"next"===F.current&&fe({type:"drag"})),!e.last||e.canceled||I||(o?!v&&$.current?Q.start({val:-ce(),config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})}):fe({type:"drag"}):c?!v&&P.current?Q.start({val:0,config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})}):de({type:"drag"}):Q.start({val:H.current,config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})})),e.last&&e.canceled&&Q.start({val:H.current,config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})}))}),{enabled:he,axis:x,from:()=>I&&W.current?[-W.current.scrollLeft,-W.current.scrollTop]:[K.val.get(),K.val.get()]});function ve(){W.current&&(H.current=W.current["x"===x?"scrollLeft":"scrollTop"],0===W.current["x"===x?"scrollLeft":"scrollTop"]&&(P.current=!0,$.current=!1),W.current["x"===x?"scrollLeft":"scrollTop"]>0&&W.current["x"===x?"scrollLeft":"scrollTop"]<ce()&&(P.current=!1,$.current=!1),W.current["x"===x?"scrollLeft":"scrollTop"]===ce()&&(P.current=!1,$.current=!0))}function pe(t,n){let r=0;if(r="string"==typeof t?e.findIndex((e=>e.id===t)):t,r<0||r>=e.length){if(n)throw new Error(n);console.error(`The item doesn't exist; check that the id provided - ${t} - is correct.`),r=-1}return r}function xe({id:t,immediate:n,shouldReset:r,type:i}){if(!c||J.current)return;P.current=!1,$.current=!1;const s=pe(t,"The item you want to slide to doesn't exist; check the provided id.");if(s===A.current&&!r)return;const o=pe(e[A.current].id),u=pe(e[s].id);u>o?fe({type:i||r?"initial":"click",index:u,immediate:n}):de({type:i||r?"initial":"click",index:u,immediate:n})}function be(t){const n=pe(t,"The item doesn't exist; check the provided id."),r=A.current;return v&&r===e.length-1?0===n:n===r+1}function ye(t){const n=pe(t,"The item doesn't exist; check the provided id."),r=A.current;return v&&0===r?n===e.length-1:n===r-1}function Te(e){return pe(e,"The item you want to check doesn't exist; check the provided id.")===A.current}const Ie=I?{useListenToCustomEvent:Z,enterFullscreen:te,exitFullscreen:ne,getIsFullscreen:re,slideToPrevItem:(e=!0)=>{de({type:"click",immediate:!e})},slideToNextItem:(e=!0)=>{fe({type:"click",immediate:!e})}}:{useListenToCustomEvent:Z,enterFullscreen:te,exitFullscreen:ne,getIsFullscreen:re,slideToPrevItem:(e=!0)=>{de({type:"click",immediate:!e})},slideToNextItem:(e=!0)=>{fe({type:"click",immediate:!e})},slideToItem:(e,t=!0)=>{xe({id:e,immediate:!t})},getIsNextItem:be,getIsPrevItem:ye,getIsActiveItem:Te};r.useEffect((()=>{C&&C({slideToNextItem:Ie.slideToNextItem,slideToPrevItem:Ie.slideToPrevItem,slideToItem:null==Ie?void 0:Ie.slideToItem})}),[C,Ie.slideToItem,Ie.slideToNextItem,Ie.slideToPrevItem]);const je=t.jsx(d.Provider,Object.assign({value:Ie},{children:_})),we=t.jsx(d.Provider,Object.assign({value:Ie},{children:t.jsx("div",Object.assign({className:"use-spring-carousel-main-wrapper",ref:W},I?{onWheel(){K.val.stop(),ve()}}:{},{style:Object.assign({display:"flex",position:"relative",width:"100%",height:"100%"},I?"x"===x?{overflowX:"auto"}:{overflowY:"auto"}:{})},{children:t.jsxs("div",Object.assign({className:"use-spring-carousel-track-wrapper",ref:q},ge(),{style:Object.assign({position:"relative",display:"flex",flexDirection:"x"===x?"row":"column",touchAction:b?"unset":"x"===x?"pan-y":"pan-x"},function(){const e=`calc(100% - ${2*p}px)`;return{width:"x"===x?e:"100%",height:"y"===x?e:"100%"}}())},{children:[!I&&v||!p?null:t.jsx("div",{style:{flexShrink:0,width:p}}),U.map(((e,n)=>{return t.jsx("div",Object.assign({className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:Object.assign({display:"flex",position:"relative",flex:"1"},(r=n===U.findIndex((e=>e.id===U[U.length-1].id)),"fixed"!==h||I?Object.assign({marginRight:`${r?0:g}px`}):{marginRight:`${r?0:g}px`,flex:`1 0 calc(100% / ${S} - ${g*(S-1)/S}px)`}))},{children:"function"==typeof e.renderItem?e.renderItem({getIsActiveItem:Te,getIsNextItem:be,getIsPrevItem:ye,useListenToCustomEvent:Z}):e.renderItem}),`${e.id}-${n}`);var r})),!I&&v||!p?null:t.jsx("div",{style:{flexShrink:0,width:p}})]}))}))}));return Object.assign(Object.assign({},Ie),{carouselFragment:we,thumbsFragment:je})},e.useSpringCarouselContext=function(){const e=r.useContext(d);if(!e)throw new Error("useSpringCarouselContext must be used within the carousel.");return e},e.useThumbsModule=a,e.useTransitionCarousel=function({init:e=!0,disableGestures:s=!1,items:c,springConfig:u=n.config.default,exitBeforeEnter:l=!1,trail:d,withLoop:h=!1,activeItem:g,toPrevItemSpringProps:v=f,toNextItemSpringProps:p=f,draggingSlideTreshold:x=50,thumbsSlideAxis:b="x"}){const y=r.useRef("next"),T=r.useRef("initial"),I=r.useRef(null),[j,w]=r.useState(null!=g?g:0),{emitEvent:R,useListenToCustomEvent:E}=o(),{handleScroll:O,thumbsFragment:C}=a({thumbsSlideAxis:b,items:c,renderThumbFnProps:{getIsNextItem:A,getIsPrevItem:P,useListenToCustomEvent:E,activeItem:{index:j,id:c[j].id}}});function S({to:e,slideType:t,slideMode:n}){y.current=t,T.current=n,R({eventName:"onSlideStartChange",slideActionType:y.current,slideMode:T.current,nextItem:{index:e,id:c[e].id,startReached:0===e,endReached:e===c.length-1}}),w(e),O(j)}function M(t){if(!e)return;const n=0===j;!h&&n||S(h&&n?{to:c.length-1,slideType:"prev",slideMode:t}:{to:j-1,slideType:"prev",slideMode:t})}function N(t){if(!e)return;const n=j===c.length-1;!h&&n||S(h&&n?{to:0,slideType:"next",slideMode:t}:{to:j+1,slideType:"next",slideMode:t})}r.useEffect((()=>{"number"==typeof g&&g!==j&&w(g)}),[g]);const F=n.useTransition(j,Object.assign(Object.assign({config:u,key:null,trail:d,exitBeforeEnter:l},"prev"===y.current?{initial:Object.assign({},v.initial),from:Object.assign({},v.from),enter:Object.assign({},v.enter),leave:Object.assign({},v.leave)}:"next"===y.current?{initial:Object.assign({},p.initial),from:Object.assign({},p.from),enter:Object.assign({},p.enter),leave:Object.assign({},p.leave)}:{initial:Object.assign({},f.initial),from:Object.assign({},f.from),enter:Object.assign({},f.enter),leave:Object.assign({},f.leave)}),{onRest(e,t,n){e.finished&&n===j&&R({eventName:"onSlideChange",slideActionType:y.current,slideMode:T.current,currentItem:{index:j,id:c[j].id,startReached:0===j,endReached:j===c.length-1}})}})),L=i.useDrag((({last:e,movement:[t]})=>{if(e){const e=t>x,n=t<-x,r=0===j,i=j===c.length-1;if(n){if(!h&&i)return;R({eventName:"onLeftSwipe"}),N("swipe")}else if(e){if(!h&&r)return;R({eventName:"onRightSwipe"}),M("swipe")}}}),{enabled:!s});function k(e,t){let n=0;if(n="string"==typeof e?c.findIndex((t=>t.id===e)):e,n<0||n>=c.length){if(t)throw new Error(t);console.error(`The item doesn't exist; check that the id provided - ${e} - is correct.`),n=-1}return n}function A(e){const t=k(e,"The item doesn't exist; check the provided id."),n=j;return h&&n===c.length-1?0===t:t===n+1}function P(e){const t=k(e,"The item doesn't exist; check the provided id."),n=j;return h&&0===n?t===c.length-1:t===n-1}const $=F(((e,r,i,s)=>{const o=c[r].renderItem;return t.jsx(n.a.div,Object.assign({id:`use-transition-carousel-item-${s}`,className:"use-transition-carousel-item",style:Object.assign(Object.assign({},e),{flex:"1 0 100%",width:"100%",height:"100%"})},{children:"function"==typeof o?o({useListenToCustomEvent:E,getIsNextItem:A,getIsPrevItem:P,activeItem:{index:j,id:c[j].id}}):o}))})),W={useListenToCustomEvent:E,slideToPrevItem:()=>M("click"),slideToNextItem:()=>N("click")},q=t.jsx(m.Provider,Object.assign({value:W},{children:C})),D=t.jsx(m.Provider,Object.assign({value:W},{children:t.jsx("div",Object.assign({ref:I},L(),{style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"}},{children:$}))}));return Object.assign(Object.assign({},W),{carouselFragment:D,thumbsFragment:q})},e.useTransitionCarouselContext=function(){const e=r.useContext(m);if(!e)throw new Error("useTransitionCarouselContext must be used within the carousel.");return e}}));
|
|
2
2
|
//# sourceMappingURL=index.js.map
|