wallet-core/packages/anastasis-webui/src/pages/home/ConfirmModal.tsx

59 lines
1.9 KiB
TypeScript
Raw Normal View History

2021-11-12 17:12:27 +01:00
import { differenceInBusinessDays } from "date-fns";
2021-11-10 22:10:45 +01:00
import { ComponentChildren, h, VNode } from "preact";
2021-11-12 17:12:27 +01:00
import { useLayoutEffect, useRef } from "preact/hooks";
import { AsyncButton } from "../../components/AsyncButton";
2021-11-10 22:10:45 +01:00
export interface ConfirmModelProps {
active?: boolean;
description?: string;
onCancel?: () => void;
onConfirm?: () => Promise<void>;
2021-11-10 22:10:45 +01:00
label?: string;
cancelLabel?: string;
children?: ComponentChildren;
danger?: boolean;
disabled?: boolean;
}
export function ConfirmModal({
active, description, onCancel, onConfirm, children, danger, disabled, label = "Confirm", cancelLabel = "Dismiss"
}: ConfirmModelProps): VNode {
return (
2021-11-12 17:12:27 +01:00
<div class={active ? "modal is-active" : "modal"} >
2021-11-10 22:10:45 +01:00
<div class="modal-background " onClick={onCancel} />
<div class="modal-card" style={{ maxWidth: 700 }}>
<header class="modal-card-head">
{!description ? null : (
<p class="modal-card-title">
<b>{description}</b>
</p>
)}
<button class="delete " aria-label="close" onClick={onCancel} />
</header>
<section class="modal-card-body">{children}</section>
<footer class="modal-card-foot">
<button class="button" onClick={onCancel}>
{cancelLabel}
</button>
2021-11-12 17:12:27 +01:00
<div class="buttons is-right" style={{ width: "100%" }} onKeyDown={(e) => {
if (e.key === 'Escape' && onCancel) onCancel()
}}>
<AsyncButton
2021-11-12 17:12:27 +01:00
grabFocus
2021-11-10 22:10:45 +01:00
class={danger ? "button is-danger " : "button is-info "}
disabled={disabled}
onClick={onConfirm}
>
{label}
</AsyncButton>
2021-11-10 22:10:45 +01:00
</div>
</footer>
</div>
<button
class="modal-close is-large "
aria-label="close"
onClick={onCancel} />
</div>
);
}