@nexusui/components/cjs/core/Comments/CommentDrawer/CommentDrawer.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.

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