react-spring-carousel 3.0.0-beta067 → 3.0.0-beta070

package/dist/useSpringCarousel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("./useThumbsModule-0c05dcf5.cjs"),$=require("@react-spring/web"),u=require("react"),qe=require("@use-gesture/react"),Ve=require("./useFullscreenModule-be189d5b.cjs"),De=require("resize-observer-polyfill");require("screenfull");function ze({items:n,init:p=!0,withThumbs:oe,thumbsSlideAxis:me="x",itemsPerSlide:se=1,slideType:E="fixed",gutter:F=0,withLoop:s=!1,startEndGutter:w=0,carouselSlideAxis:i="x",disableGestures:le=!1,draggingSlideTreshold:Q,slideWhenThresholdIsReached:fe=!1,freeScroll:c,enableFreeScrollDrag:he,initialStartingPosition:U,prepareThumbsData:pe,initialActiveItem:T=0,animateWhenActiveItemChange:xe=!0,getControllerRef:Z}){const b=se>n.length?n.length:se,B=u.useRef(!1),O=u.useRef(Q??0),R=u.useRef("initial"),_=u.useRef("initial"),G=u.useRef("initial"),m=u.useRef(T),f=u.useRef(T===0),l=u.useRef(E==="fixed"&&T===n.length-1),a=u.useRef(null),h=u.useRef(null),L=u.useRef(!0),A=u.useRef(0),S=u.useRef(0),d=u.useRef(0),ye=u.useRef(s),Ie=u.useRef(E),Te=u.useRef(c),N=u.useRef(!1),H=u.useCallback(()=>s?[...n.map(e=>({...e,id:`prev-repeated-item-${e.id}`})),...n,...n.map(e=>({...e,id:`next-repeated-item-${e.id}`}))]:[...n],[n,s])(),[k,x]=$.useSpring(()=>({val:0,pause:!p,onChange:({value:e})=>{c&&a.current?(i==="x"?a.current.scrollLeft=Math.abs(e.val):a.current.scrollTop=Math.abs(e.val),K()):h.current&&(i==="x"?h.current.style.transform=`translate3d(${e.val}px, 0px,0px)`:h.current.style.transform=`translate3d(0px,${e.val}px,0px)`)}}),[c]),{emitEvent:X,useListenToCustomEvent:Y}=C.useEventsModule(),{thumbsFragment:be,handleScroll:Re}=C.useThumbsModule({withThumbs:!!oe,thumbsSlideAxis:me,prepareThumbsData:pe,items:n,renderThumbFnProps:{getIsActiveItem:ue,getIsPrevItem:ce,useListenToCustomEvent:Y,getIsNextItem:ne}}),{enterFullscreen:ae,exitFullscreen:de,getIsFullscreen:ge}=Ve.useFullscreenModule({mainCarouselWrapperRef:a,handleResize:()=>J(),onFullScreenChange:e=>{X({eventName:"onFullscreenChange",isFullscreen:e})}});function Me(e){return E==="fixed"&&!c?{marginRight:`${e?0:F}px`,flex:`1 0 calc(100% / ${b} - ${F*(b-1)/b}px)`}:{marginRight:`${e?0:F}px`}}function g(){var r;const e=(r=a.current)==null?void 0:r.querySelector(".use-spring-carousel-item");if(!e)throw Error("No carousel items available!");return e.getBoundingClientRect()[i==="x"?"width":"height"]+F}function j({from:e,to:r,nextActiveItem:t,immediate:o=!1,slideMode:I}){_.current=I,typeof t=="number"&&(c||(m.current=t),X({eventName:"onSlideStartChange",slideActionType:R.current,slideMode:_.current,nextItem:{startReached:f.current,endReached:l.current,index:c?-1:m.current,id:c?"":n[m.current].id}})),d.current=r,x.start({immediate:o,from:{val:e},to:{val:r},config:{...$.config.default,velocity:k.val.velocity},onRest(V){!o&&V.finished&&X({eventName:"onSlideChange",slideActionType:R.current,slideMode:_.current,currentItem:{startReached:f.current,endReached:l.current,index:c?-1:m.current,id:c?"":n[m.current].id}})}}),oe&&!o&&Re(m.current)}function v(){var e;return s?g()*n.length:Math.round(Number((e=h.current)==null?void 0:e[i==="x"?"scrollWidth":"scrollHeight"])-h.current.getBoundingClientRect()[i==="x"?"width":"height"]-w*2)}function Ce(){const e=`calc(100% - ${w*2}px)`;return{width:i==="x"?e:"100%",height:i==="y"?e:"100%"}}function ee(){var r;const e=(r=h.current)==null?void 0:r.querySelector(".use-spring-carousel-item");if(!e)throw Error("No carousel items available!");return e.getBoundingClientRect()[i==="x"?"width":"height"]+F}function te(e){const r=i==="x"?"left":"top",t=h.current;t&&(s?(t.style.top="0px",t.style.left="0px",t.style[r]=`-${e-w}px`,f.current=!1,l.current=!1):(t.style.left="0px",t.style.top="0px"))}function J(e=!1){if(h.current&&e&&(h.current.style.transform="translate3d(0px, 0px,0px)",h.current.style.left="0",h.current.style.top="0"),E==="fixed"&&te(U==="center"?ee()*n.length-g()*Math.round((b-1)/2):U==="end"?ee()*n.length-g()*Math.round(b-1):ee()*n.length),E==="fluid"){if(l.current&&v()!==Math.abs(d.current)&&!s){const r=-v();d.current=r,x.start({immediate:!0,val:d.current});return}if(Math.abs(d.current)>0&&v()!==Math.abs(d.current)&&!s&&!c&&G.current==="backward"){const r=A.current-v(),t=d.current+r;return x.start({immediate:!0,val:t}),()=>{d.current=t}}return}if(!c&&E==="fixed"){const r=-(g()*m.current);if(Math.abs(r)>v()&&!s){const t=-v();l.current=!0,d.current=t,x.start({immediate:!0,val:d.current})}else d.current=r,x.start({immediate:!0,val:r});setTimeout(()=>{B.current=!1},0)}}function M(){return c&&a.current?a.current[i==="x"?"scrollLeft":"scrollTop"]:k.val.get()}function z(e,r){if(c&&e==="next"){const t=d.current+g();return t>v()?v():t}if(c&&e==="prev"){const t=d.current-g();return t<0?0:t}return e==="next"?typeof r=="number"?-(r*g()):d.current-g():typeof r=="number"?-(r*g()):d.current+g()}function P({type:e,index:r,immediate:t}){if(!p||N.current||f.current&&!s)return;l.current&&(G.current="backward"),R.current="prev",l.current=!1;const o=typeof r=="number"?r:m.current-1;if(c&&K(),!s){const I=c?z("prev",r)-g()/3<0:z("prev",r)+g()/3>0;if(f.current)return;if(I){f.current=!0,l.current=!1,j({slideMode:e,from:M(),to:0,nextActiveItem:0,immediate:t});return}}if(s&&(f.current||o<0)){f.current=!1,l.current=!0,j({slideMode:e,from:M()-g()*n.length,to:-(g()*n.length)+g(),nextActiveItem:n.length-1,immediate:t});return}o===0&&(f.current=!0),(o===n.length-1||o===-1)&&(l.current=!0),j({slideMode:e,from:M(),to:z("prev",r),nextActiveItem:o,immediate:t})}function W({type:e,index:r,immediate:t}){if(!p||N.current||l.current&&!s)return;f.current&&(G.current="forward"),R.current="next",f.current=!1;const o=r||m.current+1;if(c&&K(),!s){const I=Math.abs(z("next",r))>v()-g()/3;if(l.current)return;if(I){f.current=!1,l.current=!0,j({slideMode:e,from:M(),to:c?v():-v(),nextActiveItem:o,immediate:t});return}}if(s&&(l.current||o>n.length-1)){l.current=!1,f.current=!0,j({slideMode:e,from:M()+g()*n.length,to:0,nextActiveItem:0,immediate:t});return}o===0&&(f.current=!0),o===n.length-1&&(l.current=!0),j({slideMode:e,from:M(),to:z("next",r),nextActiveItem:o,immediate:t})}function we(){Q?O.current=Q:O.current=Math.floor(g()/2/2)}function ve(){!L.current&&h.current&&(A.current=v(),ye.current=s,Ie.current=E,Te.current=c,S.current=window.innerWidth,d.current=0,re({id:0,immediate:!0,shouldReset:!0}),we(),J())}const Ee=p&&!le&&!c||!!c&&!!he,ke=qe.useDrag(e=>{const r=e.dragging,t=e.offset[i==="x"?0:1],o=e.movement[i==="x"?0:1],I=e.direction[i==="x"?0:1],V=o>O.current,D=o<-O.current,We=v();if(r){if(I>0?R.current="prev":R.current="next",X({...e,eventName:"onDrag",slideActionType:R.current}),c){if(t>0){x.start({from:{val:M()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}}),e.cancel();return}x.start({from:{val:M()},to:{val:-t},config:{velocity:e.velocity,friction:50,tension:1e3}});return}x.start({val:t,config:{velocity:e.velocity,friction:50,tension:1e3}}),fe&&D?(W({type:"drag"}),e.cancel()):fe&&V&&(P({type:"drag"}),e.cancel()),We-Math.abs(t)<-(g()*2)&&e.cancel();return}if(e.last&&c&&t>0){x.start({from:{val:M()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}});return}e.last&&!e.canceled&&c&&(R.current==="prev"&&P({type:"drag"}),R.current==="next"&&W({type:"drag"})),e.last&&!e.canceled&&!c&&(D?!s&&l.current?x.start({val:-v(),config:{...$.config.default,velocity:e.velocity}}):W({type:"drag"}):V?!s&&f.current?x.start({val:0,config:{...$.config.default,velocity:e.velocity}}):P({type:"drag"}):x.start({val:d.current,config:{...$.config.default,velocity:e.velocity}})),e.last&&e.canceled&&x.start({val:d.current,config:{...$.config.default,velocity:e.velocity}})},{enabled:Ee,axis:i,from:()=>c&&a.current?[-a.current.scrollLeft,-a.current.scrollTop]:i==="x"?[k.val.get(),k.val.get()]:[k.val.get(),k.val.get()]});function $e(){return c?i==="x"?{overflowX:"auto"}:{overflowY:"auto"}:{}}function K(){a.current&&(d.current=a.current[i==="x"?"scrollLeft":"scrollTop"],a.current[i==="x"?"scrollLeft":"scrollTop"]===0&&(f.current=!0,l.current=!1),a.current[i==="x"?"scrollLeft":"scrollTop"]>0&&a.current[i==="x"?"scrollLeft":"scrollTop"]<v()&&(f.current=!1,l.current=!1),a.current[i==="x"?"scrollLeft":"scrollTop"]===v()&&(f.current=!1,l.current=!0))}function Fe(){return c?{onWheel(){k.val.stop(),K()}}:{}}function q(e,r){let t=0;if(typeof e=="string"?t=n.findIndex(o=>o.id===e):t=e,t<0||t>=n.length){if(r)throw new Error(r);console.error(`The item doesn't exist; check that the id provided - ${e} - is correct.`),t=-1}return t}function re({id:e,immediate:r,shouldReset:t,type:o}){if(!p||N.current)return;f.current=!1,l.current=!1;const I=q(e,"The item you want to slide to doesn't exist; check the provided id.");if(I===m.current&&!t)return;const V=q(n[m.current].id),D=q(n[I].id);D>V?W({type:o||t?"initial":"click",index:D,immediate:r}):P({type:o||t?"initial":"click",index:D,immediate:r})}function ne(e){const r=q(e,"The item doesn't exist; check the provided id."),t=m.current;return s&&t===n.length-1?r===0:r===t+1}function ce(e){const r=q(e,"The item doesn't exist; check the provided id."),t=m.current;return s&&t===0?r===n.length-1:r===t-1}function ue(e){return q(e,"The item you want to check doesn't exist; check the provided id.")===m.current}function Ne(){return le?"unset":i==="x"?"pan-y":"pan-x"}const y=c?{useListenToCustomEvent:Y,enterFullscreen:ae,exitFullscreen:de,getIsFullscreen:ge,slideToPrevItem:(e=!0)=>{P({type:"click",immediate:!e})},slideToNextItem:(e=!0)=>{W({type:"click",immediate:!e})}}:{useListenToCustomEvent:Y,enterFullscreen:ae,exitFullscreen:de,getIsFullscreen:ge,slideToPrevItem:(e=!0)=>{P({type:"click",immediate:!e})},slideToNextItem:(e=!0)=>{W({type:"click",immediate:!e})},slideToItem:(e,r=!0)=>{re({id:e,immediate:!r})},getIsNextItem:ne,getIsPrevItem:ce,getIsActiveItem:ue};$.useIsomorphicLayoutEffect(()=>{h.current&&p&&(B.current=!0,ve())},[p]),u.useEffect(()=>{m.current!==T&&re({id:T,immediate:!xe})},[T]),u.useEffect(()=>{if(p){if(T>n.length-1)throw new Error(`initialActiveItem (${T}) is greater than the total quantity available items (${n.length}).`);b>n.length&&console.warn(`itemsPerSlide (${b}) is greater than the total quantity available items (${n.length}). Fallback to ${n.length})`)}},[T,n.length,b,p]),u.useEffect(()=>{S.current=window.innerWidth},[]),u.useEffect(()=>{p&&(B.current=!0,ve())},[U,b,w,F,p,s]),u.useEffect(()=>{if(!p)return;function e(){document.hidden?N.current=!0:N.current=!1}return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}},[p]),u.useEffect(()=>{if(a.current){let e;const r=new De(()=>{if(L.current){L.current=!1;return}if(!N.current&&!B.current){S.current=window.innerWidth;const t=J();window.clearTimeout(e),e=setTimeout(()=>{A.current=v(),typeof t=="function"&&t()},100)}});return r.observe(a.current),()=>{r.disconnect()}}},[J,v]),u.useEffect(()=>{Z&&Z({slideToNextItem:y.slideToNextItem,slideToPrevItem:y.slideToPrevItem,slideToItem:y==null?void 0:y.slideToItem})},[Z,y.slideToItem,y.slideToNextItem,y.slideToPrevItem]);const je=C.jsxRuntimeExports.jsx(ie.Provider,{value:y,children:be}),Pe=C.jsxRuntimeExports.jsx(ie.Provider,{value:y,children:C.jsxRuntimeExports.jsx("div",{className:"use-spring-carousel-main-wrapper",ref:a,...Fe(),style:{display:"flex",position:"relative",width:"100%",height:"100%",...$e()},children:C.jsxRuntimeExports.jsxs("div",{className:"use-spring-carousel-track-wrapper",ref:h,...ke(),style:{position:"relative",display:"flex",flexDirection:i==="x"?"row":"column",touchAction:Ne(),...Ce()},children:[(c||!s)&&w?C.jsxRuntimeExports.jsx("div",{style:{flexShrink:0,width:w}}):null,H.map((e,r)=>C.jsxRuntimeExports.jsx("div",{className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:{display:"flex",position:"relative",flex:"1",...Me(r===H.findIndex(t=>t.id===H[H.length-1].id))},children:typeof e.renderItem=="function"?e.renderItem({getIsActiveItem:ue,getIsNextItem:ne,getIsPrevItem:ce,useListenToCustomEvent:Y}):e.renderItem},`${e.id}-${r}`)),(c||!s)&&w?C.jsxRuntimeExports.jsx("div",{style:{flexShrink:0,width:w}}):null]})})});return{...y,carouselFragment:Pe,thumbsFragment:je}}const ie=u.createContext(void 0);function Be(){const n=u.useContext(ie);if(!n)throw new Error("useSpringCarouselContext must be used within the carousel.");return n}exports.useSpringCarousel=ze;exports.useSpringCarouselContext=Be;

package/dist/{types/useSpringCarousel.d.ts → useSpringCarousel.d.ts}

@@ -1,18 +1,18 @@
-import { UseSpringCarouselWithFreeScroll, UseSpringCarouselWithThumbs, UseSpringCarouselWithNoThumbs, UseSpringCarouselWithNoFixedItems, UseSpringCarouselWithFixedItems, UseSpringFreeScrollReturnType, UseSpringReturnType } from './types';
-type ReturnType<T> = T extends true ? UseSpringFreeScrollReturnType : UseSpringReturnType;
-/**
- * With free scroll
- */
-declare function useSpringCarousel(props: UseSpringCarouselWithFreeScroll): ReturnType<true>;
-declare function useSpringCarousel(props: UseSpringCarouselWithThumbs<true>): ReturnType<true>;
-declare function useSpringCarousel(props: UseSpringCarouselWithNoThumbs<true>): ReturnType<true>;
-/**
- * No free scroll
- */
-declare function useSpringCarousel(props: UseSpringCarouselWithThumbs<false>): ReturnType<false>;
-declare function useSpringCarousel(props: UseSpringCarouselWithNoThumbs<false>): ReturnType<false>;
-declare function useSpringCarousel(props: UseSpringCarouselWithFixedItems<false>): ReturnType<false>;
-declare function useSpringCarousel(props: UseSpringCarouselWithNoFixedItems<false>): ReturnType<false>;
-type ContextProps<T = undefined> = Omit<ReturnType<T extends 'free-scroll' ? true : false>, 'carouselFragment' | 'thumbsFragment'>;
-declare function useSpringCarouselContext<T>(): ContextProps<T>;
-export { useSpringCarousel, useSpringCarouselContext };
+import { UseSpringCarouselWithFreeScroll, UseSpringCarouselWithThumbs, UseSpringCarouselWithNoThumbs, UseSpringCarouselWithNoFixedItems, UseSpringCarouselWithFixedItems, UseSpringFreeScrollReturnType, UseSpringReturnType } from './types';
+type ReturnType<T> = T extends true ? UseSpringFreeScrollReturnType : UseSpringReturnType;
+/**
+ * With free scroll
+ */
+declare function useSpringCarousel(props: UseSpringCarouselWithFreeScroll): ReturnType<true>;
+declare function useSpringCarousel(props: UseSpringCarouselWithThumbs<true>): ReturnType<true>;
+declare function useSpringCarousel(props: UseSpringCarouselWithNoThumbs<true>): ReturnType<true>;
+/**
+ * No free scroll
+ */
+declare function useSpringCarousel(props: UseSpringCarouselWithThumbs<false>): ReturnType<false>;
+declare function useSpringCarousel(props: UseSpringCarouselWithNoThumbs<false>): ReturnType<false>;
+declare function useSpringCarousel(props: UseSpringCarouselWithFixedItems<false>): ReturnType<false>;
+declare function useSpringCarousel(props: UseSpringCarouselWithNoFixedItems<false>): ReturnType<false>;
+type ContextProps<T = undefined> = Omit<ReturnType<T extends 'free-scroll' ? true : false>, 'carouselFragment' | 'thumbsFragment'>;
+declare function useSpringCarouselContext<T>(): ContextProps<T>;
+export { useSpringCarousel, useSpringCarouselContext };