@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) • 2.42 kB
JavaScript
import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import o from"@mui/material/ListItemButton";import r from"@mui/material/ListItemText";import s from"@mui/material/ListItemIcon";import a from"@mui/icons-material/ExpandLess";import n from"@mui/icons-material/ExpandMore";import{useCallback as m,useMemo as l}from"react";import d from"@mui/material/List";import c from"@mui/material/Collapse";import p from"@mui/material/IconButton";import u from"@mui/material/ListItem";import{styles as x}from"./DrawerNestedListItem.styles.js";import{useDrawerContext as I}from"../../DrawerContext.js";const f="NexusDrawerNestedListItem",$=h=>{const{styleMode:g,item:y,level:L=0,ListItemButtonProps:N,ListProps:b}=h,{selectedNodeId:P,onNavItemClick:v,expanded:C,setExpanded:B}=I(),k=!!Array.isArray(C)&&-1!==C.indexOf(y.nodeId),E=y.items&&y.items.length>0,w=m((()=>{let e;e=-1!==C.indexOf(y.nodeId)?C.filter((e=>e!==y.nodeId)):[y.nodeId].concat(C),B(e)}),[B,C,y.nodeId]),A=m((e=>{e.stopPropagation(),y.onNavItemClick?y.onNavItemClick?.(y):E&&w(),v?.(y)}),[w,E,y,v]),j=l((()=>{let e={sx:[{pl:4*(L+1),..."nexus"===g?x.nexusListItem:{}}],..."nexus"===g?{dense:!0,disableRipple:!0}:{}};if(N){const{sx:t,...i}=N;e={...e,sx:[...e.sx,...Array.isArray(t)?t:[t]],...i}}return e}),[N,L,g]);return L>2&&console.warn("[Performance] Warning: It probably causes performance issues if the nested level exceeds 3."),e(t,{children:[i(u,{disablePadding:!0,children:e(o,{disabled:y.disabled,selected:y.nodeId===P,onClick:A,className:`${f}-root ${f} ${0===L&&`${f}-firstLevel ${f}-first-level`} ${E?`${f}-hasChildren ${f}-has-children`:`${f}-leaf`}`,"data-testid":`${f}-${y.nodeId}`,role:void 0,...j,children:[y.icon&&i(s,{sx:{minWidth:"unset",mr:8},className:`${f}-icon`,"data-testid":`${f}-icon`,children:y.icon}),i(r,{primary:y.label,primaryTypographyProps:{sx:x.labelStyle},className:`${f}-text`,"data-testid":`${f}-text`}),y.action,E&&i(p,{onClick:e=>{e.stopPropagation(),w()},edge:"end",className:`${f}-toggleButton`,"data-testid":`${f}-toggleButton`,"aria-label":k?"Collapse":"Expand",children:i(k?a:n,{sx:{color:"grey.600"}})})]},y.nodeId)}),i(c,{in:k,timeout:"auto",unmountOnExit:!0,component:"li",children:y.items&&y.items.length>0&&i(d,{disablePadding:!0,...b,children:y.items.map((e=>i($,{styleMode:g,item:e,level:L+1,ListProps:b,ListItemButtonProps:N},e.nodeId)))})})]})};export{$ as DrawerNestedListItemComponent,f as prefix};