@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) • 3.5 kB
JavaScript
import{jsxs as t,Fragment as i,jsx as o}from"react/jsx-runtime";import{useState as e,useMemo as n}from"react";import a from"@mui/material/Box";import r from"@mui/material/IconButton";import s from"@mui/icons-material/MoreVert";import l from"@mui/material/Button";import m from"@mui/material/Typography";import c from"@mui/material/Stack";import d from"@mui/material/Divider";import p from"@mui/material/Menu";import u from"@mui/material/MenuItem";import f from"@mui/material/Avatar";import h from"lodash/uniqueId";import{styles as x,NotificationBadge as b}from"./NotificationItem.styles.js";import y from"../../../ComplexCard/hooks/useMenu.js";import{getStatusIcon as g}from"./NotificationIcon.js";import{useTimeFormat as $}from"../../../util/time/useTimeFormat.js";import{StatusAvatar as C}from"../../../StatusAvatar/StatusAvatar.container.js";const v="NexusNotificationContent",N=N=>{const[k]=e((()=>h(`${v}-`))),{notification:w,onItemClick:A,isNested:M,nestedNode:I,showNestedLine:j}=N,{anchorEl:D,open:B,handleOpen:P,handleClose:T}=y(),{fromNowFormat:S}=$(),z=t=>t.stopPropagation(),E=w.menuActions&&w.menuActions?.length>0&&t(i,{children:[o(r,{id:k,onClick:P,onMouseDown:z,className:`${v}-menuButton`,"data-testid":`${v}-menuButton`,"aria-label":"More action",children:o(s,{})}),o(p,{className:`${v}-actionMenu`,"data-testid":`${v}-actionMenu`,onMouseDown:z,MenuListProps:{disablePadding:!0,"aria-labelledby":k},anchorEl:D,open:B,onClose:T,children:w.menuActions.map(((t,i)=>{const{label:e,onClick:n}=t;return o(u,{"data-testid":`${v}-action-${e}`,sx:{textTransform:"capitalize"},onClick:t=>{n(w),t.stopPropagation(),T(t)},...t.props,children:e},`${v}-action-${e}`)}))})]}),F=w.buttonActions&&w.buttonActions?.length>0&&o(c,{spacing:2,direction:"row",justifyContent:"flex-end",sx:{pb:M&&!I?4:0},children:w.buttonActions.map((t=>o(l,{color:"primary",size:"small",sx:{textTransform:"capitalize"},"data-testid":`${v}-action-${t.label}`,onClick:i=>{i.stopPropagation(),t.onClick(w)},...t.props,children:t.label},`${v}-action-${t.label}`)))}),L=n((()=>`${w.productName} · ${S(new Date(w.createTime))}`),[S,w.createTime,w.productName]),W=n((()=>g(w.status)),[w.status]);return t(a,{sx:[{"& .NexusNotificationContent-menuButton":{visibility:B?"visible":"hidden"}},x.contentContainer,{minHeight:j?136:void 0}],className:`${v}-root`,"data-testid":`${v}-root`,onClick:t=>{A(w),t.stopPropagation()},children:[o(b,{style:{visibility:w.unread?"visible":"hidden"},"data-testid":`${v}-badge`}),t(a,{display:"flex",flexDirection:"column",alignItems:"center",sx:{mr:4,width:j?40:void 0,cursor:"default"},children:[w.user&&o(C,{...w.user,status:void 0,sx:{mb:j?4:0,width:40,height:40}}),!w.user&&o(f,{className:`${v}-system-avatar`,sx:t=>({mb:j?4:0,width:40,height:40,backgroundColor:"grey.50",...t.applyStyles("dark",{backgroundColor:"grey.700"})}),children:W}),j&&o(d,{"data-testid":`${v}-nested-line`,flexItem:!0,orientation:"vertical",sx:{flex:1,alignSelf:"center"}})]}),t(c,{sx:x.content,spacing:4,children:[t(a,{sx:x.notificationContent,children:[o(a,{sx:{display:"flex",flexDirection:"row",mr:2,flex:1,overflow:"hidden"},children:t(a,{display:"flex",flexDirection:"column",sx:{width:"100%",textAlign:"start"},children:[o(m,{component:"span",variant:"body2",color:"text.primary",display:"block",noWrap:!1,children:w.title}),o(m,{component:"span",variant:"caption",color:"text.secondary",display:"block",noWrap:!0,sx:{mt:1},children:L})]})}),E]}),F,I]})]})};export{N as NotificationContent,v as prefix};