@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.22 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),t=require("@mui/material/Popper"),o=require("@mui/material/useMediaQuery"),n=require("@mui/material/ClickAwayListener"),r=require("@mui/material/Box"),a=require("@mui/material/List"),s=require("@mui/material/Slide"),l=require("@mui/material/Paper"),c=require("@mui/icons-material/NotificationsOff"),d=require("./NotificationsPanel.styles.js"),u=require("./components/NotificationsHeader/NotificationsHeader.js"),f=require("./hooks/useGroupedNotifications.js"),p=require("../locales/index.js"),m=require("./locale.json.js"),j=require("./components/NotificationItem/NotificationSkeleton.js"),x=require("./components/NotificationItem/NotificationSectionHeader.js"),h=require("./components/NotificationItem/NotificationItem.js"),N=require("../EmptyState/EmptyState.container.js");function y(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var q=y(t),S=y(o),$=y(n),k=y(r),g=y(a),C=y(s),A=y(l),b=y(c);const O="NexusNotificationsPanel";exports.NotificationsPanelComponent=t=>{const{loading:o=!1,notifications:n,onlyShowUnread:r,onClose:a,onMarkAllAsRead:s,onItemClick:l,onOnlyShowUnread:c,filterOptions:y=[],selectedFilterOptions:w,onFilterChanged:I,onClickSetting:P,...F}=t,H=p.useTranslate(m.default),M=S.default((e=>e.breakpoints.down("sm"))),E=F.open&&Boolean(F.anchorEl)?`${O}-popper`:void 0,{groupedNotifications:v}=f.useGroupedNotifications(n,H),R=!n||0===n.length,U=!!R&&(w&&w?.length>0||r),B=e.jsxs(e.Fragment,{children:[e.jsx(j.NotificationHeaderSkeleton,{}),Array.from(new Array(M?7:6).keys()).map((i=>e.jsx(j.NotificationContentSkeleton,{},i)))]}),D=Object.keys(v).map((i=>e.jsx("li",{children:e.jsxs("ul",{children:[e.jsx(x.NotificationSectionHeader,{title:i}),v[i].map((t=>e.jsx("li",{children:e.jsx(h.NotificationItem,{notification:t,onItemClick:l,t:H},`${O}-item-${i}-${t.id}`)},`${O}-li-${i}-${t.id}`)))]})},`${O}-section-${i}`))),G=i.useMemo((()=>0===n.filter((e=>!0===e.unread)).length),[n]);return e.jsx(q.default,{id:E,transition:!0,disablePortal:!0,...F,className:`${O}-root`,"data-testid":`${O}-root`,anchorEl:M?null:F.anchorEl,sx:d.styles.popper,children:({TransitionProps:i})=>e.jsx(C.default,{...i,direction:"up",timeout:M?250:0,children:e.jsx("div",{children:e.jsx($.default,{onClickAway:a,children:e.jsxs(A.default,{sx:d.styles.paper,className:`${O}-paper`,"data-testid":`${O}-paper`,children:[e.jsx(u.NotificationsHeader,{disabled:R||o,disableMarkAllAsRead:G,onlyShowUnread:r,isMobile:M,onClose:a,onOnlyShowUnreadChange:c,onMarkAllAsRead:s,filterOptions:y,selectedFilterOptions:w,onFilterChanged:I,onClickSetting:P,t:H}),!o&&R&&e.jsx(k.default,{sx:{height:"100%",p:6,minHeight:590,display:"flex",alignItems:"center"},children:e.jsx(N.EmptyState,{icon:e.jsx(b.default,{sx:{color:"grey.300",fontSize:72}}),header:H(U?"noFilterNotifications":"noNotifications"),description:H(U?"noFilterNotificationsDescription":"noNotificationsDescription"),className:`${O}-noSearchResult`,"data-testid":`${O}-noSearchResult`})}),e.jsx(g.default,{sx:d.styles.list,subheader:e.jsx("li",{}),className:`${O}-list`,"data-testid":`${O}-list`,children:o?B:D})]})})})})})},exports.prefix=O;