diff --git a/src/components/ResourceList/ResourceListDisplay.tsx b/src/components/ResourceList/ResourceListDisplay.tsx index 16efad9..9e5a752 100644 --- a/src/components/ResourceList/ResourceListDisplay.tsx +++ b/src/components/ResourceList/ResourceListDisplay.tsx @@ -17,41 +17,38 @@ import { ResourceLoader } from "./ResourceLoader"; import { ItemCardWrapper } from "./ItemCardWrapper"; import { Spacer } from "../../common/Spacer"; - - interface ResourceListStyles { - gap?: number - listLoadingHeight?: CSSProperties + gap?: number; + listLoadingHeight?: CSSProperties; } interface DefaultLoaderParams { - listLoadingText?: string - listNoResultsText?: string - listItemLoadingText?: string - listItemErrorText?: string + listLoadingText?: string; + listNoResultsText?: string; + listItemLoadingText?: string; + listItemErrorText?: string; } interface PropsResourceListDisplay { params: QortalSearchParams; listItem: (item: ListItem, index: number) => React.ReactNode; // Function type - styles?: ResourceListStyles + styles?: ResourceListStyles; loaderItem?: (status: "LOADING" | "ERROR") => React.ReactNode; // Function type - defaultLoaderParams?: DefaultLoaderParams + defaultLoaderParams?: DefaultLoaderParams; loaderList?: (status: "LOADING" | "NO_RESULTS") => React.ReactNode; // Function type + disableVirtualization?: boolean; } - - - export const ResourceListDisplay = ({ params, listItem, styles = { - gap: 1 + gap: 1, }, defaultLoaderParams, loaderItem, - loaderList + loaderList, + disableVirtualization, }: PropsResourceListDisplay) => { const [list, setList] = useState([]); const { fetchResources } = useResources(); @@ -77,10 +74,14 @@ export const ResourceListDisplay = ({ return ( @@ -92,16 +93,53 @@ export const ResourceListDisplay = ({ }} >
- - {(item: QortalMetadata, index: number) => ( - <> - {styles?.gap && } - - - {styles?.gap && } - - )} - + {!disableVirtualization && ( + + {(item: QortalMetadata, index: number) => ( + <> + {styles?.gap && } + + + {styles?.gap && } + + )} + + )} + {disableVirtualization && ( +
+ {list?.map((item, index) => { + return ( + + {styles?.gap && } + + + {styles?.gap && } + + ); + })} +
+ )}
@@ -113,7 +151,7 @@ interface ListItemWrapperProps { index: number; render: (item: ListItem, index: number) => React.ReactNode; defaultLoaderParams?: DefaultLoaderParams; - renderListItemLoader?:(status: "LOADING" | "ERROR")=> React.ReactNode; + renderListItemLoader?: (status: "LOADING" | "ERROR") => React.ReactNode; } const ListItemWrapper: React.FC = ({ @@ -121,7 +159,7 @@ const ListItemWrapper: React.FC = ({ index, render, defaultLoaderParams, - renderListItemLoader + renderListItemLoader, }) => { const getResourceCache = useCacheStore().getResourceCache; @@ -129,27 +167,37 @@ const ListItemWrapper: React.FC = ({ `${item.service}-${item.name}-${item.identifier}`, true ); - if (findCachedResource === null && !renderListItemLoader) - return ( - - - - ); - if (findCachedResource === false && !renderListItemLoader) - return ( - - - - ); - if(renderListItemLoader && (findCachedResource === false || findCachedResource === null)){ - return renderListItemLoader(findCachedResource === null ? "LOADING" : "ERROR") - } + if (findCachedResource === null && !renderListItemLoader) + return ( + + + + ); + if (findCachedResource === false && !renderListItemLoader) + return ( + + + + ); + if ( + renderListItemLoader && + (findCachedResource === false || findCachedResource === null) + ) { + return renderListItemLoader( + findCachedResource === null ? "LOADING" : "ERROR" + ); + } // Example transformation (Modify item if needed) const transformedItem = findCachedResource