@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) • 3.19 kB
JavaScript
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as i,useState as t,useMemo as o,useCallback as a,useEffect as n}from"react";import s from"@mui/material/Typography";import l from"@mui/material/Card";import d from"@mui/material/Stack";import m from"@mui/material/Box";import{useTheme as c}from"@mui/material/styles";import u from"@mui/material/useMediaQuery";import{isReactNode as p}from"../util/functions/index.js";import{CarouselCardController as f}from"./components/CarouselCardController.js";import{useCardLoading as h}from"../Card/hooks/useCardLoading.js";import{LoadingManager as g}from"../Card/components/LoadingManager.js";import{CarouselCardSkeleton as C}from"./CarouselCard.skeleton.js";import{ImageCard as w}from"../ImageCard/ImageCard.container.js";if("undefined"!=typeof window){const e=e=>({removeListener(){}});window.matchMedia||(window.matchMedia=e)}const k=require("react-slick").default,v="NexusCarouselCard",y=y=>{const{sx:x,loading:$,loadingMode:M="spinner",headline:S,items:b=[],onClickPrevious:N,onClickNext:P,onActiveStepChange:j,SwipeableViews:A=k,swiperRef:L,swipeableViewsProps:V={},initialActiveStep:T=0,autoplay:H=!1,autoplaySpeed:I=3e3,draggable:O=!0,touchMove:W=!0,touchThreshold:q=5,speed:z=300,pauseOnHover:B=!0,infinite:Q=!0,...R}=y,D=b.length,E=i(null),F=i(null),[G,J]=t(T<0?0:T>D-1?D-1:T),{direction:K,breakpoints:U}=c(),X=u(U.down("sm")),Y=o((()=>({autoplay:H,autoplaySpeed:I,draggable:O,touchMove:W,touchThreshold:q,speed:z,pauseOnHover:B,infinite:Q})),[H,I,O,Q,B,z,W,q]),Z=a(((e,r)=>{J(r),e!==r&&j?.(r)}),[j]),_=a((e=>{const{current:r}=E;r&&(r.slickPrev(),N?.(e))}),[N]),ee=a((e=>{const{current:r}=E;r&&(r.slickNext(),P?.(e))}),[P]),re=o((()=>{if(!S)return null;let r=null;return"string"==typeof S?r=e(s,{"data-testid":`${v}-headline`,className:`${v}-headline`,component:"div",variant:"h4",children:S}):p(S)&&(r=S),r}),[S]),ie=a(((r,i)=>p(r)?"string"==typeof r?e(m,{"data-testid":`${v}-item-${i}`,className:`${v}-item ${v}-item--customized`,children:r},i):r:e(w,{...r,elevation:0},i)),[]),te=o((()=>{const{className:r="",rtl:i,...t}=V;return e(A,{ref:e=>{E.current=e,L&&(L.current=e)},rtl:"rtl"===K,initialSlide:G,"data-testid":`${v}-swipeableViews`,className:`${v}-swipeableViews ${r}`,arrows:!1,...Y,...t,beforeChange:Z,children:b.map(((e,r)=>ie(e,r)))})}),[A,G,K,Z,b,ie,V,L,Y]);n((()=>{const{current:e}=E;e&&(H?e.slickPlay():e.slickPause())}),[H]),n((()=>{const{current:e}=F,{current:r}=E;e&&r&&(B&&H?(e.onmouseenter=()=>{r.slickPause()},e.onmouseleave=()=>{r.slickPlay()}):(e.onmouseenter=null,e.onmouseleave=null))}),[H,B]);const{renderLoadingPanel:oe,cardLoadingStyle:ae}=h($,M);return e(l,{"data-testid":`${v}-root`,className:`${v}-root`,sx:[{padding:8,[`& .${v}-swipeableViews .MuiCard-root`]:{boxShadow:"none","& .MuiCardContent-root":{px:0},"& .MuiCardActions-root":{px:0}}},ae,...Array.isArray(x)?x:[x]],ref:F,...R,children:r(g,{loading:$,loadingMode:M,skeleton:C,children:[!($&&"skeleton"===M)&&r(d,{spacing:X?8:16,className:`${v}-mainWrapper`,"data-testid":`${v}-mainWrapper`,children:[re,te,D>1&&e(f,{onClickNext:ee,onClickPrevious:_,activeStep:G,maxSteps:D,infinite:Q})]}),oe]})})};export{y as CarouselCardComponent};