react-responsive-3d-carousel/dist/index.cjs.min.js

React Responsive 3D Carousel

"use strict";var e=require("react/jsx-runtime"),t=require("react"),o=function(){return o=Object.assign||function(e){for(var t,o=1,n=arguments.length;o<n;o++)for(var r in t=arguments[o])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},o.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var n="--container-width",r="--container-height",i="--item-width",a={default:{translate:{x:0,y:0,z:-1},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},0:{translate:{x:0,y:0,z:0},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}}},s={default:{translate:{x:0,y:0,z:-1},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},"-1":{translate:{x:-.5,y:0,z:0},rotation:{x:0,y:40,z:0},offset:{x:.5*Math.cos(Math.PI/180*40),y:0,z:-1*Math.sin(Math.PI/180*30)}},0:{translate:{x:0,y:0,z:0},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},1:{translate:{x:.5,y:0,z:0},rotation:{x:0,y:-40,z:0},offset:{x:-.5*Math.cos(Math.PI/180*40),y:0,z:-1*Math.sin(Math.PI/180*30)}}},c={default:{translate:{x:0,y:0,z:-1},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},"-2":{translate:{x:-.5,y:0,z:0},rotation:{x:0,y:40,z:0},offset:{x:.5*Math.cos(Math.PI/180*40),y:0,z:-1*Math.sin(Math.PI/180*40)}},"-1":{translate:{x:-.25,y:0,z:0},rotation:{x:0,y:20,z:0},offset:{x:.25*Math.cos(Math.PI/180*40),y:0,z:-.5*Math.sin(Math.PI/180*40)}},0:{translate:{x:0,y:0,z:0},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},1:{translate:{x:.25,y:0,z:0},rotation:{x:0,y:-20,z:0},offset:{x:-.25*Math.cos(Math.PI/180*40),y:0,z:-.5*Math.sin(Math.PI/180*40)}},2:{translate:{x:.5,y:0,z:0},rotation:{x:0,y:-40,z:0},offset:{x:-.5*Math.cos(Math.PI/180*40),y:0,z:-1*Math.sin(Math.PI/180*40)}}},l=function(e,t){return Math.round(e*Math.pow(10,t))/Math.pow(10,t)},d=function(e,t){var o,n,r,i={},a=null!==(o=null==t?void 0:t.widthFactor)&&void 0!==o?o:1,s=null!==(n=null==t?void 0:t.depthFactor)&&void 0!==n?n:1,c=null!==(r=null==t?void 0:t.angleFactor)&&void 0!==r?r:1;return Object.entries(e).forEach((function(e){var t=e[0],o=e[1],n={x:l(o.translate.x*a,3),y:o.translate.y,z:l(o.translate.z*a,3)},r={x:l(o.rotation.x*c,3),y:l(o.rotation.y*c,3),z:l(o.rotation.z*c,3)},d={x:l(o.offset.x*a,3),y:o.offset.y,z:l(o.offset.z*s,3)};i[t]={translate:n,rotation:r,offset:d}})),i},u=function(e,t){var o,a=e.width,s=e.height,c=e.translate,l=e.rotation,d=e.offset,u="number"==typeof a?"calc(".concat(a," * var(").concat(n,"))"):null!=a?a:"auto",f="number"==typeof s?"calc(".concat(s," * var(").concat(r,"))"):null!=s?s:"auto";switch(t){case"top":o=0;break;case"bottom":o=-100;break;case"center":o=-50}var h=Math.sqrt(Math.pow(l.x,2)+Math.pow(l.y,2)+Math.pow(l.z,2)),v=h?l.x/h:0,p=h?l.y/h:0,x=h?l.z/h:0,w="number"==typeof c.x?"".concat(c.x," * var(").concat(n,")"):c.x,m="number"==typeof c.y?"".concat(c.y," * var(").concat(r,")"):c.y,y="number"==typeof c.z?"".concat(c.z," * var(").concat(n,")"):c.z,g="number"==typeof d.x?"".concat(d.x," * 100%"):d.x,b="number"==typeof d.y?"".concat(d.y," * 100%"):d.y,z="number"==typeof d.z?"".concat(d.z," * var(").concat(i,")"):d.z;return{width:u,height:f,transform:"translate(-50%, ".concat(o,"%) \n  translate3d(calc(").concat(w," + ").concat(g,"), calc(").concat(m," + ").concat(b,"), calc(").concat(y," + ").concat(z,")) \n  rotate3d(").concat(v,", ").concat(p,", ").concat(x,", calc(").concat(h,"deg)")}},f=function(e,o,n,r,i,l,f,h){var v=t.useMemo((function(){var t="default"===l?function(e,t){if(t&&"numOfSlides"in t){if(2===t.numOfSlides)return d(a,t);if(3===t.numOfSlides)return d(s,t);if(5===t.numOfSlides)return d(c,t)}return d(e<3?a:e<5?s:c,t)}(e.length,h):l;return function(e,t){var o={};for(var n in e)o[n]=u(e[n],t);return o}(t,n)}),[e,n,l,h]);t.useEffect((function(){var t=o.current,n=function(e,t){e.style.width="auto"===t.width?r:t.width,e.style.height="auto"===t.height?i:t.height,e.style.transform=t.transform,"auto"!==e.style.width?e.classList.add("fixed-width"):e.classList.remove("fixed-width"),"auto"!==e.style.height?e.classList.add("fixed-height"):e.classList.remove("fixed-height")};t.forEach((function(t,o){var r=o-f;if(v[r])n(t,v[r]);else{var i=r+(r>0?-e.length:e.length);v[i]?n(t,v[i]):n(t,v.default)}}))}),[e,r,i,v,f])};function h(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}h(".react-responsive-3d-carousel__arrows{height:100%;pointer-events:none;position:relative;width:100%}.react-responsive-3d-carousel__arrows>button{background:transparent;border:none;color:var(--arrow-color,#fff);cursor:pointer;margin:0;overflow:visible;padding:0;pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);transition:color .2s ease-in-out;width:auto}.react-responsive-3d-carousel__arrows>button:hover{color:var(--arrow-hover-color,rgba(34,34,34,.533))}.react-responsive-3d-carousel__arrows>button:first-of-type{left:0}.react-responsive-3d-carousel__arrows>button:last-of-type{right:0}.react-responsive-3d-carousel__arrows>button>*{filter:drop-shadow(var(--arrow-drop-shadow,none));height:var(--arrow-height,2rem);width:var(--arrow-width,2rem)}");var v=function(t){var o=t.width,n=void 0===o?"3rem":o,r=t.height,i=void 0===r?"5rem":r,a=t.color,s=void 0===a?"#ffffff":a,c=t.hoverColor,l=void 0===c?"#888888":c,d=t.shadow,u=void 0===d?"0 0.05rem 0.1rem rgba(0, 0, 0, 0.3)":d,f=t.nextArrowTranslate,h=void 0===f?["0px","0px"]:f,v=t.prevArrowTranslate,w=void 0===v?["0px","0px"]:v,m=t.onClickNext,y=t.onClickPrev,g=t.nextIcon,b=t.prevIcon,z={"--arrow-width":n,"--arrow-height":i,"--arrow-drop-shadow":u,"--arrow-color":s,"--arrow-hover-color":l};return e.jsxs("div",{className:"react-responsive-3d-carousel__arrows",style:z,children:[e.jsx("button",{type:"button",onClick:function(e){e.stopPropagation(),y&&y(e)},"aria-label":"previous slide",style:{transform:"translateY(-50%) translate(".concat(w[0],", ").concat(w[1],")")},children:b||e.jsx(p,{})}),e.jsx("button",{type:"button",onClick:function(e){e.stopPropagation(),m&&m(e)},"aria-label":"next slide",style:{transform:"translateY(-50%) translate(".concat(h[0],", ").concat(h[1],")")},children:g||e.jsx(x,{})})]})},p=function(){return e.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",preserveAspectRatio:"none",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"15 18 9 12 15 6"})})},x=function(){return e.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",preserveAspectRatio:"none",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"9 18 15 12 9 6"})})};v.displayName="Arrows";h(".react-responsive-3d-carousel__indicators{align-items:center;display:flex;gap:1.5rem;justify-content:center;list-style:none;margin:0;padding:0;text-indent:0}.react-responsive-3d-carousel__indicators>li{color:var(--indicator-color,#fff);cursor:pointer;display:inline-block;line-height:1;list-style:none;margin:0;padding:0;pointer-events:auto;text-indent:0;transition:color .2s ease-in-out}.react-responsive-3d-carousel__indicators>li:hover{color:var(--indicator-active-color,#222)}.react-responsive-3d-carousel__indicators>li>*{filter:drop-shadow(var(--indicator-shadow,none));height:var(--indicator-height,.5rem);width:var(--indicator-width,.5rem)}.react-responsive-3d-carousel__indicators>li.active{color:var(--indicator-active-color,#222)}");var w=function(t){var o=t.length,n=t.curIndex,r=t.color,i=void 0===r?"#ffffff":r,a=t.width,s=void 0===a?"0.6rem":a,c=t.height,l=void 0===c?"0.6rem":c,d=t.gap,u=void 0===d?"1.5rem":d,f=t.activeColor,h=void 0===f?"#888888":f,v=t.shadow,p=void 0===v?"0 0.05rem 0.1rem rgba(0, 0, 0, 0.5)":v,x=t.translate,w=void 0===x?["0px","0px"]:x,y=t.indicatorIcon,g=t.onClick,b={gap:u,transform:"translate(".concat(w[0],", ").concat(w[1],")"),"--indicator-width":s,"--indicator-height":l,"--indicator-color":i,"--indicator-active-color":h,"--indicator-shadow":p};return e.jsx("ul",{className:"react-responsive-3d-carousel__indicators",style:b,children:Array.from({length:o},(function(t,o){return e.jsx("li",{onClick:function(e){return function(e,t){e.stopPropagation(),g&&g(e,t)}(e,o)},"aria-label":"slide item ".concat(o+1),className:o===n?"active":"",children:y||e.jsx(m,{})},o)}))})},m=function(){return e.jsx("svg",{preserveAspectRatio:"none",width:"24",height:"24",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("circle",{cx:"12",cy:"12",r:"10"})})};w.displayName="Indicators";h(".react-responsive-3d-carousel__status{color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:inherit}");var y=function(t){var o=t.length,n=t.curIndex,r=t.color,i=void 0===r?"#ffffff":r,a=t.fontSize,s=void 0===a?"1rem":a,c=t.fontWeight,l=void 0===c?"600":c,d=t.shadow,u=void 0===d?"0 0.05rem 0.1rem rgba(0, 0, 0, 0.5)":d,f=t.translate,h=void 0===f?["0px","0px"]:f,v={color:i,fontSize:s,fontWeight:l,textShadow:u,transform:"translate(".concat(h[0],", ").concat(h[1],")")};return e.jsx("p",{className:"react-responsive-3d-carousel__status","aria-label":"".concat(n+1," of ").concat(o),style:v,children:"".concat(n+1," / ").concat(o)})};y.displayName="Status";h(".react-responsive-3d-carousel{box-sizing:border-box;overflow:hidden;padding:1rem;position:relative;width:100%}.react-responsive-3d-carousel__list{list-style:none;margin:0;padding:0;perspective:var(--container-width,1500px);position:relative;text-indent:0;transform-style:preserve-3d;width:100%}.react-responsive-3d-carousel__item{border:0;left:50%;line-height:0;list-style:none;margin:0;overflow:hidden;padding:0;position:absolute;text-indent:0;top:50%;transform:translate(-50%,-50%);will-change:transform}.react-responsive-3d-carousel__item.fixed-width.fixed-height>*{left:0;position:absolute;top:0}.react-responsive-3d-carousel__item.fixed-width>*{-o-object-fit:cover;object-fit:cover;width:100%}.react-responsive-3d-carousel__item.fixed-height>*{height:100%;-o-object-fit:cover;object-fit:cover}.react-responsive-3d-carousel__arrows-container{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.react-responsive-3d-carousel__status-container{pointer-events:none;position:absolute;right:1rem;top:0}.react-responsive-3d-carousel__indicators-container{bottom:1rem;left:0;pointer-events:none;position:absolute;width:100%}");var g=t.createContext({curIndex:0,setCurIndex:function(e){},slideNext:function(){},slidePrev:function(){}});exports.Arrows=v,exports.Carousel=function(a){var s=a.children,c=a.ariaLabel,l=void 0===c?"3d carousel":c,d=a.items,u=a.startIndex,h=void 0===u?0:u,p=a.containerHeight,x=void 0===p?"auto":p,m=a.containerWidth,b=void 0===m?"100%":m,z=a.containerPadding,_=void 0===z?"1rem":z,M=a.width,k=void 0===M?"400px":M,j=a.height,C=void 0===j?"300px":j,E=a.align,I=void 0===E?"center":E,P=a.boxShadow,S=void 0===P?"0 0.1rem 0.5rem rgba(0, 0, 0, 0.5)":P,N=a.perspective,L=void 0===N?"auto":N,A=a.perspectiveOrigin,O=void 0===A?"center":A,R=a.layout,T=void 0===R?"default":R,D=a.defaultOption,W=a.sizeDuration,B=void 0===W?1e3:W,F=a.sizeTimingFn,Y=void 0===F?"ease-in-out":F,q=a.transformDuration,H=void 0===q?1e3:q,X=a.transformTimingFn,K=void 0===X?"ease-in-out":X,U=a.focusOnSelect,G=void 0===U||U,J=a.pauseOnHover,Q=void 0===J||J,V=a.onClickItem,Z=a.onChange,$=a.autoPlay,ee=void 0===$||$,te=a.interval,oe=void 0===te?3e3:te,ne=a.infiniteLoop,re=void 0===ne||ne,ie=a.autoFocus,ae=void 0!==ie&&ie,se=a.slideWithKeyboard,ce=void 0===se?"both":se,le=a.swipeable,de=void 0===le||le,ue=a.swipeDirection,fe=void 0===ue?"horizontal":ue,he=a.onSwipeStart,ve=a.onSwipeEnd,pe=a.onSwipeMove,xe=a.showStatus,we=void 0===xe||xe,me=a.status,ye=a.showArrows,ge=void 0===ye||ye,be=a.arrows,ze=a.showIndicators,_e=void 0===ze||ze,Me=a.indicators,ke=t.useRef(null),je=t.useRef(null),Ce=t.useRef(!1),Ee=t.useState(h),Ie=Ee[0],Pe=Ee[1],Se=t.useMemo((function(){return"number"==typeof k?"calc(".concat(k," * var(").concat(n,"))"):k}),[k]),Ne=t.useMemo((function(){return"number"==typeof C?"calc(".concat(C," * var(").concat(r,"))"):C}),[C]),Le=t.useRef([]);t.useEffect((function(){var e=ke.current;e&&(Le.current=Array.from(e.getElementsByClassName("react-responsive-3d-carousel__item")))}),[d]);var Ae=t.useCallback((function(){Ce.current||Pe((function(e){return re||0!==e?(e-1+d.length)%d.length:e}))}),[d,re,Pe]),Oe=t.useCallback((function(){Ce.current||Pe((function(e){return re||e!==d.length-1?(e+1)%d.length:e}))}),[d,re,Pe]);t.useEffect((function(){Pe(h)}),[h]),t.useEffect((function(){Ie<0?Pe(0):d.length-1<Ie&&Pe(d.length-1)}),[d,Ie]);var Re=t.useRef(!1);t.useEffect((function(){Re.current?Z&&Z(Ie,d[Ie]):Re.current=!0}),[Ie,Z]),function(e,o,n,r){t.useEffect((function(){if(e){var t=window.setInterval((function(){r()}),o);return function(){clearInterval(t)}}}),[e,o,n,r])}(ee,oe,Ie,Oe),function(e,o,a,s,c){t.useEffect((function(){o.current.forEach((function(e){e.style.setProperty(i,"".concat(e.offsetWidth,"px"))}))}),[e,s,c]),t.useEffect((function(){var e=a.current;if(e){var t=function(){e.style.setProperty(n,"".concat(e.offsetWidth,"px")),e.style.setProperty(r,"".concat(e.offsetHeight,"px"))};t();var o="ResizeObserver"in window?new ResizeObserver(t):null;return o?o.observe(e):window.addEventListener("resize",t),function(){o?o.disconnect():window.removeEventListener("resize",t)}}}),[])}(d,Le,je,Se,Ie),f(d,Le,I,Se,Ne,T,Ie,D),function(e){var o=e.containerRef,n=e.swipeable,r=e.swipeDirection,i=e.slideNext,a=e.slidePrev,s=e.onSwipeStart,c=e.onSwipeEnd,l=e.onSwipeMove,d=t.useRef(!1);t.useEffect((function(){if(n){var e=o.current;if(e){var t=0,u=0,f=function(e){d.current=!0,t=e.touches[0].clientX,u=e.touches[0].clientY,s&&s(e)},h=function(e){d.current&&l&&l(e)},v=function(e){if(d.current){d.current=!1,c&&c(e);var o=e.changedTouches[0].clientX,n=e.changedTouches[0].clientY,s=o-t,l=n-u,f=Math.abs(s),h=Math.abs(l);Math.sqrt(Math.pow(f,2)+Math.pow(h,2))<30||("horizontal"===r&&f>h?(e.preventDefault(),s>0?a():i()):"vertical"===r&&h>f&&(e.preventDefault(),l>0?a():i()))}};return e.addEventListener("touchstart",f,{passive:!0}),e.addEventListener("touchmove",h,{passive:!0}),e.addEventListener("touchend",v),function(){e.removeEventListener("touchstart",f),e.removeEventListener("touchmove",h),e.removeEventListener("touchend",v)}}}}),[n,r,i,a,s,c,l])}({containerRef:ke,swipeable:de,swipeDirection:fe,slideNext:Oe,slidePrev:Ae,onSwipeStart:he,onSwipeEnd:ve,onSwipeMove:pe}),function(e,o,n,r,i){t.useEffect((function(){var t=e.current;t&&o&&t.focus()}),[o]),t.useEffect((function(){if("none"!==n){var t=e.current;if(t){var o=function(e){if(t===document.activeElement)switch(e.key){case"ArrowLeft":"horizontal"!==n&&"both"!==n||i();break;case"ArrowRight":"horizontal"!==n&&"both"!==n||r();break;case"ArrowUp":"vertical"!==n&&"both"!==n||i();break;case"ArrowDown":"vertical"!==n&&"both"!==n||r()}};return window.addEventListener("keydown",o),function(){window.removeEventListener("keydown",o)}}}}),[n,r,i])}(ke,ae,ce,Oe,Ae);var Te=function(){Q&&(Ce.current=!0)},De=function(){Q&&(Ce.current=!1)},We={width:b,height:x,padding:_},Be={perspective:"auto"===L?"var(".concat(n,")"):L,perspectiveOrigin:O,height:"auto"===x?Ne:"100%"},Fe={width:Se,height:Ne,transition:"transform ".concat(H,"ms ").concat(K,", width ").concat(B,"ms ").concat(Y,", height ").concat(B,"ms ").concat(Y),cursor:G?"pointer":"initial",top:"top"===I?"0%":"bottom"===I?"100%":"50%",boxShadow:S};return e.jsx(g.Provider,{value:{curIndex:Ie,setCurIndex:Pe,slideNext:Oe,slidePrev:Ae},children:e.jsxs("div",{className:"react-responsive-3d-carousel","aria-label":l,tabIndex:"none"!==ce?0:void 0,style:We,ref:ke,children:[e.jsxs("ul",{className:"react-responsive-3d-carousel__list",style:Be,ref:je,children:[d.map((function(t,o){return e.jsx("li",{className:"react-responsive-3d-carousel__item \n                ".concat("auto"!==Se?"fixed-width":""," \n                ").concat("auto"!==Ne?"fixed-height":""),onClick:function(e){return function(e,t){G&&Pe(t),V&&V(e,t,d[Ie],Ie===t)}(e,o)},style:Fe,onMouseEnter:Te,onMouseLeave:De,children:t},o)})),s]}),we&&e.jsx("div",{className:"react-responsive-3d-carousel__status-container",children:e.jsx(y,o({length:d.length,curIndex:Ie},me))}),ge&&e.jsx("div",{className:"react-responsive-3d-carousel__arrows-container",children:e.jsx(v,o({onClickNext:function(e){Oe(),(null==be?void 0:be.onClickNext)&&be.onClickNext(e)},onClickPrev:function(e){Ae(),(null==be?void 0:be.onClickPrev)&&be.onClickPrev(e)}},be))}),_e&&e.jsx("div",{className:"react-responsive-3d-carousel__indicators-container",children:e.jsx(w,o({length:d.length,curIndex:Ie,onClick:function(e,t){Pe(t),(null==Me?void 0:Me.onClick)&&Me.onClick(e,t)}},Me))})]})})},exports.CarouselContext=g,exports.Indicators=w,exports.Status=y;
//# sourceMappingURL=index.cjs.min.js.map