@nexusui/components/cjs/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.

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