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 | 25x 175x 175x 175x 175x 51x 51x 175x 175x 175x 175x 165x 139x 175x 2010x 2010x 45x 175x 25x 226x 25x | import React, { MutableRefObject, useEffect, useRef } from "react";
import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
import { TParsedNotification } from "../types";
import { NotificationsItemSkeleton, getMaxHeight } from "./Body.atoms";
import ErrorCatcher from "@common/Error/ErrorCatcher";
import NotificationItem from "./NotificationItem";
import { TScrollToTop } from "../types";
import { Box } from "@mui/material";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
interface Props {
data: TParsedNotification[];
renderGroupLabels: boolean;
closeModal: VoidFunction;
isFetchingNextPage: boolean;
onEndReached: (props: any) => void;
scrollToTop: MutableRefObject<TScrollToTop | null>;
}
const NotificationsVirtualList = ({
data,
renderGroupLabels,
closeModal,
isFetchingNextPage,
onEndReached,
scrollToTop,
}: Props) => {
const { isMobileView } = useCustomTheme();
const ITEM_HIGHT = 80; //aprox hight of an item form the notification list
const virtuoso = useRef<VirtuosoHandle | null>(null);
useEffect(() => {
Eif (virtuoso.current) {
scrollToTop.current = (index = 0, align = "center") => {
if (virtuoso.current) {
virtuoso.current.scrollToIndex({
index,
align,
behavior: "auto",
});
}
};
}
}, []);
const allItemHight = data.length * ITEM_HIGHT;
const calculatedHight = () => {
const maxHeight = getMaxHeight();
if (isMobileView) return maxHeight;
if (allItemHight < 412) return 412;
else if (allItemHight > maxHeight) return maxHeight;
else Ereturn allItemHight;
};
return (
<Virtuoso
ref={virtuoso}
style={{
height: `${calculatedHight()}px`,
}}
data={data}
totalCount={data.length}
itemContent={(index, item) => {
const isLast = index === data.length - 1;
return (
<NotificationItem
{...item}
renderLabel={renderGroupLabels}
closeModal={closeModal}
isLast={isLast}
/>
);
}}
endReached={(props) => onEndReached(props)}
components={{
List: VirtualList,
Footer: () =>
isFetchingNextPage ? <NotificationsItemSkeleton /> : null,
}}
/>
);
};
export default NotificationsVirtualList;
const VirtualList = React.forwardRef<any>(
({ style, children }: any, listRef: any) => {
return (
<ErrorCatcher errorID="UnfoldListItems">
<Box style={style} sx={{ overflow: "hidden" }} ref={listRef}>
{children}
</Box>
</ErrorCatcher>
);
},
);
VirtualList.displayName = "VirtualList";
|