88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
/**
|
|
* A modal dialog.
|
|
*
|
|
* @module
|
|
*/
|
|
|
|
import { type ReactNode, useCallback, useEffect, useId, useRef } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { t } from "@lingui/core/macro";
|
|
import { useScrollLock } from "../../hooks/shared/useScrollLock.ts";
|
|
|
|
/** The props of {@link Modal}. */
|
|
export interface ModalProps {
|
|
/** The dialog's title. */
|
|
title: string;
|
|
/** Called to close it. */
|
|
onClose: () => void;
|
|
/** The dialog's body. */
|
|
children: ReactNode;
|
|
/** Whether it takes the wide layout. */
|
|
wide?: boolean;
|
|
/**
|
|
* Runs before every dismissal the user did not aim at the content — Escape,
|
|
* the backdrop, the ✕. Returning `false` cancels it, which lets a modal
|
|
* holding an unsaved draft ask first instead of throwing the work away.
|
|
*/
|
|
onBeforeClose?: () => boolean;
|
|
}
|
|
|
|
/**
|
|
* Renders a modal dialog over the page, closed by Escape, the backdrop or its
|
|
* ✕, and locks the page's scroll while it is open.
|
|
*/
|
|
export function Modal(
|
|
{ title, onClose, children, wide = false, onBeforeClose }: ModalProps,
|
|
): React.ReactPortal {
|
|
const backdropRef = useRef<HTMLDivElement>(null);
|
|
const titleId = useId();
|
|
|
|
const requestClose = useCallback(() => {
|
|
if (onBeforeClose?.() === false) return;
|
|
onClose();
|
|
}, [onBeforeClose, onClose]);
|
|
|
|
useScrollLock();
|
|
|
|
useEffect(() => {
|
|
const handler = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape" && !e.defaultPrevented) requestClose();
|
|
};
|
|
document.addEventListener("keydown", handler);
|
|
return () => document.removeEventListener("keydown", handler);
|
|
}, [requestClose]);
|
|
|
|
return createPortal(
|
|
<div
|
|
className="modal-backdrop"
|
|
ref={backdropRef}
|
|
onClick={(e) => {
|
|
if (e.target === backdropRef.current) requestClose();
|
|
}}
|
|
>
|
|
<div
|
|
className={`modal-card${wide ? " modal-card--wide" : ""}`}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby={titleId}
|
|
>
|
|
<div className="modal-header">
|
|
<span className="modal-title" id={titleId}>{title}</span>
|
|
<button
|
|
type="button"
|
|
className="modal-close-btn"
|
|
onClick={requestClose}
|
|
aria-label={t`Close`}
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|