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 110 | 38x 38x 38x 38x 38x 38x 2x 2x 2x 2x 38x 38x | import { Box, Stack } from "@mui/material";
import { PencilSimpleIcon, TrashIcon } from "@phosphor-icons/react";
import GiveAvatar from "@shared/Avatar/GiveAvatar";
import GiveText from "@shared/Text/GiveText";
import GiveLink from "@shared/Link/GiveLink";
import { MemberData } from "@customTypes/team.member";
import {
GIVE_DELETE_TEAM_MEMBER_MODAL,
GIVE_EDIT_TEAM_MEMBER_MODAL,
TEAM_MEMBER_PANEL_MODAL,
} from "modals/modal_names";
import NiceModal from "@ebay/nice-modal-react";
import { TMemberInfo } from "../types";
interface JoinedHeaderProps {
rowData: MemberData;
memberInfo: TMemberInfo;
setMemberInfo: (data: any) => void;
imageUrl: string;
isOwner: boolean;
isEditAllowed: boolean;
isCurrentUser: boolean;
isDeleteAllowed: boolean;
isDeleteOwnerAllowed: boolean;
}
function JoinedContentHeader({
rowData,
memberInfo,
setMemberInfo,
imageUrl,
isOwner,
isEditAllowed,
isCurrentUser,
isDeleteAllowed,
isDeleteOwnerAllowed,
}: JoinedHeaderProps) {
const { firstName, lastName, email } = memberInfo || {};
const { accID: userAccID } = rowData?.user || {};
const { accID } = rowData;
const hasFullName = firstName && lastName;
const isDeleteDisabled =
(isOwner && !isDeleteOwnerAllowed) || isCurrentUser || !isDeleteAllowed;
const handleDelete = () => {
Eif (rowData) {
const url = `/accounts/${accID}/members/${userAccID}`;
NiceModal.show(GIVE_DELETE_TEAM_MEMBER_MODAL, {
itemName: hasFullName ? `${firstName} ${lastName}` : email,
url: url,
onSuccess: () => NiceModal.remove(TEAM_MEMBER_PANEL_MODAL),
});
}
};
const handleEdit = () => {
NiceModal.show(GIVE_EDIT_TEAM_MEMBER_MODAL, {
rowData,
memberInfo,
setMemberInfo,
});
};
return (
<Stack direction="row" justifyContent={"space-between"} alignItems="center">
<Box
display="flex"
flexDirection="column"
paddingRight={3}
gap={"16px"}
width="100%"
>
{(firstName || lastName) && (
<GiveText variant="h3" color="primary">
{`${firstName || ""} ${lastName || ""}`.trim()}
</GiveText>
)}
<Box display={"flex"} gap={2} flexDirection={"row"} flexWrap={"wrap"}>
{isEditAllowed && (
<GiveLink
component="button"
color="primary"
onClick={handleEdit}
disabled={!isEditAllowed}
Icon={PencilSimpleIcon}
sx={{ gap: 1 }}
>
Edit
</GiveLink>
)}
{!isDeleteDisabled && (
<GiveLink
component="button"
color="primary"
onClick={handleDelete}
disabled={isDeleteDisabled}
Icon={TrashIcon}
sx={{ gap: 1 }}
>
Delete Member
</GiveLink>
)}
</Box>
</Box>
<GiveAvatar imageUrl={imageUrl} size="72px" />
</Stack>
);
}
export default JoinedContentHeader;
|