@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) • 1.49 kB
JavaScript
import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"@mui/material/Stack";import{useMemo as i,useCallback as r}from"react";import a from"@mui/icons-material/ChevronRight";import s from"@mui/icons-material/ChevronLeft";import n from"@mui/material/MobileStepper";import l from"@mui/material/IconButton";import{rootStyles as m}from"./CarouselCardController.styles.js";const c="NexusCarouselCardController",d=d=>{const{infinite:u,sx:p,maxSteps:x,activeStep:f,onClickPrevious:C,onClickNext:h,...b}=d,$=i((()=>f===x-1&&!u),[f,u,x]),v=i((()=>0===f&&!u),[f,u]),S=r((()=>{const t=0===f&&u?x-1:f-1;C?.(t)}),[f,u,x,C]),k=r((()=>{const t=f===x-1&&u?0:f+1;h?.(t)}),[f,u,x,h]),w=i((()=>t(n,{"data-testid":`${c}-dots`,variant:"dots",steps:x,position:"static",activeStep:f,sx:{maxWidth:400,flexGrow:1},backButton:!1,nextButton:!1})),[x,f]),N=i((()=>e(o,{direction:"row",spacing:2,className:`${c}-controls`,"data-testid":`${c}-controls`,children:[t(l,{"data-testid":`${c}-previousButton`,className:`${c}-button`,onClick:S,disabled:v,size:"large","aria-label":"Show previous item",children:t(s,{})}),t(l,{"data-testid":`${c}-nextButton`,className:`${c}-button`,onClick:k,disabled:$,size:"large","aria-label":"Show next item",children:t(a,{})})]})),[k,S,$,v]);return e(o,{sx:[m,...Array.isArray(p)?p:[p]],className:`${c}-root`,"data-testid":`${c}-root`,direction:"row",justifyContent:"space-between",alignItems:"center",flexShrink:0,...b,children:[w,N]})};export{d as CarouselCardController};