@rybr/react-swipeable-infinite-carousel/dist/index.js

swipeable infinite responsive React carousel

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);function n(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var o="Carousel-module_container__j52CF",l="Carousel-module_slidesAndArrowsContainer__MvSNQ",s="Carousel-module_slidesOuterContainer__fw4D8",a="Carousel-module_slidesContainer__huY0t";n(".Carousel-module_container__j52CF{align-items:center;display:flex;flex-direction:column;justify-content:center;max-width:100%;position:relative}.Carousel-module_slidesAndArrowsContainer__MvSNQ{display:flex;flex-direction:column;height:100%;justify-content:center;position:relative;width:100%}.Carousel-module_slidesOuterContainer__fw4D8{max-width:100%;overflow:hidden;width:100%}.Carousel-module_slidesContainer__huY0t{display:flex;flex-direction:row;transition:transform .5s;z-index:1}");const i=e=>e?.touches?.[0]?.clientX||e?.clientX||0,u=(e,t)=>e?.length&&t&&t>0?e.reduce(((r,{start:n},o)=>{const l=e[Math.min(o+t-1,e.length-1)].end-n;return l>r?l:r}),0):0;function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(this,arguments)}var d="Arrows-module_arrowIcon__kCgUr",f="Arrows-module_leftArrowIcon__G6aeu",h="Arrows-module_rightArrowIcon__Tkyu9",m="Arrows-module_arrow__AxDhI",p="Arrows-module_isArrowHidden__ulHQN",g="Arrows-module_rightArrow__995WH",x="Arrows-module_leftArrow__xHZIo";n(".Arrows-module_arrowIcon__kCgUr{background-color:transparent;border:6px solid #1b1b1b;height:24px;opacity:.5;transition:border-color .5s;width:24px}.Arrows-module_leftArrowIcon__G6aeu{border-right:none;border-top:none;transform:translateX(2.5px) rotate(45deg)}.Arrows-module_rightArrowIcon__Tkyu9{border-bottom:none;border-left:none;transform:translateX(-2.5px) rotate(45deg)}.Arrows-module_arrow__AxDhI{align-items:center;background-color:#929292a9;border:none;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;margin:0;mix-blend-mode:luminosity;opacity:.7;padding:0;position:absolute;transition:opacity .5s,background-color .5s;width:48px;z-index:2}.Arrows-module_isArrowHidden__ulHQN{opacity:0;pointer-events:none}.Arrows-module_arrow__AxDhI:hover{opacity:1}.Arrows-module_arrow__AxDhI:focus-visible{opacity:1}.Arrows-module_arrow__AxDhI:active{background-color:#6b6b6ba9}.Arrows-module_rightArrow__995WH{right:0}.Arrows-module_leftArrow__xHZIo{left:0}");var _="Indexes-module_indexContainer__vSTKG",w="Indexes-module_index__lF1Yb";n(".Indexes-module_indexContainer__vSTKG{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;margin:10px;width:100%}.Indexes-module_index__lF1Yb{background-color:transparent;border:solid rgba(50,50,50,.5);border-radius:2px;cursor:pointer;height:8px;margin:0;padding:0;transition:background-color .5s}");exports.Arrows=({isLeft:t,isHidden:n,scrollBy:o,scrollCount:l,arrowProps:s,arrowIconProps:a})=>{const i=e.useMemo((()=>`${m} ${t?x:g} ${n?p:""} ${s?.className||""}`),[s?.className,t,n]),u=e.useCallback(((e,t)=>r=>{r.preventDefault(),r.stopPropagation(),"function"==typeof e&&e(r),o(t)}),[s?.onClick,o,t]),_=e.useMemo((()=>`${d} ${t?f:h} ${a?.className||""}`),[a?.className,t]);return r.default.createElement("button",c({},s,{tabIndex:-1,className:i,onClick:u(s?.onClick,t?-l:l)}),r.default.createElement("span",c({},a,{className:_})))},exports.Carousel=({isInfinite:t=!1,startIndex:n=0,isScrollable:c=!0,isDraggable:d=!0,hasDragMomentum:f=!0,dragMomentumSpeed:h=25,dragMomentumDecay:m=.98,minDisplayCount:p=0,displayCount:g=0,gridGap:x=10,arrows:_,arrowLeftProps:w={},arrowRightProps:y={},scrollSpeed:C=75,scrollCount:b=1,shouldScrollByDisplayCount:A=!0,indexesPerRow:v=0,indexes:M,indexContainerProps:I={},indexProps:k={},style:E={},slideContainerStyle:R={},slideStyle:D={},children:S})=>{const[N,P]=e.useState(!1),$=e.useRef(),T=e.useRef(),F=e.useRef(!1),L=e.useRef(0),H=e.useRef(),j=r.default.Children.toArray(S)||[],[W,B]=e.useState(t?j.length:0),O=e.useMemo((()=>t&&W?[...j.slice(j.length-W,j.length),...j,...j.slice(0,W)]:j),[S,j.length,t,W]),q=O.length,G=e.useMemo((()=>Array(q).fill(null).map(((e,t)=>(void 0!==G?G[t]:null)||r.default.createRef()))),[q]),[X,Q]=e.useState([]),Y=e.useMemo((()=>t?X.slice(W,X.length-W):X),[X,X.length,t]),z=e.useMemo((()=>Y[0]?.index||W),[Y,Y.length]),K=e.useMemo((()=>Y[Y.length-1]?.index||W+j.length-1),[Y,Y.length]),U=e.useRef(null),Z=e.useRef(null),J=e.useRef(null),V=e.useCallback(((e,t=X)=>{const r=t?.[e]?.start;return null!=r?-1*r:0}),[X]),[ee,te]=e.useState({left:n+W,right:n+W}),re=e.useMemo((()=>null!=ee?.left&&null!=ee?.right?Array(ee.right-ee.left+1).fill(ee.left).map(((e,t)=>(ee.left+t-W)%j.length)):[]),[ee?.left,ee?.right,W]),ne=e.useMemo((()=>t?1:A?re.length:Math.min(re.length,b)),[t,A,re,re.length,b]),[oe,le]=e.useState(q-1),[se,ae]=e.useState(!1),[ie,ue]=e.useState(!0),ce=e.useRef(!1),de=e.useRef((()=>V(ee.left))),fe=e.useRef(0),he=e.useRef(0),me=e.useRef(),pe=e.useMemo((()=>{const e=X?.[oe]?.start;return null!=e?-1*e:0}),[X,q,oe]),ge=t||0!==ee.left,xe=t||ee.left<oe,_e=e.useCallback(((e,t=oe)=>Math.max(0,Math.min(t,e))),[oe]),we=e.useCallback(((e,t=X)=>{const r=-1*e,n=t.reduce(((e,{start:t,end:n,width:o},l)=>(e.left=r>=t?r>=t+o/2?l+1:l:e.left,e.right=null!=U.current?r+U.current.clientWidth>=n?l:e.right:q-1,e)),{left:0,right:0});return{left:_e(n.left),right:Math.max(Math.min(q-1,n.right),n.left)}}),[q,X,_e]),ye=e.useCallback((({offset:e,index:r,newSlideAnchors:n=X,newClonesLength:o=W})=>{requestAnimationFrame((()=>{if(!Z.current)return;let l=e;if(t&&o&&n.length){const t=n[n.length-o-1].end+x,r=n[o].start;e+t<0?l=e+t-r:e+r>0&&(l=e+r-t)}const s=null==r?we(l):r;T.current&&cancelAnimationFrame(T.current),(ie||se)&&(Z.current.style.transitionDuration="0ms"),Z.current.style.transform=`translate(${l}px)`,T.current=requestAnimationFrame((()=>{Z.current.style.transitionDuration="500ms"})),de.current=l,te(s)}))}),[x,ie,se,X,X?.length,W,we,te,we]),Ce=()=>{const e=((e=[],t,r)=>e.reduce(((n,o,l)=>{if(o?.current){const s=o.current.clientWidth-(r||l!==e.length-1?t:0),a=0===l?0:n[l-1].end+t,i=a+s;n.push({start:a,end:i,width:s,index:l})}return n}),[]))(G,x,t);if(e?.length){const r=Z.current.clientWidth,n=(e=>{if(!t)return 0;const r=Z.current.clientWidth,n=t?e.slice(W,e.length-W):e,o=n.reduce(((e,{width:t},n)=>(e.width=e.width+t,null==e.index&&e.width>r&&(e.index=n+1),e)),{width:0,index:null}).index,l=n.reduceRight(((e,{width:t},o)=>(e.width=e.width+t,null==e.index&&e.width>r&&(e.index=n.length-o),e)),{width:0,index:null}).index;return Math.max(o,l,1)})(e),o=e[e.length-1].end,l=_e(e.findIndex((({start:e})=>e+r>=o)),e.length-1),s=_e(ee.left-W+n,l),a=V(s,e),i=we(a,e);B(n),te(i),Q(e),le(l),ye({offset:a,index:i})}};e.useLayoutEffect((()=>{H.current&&H.current.disconnect(),H.current=new ResizeObserver((()=>Ce())),H.current.observe(U.current),G.forEach((({current:e})=>H.current.observe(e))),Ce()}),[q,W,p,g,x,t]),e.useEffect((()=>{ue(!1),t&&Ce()}),[]);const be=e.useCallback(((e,r,n="500ms")=>{if(!F.current){F.current=!0;const o=Math.min(ne,e);let l=t?ee.left+o:_e(ee.left+o);if(t){const t=l>X.length-W-1?l-j.length-ne:l<W-1?j.length+ne+l:null;if(null!=t){Z.current.style.transitionDuration="0ms";const r=-X[t].start;Z.current.style.transform=`translate(${r}px)`,de.current=r,l=_e(t+e)}}requestAnimationFrame((()=>{if(Z.current.style.transitionDuration=n,l!==ee.left){const e=V(l),t=we(e);Z.current.addEventListener("transitionend",(()=>{G[t.left]?.current?.firstChild?.focus(),F.current=!1}),{once:!0}),requestAnimationFrame((()=>{Z.current.style.transform=`translate(${e}px)`})),de.current=e,te(t),r?.(t)}else F.current=!1}))}}),[X,t,ee,q,W,we,V,ye,_e,te]),Ae=e.useCallback((e=>{if($.current&&cancelAnimationFrame($.current),F.current||!d||ie||e.touches?.length>1)return;ce.current=!1,ae(!0);const t=i(e);fe.current=t,he.current=t}),[d,ie,ae]),ve=e.useCallback((e=>{if(e.stopPropagation(),F.current||ce.current||!d||!se||ie)return;he.current=i(e);const t=fe.current-he.current;fe.current=he.current,L.current=t,0!==t&&ye({offset:de.current-t})}),[d,ie,se,ye]),Me=e.useCallback((e=>{if($.current&&cancelAnimationFrame($.current),!(F.current||!d||ie||e.touches?.length>0))if(f){ce.current=!0;const e=t=>{L.current=t,$.current=requestAnimationFrame((()=>{const r=de.current-t;Math.abs(t)<=1||r>=0||r<=pe?(ce.current=!1,ae(!1),L.current=0):(ye({offset:r}),e(t*m))}))};e(L.current<0?Math.max(L.current,-h):Math.min(L.current,h))}else ae(!1)}),[f,h,m,pe,0,d,ie,ae,ye]),Ie=e.useCallback((e=>{if(F.current||!c||se)return;const r=e.deltaX,n=Math.sign(r);if(de.current>=0&&-1===n||de.current<=pe&&1===n)return void ue(!1);ie||ue(!0);const o=de.current-n*Math.min(C,Math.abs(r)),l=()=>{ue(!1)};me.current&&clearTimeout(me.current),!t&&o>=0?ye({offset:0}):!t&&o<=pe?ye({offset:pe}):(ye({offset:o}),me.current=setTimeout(l,100))}),[t,c,C,ie,pe,de,se,ue,ye]);e.useEffect((()=>{Array.from(Z.current.children).forEach(((e,t)=>{(t<z||t>K)&&e.querySelectorAll("*").forEach((e=>{e.tabIndex=-1}))}))}),[z,K,Z.current]);const ke=e.useCallback((e=>r=>{if(!r.currentTarget.contains(r.relatedTarget)&&e>=z&&e<=K){J.current.scrollLeft=0;!(F.current||d&&se||c&&ie)&&(e<ee.left||e>ee.right)&&be((e<ee.left?-1:1)*(t?1:re.length),(()=>{J.current.scrollLeft=0,Z.current.addEventListener("transitionend",(()=>{G[e]?.current?.firstChild?.focus()}),{once:!0})}))}}),[ee,ee.left,ee.right,t,se,d,c,ie,be]),Ee=e.useCallback((e=>{(F.current||d&&se||c&&ie)&&(e.preventDefault(),e.stopPropagation())}),[d,se,c,ie]),Re=e.useCallback((()=>{P(!0)}),[P]),De=e.useCallback((()=>{P(!1)}),[P]);e.useEffect((()=>{if(!(F.current||d&&se||c&&ie)){$.current&&cancelAnimationFrame($.current),me.current&&clearTimeout(me.current);const e=V(ee.left);ye({offset:e}),de.current!==e&&G[ee.left]?.current?.firstChild?.focus(),fe.current=0,he.current=0}}),[se,d,ie,c]);const Se=e.useMemo((()=>(({displayCount:e,minDisplayCount:t,slideAnchors:r})=>{const n=u(r,t),o=u(r,e);return{minWidth:n>0?`${n}px`:"auto",width:o>0?`${o}px`:"100%"}})({minDisplayCount:p,displayCount:g,slideAnchors:X})),[X,X?.length,p,g]);return r.default.createElement("div",{className:o,style:{...Se,...E},ref:U,onMouseEnter:Re,onMouseLeave:De},r.default.createElement("div",{className:l,onMouseLeave:Me},_?r.default.createElement(_,{startIndex:ee.left-W,endIndex:ee.right-W,activeIndexes:re,isLeft:!0,isRight:!1,isHidden:!N||ie||se||!ge,scrollBy:be,arrowProps:w,scrollCount:ne}):null,r.default.createElement("div",{ref:J,className:s},r.default.createElement("ul",{ref:Z,className:a,style:{display:"flex",flexDirection:"row",listStyleType:"none",margin:"0px",padding:"0px",...R},onTouchStart:Ae,onTouchMove:ve,onTouchEnd:Me,onTouchCancel:Me,onMouseDown:Ae,onMouseMove:ve,onMouseUp:Me,onWheel:Ie},O.map(((e,n)=>r.default.createElement("li",{style:{paddingRight:`${t||n!==O.length-1?x:0}px`,...D},ref:G[n],key:n,onFocus:ke(n),onKeyDown:Ee},e))))),_?r.default.createElement(_,{startIndex:ee.left-W,endIndex:ee.right-W,activeIndexes:re,isLeft:!1,isRight:!0,isHidden:!N||ie||se||!xe,scrollBy:be,arrowProps:y,scrollCount:ne}):null),M?r.default.createElement(M,{startIndex:ee.left-W,endIndex:ee.right-W,activeIndexes:re,indexesPerRow:v||j.length,slideAnchors:Y,scrollBy:be,indexContainerProps:I,indexProps:k}):null)},exports.Indexes=({activeIndexes:t,startIndex:n,indexesPerRow:o,slideAnchors:l,scrollBy:s,indexContainerProps:a,indexProps:i})=>{const u=e.useRef(),d=e.useMemo((()=>`calc((100% - ${5*(o-1)}px) / ${o})`),[o]),f=e.useMemo((()=>`${_} ${a?.className||""}`),[a?.className]),h=e.useMemo((()=>`${w} ${i?.className||""}`),[i?.className]),m=e.useCallback(((e,t)=>r=>{"function"==typeof e&&e(r),s(t)}),[s]);return r.default.createElement("div",c({},a,{ref:u,className:f,style:{gap:"5px",...a?.style}}),l?.map(((e,o)=>r.default.createElement("button",c({tabIndex:-1,key:o},i,{className:h,style:{backgroundColor:t.includes(o)?"black":"transparent",width:d,borderWidth:"2px",...i?.style},onClick:m(i?.onClick,o-n)})))))};
//# sourceMappingURL=index.js.map