@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.44 kB
JavaScript
import{jsx as t,jsxs as e}from"react/jsx-runtime";import r from"@mui/material/ListItemButton";import o from"@mui/material/ListItemText";import i from"@mui/material/ListItemIcon";import{useCallback as s,useMemo as m}from"react";import a from"clsx";import n from"@mui/material/ListItem";import{useDrawerContext as d}from"../../DrawerContext.js";import{CONDENSED_WITH_LABEL_WIDTH as c,CONDENSED_WITHOUT_LABEL_WIDTH as l}from"../../Drawer.component.js";import{styles as p}from"./DrawerCondensedListItem.styles.js";const x="NexusDrawerCondensedListItem",I=I=>{const{item:f,ListItemButtonProps:u}=I,{showCondensedLabel:w,selectedNodeId:C,onNavItemClick:L}=d(),h=w?c:l,y=s((t=>{t.stopPropagation(),f.onNavItemClick?f.onNavItemClick(f):L&&L(f)}),[f,L]),N=m((()=>{let t={sx:p.condensedListItem};if(u){const{sx:e,...r}=u;t={...t,sx:[...t.sx,...Array.isArray(e)?e:[e]],...r}}return t}),[u]);return t(n,{disablePadding:!0,children:e(r,{disabled:f.disabled,selected:f.nodeId===C,onClick:y,className:a(`${x}-root`,x),"data-testid":`${x}-${f.nodeId}`,...N,children:[f.icon&&t(i,{sx:{minWidth:"unset",width:h,justifyContent:"center"},className:`${x}-icon`,"data-testid":`${x}-icon`,children:f.icon}),w&&t(o,{sx:{width:h,px:2,textAlign:"center",overflowWrap:"break-word"},primary:f.label,primaryTypographyProps:{variant:"caption"},className:`${x}-text`,"data-testid":`${x}-text`})]},f.nodeId)})};export{I as DrawerCondensedListItemComponent,x as prefix};