Qortal/qapp-core
1
0
Fork 0
mirror of https://github.com/Qortal/qapp-core.git synced 2025-06-15 01:41:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

option to disable virtualization

Browse Source
This commit is contained in:
PhilReact 2025-03-12 08:56:45 +02:00
parent e4b781c41f
commit 8539b54257
1 changed files with 98 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/ResourceList/ResourceListDisplay.tsx
View File

@ -17,41 +17,38 @@ import { ResourceLoader } from "./ResourceLoader";
import { ItemCardWrapper } from "./ItemCardWrapper"; import { ItemCardWrapper } from "./ItemCardWrapper";
import { Spacer } from "../../common/Spacer"; import { Spacer } from "../../common/Spacer";
interface ResourceListStyles { interface ResourceListStyles {
gap?: number gap?: number;
listLoadingHeight?: CSSProperties listLoadingHeight?: CSSProperties;
} }
interface DefaultLoaderParams { interface DefaultLoaderParams {
listLoadingText?: string listLoadingText?: string;
listNoResultsText?: string listNoResultsText?: string;
listItemLoadingText?: string listItemLoadingText?: string;
listItemErrorText?: string listItemErrorText?: string;
} }
interface PropsResourceListDisplay { interface PropsResourceListDisplay {
params: QortalSearchParams; params: QortalSearchParams;
listItem: (item: ListItem, index: number) => React.ReactNode; // Function type listItem: (item: ListItem, index: number) => React.ReactNode; // Function type
styles?: ResourceListStyles styles?: ResourceListStyles;
loaderItem?: (status: "LOADING" | "ERROR") => React.ReactNode; // Function type loaderItem?: (status: "LOADING" | "ERROR") => React.ReactNode; // Function type
defaultLoaderParams?: DefaultLoaderParams defaultLoaderParams?: DefaultLoaderParams;
loaderList?: (status: "LOADING" | "NO_RESULTS") => React.ReactNode; // Function type loaderList?: (status: "LOADING" | "NO_RESULTS") => React.ReactNode; // Function type
disableVirtualization?: boolean;
} }
export const ResourceListDisplay = ({ export const ResourceListDisplay = ({
params, params,
listItem, listItem,
styles = { styles = {
gap: 1 gap: 1,
}, },
defaultLoaderParams, defaultLoaderParams,
loaderItem, loaderItem,
loaderList loaderList,
disableVirtualization,
}: PropsResourceListDisplay) => { }: PropsResourceListDisplay) => {
const [list, setList] = useState<QortalMetadata[]>([]); const [list, setList] = useState<QortalMetadata[]>([]);
const { fetchResources } = useResources(); const { fetchResources } = useResources();
@ -77,10 +74,14 @@ export const ResourceListDisplay = ({
return ( return (
<ListLoader <ListLoader
noResultsMessage={defaultLoaderParams?.listNoResultsText || "No results available"} noResultsMessage={
defaultLoaderParams?.listNoResultsText || "No results available"
}
resultsLength={list?.length} resultsLength={list?.length}
isLoading={isLoading} isLoading={isLoading}
loadingMessage={defaultLoaderParams?.listLoadingText || "Retrieving list. Please wait."} loadingMessage={
defaultLoaderParams?.listLoadingText || "Retrieving list. Please wait."
}
loaderList={loaderList} loaderList={loaderList}
loaderHeight={styles?.listLoadingHeight} loaderHeight={styles?.listLoadingHeight}
> >
@ -92,16 +93,53 @@ export const ResourceListDisplay = ({
}} }}
> >
<div style={{ display: "flex", flexGrow: 1 }}> <div style={{ display: "flex", flexGrow: 1 }}>
<VirtualizedList list={list}> {!disableVirtualization && (
{(item: QortalMetadata, index: number) => ( <VirtualizedList list={list}>
<> {(item: QortalMetadata, index: number) => (
{styles?.gap && <Spacer height={`${styles.gap / 2}rem`} /> } <>
<Spacer/> {styles?.gap && <Spacer height={`${styles.gap / 2}rem`} />}
<ListItemWrapper defaultLoaderParams={defaultLoaderParams} item={item} index={index} render={listItem} renderListItemLoader={loaderItem} /> <Spacer />
{styles?.gap && <Spacer height={`${styles.gap / 2}rem`} /> } <ListItemWrapper
</> defaultLoaderParams={defaultLoaderParams}
)} item={item}
</VirtualizedList> index={index}
render={listItem}
renderListItemLoader={loaderItem}
/>
{styles?.gap && <Spacer height={`${styles.gap / 2}rem`} />}
</>
)}
</VirtualizedList>
)}
{disableVirtualization && (
<div
style={{
position: "relative",
display: "flex",
flexDirection: "column",
width: "100%",
}}
>
{list?.map((item, index) => {
return (
<React.Fragment
key={`${item?.name}-${item?.service}-${item?.identifier}`}
>
{styles?.gap && <Spacer height={`${styles.gap / 2}rem`} />}
<Spacer />
<ListItemWrapper
defaultLoaderParams={defaultLoaderParams}
item={item}
index={index}
render={listItem}
renderListItemLoader={loaderItem}
/>
{styles?.gap && <Spacer height={`${styles.gap / 2}rem`} />}
</React.Fragment>
);
})}
</div>
)}
</div> </div>
</div> </div>
</ListLoader> </ListLoader>
@ -113,7 +151,7 @@ interface ListItemWrapperProps {
index: number; index: number;
render: (item: ListItem, index: number) => React.ReactNode; render: (item: ListItem, index: number) => React.ReactNode;
defaultLoaderParams?: DefaultLoaderParams; defaultLoaderParams?: DefaultLoaderParams;
renderListItemLoader?:(status: "LOADING" | "ERROR")=> React.ReactNode; renderListItemLoader?: (status: "LOADING" | "ERROR") => React.ReactNode;
} }
const ListItemWrapper: React.FC<ListItemWrapperProps> = ({ const ListItemWrapper: React.FC<ListItemWrapperProps> = ({
@ -121,7 +159,7 @@ const ListItemWrapper: React.FC<ListItemWrapperProps> = ({
index, index,
render, render,
defaultLoaderParams, defaultLoaderParams,
renderListItemLoader renderListItemLoader,
}) => { }) => {
const getResourceCache = useCacheStore().getResourceCache; const getResourceCache = useCacheStore().getResourceCache;
@ -129,27 +167,37 @@ const ListItemWrapper: React.FC<ListItemWrapperProps> = ({
`${item.service}-${item.name}-${item.identifier}`, `${item.service}-${item.name}-${item.identifier}`,
true true
); );
if (findCachedResource === null && !renderListItemLoader) if (findCachedResource === null && !renderListItemLoader)
return ( return (
<ItemCardWrapper height={60} isInCart={false}> <ItemCardWrapper height={60} isInCart={false}>
<ResourceLoader <ResourceLoader
message={defaultLoaderParams?.listItemLoadingText || "Fetching Data..."} message={
status="loading" defaultLoaderParams?.listItemLoadingText || "Fetching Data..."
/> }
</ItemCardWrapper> status="loading"
); />
if (findCachedResource === false && !renderListItemLoader) </ItemCardWrapper>
return ( );
<ItemCardWrapper height={60} isInCart={false}> if (findCachedResource === false && !renderListItemLoader)
<ResourceLoader return (
message={defaultLoaderParams?.listItemErrorText ||"Resource is unavailble at this moment... Try again later."} <ItemCardWrapper height={60} isInCart={false}>
status="error" <ResourceLoader
/> message={
</ItemCardWrapper> defaultLoaderParams?.listItemErrorText ||
); "Resource is unavailble at this moment... Try again later."
if(renderListItemLoader && (findCachedResource === false || findCachedResource === null)){ }
return renderListItemLoader(findCachedResource === null ? "LOADING" : "ERROR") status="error"
} />
</ItemCardWrapper>
);
if (
renderListItemLoader &&
(findCachedResource === false || findCachedResource === null)
) {
return renderListItemLoader(
findCachedResource === null ? "LOADING" : "ERROR"
);
}
// Example transformation (Modify item if needed) // Example transformation (Modify item if needed)
const transformedItem = findCachedResource const transformedItem = findCachedResource