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