@nexusui/components/core/EventLog/EventLog.component.js

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.

import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as i,useCallback as r}from"react";import{VariableSizeList as n}from"react-window";import o from"react-window-infinite-loader";import a from"react-virtualized-auto-sizer";import{useTheme as l}from"@mui/material/styles";import s from"@mui/material/Box";import m from"@mui/material/Stack";import h from"@mui/material/TablePagination";import g from"@mui/material/CircularProgress";import d from"@mui/material/useMediaQuery";import c from"clsx";import{EventItem as p}from"./components/EventItem.js";import f from"./components/NoEvents.js";import u,{paginationStyle as w}from"./EventLog.styles.js";import x from"./components/EventFilter.js";import{useRowChanged as v}from"../util/hooks/useRowChanged.js";const P="NexusEventLog",C=C=>{const{infiniteLoad:I,loading:N,total:z,events:R,page:L,pageSize:$,filter:y,filterOptions:S,onPageChange:b,onPageSizeChange:j,onFilterChange:k,hasNextPage:E,loadMoreItems:A,itemHeight:F,sx:M,paginationProps:D,ItemComponent:H=p,FilterComponent:O=x,t:B,...Q}=C,T=e=>!E||e<R.length,W=i(null),q=i({}),G=l(),J=d(G.breakpoints.down(350)),K=e=>q.current[e]||F,U=r(((e,t)=>{W?.current?.resetAfterIndex&&W.current.resetAfterIndex(0),q.current={...q.current,[e]:t}}),[]),V=({index:e,style:i})=>{const{rowRef:r}=v({index:e,setRowHeight:U});let n;return delete i.height,n=T(e)?t(H,{...R[e],isMinWidth:J}):B("Loading"),t(s,{ref:r,style:i,className:c(`${P}-item`,"event-log-item"),children:n})};return e(m,{className:`${P}-root`,sx:[u.eventList,...Array.isArray(M)?M:[M]],...Q,children:[S&&t(O,{filter:y,t:B,filterOptions:S,onFilterChange:k}),I&&t(s,{sx:{height:"100%"},children:t(a,{children:({height:e,width:i})=>0===L&&N?t(s,{className:c(`${P}-loading`,"event-log-loading"),sx:{height:e,width:i},children:t(g,{size:104,thickness:2,"aria-label":"Loading indicator"})}):0===R.length?t(s,{className:c(`${P}-loading`,"event-log-loading"),sx:{height:e,width:i},children:t(f,{t:B})}):t(o,{isItemLoaded:T,itemCount:E?R.length+1:R.length,loadMoreItems:A,children:({onItemsRendered:r,ref:o})=>t(n,{ref:e=>{o?.(e),W.current=e},className:c(`${P}-list`,"event-log-list"),itemData:R,height:e,itemCount:E?R.length+1:R.length,itemSize:K,estimatedItemSize:F,onItemsRendered:r,width:i,children:V})})})}),!I&&t(s,{sx:{height:"100%"},children:t(a,{children:({height:i,width:r})=>e(m,{children:[N&&t(s,{className:c(`${P}-loading`,"event-log-loading"),sx:{height:i-48,width:r},children:t(g,{size:104,thickness:2,"aria-label":"Loading indicator"})}),!N&&0===R.length&&t(s,{className:c(`${P}-loading`,"event-log-loading"),sx:{height:i-48,width:r},children:t(f,{t:B})}),!N&&R.length>0&&t(n,{ref:W,className:c(`${P}-list`,"event-log-list"),itemData:R,height:i-48,itemCount:R.length,itemSize:K,estimatedItemSize:F,width:r,children:V}),t(h,{...D,labelRowsPerPage:J?B("Rows:"):D?.labelRowsPerPage,sx:{...w(r),...D?.sx},component:"div",count:z,page:L,rowsPerPage:$,onPageChange:b,onRowsPerPageChange:j})]})})})]})};export{C as EventLogComponent};