@nexusui/components/cjs/core/ImageCarousel/ImageCarousel.component.js

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Box"),l=require("@mui/material/Button"),s=require("@mui/material/IconButton"),r=require("@mui/material/MobileStepper"),i=require("@mui/material/Tooltip"),o=require("@mui/material/Typography"),u=require("@mui/icons-material/ArrowBack"),n=require("@mui/icons-material/ArrowForward"),c=require("@mui/icons-material/Fullscreen"),d=require("@mui/icons-material/FullscreenExit"),m=require("@mui/icons-material/KeyboardArrowLeft"),p=require("@mui/icons-material/KeyboardArrowRight"),x=require("./ImageCarousel.styles.js"),f=require("../locales/index.js"),b=require("./locale.json.js"),h=require("./utils.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=j(a),S=j(l),C=j(s),y=j(r),v=j(i),w=j(o),$=j(u),q=j(n),B=j(c),k=j(d),N=j(m),F=j(p);const T=({maxSteps:t,activeStep:a,stepControls:l})=>e.jsx(y.default,{sx:[x.imageCarouselStyles.mobileStepper],steps:t,position:"static",variant:"dots",activeStep:a,...l()});if("undefined"!=typeof window){const e=e=>({removeListener(){}});window.matchMedia||(window.matchMedia=e)}const M=require("react-slick").default,A="NexusImageCarousel";exports.ImageCarouselComponent=({images:a,controlsPosition:l="bottom",allowFullScreen:s=!1,previousButtonLabel:r,nextButtonLabel:i,initialActiveStep:o=0,onImageClick:u,onToggleFullScreen:n,onActiveStepChange:c,isFullScreen:d,SwipeableViews:m=M,swiperRef:p,sx:j,swipeableViewsProps:y={},autoplay:I=!1,autoplaySpeed:P=3e3,draggable:z=!0,touchMove:O=!0,touchThreshold:V=5,speed:L=300,pauseOnHover:E=!0,pauseOnFocus:R=!0,infinite:H=!0,...K})=>{const _=a.length,D=t.useRef(null),G="middle"===l,J=f.useTranslate(b.default),[Q,U]=t.useState(o<0?0:o>_-1?_-1:o),W=t.useMemo((()=>r||J("Previous")),[r,J]),X=t.useMemo((()=>i||J("Next")),[i,J]),Y=(e,t)=>{U(t),c?.(t,a[t])},Z=h.useThrottle((()=>{const{current:e}=D;e&&e.slickPrev()}),L,!1),ee=h.useThrottle((()=>{const{current:e}=D;e&&e.slickNext()}),L,!1),te=t.useCallback((()=>{n?.(!d)}),[n,d]);t.useEffect((()=>{const{current:e}=D;e&&(I?e.slickPlay():e.slickPause())}),[I]);const ae=t=>"string"==typeof t.src?e.jsx(g.default,{component:"img",sx:[x.imageCarouselStyles.carouselImage],src:t.src,alt:t.alt,loading:"lazy",onClick:()=>(e=>{u?.(e)})(t)}):t.src;return e.jsxs(g.default,{"data-testid":`${A}-root`,className:`${A}-root`,sx:[x.imageCarouselStyles.root,...Array.isArray(j)?j:[j]],...K,children:[G?e.jsxs(g.default,{sx:[x.imageCarouselStyles.carouselMiddleControls],className:`${A}-middleControls`,"data-testid":`${A}-middleControls`,children:[e.jsx(v.default,{title:W,placement:"top",children:e.jsx(C.default,{className:`${A}-previous`,"data-testid":`${A}-previous`,"aria-label":W,size:"small",onClick:Z,disabled:0===Q&&!H,children:e.jsx(N.default,{})})}),e.jsx(v.default,{title:X,placement:"top",children:e.jsx(C.default,{className:`${A}-next`,"data-testid":`${A}-next`,"aria-label":X,size:"small",onClick:ee,disabled:Q===_-1&&!H,children:e.jsx(F.default,{})})})]}):"",s?e.jsx(v.default,{title:J(d?"Exit Full Screen":"Full Screen"),placement:"top",children:e.jsx(C.default,{"aria-label":"full screen",className:`${A}-fullScreenButton`,"data-testid":`${A}-fullScreenButton`,sx:{...x.fullScreenStyles.fullScreenButton,right:G?57:20},size:"small",onClick:te,children:d?e.jsx(k.default,{"aria-label":"exit full screen"}):e.jsx(B.default,{"aria-label":"full screen"})})}):"",(()=>{const{className:t="",rtl:l,...s}=y,r={autoplay:I,autoplaySpeed:P,draggable:z,touchMove:O,touchThreshold:V,speed:L,pauseOnHover:E,pauseOnFocus:R,infinite:H};return e.jsx(m,{ref:e=>{D.current=e,p&&(p.current=e)},initialSlide:Q,"data-testid":`${A}-swipeableViews`,className:`${A}-swipeableViews\n        ${t} \n        ${G?"NexusImageCarousel-swipeableViews--middle-control":""}`,...r,...s,beforeChange:Y,accessibility:!0,children:a.map((t=>e.jsx(g.default,{sx:[x.imageCarouselStyles.carouselImageContainer],"data-testid":`${A}-image-${t.alt}`,children:ae(t)},t.alt)))})})(),e.jsx(T,{maxSteps:_,activeStep:Q,stepControls:()=>G?{backButton:null,nextButton:null}:{backButton:e.jsxs(S.default,{"data-testid":`${A}-previousButton`,size:"small",onClick:Z,disabled:0===Q&&!H,className:`${A}-previousButton`,children:[e.jsx($.default,{}),e.jsx(w.default,{sx:{ml:2,textTransform:"none"},variant:"button",children:W})]}),nextButton:e.jsxs(S.default,{"data-testid":`${A}-nextButton`,size:"small",onClick:ee,disabled:Q===_-1&&!H,className:`${A}-nextButton`,children:[e.jsx(w.default,{sx:{mr:2,textTransform:"none"},variant:"button",children:X}),e.jsx(q.default,{})]})}})]})},exports.prefix=A;