@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) • 4.8 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{isValidElement as a}from"react";import i from"@mui/material/MenuItem";import r from"@mui/material/Menu";import o from"@mui/material/Typography";import n from"@mui/material/Box";import m from"@mui/material/Stack";import s from"@mui/icons-material/OpenInNew";import l from"@mui/icons-material/KeyboardBackspace";import c from"@mui/material/ListItemIcon";import d from"@mui/material/ListItemText";import p from"@mui/icons-material/Logout";import u from"@mui/icons-material/PersonOutline";import h from"@mui/material/Divider";import g from"@mui/material/Tooltip";import x from"@mui/material/Button";import f from"@mui/material/CircularProgress";import{useTheme as y}from"@mui/material/styles";import k from"@mui/material/useMediaQuery";import{responsiveMenuStyle as I,limitOneLine as $}from"../util/styles/index.js";import b from"./locale.json.js";import{getFullName as N}from"../util/functions/index.js";import{useTranslate as v}from"../locales/index.js";import{StatusAvatar as A}from"../StatusAvatar/StatusAvatar.container.js";import{StatusBadge as M}from"../StatusBadge/StatusBadge.container.js";import{LegalMenu as C}from"../LegalMenu/LegalMenu.container.js";const L="NexusAccountDropdown",j=(a,r)=>{const{key:n,name:m,icon:s,onClick:l,"data-testid":d,sx:p,...u}=a;return e(i,{className:`${L}-menuItem`,"data-testid":d||`${L}-title`,onClick:e=>{l?.(e),r?.()},sx:[{pl:{xs:6,sm:8},pr:6,height:48,my:1,"& .MuiListItemIcon-root":{minWidth:56}},...Array.isArray(p)?p:[p]],...u,children:[t(c,{children:s}),t(o,{variant:"body1",noWrap:!0,children:m})]},n||`${m}-menuItem`)},S=({version:S,items:w=[],legalItems:W=[],userInfo:B,isAdmin:T=!1,onSignOut:P,onMenuItemClick:O,onUserClick:D,accountLinkTarget:E="_blank",loading:z,loadingMessage:K,hideBackHeader:_,...F})=>{const H=v(b),Q=y(),U=k(Q.breakpoints.down("sm")),q=N(B);return e(r,{autoFocus:!1,className:`${L}-root`,"data-testid":"account-menu",marginThreshold:U?0:16,slotProps:{paper:{sx:{".MuiList-root":{padding:0,height:"100%"},...I}}},...F,children:[e(m,{tabIndex:-1,sx:{height:"100%",justifyContent:"space-between"},children:[e(m,{sx:{flex:1},children:[U&&!_&&e(m,{sx:{height:56},children:[t(n,{sx:{display:"flex",alignItems:"center",height:"100%"},children:t(x,{className:`${L}-back`,"data-testid":`${L}-back`,sx:e=>({ml:3,color:"grey.600",...e.applyStyles("dark",{color:"common.white"})}),size:"large",onClick:e=>{F.onClose?.(e,"escapeKeyDown")},startIcon:t(l,{}),children:H("Back")})}),t(h,{})]}),e(m,{direction:"row",alignItems:"center",className:`${L}-userPanel`,"data-testid":`${L}-userPanel`,sx:{pl:{xs:4,sm:6},pr:6,height:72},children:[t(A,{...B,className:`${L}-userAvatar`,sx:{height:40,width:40,mr:6}}),e(m,{className:`${L}-userInfo`,sx:[{flex:1},$],children:[t(g,{title:q,arrow:!0,placement:"bottom-start",children:t(o,{variant:"body1",className:`${L}-userName`,"data-testid":`${L}-userName`,noWrap:!0,children:q})}),t(g,{title:B.email,arrow:!0,placement:"bottom-start",children:t(o,{color:"text.secondary",variant:"caption",className:`${L}-email`,"data-testid":`${L}-email`,noWrap:!0,children:B.email})})]}),T&&t(M,{color:"info","data-testid":`${L}-manageLabel`,className:`${L}-manageLabel`,label:H("Admin")})]}),e(i,{tabIndex:0,className:`${L}-manageAccount`,"data-testid":`${L}-manageAccount`,onClick:()=>{D?.(),O?.()},sx:{pl:{xs:6,sm:8},pr:6,height:48,my:1,"& .MuiListItemIcon-root":{minWidth:56},[`& .${L}-manageAccountExternal`]:{display:"none"},"&:hover":{[`& .${L}-manageAccountExternal`]:{display:"flex"}}},children:[t(c,{children:t(u,{sx:e=>({color:"grey.600",...e.applyStyles("dark",{color:"grey.400"})})})}),t(o,{sx:{display:"flex",flex:1},variant:"body1",noWrap:!0,children:H("Manage account")}),"_blank"===E&&t(s,{className:`${L}-manageAccountExternal`,sx:e=>({color:"grey.600",...e.applyStyles("dark",{color:"grey.400"})})})]}),w.map((e=>a(e)?e:j(e,O))),w.length>0&&t(h,{variant:"fullWidth",sx:{my:2}}),W.length>0&&t(C,{items:W,onMenuItemClick:()=>{O?.()}}),e(i,{"data-testid":"signOut-btn",onClick:()=>{P(),O?.()},sx:{pl:{xs:6,sm:8},pr:6,my:1,height:48,"& .MuiListItemIcon-root":{minWidth:56}},children:[t(c,{children:t(p,{sx:e=>({color:"grey.600",...e.applyStyles("dark",{color:"grey.400"})})})}),t(d,{children:H("Sign out")})]})]}),t(n,{className:`${L}-version`,sx:[{height:56,pl:{xs:6,sm:8},pr:6,pt:2,mt:1,cursor:"default"}],children:t(o,{"data-testid":"versionTitle",variant:"caption",color:"text.secondary",noWrap:!0,children:S})})]}),z&&e(m,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,bgcolor:"background.paper"},alignItems:"center",justifyContent:"center","data-testid":`${L}-loading`,className:`${L}-loading`,children:[t(f,{size:40}),K&&t(o,{sx:{mt:4},variant:"body1",fontWeight:600,children:K})]})]})};export{j as accountMenuItem,S as default};