@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) • 1.93 kB
JavaScript
import{jsxs as e,jsx as o}from"react/jsx-runtime";import{forwardRef as r,useState as i,useRef as t,useImperativeHandle as n}from"react";import a from"@mui/material/Box";import l from"@mui/material/Stack";import{useTranslate as d}from"../../../locales/index.js";import m from"../../locale.json.js";import{CommentCardContainer as s}from"../../CommentCard/CommentCard.container.js";import{CommentFieldContainer as c}from"../../CommentField/CommentField.container.js";const p="NexusCommentThreadItem",h=r(((r,h)=>{const{currentUser:C,expanded:g,comment:x,onReplyAdd:f,onClick:u,mode:v,richTextConfig:y,onReplyEditing:b,...k}=r,j=x.replies?x.replies.length:0,R=g&&j>0,[T,$]=i(""),F=d(m),N=t();return n(h,(()=>({scrollToEnd(){N.current&&N.current.scrollIntoView({behavior:"smooth"})}})),[]),e(a,{"data-testid":`${p}-root`,className:`${p}-root`,onClick:x.editing?void 0:()=>u?.(x),ref:h,...k,children:[e(l,{className:`${p}-commentList`,children:[e(a,{children:[o(s,{...x,canResolve:x.canResolve??!0,replies:g?0:j,participants:g?[]:x.participants,disableHover:!!x.selected,mode:v,richTextConfig:y,sx:{backgroundColor:"inherit","& .MuiCardContent-root":{padding:e=>e.spacing(4,5,g?3:5,5)}}},x.id),R&&x?.replies?.map((e=>o(s,{...e,sx:{backgroundColor:"inherit","& .MuiCardContent-root":{padding:e=>e.spacing(4,5)}},canResolve:!1,disableHover:!0,mode:v,richTextConfig:y,highlight:x.highlight,onSelected:(o,r)=>{r.stopPropagation(),u(x,e)},selected:!0},e.id)))]}),o(a,{ref:N})]}),(g||T)&&o(a,{"data-testid":`${p}-replyField`,className:`${p}-replyField`,sx:{width:"100%",display:g?"normal":"none",backgroundColor:g&&0===j?e=>`rgba(${e.vars.palette.primary.mainChannel} / 0.04)`:"inherit"},onClick:e=>e.stopPropagation(),children:o(c,{author:C,onSave:(e,o,r,i)=>f(x.id,e,o,r,i),onCommentChange:(e,o,r,i)=>{$(e),b?.(x.id,e,o,r,i)},sx:{px:5,py:4},mode:v,richTextConfig:y,placeholder:F("Reply")})})]},x.id)}));export{h as CommentThreadItem};