@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.52 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Box"),i=require("react-window"),n=require("react-virtualized-auto-sizer"),o=require("../../../util/hooks/useRowChanged.js"),s=require("../../CommentThread/CommentThreadItem/CommentThreadItem.container.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=d(r),u=d(n);const c="NexusCommentVirtualizedList";exports.CommentVirtualizedList=r=>{const{comments:n,currentUser:d,onSelectComment:m,selectedCommentId:l,searchTerm:h,onReplyAdd:f,mode:x,richTextConfig:C}=r,g=t.useRef({}),R=t.useRef(null),j=e=>g.current[e]||300,w=t.useCallback(((e,t)=>{if(g.current&&g.current[e]!==t&&(g.current={...g.current,[e]:t},R?.current?.resetAfterIndex)){const t=Math.max(0,e-1);R.current.resetAfterIndex(t)}}),[]),y=({index:t,style:r})=>{const i=n[t],{threadActions:u,threadCommentActions:g,...R}=i,{rowRef:j,calculateRowHeight:y}=o.useRowChanged({index:t,setRowHeight:w,delay:50});return delete r.height,e.jsx(a.default,{ref:j,style:r,className:`${c}-item`,children:e.jsx(s.CommentThreadItem,{comment:{...R,selected:i.id===l,highlight:h,onLayoutChange:y},expanded:i.id===l,currentUser:d,onReplyAdd:f,mode:x,richTextConfig:C,onClick:()=>{m(i)},onReplyEditing:y})},i.id)};return e.jsx(u.default,{children:({height:t,width:r})=>e.jsx(i.VariableSizeList,{ref:R,className:`${c}-list`,height:t,itemCount:n.length,estimatedItemSize:300,itemSize:j,width:r,children:y})})};