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