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