59 lines
1.2 KiB
TypeScript
59 lines
1.2 KiB
TypeScript
import { useRef } from 'react';
|
|
|
|
import {
|
|
Button,
|
|
DialogBody,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogRoot,
|
|
UseDisclosureReturn,
|
|
} from '@chakra-ui/react';
|
|
|
|
export type ConfirmPopUpProps = {
|
|
title: string;
|
|
body: string;
|
|
confirmTitle: string;
|
|
onConfirm: () => void;
|
|
disclosure: UseDisclosureReturn;
|
|
};
|
|
|
|
export const ConfirmPopUp = ({
|
|
title,
|
|
body,
|
|
confirmTitle,
|
|
onConfirm,
|
|
disclosure,
|
|
}: ConfirmPopUpProps) => {
|
|
const onClickConfirm = () => {
|
|
onConfirm();
|
|
disclosure.onClose();
|
|
};
|
|
const cancelRef = useRef<HTMLButtonElement>(null);
|
|
return (
|
|
<DialogRoot role="alertdialog"
|
|
open={disclosure.open}
|
|
//leastDestructiveRef={cancelRef}
|
|
onOpenChange={disclosure.onClose}
|
|
data-testid="confirm-pop-up"
|
|
>
|
|
<DialogContent>
|
|
<DialogHeader fontSize="lg" fontWeight="bold">
|
|
{title}
|
|
</DialogHeader>
|
|
|
|
<DialogBody>{body}</DialogBody>
|
|
|
|
<DialogFooter>
|
|
<Button onClick={disclosure.onClose} ref={cancelRef}>
|
|
Cancel
|
|
</Button>
|
|
<Button colorScheme="red" onClick={onClickConfirm} ml={3}>
|
|
{confirmTitle}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
);
|
|
};
|