mirror of https://git.sr.ht/~ashkeel/strimertul
70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface ModalProps {
|
|
title: string;
|
|
active: boolean;
|
|
onClose?: () => void;
|
|
onConfirm: () => void;
|
|
confirmName?: string;
|
|
confirmClass?: string;
|
|
confirmEnabled?: boolean;
|
|
cancelName?: string;
|
|
cancelClass?: string;
|
|
showCancel?: boolean;
|
|
bgDismiss?: boolean;
|
|
}
|
|
|
|
export default function Modal({
|
|
active,
|
|
title,
|
|
onClose,
|
|
onConfirm,
|
|
confirmName,
|
|
confirmClass,
|
|
confirmEnabled,
|
|
cancelName,
|
|
cancelClass,
|
|
showCancel,
|
|
bgDismiss,
|
|
children,
|
|
}: React.PropsWithChildren<ModalProps>): React.ReactElement {
|
|
return (
|
|
<div className={`modal ${active ? 'is-active' : ''}`}>
|
|
<div
|
|
className="modal-background"
|
|
onClick={bgDismiss ? () => onClose() : null}
|
|
></div>
|
|
<div className="modal-card">
|
|
<header className="modal-card-head">
|
|
<p className="modal-card-title">{title}</p>
|
|
{showCancel ? (
|
|
<button
|
|
className="delete"
|
|
aria-label="close"
|
|
onClick={() => onClose()}
|
|
></button>
|
|
) : null}
|
|
</header>
|
|
<section className="modal-card-body">{children}</section>
|
|
<footer className="modal-card-foot">
|
|
<button
|
|
className={`button ${confirmClass ?? ''}`}
|
|
disabled={!confirmEnabled}
|
|
onClick={() => onConfirm()}
|
|
>
|
|
{confirmName ?? 'OK'}
|
|
</button>
|
|
{showCancel ? (
|
|
<button
|
|
className={`button ${cancelClass ?? ''}`}
|
|
onClick={() => onClose()}
|
|
>
|
|
{cancelName ?? 'Cancel'}
|
|
</button>
|
|
) : null}
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|