react-responsive-3d-carousel
Version:
React Responsive 3D Carousel
2 lines (1 loc) • 17.7 kB
JavaScript
;var e=require("react/jsx-runtime"),t=require("react"),o=function(){return o=Object.assign||function(e){for(var t,o=1,r=arguments.length;o<r;o++)for(var n in t=arguments[o])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},o.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var r="--container-width",n="--container-height",i="--item-width",a={default:{translate:{x:0,y:0,z:-1},rotate:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},0:{translate:{x:0,y:0,z:0},rotate:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}}},s={default:{translate:{x:0,y:0,z:-1},rotate:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},"-1":{translate:{x:-.5,y:0,z:0},rotate:{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},rotate:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},1:{translate:{x:.5,y:0,z:0},rotate:{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},rotate:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},"-2":{translate:{x:-.5,y:0,z:0},rotate:{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},rotate:{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},rotate:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},1:{translate:{x:.25,y:0,z:0},rotate:{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},rotate:{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)},u=function(e,t){var o,r,n,i={},a=null!==(o=null==t?void 0:t.widthFactor)&&void 0!==o?o:1,s=null!==(r=null==t?void 0:t.depthFactor)&&void 0!==r?r:1,c=null!==(n=null==t?void 0:t.angleFactor)&&void 0!==n?n:1;return Object.entries(e).forEach((function(e){var t=e[0],o=e[1],r={x:l(o.translate.x*a,3),y:o.translate.y,z:l(o.translate.z*a,3)},n={x:l(o.rotate.x*c,3),y:l(o.rotate.y*c,3),z:l(o.rotate.z*c,3)},u={x:l(o.offset.x*a,3),y:o.offset.y,z:l(o.offset.z*s,3)};i[t]={translate:r,rotate:n,offset:u}})),i},d=function(e,t){var o,a=e.width,s=e.height,c=e.translate,l=e.rotate,u=e.offset,d="number"==typeof a?"calc(".concat(a," * var(").concat(r,"))"):null!=a?a:"auto",f="number"==typeof s?"calc(".concat(s," * var(").concat(n,"))"):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,m="number"==typeof c.x?"".concat(c.x," * var(").concat(r,")"):c.x,w="number"==typeof c.y?"".concat(c.y," * var(").concat(n,")"):c.y,y="number"==typeof c.z?"".concat(c.z," * var(").concat(r,")"):c.z,g="number"==typeof u.x?"".concat(u.x," * 100%"):u.x,b="number"==typeof u.y?"".concat(u.y," * 100%"):u.y,z="number"==typeof u.z?"".concat(u.z," * var(").concat(i,")"):u.z;return{width:d,height:f,transform:"translate(-50%, ".concat(o,"%) \n translate3d(calc(").concat(m," + ").concat(g,"), calc(").concat(w," + ").concat(b,"), calc(").concat(y," + ").concat(z,")) \n rotate3d(").concat(v,", ").concat(p,", ").concat(x,", calc(").concat(h,"deg)")}},f=function(e,o,r,n,i,l,f,h,v){var p=t.useMemo((function(){var t="default"===f?function(e,t){if(t&&"numOfSlides"in t){if(2===t.numOfSlides)return u(a,t);if(3===t.numOfSlides)return u(s,t);if(5===t.numOfSlides)return u(c,t)}return u(e<3?a:e<5?s:c,t)}(e.length,v):f;return function(e,t){var o={};for(var r in e)o[r]=d(e[r],t);return o}(t,r)}),[e,r,f,v]);t.useEffect((function(){var t=o.current,r=function(e,t){e.style.width="auto"===t.width?n:t.width,e.style.height="auto"===t.height?i:t.height,e.style.transform=t.transform,"auto"!==e.style.width||"auto"!==e.style.height&&"auto"!==l?e.classList.add("fixed-width"):e.classList.remove("fixed-width"),"auto"!==e.style.height||"auto"!==e.style.width&&"auto"!==l?e.classList.add("fixed-height"):e.classList.remove("fixed-height")};t.forEach((function(t,o){var n=o-h;if(p[n])r(t,p[n]);else{var i=n+(n>0?-e.length:e.length);p[i]?r(t,p[i]):r(t,p.default)}}))}),[e,n,i,l,p,h])};function h(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.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,r=void 0===o?"3rem":o,n=t.height,i=void 0===n?"5rem":n,a=t.color,s=void 0===a?"#ffffff":a,c=t.hoverColor,l=void 0===c?"#888888":c,u=t.shadow,d=void 0===u?"0 0.05rem 0.1rem rgba(0, 0, 0, 0.3)":u,f=t.nextArrowTranslate,h=void 0===f?["0px","0px"]:f,v=t.prevArrowTranslate,m=void 0===v?["0px","0px"]:v,w=t.onClickNext,y=t.onClickPrev,g=t.nextIcon,b=t.prevIcon,z={"--arrow-width":r,"--arrow-height":i,"--arrow-drop-shadow":d,"--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(m[0],", ").concat(m[1],")")},children:b||e.jsx(p,{})}),e.jsx("button",{type:"button",onClick:function(e){e.stopPropagation(),w&&w(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 m=function(t){var o=t.length,r=t.curIndex,n=t.color,i=void 0===n?"#ffffff":n,a=t.width,s=void 0===a?"0.7rem":a,c=t.height,l=void 0===c?"0.7rem":c,u=t.gap,d=void 0===u?"1.5rem":u,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,m=void 0===x?["0px","0px"]:x,y=t.indicatorIcon,g=t.onClick,b={gap:d,transform:"translate(".concat(m[0],", ").concat(m[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===r?"active":"",children:y||e.jsx(w,{})},o)}))})},w=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"})})};m.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,r=t.curIndex,n=t.color,i=void 0===n?"#ffffff":n,a=t.fontSize,s=void 0===a?"1rem":a,c=t.fontWeight,l=void 0===c?"600":c,u=t.shadow,d=void 0===u?"0 0.05rem 0.1rem rgba(0, 0, 0, 0.5)":u,f=t.translate,h=void 0===f?["0px","0px"]:f,v={color:i,fontSize:s,fontWeight:l,textShadow:d,transform:"translate(".concat(h[0],", ").concat(h[1],")")};return e.jsx("p",{className:"react-responsive-3d-carousel__status","aria-label":"".concat(r+1," of ").concat(o),style:v,children:"".concat(r+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,u=a.items,d=a.startIndex,h=void 0===d?0:d,p=a.containerHeight,x=void 0===p?"auto":p,w=a.containerWidth,b=void 0===w?"100%":w,z=a.containerPadding,_=void 0===z?"1rem":z,M=a.width,j=void 0===M?"400px":M,k=a.height,C=void 0===k?"300px":k,E=a.aspectRatio,I=void 0===E?"auto":E,P=a.align,S=void 0===P?"center":P,N=a.boxShadow,L=void 0===N?"0 0.1rem 0.5rem rgba(0, 0, 0, 0.5)":N,R=a.perspective,O=void 0===R?1:R,A=a.perspectiveOrigin,T=void 0===A?"center":A,D=a.layout,W=void 0===D?"default":D,B=a.defaultOption,F=a.sizeDuration,Y=void 0===F?1e3:F,q=a.sizeTimingFn,H=void 0===q?"ease-in-out":q,X=a.transformDuration,K=void 0===X?1e3:X,U=a.transformTimingFn,G=void 0===U?"ease-in-out":U,J=a.focusOnSelect,Q=void 0===J||J,V=a.pauseOnHover,Z=void 0===V||V,$=a.pauseOnTransition,ee=void 0===$?"both":$,te=a.onClickItem,oe=a.onChange,re=a.autoPlay,ne=void 0===re||re,ie=a.interval,ae=void 0===ie?3e3:ie,se=a.infiniteLoop,ce=void 0===se||se,le=a.autoFocus,ue=void 0!==le&&le,de=a.slideWithKeyboard,fe=void 0===de?"both":de,he=a.swipeable,ve=void 0===he||he,pe=a.swipeDirection,xe=void 0===pe?"horizontal":pe,me=a.onSwipeStart,we=a.onSwipeEnd,ye=a.onSwipeMove,ge=a.showStatus,be=void 0===ge||ge,ze=a.status,_e=a.showArrows,Me=void 0===_e||_e,je=a.arrows,ke=a.showIndicators,Ce=void 0===ke||ke,Ee=a.indicators,Ie=t.useRef(null),Pe=t.useRef(null),Se=t.useRef(!1),Ne=t.useRef({size:!1,transform:!1}),Le=t.useState(h),Re=Le[0],Oe=Le[1],Ae=t.useMemo((function(){return"number"==typeof j?"calc(".concat(j," * var(").concat(r,"))"):j}),[j]),Te=t.useMemo((function(){return"number"==typeof C?"calc(".concat(C," * var(").concat(n,"))"):C}),[C]),De=t.useRef([]);t.useEffect((function(){var e=Ie.current;e&&(De.current=Array.from(e.getElementsByClassName("react-responsive-3d-carousel__item")))}),[u]),t.useEffect((function(){var e=Y-100,t=K-100;e>0&&(Ne.current.size=!0),t>0&&(Ne.current.transform=!0);var o=setTimeout((function(){Ne.current.size=!1}),e),r=setTimeout((function(){Ne.current.transform=!1}),t);return function(){clearTimeout(o),clearTimeout(r)}}),[Re,Y,K]);var We=t.useCallback((function(){("size"!==ee&&"both"!==ee||!Ne.current.size)&&("transform"!==ee&&"both"!==ee||!Ne.current.transform)&&Oe((function(e){return ce||0!==e?(e-1+u.length)%u.length:e}))}),[u,ce,Oe,ee]),Be=t.useCallback((function(){("size"!==ee&&"both"!==ee||!Ne.current.size)&&("transform"!==ee&&"both"!==ee||!Ne.current.transform)&&Oe((function(e){return ce||e!==u.length-1?(e+1)%u.length:e}))}),[u,ce,Oe,ee]);t.useEffect((function(){Oe(h)}),[h]),t.useEffect((function(){Re<0?Oe(0):u.length-1<Re&&Oe(u.length-1)}),[u,Re]);var Fe=t.useRef(!1);t.useEffect((function(){Fe.current?oe&&oe(Re,u[Re]):Fe.current=!0}),[Re,oe]),function(e,o,r,n){t.useEffect((function(){if(e){var t=window.setInterval((function(){n.current||r()}),o);return function(){clearInterval(t)}}}),[e,o,r])}(ne,ae,Be,Se),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(r,"".concat(e.offsetWidth,"px")),e.style.setProperty(n,"".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)}}}),[])}(u,De,Pe,Ae,Re),f(u,De,S,Ae,Te,I,W,Re,B),function(e){var o=e.containerRef,r=e.swipeable,n=e.swipeDirection,i=e.slideNext,a=e.slidePrev,s=e.onSwipeStart,c=e.onSwipeEnd,l=e.onSwipeMove,u=t.useRef(!1);t.useEffect((function(){if(r){var e=o.current;if(e){var t=0,d=0,f=function(e){u.current=!0,t=e.touches[0].clientX,d=e.touches[0].clientY,s&&s(e)},h=function(e){u.current&&l&&l(e)},v=function(e){if(u.current){u.current=!1,c&&c(e);var o=e.changedTouches[0].clientX,r=e.changedTouches[0].clientY,s=o-t,l=r-d,f=Math.abs(s),h=Math.abs(l);Math.sqrt(Math.pow(f,2)+Math.pow(h,2))<30||("horizontal"===n&&f>h?(e.preventDefault(),s>0?a():i()):"vertical"===n&&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)}}}}),[r,n,i,a,s,c,l])}({containerRef:Ie,swipeable:ve,swipeDirection:xe,slideNext:Be,slidePrev:We,onSwipeStart:me,onSwipeEnd:we,onSwipeMove:ye}),function(e,o,r,n,i){t.useEffect((function(){var t=e.current;t&&o&&t.focus()}),[o]),t.useEffect((function(){if("none"!==r){var t=e.current;if(t){var o=function(e){if(t===document.activeElement)switch(e.key){case"ArrowLeft":"horizontal"!==r&&"both"!==r||i();break;case"ArrowRight":"horizontal"!==r&&"both"!==r||n();break;case"ArrowUp":"vertical"!==r&&"both"!==r||i();break;case"ArrowDown":"vertical"!==r&&"both"!==r||n()}};return window.addEventListener("keydown",o),function(){window.removeEventListener("keydown",o)}}}}),[r,n,i])}(Ie,ue,fe,Be,We);var Ye=function(){Z&&(Se.current=!0)},qe=function(){Z&&(Se.current=!1)},He={width:b,height:x,padding:_},Xe={perspective:"number"==typeof O?"calc(".concat(O," * var(").concat(r,"))"):O,perspectiveOrigin:T,height:"auto"===x?"auto":"100%"},Ke={width:Ae,height:Te,aspectRatio:I,transition:"transform ".concat(K,"ms ").concat(G,", width ").concat(Y,"ms ").concat(H,", height ").concat(Y,"ms ").concat(H),cursor:Q?"pointer":"initial",top:"top"===S?"0%":"bottom"===S?"100%":"50%",boxShadow:L};return e.jsx(g.Provider,{value:{curIndex:Re,setCurIndex:Oe,slideNext:Be,slidePrev:We},children:e.jsxs("div",{className:"react-responsive-3d-carousel","aria-label":l,tabIndex:"none"!==fe?0:void 0,style:He,ref:Ie,children:[e.jsxs("ul",{className:"react-responsive-3d-carousel__list",style:Xe,ref:Pe,children:[e.jsx("div",{className:"react-responsive-3d-carousel__dummy",style:o(o({},Ke),{visibility:"hidden"})}),u.map((function(t,o){return e.jsx("li",{className:"react-responsive-3d-carousel__item \n ".concat("auto"!==Ae||"auto"!==Te&&"auto"!==I?"fixed-width":""," \n ").concat("auto"!==Te||"auto"!==Ae&&"auto"!==I?"fixed-height":""),onClick:function(e){return function(e,t){Q&&Oe(t),te&&te(e,t,u[Re],Re===t)}(e,o)},style:Ke,onMouseEnter:Ye,onMouseLeave:qe,children:t},o)})),s]}),be&&e.jsx("div",{className:"react-responsive-3d-carousel__status-container",children:e.jsx(y,o({length:u.length,curIndex:Re},ze))}),Me&&e.jsx("div",{className:"react-responsive-3d-carousel__arrows-container",children:e.jsx(v,o({onClickNext:function(e){Be(),(null==je?void 0:je.onClickNext)&&je.onClickNext(e)},onClickPrev:function(e){We(),(null==je?void 0:je.onClickPrev)&&je.onClickPrev(e)}},je))}),Ce&&e.jsx("div",{className:"react-responsive-3d-carousel__indicators-container",children:e.jsx(m,o({length:u.length,curIndex:Re,onClick:function(e,t){Oe(t),(null==Ee?void 0:Ee.onClick)&&Ee.onClick(e,t)}},Ee))})]})})},exports.CarouselContext=g,exports.Indicators=m,exports.Status=y;