@nexusui/components/core/NotificationsPanel/NotificationsPanel.component.js

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.

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