@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) • 2.82 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"@mui/material/Box";import r from"@mui/material/Badge";import m from"@mui/material/Stack";import i from"@mui/material/Drawer";import n from"@mui/material/IconButton";import a from"@mui/icons-material/CommentOutlined";import l from"@mui/material/CircularProgress";import s from"@mui/material/ClickAwayListener";import c from"@mui/icons-material/FilterList";import d from"@mui/material/Divider";import{useTranslate as p}from"../../locales/index.js";import h from"../locale.json.js";import{EmptyState as C}from"../../EmptyState/EmptyState.container.js";import{CommentSearchBar as f}from"./components/CommentSearchBar.js";import{rootStyle as g}from"./CommentDrawer.styles.js";import{CommentVirtualizedList as u}from"./components/CommentVirtualizedList.js";import{CommentFieldContainer as x}from"../CommentField/CommentField.container.js";import{CommentThreadItem as y}from"../CommentThread/CommentThreadItem/CommentThreadItem.container.js";const j="NexusCommentDrawer",A=A=>{const{loading:T,currentUser:w,comments:S=[],selectedCommentId:b,onCommentClick:I,onCommentAdd:$,onReplyAdd:k,onCommentSearch:v,filterChanged:D,onFilterToggle:F,searchTerm:N,emptyStateProps:B,mode:L="plaintext",richTextConfig:R,sx:U,...z}=A,E=p(h),P=e=>{I&&I(e?.id)};return e(i,{"data-testid":`${j}-root`,className:`${j}-root`,...z,sx:[g,...Array.isArray(U)?U:[U]],children:[e(m,{direction:"row",alignItems:"center",justifyContent:"space-between",sx:{px:4,py:2},children:[t(f,{initialSearchTerm:N,onSearch:v,t:E}),t(n,{"data-testid":`${j}-filterIcon`,className:`${j}-filterIcon`,"aria-label":"Filter toggle",sx:{ml:2},onClick:F,children:t(r,{color:"primary",badgeContent:S.length,showZero:!0,invisible:!D,children:t(c,{})})})]}),t(d,{className:`${j}-divider`}),t(x,{author:w,onSave:$,sx:{px:5,py:4},mode:L,richTextConfig:R,placeholder:`${E("addAComment")}`}),S.length>0&&t(s,{onClickAway:()=>{b&&P(void 0)},children:S.length<=20?t(o,{sx:{overflowY:"auto"},children:S.map((({threadActions:e,threadCommentActions:o,...r})=>t(y,{comment:{...r,selected:r.id===b,highlight:N},expanded:r.id===b,currentUser:w,onReplyAdd:k,mode:L,richTextConfig:R,onClick:()=>{P(r)}},r.id)))}):t(m,{flex:1,children:t(u,{comments:S,currentUser:w,onSelectComment:P,selectedCommentId:b,searchTerm:N,onReplyAdd:k,mode:L,richTextConfig:R})})}),0===S.length&&t(C,{icon:t(a,{sx:{width:56,height:56,color:"grey.300"}}),header:E("noComments"),description:E("noCommentsDescriptions"),sx:{padding:"16px 24px"},size:"small",...B}),T&&t(m,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,bgcolor:e=>`rgba(${e.vars.palette.background.paperChannel} / 0.75)`},alignItems:"center",justifyContent:"center","data-testid":`${j}-loading`,className:`${j}-loading`,children:t(l,{})})]})};export{A as CommentDrawerComponent};