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 | 4x 59x 59x 59x 59x 59x 94x 188x 188x | import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import {
GroupTab,
Overlay,
PermissionListWrapper,
} from "./PermissionsList.atoms";
import { Stack } from "@mui/material";
import NoResultsState from "@common/EmptyState/NoResultsState";
import React, { useRef } from "react";
import { TPermissionGroups, TPermissionsData } from "../../types";
import { SectionSkeleton } from "./PermissionsPanelSkeleton";
type TData = {
data: TPermissionsData;
groups: TPermissionGroups;
};
type TSetPermissionStatus = (
key: string,
value: TPermissionsData[string],
) => void;
type TDeleteHandler = (permissionKey: string, permissionName: string) => void;
interface Props {
data: TData;
setPermissionStatus: TSetPermissionStatus;
handleDelete: TDeleteHandler;
searchQuery: string;
isLoading: boolean;
sectionsRef: React.RefObject<(HTMLParagraphElement | null)[]>;
}
const PermissionsList = ({
data,
isLoading,
setPermissionStatus,
handleDelete,
searchQuery,
sectionsRef,
}: Props) => {
const keys = Object.keys(data.groups).sort((a, b) => a.localeCompare(b));
const listWrapperRef = useRef<HTMLDivElement>(null);
const overlayRef = useRef<HTMLDivElement>(null);
const handleScroll = (event: React.UIEvent<HTMLElement>) => {
if (!listWrapperRef.current || !overlayRef.current) return;
const isVisible = listWrapperRef.current.scrollTop > 40;
if (isVisible) {
overlayRef.current.style.visibility = "visible";
} else {
overlayRef.current.style.visibility = "hidden";
}
};
return (
<Stack
position="relative"
flexGrow={1}
overflow="hidden"
direction="column"
>
<Overlay ref={overlayRef} />
<PermissionListWrapper ref={listWrapperRef} onScroll={handleScroll}>
{isLoading ? (
Array.from({ length: 3 }, (_, i) => <SectionSkeleton key={i} />)
) : !keys.length ? (
<NoResultsState
searchQuery={searchQuery}
sx={{ marginBlock: "auto" }}
/>
) : (
keys.map((x, index) => (
<FadeUpWrapper key={x} delay={350 + index * 50}>
<GroupTab
ref={(el) => {
Iif (!sectionsRef.current) return;
sectionsRef.current[index] = el;
}}
groupName={x}
uniqueGroups={data.groups}
hashes={data.data}
onDelete={handleDelete}
onClick={setPermissionStatus}
/>
</FadeUpWrapper>
))
)}
</PermissionListWrapper>
</Stack>
);
};
export default React.memo(PermissionsList);
|