@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.69 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/Stack"),a=require("@mui/material/Drawer"),i=require("@mui/icons-material/ArrowBack"),n=require("@mui/material/Divider"),l=require("@mui/material/Button"),s=require("@mui/material/IconButton"),d=require("@mui/icons-material/MoreHoriz"),u=require("@mui/material/Tooltip"),c=require("@mui/icons-material/CheckCircle"),m=require("@mui/icons-material/CheckCircleOutline"),x=require("@mui/material/Menu"),h=require("@mui/material/MenuItem"),f=require("../locale.json.js"),p=require("../../locales/index.js"),C=require("./CommentDrawer.styles.js"),v=require("../CommentThread/CommentThreadItem/CommentThreadItem.container.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=j(t),b=j(o),k=j(a),q=j(i),T=j(n),A=j(l),$=j(s),y=j(d),w=j(u),R=j(c),B=j(m),I=j(x),M=j(h);const N="NexusCommentDrawer";exports.CommentReplyDrawerComponent=t=>{const{currentUser:o,comment:a,onCommentClick:i,onReplyAdd:n,mode:l="plaintext",richTextConfig:s,searchTerm:d,sx:u,...c}=t,m=p.useTranslate(f.default),{threadActions:x=[],threadCommentActions:h=a.actions,...j}=a,P=x.length>0,U=r.useRef(),D=r.useRef(0),E=j.replies?.length||0,[S,F]=r.useState(null),H=Boolean(S),L=e=>{e.stopPropagation(),F(null)};return r.useEffect((()=>{U.current&&((0===D.current||D.current<E)&&setTimeout((()=>{U.current?.scrollToEnd?.()}),300),D.current=E)}),[U,E]),e.jsxs(k.default,{"data-testid":`${N}-root`,className:`${N}-root`,...c,sx:[C.rootStyle,...Array.isArray(u)?u:[u]],children:[e.jsxs(b.default,{direction:"row",alignItems:"center",justifyContent:"space-between",sx:{px:4,py:2},children:[e.jsx(A.default,{"data-testid":`${N}-backButton`,onClick:()=>{i(void 0)},sx:{fontWeight:700},startIcon:e.jsx(q.default,{}),"aria-label":m("Back"),children:m("Back")}),e.jsxs(b.default,{direction:"row",children:[P&&e.jsxs(e.Fragment,{children:[e.jsx(w.default,{title:m("moreActions"),arrow:!0,children:e.jsx($.default,{id:`${N}-moreThreadAction-${j.id}`,"data-testid":`${N}-threadMoreActions`,onClick:e=>{e.stopPropagation(),F(e.currentTarget)},"aria-label":m("moreActions"),children:e.jsx(y.default,{})})}),e.jsx(I.default,{className:`${N}-threadActionMenu`,"data-testid":`${N}-threadActionMenu`,open:H,anchorEl:S,onClose:L,MenuListProps:{"aria-labelledby":`${N}-moreThreadAction-${j.id}`},children:x.map((r=>e.jsx(M.default,{"data-testid":`action-${r.id}`,onClick:e=>{e.stopPropagation(),r.onClick(e),L(e)},children:r.label},r.id)))})]}),j.canResolve&&e.jsx(w.default,{title:j.resolved?m("markUnresolved"):m("Resolve"),arrow:!0,children:e.jsx($.default,{edge:"start","data-testid":j.resolved?`${N}-resolvedButton`:`${N}-unresolvedButton`,sx:{m:0,color:j.resolved?"success.main":void 0},onClick:e=>{e.stopPropagation(),j.resolved?j.onUnresolved&&j?.onUnresolved(e,j.id):j.onResolved&&j?.onResolved(e,j.id)},"aria-label":j.resolved?m("markUnresolved"):m("Resolve"),children:j.resolved?e.jsx(R.default,{}):e.jsx(B.default,{})})})]})]}),e.jsx(T.default,{className:`${N}-divider`}),j&&e.jsx(g.default,{sx:{overflowY:"auto",bgcolor:"background.default",height:1},children:e.jsx(v.CommentThreadItem,{ref:U,comment:{...j,actions:h,disableHover:!0,canResolve:!1,highlight:d,selected:!0},expanded:!0,currentUser:o,onReplyAdd:n,sx:{bgcolor:"background.default","& .NexusCommentThreadItem-commentList":{pb:30},"& .NexusCommentCard-root.NexusCommentCard-active":{bgcolor:"background.default"},"& .NexusCommentThreadItem-replyField":{position:"absolute",bottom:0,bgcolor:"background.paper"}},mode:l,richTextConfig:s,onClick:()=>{}},j.id)})]})};