69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface ConfirmationModalProps {
|
|
isOpen?: boolean;
|
|
title?: React.ReactNode;
|
|
onConfirm(): void;
|
|
onCancel(): void;
|
|
isConfirming?: boolean;
|
|
}
|
|
|
|
const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
|
|
isOpen,
|
|
children,
|
|
title,
|
|
onCancel,
|
|
onConfirm,
|
|
isConfirming = false,
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
|
|
const cancelHandler = React.useCallback(() => {
|
|
if (!isConfirming) {
|
|
onCancel();
|
|
}
|
|
}, [isConfirming, onCancel]);
|
|
|
|
return (
|
|
<div className="modal is-active">
|
|
<div
|
|
className="modal-background"
|
|
onClick={cancelHandler}
|
|
aria-hidden="true"
|
|
/>
|
|
<div className="modal-card">
|
|
<header className="modal-card-head">
|
|
<p className="modal-card-title">{title || 'Confirm the action'}</p>
|
|
<button
|
|
onClick={cancelHandler}
|
|
type="button"
|
|
className="delete"
|
|
aria-label="close"
|
|
disabled={isConfirming}
|
|
/>
|
|
</header>
|
|
<section className="modal-card-body">{children}</section>
|
|
<footer className="modal-card-foot is-justify-content-flex-end">
|
|
<button
|
|
onClick={onConfirm}
|
|
type="button"
|
|
className="button is-danger"
|
|
disabled={isConfirming}
|
|
>
|
|
Confirm
|
|
</button>
|
|
<button
|
|
onClick={cancelHandler}
|
|
type="button"
|
|
className="button"
|
|
disabled={isConfirming}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConfirmationModal;
|