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