100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
import { Dialog, Transition } from "@headlessui/react";
|
|
import { Fragment, useCallback, useEffect, useState } from "react";
|
|
import Button from "./Low/Button";
|
|
|
|
interface Props {
|
|
isOpen: boolean;
|
|
abandonPopupTitle: string;
|
|
abandonPopupDescription: string;
|
|
abandonConfirmButtonText: string;
|
|
onAbandon: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export default function AbandonPopup({ isOpen, abandonPopupTitle, abandonPopupDescription, abandonConfirmButtonText, onAbandon, onCancel }: Props) {
|
|
const [isClosing, setIsClosing] = useState(false);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setMounted(true);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen && mounted) {
|
|
const timer = setTimeout(() => {
|
|
setMounted(false);
|
|
setIsClosing(false);
|
|
}, 300);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [isOpen, mounted]);
|
|
|
|
const blockMultipleClicksClose = useCallback((cancel: boolean) => {
|
|
if (isClosing) return;
|
|
|
|
setIsClosing(true);
|
|
const func = cancel ? onCancel : onAbandon;
|
|
func();
|
|
|
|
const timer = setTimeout(() => {
|
|
setIsClosing(false);
|
|
}, 300);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [isClosing, onCancel, onAbandon]);
|
|
|
|
if (!mounted && !isOpen) return null;
|
|
|
|
return (
|
|
<Transition
|
|
show={isOpen}
|
|
as={Fragment}
|
|
beforeEnter={() => setIsClosing(false)}
|
|
beforeLeave={() => setIsClosing(true)}
|
|
afterLeave={() => {
|
|
setIsClosing(false);
|
|
setMounted(false);
|
|
}}
|
|
>
|
|
<Dialog onClose={() => blockMultipleClicksClose(true)} className="relative z-50">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0">
|
|
<div className="fixed inset-0 bg-black/30" />
|
|
</Transition.Child>
|
|
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-95">
|
|
<div className="fixed inset-0 flex items-center justify-center p-4">
|
|
<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
|
|
<Dialog.Title className="font-bold text-xl">{abandonPopupTitle}</Dialog.Title>
|
|
<span>{abandonPopupDescription}</span>
|
|
<div className="w-full flex justify-between mt-8">
|
|
<Button color="purple" onClick={() => blockMultipleClicksClose(true)} variant="outline" className="max-w-[200px] self-end w-full">
|
|
Cancel
|
|
</Button>
|
|
<Button color="purple" onClick={() => blockMultipleClicksClose(false)} className="max-w-[200px] self-end w-full">
|
|
{abandonConfirmButtonText}
|
|
</Button>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</div>
|
|
</Transition.Child>
|
|
</Dialog>
|
|
</Transition>
|
|
);
|
|
}
|