Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 2x | import React from "react";
import LoadingSpinner from "@components/Snipper/LoadingSpinner";
import { Stack, StackProps } from "@mui/material";
import { useTargetRef } from "@hooks/common/useObserveHTMLNode";
import { isMobile } from "@utils/index";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import NoResultsState from "@common/EmptyState/NoResultsState";
import { useAppSelector } from "@redux/hooks";
import { selectQueryString } from "@redux/slices/search";
type MobileListProps<T> = {
page: number;
totalRows: number;
setPage: (...arg: any) => void;
allRows: T[];
loadingRef: React.MutableRefObject<boolean>;
isLoading?: boolean;
CardComponent: any;
CardComponentProps?: { [key: string]: any };
redirectBaseHREF: string;
containerProps?: StackProps;
rowRenderingKey?: keyof T;
redirectKey?: keyof T;
LoadingTableSkeleton?: () => JSX.Element;
queryKey?: string;
};
const MobileList = <T extends object>({
CardComponent,
page,
totalRows,
setPage,
allRows,
loadingRef,
isLoading,
containerProps,
redirectBaseHREF,
rowRenderingKey,
redirectKey,
CardComponentProps,
LoadingTableSkeleton,
queryKey,
}: MobileListProps<T>) => {
const targetRef = useTargetRef({ page, totalRows, setPage, loadingRef });
const isCustomLoader = !!LoadingTableSkeleton;
const searchQuery = useAppSelector((state) =>
queryKey ? selectQueryString(state, queryKey) : undefined,
);
if (!isLoading && !totalRows)
return <NoResultsState searchQuery={searchQuery} />;
return (
<>
{isLoading && !loadingRef.current ? (
<>
{isCustomLoader ? (
Array(7)
.fill(null)
.map((c, idx) => <LoadingTableSkeleton key={idx} />)
) : (
<LoadingSpinner />
)}{" "}
</>
) : (
<Stack direction="column" gap={2} mt={2} {...containerProps}>
{allRows.map((data: T, index: number) => {
const key: any = rowRenderingKey ? data[rowRenderingKey] : index;
const pathEnd = redirectKey ? "/" + data[redirectKey] : "";
const href = redirectBaseHREF + pathEnd;
return (
<CardComponent
key={index}
data={data}
href={href}
index={index}
{...CardComponentProps}
/>
);
})}
</Stack>
)}
{allRows?.length && isMobile ? (
<div
ref={targetRef}
style={{
width: 1,
height: 1,
paddingBottom: 5,
visibility: "hidden",
}}
></div>
) : null}
</>
);
};
export default MobileList;
|