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