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