@nexusui/components/core/VirtualizedCardList/VirtualizedCardList.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{jsx as e}from"react/jsx-runtime";import{useRef as t,useMemo as r,useCallback as i,useEffect as o}from"react";import a from"@mui/material/Stack";import n from"react-window-infinite-loader";import s from"@mui/material/Box";import l from"@mui/material/CircularProgress";import{VariableSizeList as m}from"react-window";import d from"@mui/material/Grid2";import c from"@mui/material/useMediaQuery";import{useTheme as h}from"@mui/material/styles";import{styles as u}from"./VirtualizedCardList.styles.js";import{useRowChanged as p}from"../util/hooks/useRowChanged.js";import f from"./locale.json.js";import{useTranslate as g}from"../locales/index.js";import{EmptyState as x}from"../EmptyState/EmptyState.container.js";const w="NexusVirtualizedCardList",y=y=>{const{data:I=[],total:N,emptyState:C,loadingState:S,loading:$=!1,hasNextPage:k,page:j,cardWidth:z=312,loadMoreItems:M,sx:R,width:b,height:L,renderCard:A,cardsPerRow:P,selectedCardId:E,...V}=y,B=g(f),G=t({}),H=h(),Q=c(H.breakpoints.down("sm")),T=c(H.breakpoints.only("sm")),W=c(H.breakpoints.only("md")),q=c(H.breakpoints.only("lg")),v=c(H.breakpoints.up("xl")),D=t(null),F=t(!1),J=e=>G.current[e]||300,K=r((()=>{let e;if(P){const{xs:t,sm:r,md:i,lg:o,xl:a}=P;Q?e=t:T?e=r:W?e=i:q?e=o:v&&(e=a)}else{const t=Math.floor(b/z),r=16;e=Math.floor((b-t*r)/z)||1}return e}),[z,P,q,W,Q,T,v,b]),O=r((()=>{const e=[];for(let t=0;t<I.length;t+=K)e.push(I.slice(t,t+K));return e}),[K,I]),U=Math.ceil(N/K),X=e=>!k||e<O.length,Y=i(((e,t)=>{D?.current?.resetAfterIndex&&D.current.resetAfterIndex(0),G.current={...G.current,[e]:t}}),[]);o((()=>{if(I.length&&E&&D.current){if(F.current)return;const e=I.findIndex((e=>e.id===E));if(-1!==e){const t=Math.floor(e/K);D.current.scrollToItem(t,"center")}F.current=!0}}),[E,I,K]);const Z=({index:t,style:r})=>{const{rowRef:i}=p({index:t,setRowHeight:Y});let o;return delete r.height,o=X(t)?(t=>e(d,{className:`${w}-rowContainer`,container:!0,rowSpacing:4,columnSpacing:4,children:O[t]?.map(((t,r)=>e(d,{className:`${w}-rowItem`,size:12/K,"data-index":r,children:A(t)},t.id)))}))(t):B("Loading"),e(s,{ref:i,style:r,className:`${w}-Row`,children:o})};return e(a,{sx:[{width:1,height:1,m:"0 auto"},...Array.isArray(R)?R:[R]],className:`${w}-root`,...V,children:e(s,{sx:{height:1},children:0===j&&$?e(s,{sx:{height:L,width:b,...u.loading},children:S??e(l,{className:`${w}-loading`,"data-testid":`${w}-loading`,size:104,thickness:2,"aria-label":"Loading elements"})}):0===O.length?e(s,{className:`${w}-empty`,sx:{height:L,width:b,...u.loading},children:C||e(x,{className:`${w}-empty`,size:"small",header:B("No data")})}):e(n,{isItemLoaded:X,itemCount:k?U+1:U,loadMoreItems:M,children:({onItemsRendered:t,ref:r})=>e(m,{ref:e=>{r?.(e),D.current=e},className:`${w}-list`,height:L,itemCount:k?U+1:U,itemSize:J,estimatedItemSize:300,onItemsRendered:t,width:b,children:Z})})})})};export{y as VirtualizedCardListComponent,w as prefix};