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 | 8x 8x 8x 8x 8x 8x 4x | import GiveText from "@shared/Text/GiveText";
import { GroupedVirtuoso } from "react-virtuoso";
import GiveNotificationSkeleton from "./skeletons/GiveNotificationSkeleton";
import { useDayLabelFromTimestamp } from "@utils/date.helpers";
import { useAppTheme } from "@theme/v2/Provider";
import EmptyComponent from "./EmptyComponent";
interface Props {
itemContent: (index: any) => JSX.Element;
shouldFetchNextPage?: boolean;
fetchNextPage?: () => void;
isFetchingNextPage?: boolean;
groupedData: {
items: any[];
groupCounts: number[];
groupLabels: number[];
};
}
export default function GroupedVirtualList({
itemContent,
shouldFetchNextPage,
fetchNextPage,
isFetchingNextPage,
groupedData,
}: Props) {
const { getDayLabelFromTimestamp } = useDayLabelFromTimestamp();
const theme = useAppTheme();
return (
<GroupedVirtuoso
groupCounts={groupedData.groupCounts}
groupContent={(index) => {
Eif (groupedData.groupLabels[index])
return (
<GiveText
bgcolor={theme?.palette?.surface?.primary}
color="secondary"
fontWeight={400}
fontSize="14px"
p="20px"
pb="8px"
pt="8px"
>
{getDayLabelFromTimestamp(groupedData.groupLabels[index])}
</GiveText>
);
}}
components={{
Footer: () =>
isFetchingNextPage ? <GiveNotificationSkeleton /> : null,
EmptyPlaceholder: () => <EmptyComponent />,
}}
endReached={() => {
Iif (shouldFetchNextPage && fetchNextPage) {
fetchNextPage();
}
}}
itemContent={itemContent}
/>
);
}
|