80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { useTransition } from 'react';
|
|
|
|
import { Button } from '../button/Button';
|
|
import { ModalBody, ModalFooter, ModalHeader, ModalRoot } from './Modal';
|
|
|
|
interface ConfirmModalProps {
|
|
isOpen?: boolean;
|
|
onOpenChange?: (isOpen: boolean) => void;
|
|
title?: string;
|
|
content?: ReactNode;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
onConfirm?: () => Promise<void> | void;
|
|
onCancel?: () => void;
|
|
}
|
|
|
|
export const ConfirmModal = (props: ConfirmModalProps) => {
|
|
const { isOpen, onOpenChange, title, ...contentProps } = props;
|
|
|
|
return (
|
|
<ModalRoot isOpen={isOpen} onOpenChange={onOpenChange} className="w-75" aria-label={title ?? '확인'}>
|
|
{({ close }) => <ConfirmModalContent close={close} title={title} {...contentProps} />}
|
|
</ModalRoot>
|
|
);
|
|
};
|
|
|
|
function ConfirmModalContent({
|
|
close,
|
|
title,
|
|
content,
|
|
confirmText = '확인',
|
|
cancelText = '취소',
|
|
onConfirm,
|
|
onCancel,
|
|
}: {
|
|
close: () => void;
|
|
title?: string;
|
|
content?: ReactNode;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
onConfirm?: () => Promise<void> | void;
|
|
onCancel?: () => void;
|
|
}) {
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const handleConfirm = () => {
|
|
if (onConfirm) {
|
|
startTransition(async () => {
|
|
await onConfirm();
|
|
close();
|
|
});
|
|
} else {
|
|
close();
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
onCancel?.();
|
|
close();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{title && <ModalHeader>{title}</ModalHeader>}
|
|
<ModalBody className="px-7.5 py-8">
|
|
<p className="text-sm text-dabeeo-black-34 font-medium text-center whitespace-pre-wrap">{content}</p>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button color="gray" size="large" isDisabled={isPending} onClick={handleCancel}>
|
|
{cancelText}
|
|
</Button>
|
|
<Button color="primary" size="large" isPending={isPending} onClick={handleConfirm}>
|
|
{confirmText}
|
|
</Button>
|
|
</ModalFooter>
|
|
</>
|
|
);
|
|
}
|