@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.46 kB
JavaScript
import{jsx as e,jsxs as o,Fragment as r}from"react/jsx-runtime";import{useState as t,useRef as i,useEffect as l}from"react";import n from"@mui/material/Box";import a from"@mui/material/Card";import m from"@mui/material/CardContent";import s from"@mui/material/ClickAwayListener";import c from"@mui/material/Divider";import d from"@mui/material/IconButton";import p from"@mui/material/Menu";import u from"@mui/material/MenuItem";import f from"@mui/material/Stack";import h from"@mui/icons-material/CheckCircle";import C from"@mui/icons-material/CheckCircleOutline";import v from"@mui/icons-material/Clear";import x from"@mui/icons-material/MoreHoriz";import g from"@mui/material/Tooltip";import{StyledPopper as b,StyledArrow as k}from"../../common/Popper/StyledPopper.js";import w from"../locale.json.js";import{useTranslate as T}from"../../locales/index.js";import{CommentThreadItem as y}from"./CommentThreadItem/CommentThreadItem.container.js";const I="NexusCommentThread",N=N=>{const{comment:P,currentUser:j,replies:A,onClose:M,onCommentAdd:U,threadActions:R=[],mode:S="plaintext",richTextConfig:z,...$}=N,[B,H]=t(null),D=T(w),E=R.length>0,L=i(),O=i(0),[F,W]=t(null),Y=Boolean(F),q=e=>{e.stopPropagation(),W(null)};return l((()=>{L.current&&((0===O.current||O.current<A.length)&&setTimeout((()=>{L.current?.scrollToEnd?.()}),300),O.current=A.length)}),[L,A.length]),e(b,{"data-testid":`${I}-root`,disablePortal:!0,placement:"auto",modifiers:[{name:"arrow",enabled:!0,options:{element:B}},{name:"preventOverflow",enabled:!0}],...$,children:e(s,{onClickAway:M,children:o(n,{sx:{position:"relative",overflow:"visible"},children:[e(k,{ref:H,className:"MuiPopper-arrow"}),o(a,{sx:{maxWidth:370,display:"flex",flexDirection:"column"},children:[o(f,{justifyContent:"end",direction:"row",alignItems:"center",sx:{flex:0,px:3.5,py:2},children:[E&&o(r,{children:[e(g,{title:D("moreActions"),arrow:!0,children:e(d,{"data-testid":"action-menu",onClick:e=>{e.stopPropagation(),W(e.currentTarget)},"aria-label":D("moreActions"),children:e(x,{fontSize:"small"})})}),e(p,{"data-testid":`${I}-actionMenu`,className:`${I}-actionMenu`,open:Y,anchorEl:F,onClose:q,children:R.map((o=>e(u,{"data-testid":`action-${o.id}`,className:`${I}-actionMenuItem`,onClick:e=>{e.stopPropagation(),o.onClick(e),q(e)},children:o.label},o.id)))})]}),e(g,{title:P.resolved?D("markUnresolved"):D("Resolve"),arrow:!0,children:e(d,{edge:"start","data-testid":"resolveUnresolveButton",sx:{m:0,color:P.resolved?"success.main":void 0},onClick:e=>{e.stopPropagation(),P.resolved?P.onUnresolved&&P?.onUnresolved(e,P.id):P.onResolved&&P?.onResolved(e,P.id)},"aria-label":P.resolved?D("markUnresolved"):D("Resolve"),children:P.resolved?e(h,{"data-testid":"resolved-icon",fontSize:"small"}):e(C,{"data-testid":"unresolved-icon",fontSize:"small"})})}),e(d,{"data-testid":"clear-button",onClick:M,"aria-label":"Close",children:e(v,{fontSize:"small"})})]}),e(c,{}),e(m,{sx:{p:0,flex:1,overflow:"auto",":last-child":{pb:0}},children:e(y,{ref:L,comment:{...P,canResolve:!1,disableHover:!1,selected:!0,replies:A||[]},expanded:!0,currentUser:j,onReplyAdd:(e,o,r,t,i)=>U(o,r,t,i),sx:{bgcolor:"background.paper","& .NexusCommentCard-root.NexusCommentCard-active":{bgcolor:"background.paper"},"& .NexusCommentThreadItem-commentList":{maxHeight:"65vh",overflowY:"auto"},"& .NexusCommentThreadItem-replyField":{bgcolor:"inherit"}},mode:S,richTextConfig:z,onClick:(e,o)=>{}})})]})]})})})};export{N as CommentThreadComponent};