41 lines
994 B
TypeScript
41 lines
994 B
TypeScript
import React, { useState } from "react";
|
|
import { t } from "../i18n";
|
|
|
|
import { Dialog } from "./Dialog";
|
|
import { useExcalidrawContainer } from "./App";
|
|
|
|
export const ErrorDialog = ({
|
|
children,
|
|
onClose,
|
|
}: {
|
|
children?: React.ReactNode;
|
|
onClose?: () => void;
|
|
}) => {
|
|
const [modalIsShown, setModalIsShown] = useState(!!children);
|
|
const { container: excalidrawContainer } = useExcalidrawContainer();
|
|
|
|
const handleClose = React.useCallback(() => {
|
|
setModalIsShown(false);
|
|
|
|
if (onClose) {
|
|
onClose();
|
|
}
|
|
// TODO: Fix the A11y issues so this is never needed since we should always focus on last active element
|
|
excalidrawContainer?.focus();
|
|
}, [onClose, excalidrawContainer]);
|
|
|
|
return (
|
|
<>
|
|
{modalIsShown && (
|
|
<Dialog
|
|
size="small"
|
|
onCloseRequest={handleClose}
|
|
title={t("errorDialog.title")}
|
|
>
|
|
<div style={{ whiteSpace: "pre-wrap" }}>{children}</div>
|
|
</Dialog>
|
|
)}
|
|
</>
|
|
);
|
|
};
|