@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
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useMemo as i,useState as e,createElement as r}from"react";import n from"@mui/material/Typography";import a from"@mui/material/Box";import s from"@mui/material/Stack";import{styles as d}from"./NotificationItem.styles.js";import{NotificationContent as m}from"./NotificationContent.js";import{StyledAvatarGroup as c}from"./StyledAvatarGroup.js";import{StatusAvatar as p}from"../../../StatusAvatar/StatusAvatar.container.js";const l="NexusNotificationItem",f=f=>{const{notification:N,onItemClick:h,t:u}=f,x=i((()=>N.nestedNotifications?.length||0),[N.nestedNotifications?.length]),y=x>0,g=x>0?x-1:0,[v,C]=e(!1),k=N.nestedNotifications?N.nestedNotifications?.map((t=>t.user)).filter((t=>void 0!==t)):[],j=x>0&&!v&&t(s,{"data-testid":`${l}-expand-node`,spacing:2,direction:"row",justifyContent:"flex-start",alignItems:"center",sx:{pr:6,cursor:"pointer"},onClick:t=>{t.stopPropagation(),C(!0)},children:[k.length>0&&o(c,{max:2,sx:d.moreAvatars,children:k.map((t=>r(p,{...t,key:t.id,status:void 0,sx:{width:40,height:40}})))}),o(n,{variant:"body2",color:"primary",noWrap:!0,sx:{display:"block"},children:u("showMore",{0:x})})]}),w=v&&o(n,{"data-testid":`${l}-read-more`,variant:"body2",color:"primary",sx:{cursor:"pointer"},onClick:t=>{t.stopPropagation(),C((t=>!t))},children:u("showLess")});return t(a,{sx:d.container,className:`${l}-root`,"data-testid":`${l}-root`,children:[o(m,{...f,nestedNode:j,showNestedLine:v},`NexusNotificationContent-root-${N.id}`),v&&y&&N.nestedNotifications?.map(((t,i)=>o(m,{notification:t,onItemClick:h,t:u,isNested:v,showNestedLine:!0,nestedNode:i===g?w:void 0},`NexusNotificationContent-nested-${t.id}`)))]})};export{f as NotificationItem,l as prefix};