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 | 3x 3x 3x 3x 3x 3x | import { Dispatch, ReactNode, SetStateAction } from "react";
import { Modal, Button } from "@canonical/react-components";
import type { InviteActionData } from "../../types/shared";
type Props = {
inviteActionData: InviteActionData | null;
inviteModalOpen: boolean;
setInviteModalOpen: Dispatch<SetStateAction<boolean>>;
updateInvite: (data: InviteActionData) => void;
inviteModalIsSaving: boolean;
};
function InviteModal({
inviteActionData,
inviteModalOpen,
setInviteModalOpen,
updateInvite,
inviteModalIsSaving,
}: Props): ReactNode {
Iif (!inviteModalOpen || !inviteActionData) {
return null;
}
const ACTIONS = {
resend: "Resend",
revoke: "Revoke",
open: "Reopen",
};
const closeHandler = () => setInviteModalOpen(false);
Iif (!inviteModalOpen) {
return null;
}
return (
<Modal
title={`${ACTIONS[inviteActionData.action]} invite`}
close={closeHandler}
buttonRow={
<>
<Button className="u-no-margin--bottom" onClick={closeHandler}>
Cancel
</Button>
<Button
appearance="positive"
className={`u-no-margin--bottom ${
inviteModalIsSaving ? "has-icon is-dark" : ""
}`}
onClick={() => {
updateInvite(inviteActionData);
}}
disabled={inviteModalIsSaving}
>
{inviteModalIsSaving ? (
<>
<i className="p-icon--spinner u-animation--spin is-light"></i>
<span>Saving...</span>
</>
) : (
`${ACTIONS[inviteActionData.action]} invite`
)}
</Button>
</>
}
>
{inviteActionData.action === "resend" && (
<p>
Resending your invite will send a reminder email to{" "}
<strong>{inviteActionData.email}</strong>. Do you still want to do it?
</p>
)}
{inviteActionData.action === "revoke" && (
<p>
Revoking your invite will prevent{" "}
<strong>{inviteActionData.email}</strong> from accepting your invite.
Do you still want to do it?
</p>
)}
{inviteActionData.action === "open" && (
<p>
Reopening your invite will send a new invite to{" "}
<strong>{inviteActionData.email}</strong>. Do you still want to do it?
</p>
)}
</Modal>
);
}
export default InviteModal;
|