react-responsive-3d-carousel
Version:
React Responsive 3D Carousel
2 lines (1 loc) • 17.4 kB
JavaScript
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useEffect as o,useMemo as r,useRef as n,createContext as i,useState as a,useCallback as c}from"react";var s=function(){return s=Object.assign||function(t){for(var e,o=1,r=arguments.length;o<r;o++)for(var n in e=arguments[o])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},s.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var l="--container-width",d="--container-height",u="--item-width",h={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}}},f={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)}}},v={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)}}},p=function(t,e){return Math.round(t*Math.pow(10,e))/Math.pow(10,e)},m=function(t,e){var o,r,n,i={},a=null!==(o=null==e?void 0:e.widthFactor)&&void 0!==o?o:1,c=null!==(r=null==e?void 0:e.depthFactor)&&void 0!==r?r:1,s=null!==(n=null==e?void 0:e.angleFactor)&&void 0!==n?n:1;return Object.entries(t).forEach((function(t){var e=t[0],o=t[1],r={x:p(o.translate.x*a,3),y:o.translate.y,z:p(o.translate.z*a,3)},n={x:p(o.rotate.x*s,3),y:p(o.rotate.y*s,3),z:p(o.rotate.z*s,3)},l={x:p(o.offset.x*a,3),y:o.offset.y,z:p(o.offset.z*c,3)};i[e]={translate:r,rotate:n,offset:l}})),i},w=function(t,e){var o,r=t.width,n=t.height,i=t.translate,a=t.rotate,c=t.offset,s="number"==typeof r?"calc(".concat(r," * var(").concat(l,"))"):null!=r?r:"auto",h="number"==typeof n?"calc(".concat(n," * var(").concat(d,"))"):null!=n?n:"auto";switch(e){case"top":o=0;break;case"bottom":o=-100;break;case"center":o=-50}var f=Math.sqrt(Math.pow(a.x,2)+Math.pow(a.y,2)+Math.pow(a.z,2)),v=f?a.x/f:0,p=f?a.y/f:0,m=f?a.z/f:0,w="number"==typeof i.x?"".concat(i.x," * var(").concat(l,")"):i.x,y="number"==typeof i.y?"".concat(i.y," * var(").concat(d,")"):i.y,x="number"==typeof i.z?"".concat(i.z," * var(").concat(l,")"):i.z,g="number"==typeof c.x?"".concat(c.x," * 100%"):c.x,b="number"==typeof c.y?"".concat(c.y," * 100%"):c.y,z="number"==typeof c.z?"".concat(c.z," * var(").concat(u,")"):c.z;return{width:s,height:h,transform:"translate(-50%, ".concat(o,"%) \n translate3d(calc(").concat(w," + ").concat(g,"), calc(").concat(y," + ").concat(b,"), calc(").concat(x," + ").concat(z,")) \n rotate3d(").concat(v,", ").concat(p,", ").concat(m,", calc(").concat(f,"deg)")}},y=function(t,e,n,i,a,c,s,l,d){var u=r((function(){var e="default"===s?function(t,e){if(e&&"numOfSlides"in e){if(2===e.numOfSlides)return m(h,e);if(3===e.numOfSlides)return m(f,e);if(5===e.numOfSlides)return m(v,e)}return m(t<3?h:t<5?f:v,e)}(t.length,d):s;return function(t,e){var o={};for(var r in t)o[r]=w(t[r],e);return o}(e,n)}),[t,n,s,d]);o((function(){var o=e.current,r=function(t,e){t.style.width="auto"===e.width?i:e.width,t.style.height="auto"===e.height?a:e.height,t.style.transform=e.transform,"auto"!==t.style.width||"auto"!==t.style.height&&"auto"!==c?t.classList.add("fixed-width"):t.classList.remove("fixed-width"),"auto"!==t.style.height||"auto"!==t.style.width&&"auto"!==c?t.classList.add("fixed-height"):t.classList.remove("fixed-height")};o.forEach((function(e,o){var n=o-l;if(u[n])r(e,u[n]);else{var i=n+(n>0?-t.length:t.length);u[i]?r(e,u[i]):r(e,u.default)}}))}),[t,i,a,c,u,l])};function x(t,e){void 0===e&&(e={});var o=e.insertAt;if(t&&"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=t:n.appendChild(document.createTextNode(t))}}x(".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 g=function(o){var r=o.width,n=void 0===r?"3rem":r,i=o.height,a=void 0===i?"5rem":i,c=o.color,s=void 0===c?"#ffffff":c,l=o.hoverColor,d=void 0===l?"#888888":l,u=o.shadow,h=void 0===u?"0 0.05rem 0.1rem rgba(0, 0, 0, 0.3)":u,f=o.nextArrowTranslate,v=void 0===f?["0px","0px"]:f,p=o.prevArrowTranslate,m=void 0===p?["0px","0px"]:p,w=o.onClickNext,y=o.onClickPrev,x=o.nextIcon,g=o.prevIcon;return t("div",{className:"react-responsive-3d-carousel__arrows",style:{"--arrow-width":n,"--arrow-height":a,"--arrow-drop-shadow":h,"--arrow-color":s,"--arrow-hover-color":d},children:[e("button",{type:"button",onClick:function(t){t.stopPropagation(),y&&y(t)},"aria-label":"previous slide",style:{transform:"translateY(-50%) translate(".concat(m[0],", ").concat(m[1],")")},children:g||e(b,{})}),e("button",{type:"button",onClick:function(t){t.stopPropagation(),w&&w(t)},"aria-label":"next slide",style:{transform:"translateY(-50%) translate(".concat(v[0],", ").concat(v[1],")")},children:x||e(z,{})})]})},b=function(){return e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",preserveAspectRatio:"none",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e("polyline",{points:"15 18 9 12 15 6"})})},z=function(){return e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",preserveAspectRatio:"none",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e("polyline",{points:"9 18 15 12 9 6"})})};g.displayName="Arrows";x(".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 _=function(t){var o=t.length,r=t.curIndex,n=t.color,i=void 0===n?"#ffffff":n,a=t.width,c=void 0===a?"0.7rem":a,s=t.height,l=void 0===s?"0.7rem":s,d=t.gap,u=void 0===d?"1.5rem":d,h=t.activeColor,f=void 0===h?"#888888":h,v=t.shadow,p=void 0===v?"0 0.05rem 0.1rem rgba(0, 0, 0, 0.5)":v,m=t.translate,w=void 0===m?["0px","0px"]:m,y=t.indicatorIcon,x=t.onClick,g={gap:u,transform:"translate(".concat(w[0],", ").concat(w[1],")"),"--indicator-width":c,"--indicator-height":l,"--indicator-color":i,"--indicator-active-color":f,"--indicator-shadow":p};return e("ul",{className:"react-responsive-3d-carousel__indicators",style:g,children:Array.from({length:o},(function(t,o){return e("li",{onClick:function(t){return function(t,e){t.stopPropagation(),x&&x(t,e)}(t,o)},"aria-label":"slide item ".concat(o+1),className:o===r?"active":"",children:y||e(M,{})},o)}))})},M=function(){return e("svg",{preserveAspectRatio:"none",width:"24",height:"24",viewBox:"0 0 24 24",fill:"currentColor",children:e("circle",{cx:"12",cy:"12",r:"10"})})};_.displayName="Indicators";x(".react-responsive-3d-carousel__status{color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:inherit}");var k=function(t){var o=t.length,r=t.curIndex,n=t.color,i=void 0===n?"#ffffff":n,a=t.fontSize,c=void 0===a?"1rem":a,s=t.fontWeight,l=void 0===s?"600":s,d=t.shadow,u=void 0===d?"0 0.05rem 0.1rem rgba(0, 0, 0, 0.5)":d,h=t.translate,f=void 0===h?["0px","0px"]:h,v={color:i,fontSize:c,fontWeight:l,textShadow:u,transform:"translate(".concat(f[0],", ").concat(f[1],")")};return e("p",{className:"react-responsive-3d-carousel__status","aria-label":"".concat(r+1," of ").concat(o),style:v,children:"".concat(r+1," / ").concat(o)})};k.displayName="Status";x(".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 C=i({curIndex:0,setCurIndex:function(t){},slideNext:function(){},slidePrev:function(){}}),I=function(i){var h=i.children,f=i.ariaLabel,v=void 0===f?"3d carousel":f,p=i.items,m=i.startIndex,w=void 0===m?0:m,x=i.containerHeight,b=void 0===x?"auto":x,z=i.containerWidth,M=void 0===z?"100%":z,I=i.containerPadding,P=void 0===I?"1rem":I,S=i.width,N=void 0===S?"400px":S,E=i.height,L=void 0===E?"300px":E,O=i.aspectRatio,A=void 0===O?"auto":O,T=i.align,j=void 0===T?"center":T,R=i.boxShadow,D=void 0===R?"0 0.1rem 0.5rem rgba(0, 0, 0, 0.5)":R,W=i.perspective,B=void 0===W?1:W,F=i.perspectiveOrigin,Y=void 0===F?"center":F,H=i.layout,q=void 0===H?"default":H,X=i.defaultOption,K=i.sizeDuration,U=void 0===K?1e3:K,G=i.sizeTimingFn,J=void 0===G?"ease-in-out":G,Q=i.transformDuration,V=void 0===Q?1e3:Q,Z=i.transformTimingFn,$=void 0===Z?"ease-in-out":Z,tt=i.focusOnSelect,et=void 0===tt||tt,ot=i.pauseOnHover,rt=void 0===ot||ot,nt=i.pauseOnTransition,it=void 0===nt?"both":nt,at=i.onClickItem,ct=i.onChange,st=i.autoPlay,lt=void 0===st||st,dt=i.interval,ut=void 0===dt?3e3:dt,ht=i.infiniteLoop,ft=void 0===ht||ht,vt=i.autoFocus,pt=void 0!==vt&&vt,mt=i.slideWithKeyboard,wt=void 0===mt?"both":mt,yt=i.swipeable,xt=void 0===yt||yt,gt=i.swipeDirection,bt=void 0===gt?"horizontal":gt,zt=i.onSwipeStart,_t=i.onSwipeEnd,Mt=i.onSwipeMove,kt=i.showStatus,Ct=void 0===kt||kt,It=i.status,Pt=i.showArrows,St=void 0===Pt||Pt,Nt=i.arrows,Et=i.showIndicators,Lt=void 0===Et||Et,Ot=i.indicators,At=n(null),Tt=n(null),jt=n(!1),Rt=n({size:!1,transform:!1}),Dt=a(w),Wt=Dt[0],Bt=Dt[1],Ft=r((function(){return"number"==typeof N?"calc(".concat(N," * var(").concat(l,"))"):N}),[N]),Yt=r((function(){return"number"==typeof L?"calc(".concat(L," * var(").concat(d,"))"):L}),[L]),Ht=n([]);o((function(){var t=At.current;t&&(Ht.current=Array.from(t.getElementsByClassName("react-responsive-3d-carousel__item")))}),[p]),o((function(){var t=U-100,e=V-100;t>0&&(Rt.current.size=!0),e>0&&(Rt.current.transform=!0);var o=setTimeout((function(){Rt.current.size=!1}),t),r=setTimeout((function(){Rt.current.transform=!1}),e);return function(){clearTimeout(o),clearTimeout(r)}}),[Wt,U,V]);var qt=c((function(){("size"!==it&&"both"!==it||!Rt.current.size)&&("transform"!==it&&"both"!==it||!Rt.current.transform)&&Bt((function(t){return ft||0!==t?(t-1+p.length)%p.length:t}))}),[p,ft,Bt,it]),Xt=c((function(){("size"!==it&&"both"!==it||!Rt.current.size)&&("transform"!==it&&"both"!==it||!Rt.current.transform)&&Bt((function(t){return ft||t!==p.length-1?(t+1)%p.length:t}))}),[p,ft,Bt,it]);o((function(){Bt(w)}),[w]),o((function(){Wt<0?Bt(0):p.length-1<Wt&&Bt(p.length-1)}),[p,Wt]);var Kt=n(!1);o((function(){Kt.current?ct&&ct(Wt,p[Wt]):Kt.current=!0}),[Wt,ct]),function(t,e,r,n){o((function(){if(t){var o=window.setInterval((function(){n.current||r()}),e);return function(){clearInterval(o)}}}),[t,e,r])}(lt,ut,Xt,jt),function(t,e,r,n,i){o((function(){e.current.forEach((function(t){t.style.setProperty(u,"".concat(t.offsetWidth,"px"))}))}),[t,n,i]),o((function(){var t=r.current;if(t){var e=function(){t.style.setProperty(l,"".concat(t.offsetWidth,"px")),t.style.setProperty(d,"".concat(t.offsetHeight,"px"))};e();var o="ResizeObserver"in window?new ResizeObserver(e):null;return o?o.observe(t):window.addEventListener("resize",e),function(){o?o.disconnect():window.removeEventListener("resize",e)}}}),[])}(p,Ht,Tt,Ft,Wt),y(p,Ht,j,Ft,Yt,A,q,Wt,X),function(t){var e=t.containerRef,r=t.swipeable,i=t.swipeDirection,a=t.slideNext,c=t.slidePrev,s=t.onSwipeStart,l=t.onSwipeEnd,d=t.onSwipeMove,u=n(!1);o((function(){if(r){var t=e.current;if(t){var o=0,n=0,h=function(t){u.current=!0,o=t.touches[0].clientX,n=t.touches[0].clientY,s&&s(t)},f=function(t){u.current&&d&&d(t)},v=function(t){if(u.current){u.current=!1,l&&l(t);var e=t.changedTouches[0].clientX,r=t.changedTouches[0].clientY,s=e-o,d=r-n,h=Math.abs(s),f=Math.abs(d);Math.sqrt(Math.pow(h,2)+Math.pow(f,2))<30||("horizontal"===i&&h>f?(t.preventDefault(),s>0?c():a()):"vertical"===i&&f>h&&(t.preventDefault(),d>0?c():a()))}};return t.addEventListener("touchstart",h,{passive:!0}),t.addEventListener("touchmove",f,{passive:!0}),t.addEventListener("touchend",v),function(){t.removeEventListener("touchstart",h),t.removeEventListener("touchmove",f),t.removeEventListener("touchend",v)}}}}),[r,i,a,c,s,l,d])}({containerRef:At,swipeable:xt,swipeDirection:bt,slideNext:Xt,slidePrev:qt,onSwipeStart:zt,onSwipeEnd:_t,onSwipeMove:Mt}),function(t,e,r,n,i){o((function(){var o=t.current;o&&e&&o.focus()}),[e]),o((function(){if("none"!==r){var e=t.current;if(e){var o=function(t){if(e===document.activeElement)switch(t.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])}(At,pt,wt,Xt,qt);var Ut=function(){rt&&(jt.current=!0)},Gt=function(){rt&&(jt.current=!1)},Jt={width:M,height:b,padding:P},Qt={perspective:"number"==typeof B?"calc(".concat(B," * var(").concat(l,"))"):B,perspectiveOrigin:Y,height:"auto"===b?"auto":"100%"},Vt={width:Ft,height:Yt,aspectRatio:A,transition:"transform ".concat(V,"ms ").concat($,", width ").concat(U,"ms ").concat(J,", height ").concat(U,"ms ").concat(J),cursor:et?"pointer":"initial",top:"top"===j?"0%":"bottom"===j?"100%":"50%",boxShadow:D};return e(C.Provider,{value:{curIndex:Wt,setCurIndex:Bt,slideNext:Xt,slidePrev:qt},children:t("div",{className:"react-responsive-3d-carousel","aria-label":v,tabIndex:"none"!==wt?0:void 0,style:Jt,ref:At,children:[t("ul",{className:"react-responsive-3d-carousel__list",style:Qt,ref:Tt,children:[e("div",{className:"react-responsive-3d-carousel__dummy",style:s(s({},Vt),{visibility:"hidden"})}),p.map((function(t,o){return e("li",{className:"react-responsive-3d-carousel__item \n ".concat("auto"!==Ft||"auto"!==Yt&&"auto"!==A?"fixed-width":""," \n ").concat("auto"!==Yt||"auto"!==Ft&&"auto"!==A?"fixed-height":""),onClick:function(t){return function(t,e){et&&Bt(e),at&&at(t,e,p[Wt],Wt===e)}(t,o)},style:Vt,onMouseEnter:Ut,onMouseLeave:Gt,children:t},o)})),h]}),Ct&&e("div",{className:"react-responsive-3d-carousel__status-container",children:e(k,s({length:p.length,curIndex:Wt},It))}),St&&e("div",{className:"react-responsive-3d-carousel__arrows-container",children:e(g,s({onClickNext:function(t){Xt(),(null==Nt?void 0:Nt.onClickNext)&&Nt.onClickNext(t)},onClickPrev:function(t){qt(),(null==Nt?void 0:Nt.onClickPrev)&&Nt.onClickPrev(t)}},Nt))}),Lt&&e("div",{className:"react-responsive-3d-carousel__indicators-container",children:e(_,s({length:p.length,curIndex:Wt,onClick:function(t,e){Bt(e),(null==Ot?void 0:Ot.onClick)&&Ot.onClick(t,e)}},Ot))})]})})};export{g as Arrows,I as Carousel,C as CarouselContext,_ as Indicators,k as Status};