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