@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.13 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Stack"),r=require("@mui/material/Badge"),i=require("@mui/material/IconButton"),o=require("@mui/material/Menu"),n=require("@mui/material/MenuItem"),s=require("@mui/material/Tooltip"),l=require("@mui/material/Typography"),u=require("@mui/icons-material/MoreHoriz"),d=require("@mui/icons-material/CheckCircle"),c=require("@mui/icons-material/CheckCircleOutline"),m=require("./CommentCard.styles.js"),x=require("../../util/time/useTimeFormat.js"),p=require("../../AudienceGroup/AudienceGroup.container.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=f(a),j=f(r),v=f(i),g=f(o),C=f(n),q=f(s),$=f(l),b=f(u),M=f(d),w=f(c);const y="NexusCommentCardHeader";exports.CommentCardHeader=a=>{const{id:r,author:i,unread:o,editing:n,uniqueParticipants:s=[],statusMapping:l,shouldStackDate:u,hovering:d,hasActions:c,canResolve:f,resolved:N,dateModified:k,disableHover:A,actions:B=[],onResolved:P=()=>{},onUnresolved:T=()=>{},t:F}=a,{fromNowFormat:H,fullTimeFormat:I}=x.useTimeFormat(),[S,G]=t.useState(null),R=Boolean(S),W=e=>{e.stopPropagation(),G(null)},z=t.useMemo((()=>F(N?"markUnresolved":"Resolve")),[N,F]),O=t.useMemo((()=>u?I(k):H(k)),[k,H,I,u]);return e.jsxs(h.default,{direction:"row",sx:{alignItems:"center",mb:4,minHeight:40},children:[e.jsx(j.default,{invisible:!o,variant:"dot",color:"info",sx:m.styles.badge,children:e.jsx(p.AudienceGroupContainer,{size:"large",max:2,users:[i,...n?[]:s],statusMapping:l})}),e.jsxs(h.default,{direction:u?"column":"row",justifyContent:u?"center":"space-between",alignItems:"flex-start",sx:{flex:"1 1 0px",ml:4},children:[e.jsx(q.default,{title:`${i.firstName} ${i.lastName}`,arrow:!0,children:e.jsx($.default,{className:`${y}-userName`,maxWidth:164,noWrap:!0,variant:"body2",fontWeight:700,children:`${i.firstName} ${i.lastName}`})}),(u||!d||!(c||f))&&e.jsx(q.default,{title:O,arrow:!0,children:e.jsx($.default,{variant:"caption",sx:{color:"text.secondary",whiteSpace:"nowrap"},children:O})})]}),c&&(d||A)&&e.jsxs(e.Fragment,{children:[e.jsx(q.default,{title:F("moreActions"),arrow:!0,children:e.jsx(v.default,{id:`${y}-moreAction-${r}`,"data-testid":"action-menu",sx:{ml:f?0:2},onClick:e=>{e.stopPropagation(),G(e.currentTarget)},"aria-label":F("moreActions"),children:e.jsx(b.default,{})})}),e.jsx(g.default,{className:`${y}-actionMenu`,"data-testid":`${y}-actionMenu`,open:R,anchorEl:S,onClose:W,MenuListProps:{"aria-labelledby":`${y}-moreAction-${r}`},children:B.map((t=>e.jsx(C.default,{"data-testid":`action-${t.id}`,onClick:e=>{e.stopPropagation(),t.onClick(e),W(e)},children:t.label},t.id)))})]}),f&&(d||A||N)&&e.jsx(q.default,{title:z,arrow:!0,children:e.jsx(v.default,{sx:{ml:2,color:N?"success.main":void 0},onClick:e=>{e.stopPropagation(),N?T(e,r):P(e,r)},className:N?`${y}-resolveButton`:`${y}-unresolvedButton`,"data-testid":N?`${y}-resolveButton`:`${y}-unresolvedButton`,"aria-label":z,children:N?e.jsx(M.default,{"data-testid":"resolved-icon"}):e.jsx(w.default,{"data-testid":"unresolved-icon"})})})]})};