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 102 103 104 105 106 107 108 109 | 3x 116x 116x 116x 116x 1x 1x 116x 1x 1x 116x 116x 488x 420x 1x 116x 3x 1x 1x | import NiceModal from "@ebay/nice-modal-react";
import { Stack } from "@mui/material";
import { PlusIcon } from "@phosphor-icons/react";
import { useRoles } from "@services/api/accounts";
import GiveButton from "@shared/Button/GiveButton";
import ContextualMenu from "@shared/ContextualMenu/ContextualMenu";
import GiveSearchBar from "@shared/SearchBar/GiveSearchBar";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { GIVE_ADD_TEAM_MEMBER_MODAL } from "modals/modal_names";
import { useCallback, useState } from "react";
import { useTeamPermissions } from "features/Permissions/AccessControl/hooks";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { ACTION_DENY_MESSAGE } from "@constants/permissions";
interface MemberListHeaderPrps {
search: string;
onSearchChange: (value: string) => void;
}
const MemberListHeader: React.FC<MemberListHeaderPrps> = ({
search,
onSearchChange,
}) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const { isMobileView } = useCustomThemeV2();
const { isAddAllowed } = useTeamPermissions();
const handleOpenMenu = useCallback(
(event: React.MouseEvent<HTMLButtonElement>) => {
event?.stopPropagation();
setAnchorEl(event.currentTarget);
},
[],
);
const closeMenu = (event?: React.MouseEvent<HTMLElement>) => {
setAnchorEl(null);
event?.stopPropagation();
};
const { data } = useRoles();
const optionsList =
data?.data
?.sort((a, b) => a?.label.localeCompare(b?.label))
?.map((role) => ({
value: role.value,
text: role.label,
onClick: () => {
NiceModal.show(GIVE_ADD_TEAM_MEMBER_MODAL, {
roleName: `${getArticle(role.label)} ${role.label}`,
roleValue: role.value,
});
},
hidden: role.value === "owner",
})) || [];
return (
<Stack
direction={isMobileView ? "column" : "row"}
justifyContent="space-between"
gap={2}
>
<GiveSearchBar
value={search}
handleChange={onSearchChange}
searchOnEnter={true}
sx={{
width: isMobileView ? "100%" : "260px",
}}
/>
<GiveTooltip
disableHoverListener={isAddAllowed}
title={ACTION_DENY_MESSAGE}
fluidWidth
>
<GiveButton
variant="outline"
size="large"
startIcon={<PlusIcon />}
label="Add Team Member"
sx={{
width: isMobileView ? "100%" : "fit-content !important",
whiteSpace: 'nowrap',
}}
onClick={handleOpenMenu}
disabled={!isAddAllowed}
/>
</GiveTooltip>
<ContextualMenu
anchorEl={anchorEl}
color="tertiary"
texture="blurred"
options={optionsList}
handleClose={closeMenu}
height="fit-content"
/>
</Stack>
);
};
export default MemberListHeader;
const getArticle = (label: string) => {
const firstLetter = label.charAt(0).toLowerCase();
return ["a", "e", "i", "o", "u"].includes(firstLetter) ? "an" : "a";
};
|