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