react-card-carousel-materialui/dist/react-card-carousel-materialui.cjs.production.min.js

A full-screen card carousel designed in Material UI, drawing inspiration from the Tesla website.

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),i=e(t),n=e(require("@mui/material/Box")),o=e(require("@mui/material/Dialog")),r=e(require("@mui/material/Stack")),a=e(require("prop-types")),l=e(require("@mui/icons-material/ChevronLeft")),s=e(require("@mui/icons-material/ChevronRight")),c=e(require("@mui/material/IconButton")),d=e(require("@mui/icons-material/Close")),u=e(require("@mui/material/Card")),m=e(require("@mui/material/CardContent")),p=e(require("@mui/material/Grid")),f=e(require("@mui/material/Typography"));function h(){return(h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}).apply(this,arguments)}var g=function(e){var o=e.isNextItemAvailable,r=e.isPreviousItemAvailable,a=e.moveToNext,d=e.moveToPrevious,u=t.useRef(null),m=t.useRef(null);return i.createElement(t.Fragment,null,o()&&i.createElement(n,{style:{position:"absolute",top:"50%",right:10,transform:"translateY(-50%)",backgroundColor:"transparent",height:"100%",width:window.innerWidth>768?"10%":"0px",zIndex:10},onMouseEnter:function(e){u&&window.innerWidth>768&&(u.current.style.opacity=1)},onMouseLeave:function(e){u&&window.innerWidth>768&&(u.current.style.opacity=window.innerWidth<768?.5:.1)}},i.createElement(n,h({ref:u,style:h({position:"absolute",top:"50%",right:10,transform:"translateY(-50%)",zIndex:10,display:"flex",justifyContent:"center",alignItems:"center",height:"25%",width:"50px",cursor:"pointer",backgroundColor:"rgba(0, 0, 0, 0.6)"},window.innerWidth<768?{opacity:.5}:{opacity:.1},{transition:"opacity 0.5s",borderRadius:"15px"})},window.innerWidth>768&&{onMouseEnter:function(e){e.target.style.opacity=1},onMouseLeave:function(e){e.target.style.opacity=.1}},{onClick:a}),i.createElement(c,{color:"white",style:{color:"white",zIndex:99}},i.createElement(s,{fontSize:"large"})))),r()&&i.createElement(n,{style:{position:"absolute",top:"50%",left:10,transform:"translateY(-50%)",backgroundColor:"transparent",height:"100%",width:window.innerWidth>768?"10%":"0px",zIndex:10},onMouseEnter:function(e){m&&window.innerWidth>768&&(m.current.style.opacity=1)},onMouseLeave:function(e){m&&window.innerWidth>768&&(m.current.style.opacity=window.innerWidth<768?.5:.1)}},i.createElement(n,h({ref:m,style:h({position:"absolute",top:"50%",left:10,transform:"translateY(-50%)",zIndex:10,display:"flex",justifyContent:"center",alignItems:"center",height:"25%",width:"50px",cursor:"pointer",backgroundColor:"rgba(0, 0, 0, 0.6)"},window.innerWidth<768?{opacity:.5}:{opacity:.1},{transition:"opacity 0.5s",borderRadius:"15px"})},window.innerWidth>768&&{onMouseEnter:function(e){e.target.style.opacity=1},onMouseLeave:function(e){e.target.style.opacity=.1}},{onClick:d}),i.createElement(c,{color:"white"},i.createElement(l,{fontSize:"large"})))))};g.propTypes={isNextItemAvailable:a.func.isRequired,isPreviousItemAvailable:a.func.isRequired,moveToNext:a.func.isRequired,moveToPrevious:a.func.isRequired},g.defaultProps={isNextItemAvailable:function(){},isPreviousItemAvailable:function(){},moveToNext:function(){},moveToPrevious:function(){}};var y=function(e){var t=e.currentItem,o=e.moveToASpecificItem;return i.createElement(n,{style:{textAlign:"center",position:"absolute",bottom:window.innerWidth<768?"4%":window.innerWidth<992?"6%":"10%",left:"50%",transform:"translateX(-50%)"}},i.createElement(r,{direction:"row",spacing:1},e.sliderItems.map((function(e,r){return i.createElement(n,{key:r,style:{width:"10px",height:"10px",borderRadius:"50%",backgroundColor:t===r?"white":"darkgray",cursor:"pointer"},onClick:function(){return o(e.id)}})}))))};y.propTypes={sliderItems:a.array,currentItem:a.number,moveToASpecificItem:a.func.isRequired},y.defaultProps={sliderItems:[],currentItem:0,moveToASpecificItem:function(){}};var v=function(e){var t=e.id,o=e.index,a=e.video,l=e.image,s=e.title,g=e.description,y=e.actions,v=e.onlyItem,x=e.calculateMinWidth,w=e.onClose,b=e.moveToASpecificItem;return i.createElement("div",{key:t,id:t},e.isHidden?i.createElement("div",{style:{width:x(),minWidth:x(),height:"550px",minHeight:"550px",marginRight:"30px",marginLeft:"30px"}}):i.createElement(u,{key:o,style:h({width:x(),minWidth:x(),height:"550px",minHeight:"550px",marginRight:"30px",marginLeft:"30px"},1===o||v?{transform:"scale(1.04)",transition:"transform 1s 1s"}:{boxShadow:"0 0 10px 0 rgba(0, 0, 0, 0.1)",transition:"box-shadow 0.5s",backgroundColor:"white"},{padding:0,marginTop:0,position:"relative",borderRadius:"15px"}),onClick:function(){return b(t)}},1!==o&&!v&&i.createElement(n,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.5)",backdropFilter:"blur(1px)",zIndex:9,cursor:"pointer"}}),i.createElement(m,{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",width:"100%",marginTop:0,padding:0,overflow:"auto"}},i.createElement(n,{style:{position:"absolute",top:0,right:0,margin:"10px",zIndex:8}},i.createElement(c,{onClick:w,color:"info"},i.createElement(d,null))),i.createElement(p,{container:!0,spacing:2,style:{height:"100%",display:"flex",justifyContent:"center",alignItems:"center",paddingTop:0,marginTop:0},direction:"row"},(l||a)&&i.createElement(p,{item:!0,xs:window.innerWidth<768?12:7,style:{display:"flex",justifyContent:"center",alignItems:"center",paddingTop:0,marginTop:0,height:window.innerWidth<768?"auto":"100%"}},a?i.createElement("video",{src:a,autoPlay:!0,loop:!0,muted:!0,style:h({width:"100%",height:"100%",minWidth:"100%",minHeight:"100%"},1!==o&&{opacity:.1})}):i.createElement("img",{src:l,alt:s,style:{width:"100%",height:"100%",objectFit:"fill"}})),i.createElement(p,{item:!0,xs:window.innerWidth<768?12:l||a?5:12,style:{justifyContent:"center",alignItems:"center",height:"100%",padding:l||a?"20px 40px 20px 40px":"40px 80px 40px 80px"}},i.createElement(r,{spacing:2,direction:"column",justifyContent:"space-between",alignItems:"center",style:{height:"100%"}},i.createElement(r,{spacing:2,style:{marginTop:50}},i.createElement(f,{variant:"h5",fontWeight:"bold",letterSpacing:"-0.6px",fontSize:"24px",fontFamily:"Open Sans"},s),i.createElement(f,{variant:"body2",fontSize:"14px",fontFamily:"Open Sans",fontWeight:"medium",style:{whiteSpace:"pre-line"}},g)),y&&i.createElement(n,{style:{width:"100%",marginBottom:20}},y)))))))};function x(e){var a=e.open,l=e.onClose,s=e.items,c=t.useState([]),d=c[0],u=c[1],m=t.useState(0),p=m[0],f=m[1],h=t.useState([]),x=h[0],w=h[1];t.useEffect((function(){u(s||[]);var e=[].concat(s),t=[].concat(s&&s.length>1?[{id:0,content:null,isHidden:!0}]:[],e.slice(0,2));w(t),f(0)}),[]);var b=function(){var e=[].concat(d);if(x&&!x[0].isHidden){var t=[].concat(e.slice(p,p+3));t.length<3&&t.push({id:0,content:null,isHidden:!0}),w(t),f(p+1)}else{var i=[].concat(e.slice(0,3));i.length<3&&i.push({id:0,content:null,isHidden:!0}),w(i),f(1)}},I=function(){var e,t=[].concat(d);if(x&&null!=(e=x[0])&&e.isHidden){var i=[].concat(t.slice(p-2,p+1));i.length<3&&i.unshift({id:0,content:null,isHidden:!0}),w(i),f(p-1)}else if(1===p){var n=[{id:0,content:null,isHidden:!0}].concat(t.slice(0,2));n.length<3&&n.push({id:0,content:null,isHidden:!0}),w(n),f(p-1)}else{var o=[].concat(t.slice(p-2,p+1));o.length<3&&o.unshift({id:0,content:null,isHidden:!0}),w(o),f(p-1)}},E=function(){var e=window.innerWidth,t=.8*e;return t>885&&(t=885),t<765&&(t=e-80),t+"px"},C=function(e){var t=d.findIndex((function(t){return t.id===e}));if(-1!==t&&t!==p)if(t>p&&t<p+3)b();else if(t<p&&t>p-3)I();else{var i=[].concat(d);w([i[t-1]?i[t-1]:{id:0,content:null,isHidden:!0},i[t],i[t+1]?i[t+1]:{id:0,content:null,isHidden:!0}]),f(t)}};return i.createElement(o,{fullScreen:!0,open:a,onClose:l,style:{backgroundColor:"rgba(255, 255, 255, 0.5)",backdropFilter:"blur( 5px )",padding:0,margin:0},PaperProps:{style:{backgroundColor:"transparent",boxShadow:"none"}}},i.createElement(n,{id:"box1",style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",overflow:"hidden",width:"100%",backgroundColor:"transparent"}},i.createElement(r,{direction:"column",spacing:2},i.createElement(n,{id:"box2",style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",overflow:"hidden",width:"100%",backgroundColor:"transparent"}},x.map((function(e,t){return i.createElement("div",{key:e.id,id:e.id},e.isHidden?i.createElement("div",{style:{width:E(),minWidth:E(),height:"550px",minHeight:"550px",marginRight:"30px",marginLeft:"30px"}}):i.createElement(v,{onlyItem:1===x.length,id:e.id,index:t,isHidden:e.isHidden,video:e.video,image:e.image,title:e.title,description:e.description,actions:e.actions||null,calculateMinWidth:E,onClose:l,moveToASpecificItem:C}))}))),i.createElement(y,{sliderItems:d,currentItem:p,moveToASpecificItem:C})),i.createElement(g,{isNextItemAvailable:function(){return p<d.length-1},isPreviousItemAvailable:function(){var e;return x&&null!=(e=x[0])&&e.isHidden?p>1:p>0},moveToNext:b,moveToPrevious:I})))}v.propTypes={id:a.string.isRequired,onlyItem:a.bool.isRequired,index:a.number.isRequired,isHidden:a.bool,video:a.string,image:a.string,title:a.string,description:a.string,actions:a.node,calculateMinWidth:a.func.isRequired,onClose:a.func.isRequired,moveToASpecificItem:a.func.isRequired},v.defaultProps={isHidden:!1,onlyItem:!1,video:null,image:null,title:"",description:"",actions:null,calculateMinWidth:function(){},onClose:function(){},moveToASpecificItem:function(){}},x.defaultProps={open:!1,onClose:function(){}},x.propTypes={open:a.bool,onClose:a.func};var w=function(e){var i=e.open,n=e.onClose,o=e.items;return t.createElement(x,{open:void 0!==i&&i,onClose:void 0===n?function(){}:n,items:void 0===o?[]:o})};w.propTypes={open:a.bool,onClose:a.func,items:a.array},exports.CardCarousel=w;
//# sourceMappingURL=react-card-carousel-materialui.cjs.production.min.js.map