pre-dialogbox-convert

src/ui/React/AlertManager.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from "react";
+import { EventEmitter } from "../../utils/EventEmitter";
+import { Modal } from "../../ui/React/Modal";
+import Typography from "@mui/material/Typography";
+
+export const AlertEvents = new EventEmitter<[string | JSX.Element]>();
+
+interface Alert {
+  id: string;
+  text: string | JSX.Element;
+}
+
+let i = 0;
+export function AlertManager(): React.ReactElement {
+  const [alerts, setAlerts] = useState<Alert[]>([]);
+  useEffect(
+    () =>
+      AlertEvents.subscribe((text: string | JSX.Element) => {
+        const id = i + "";
+        i++;
+        setAlerts((old) => {
+          return [
+            ...old,
+            {
+              id: id,
+              text: text,
+            },
+          ];
+        });
+      }),
+    [],
+  );
+
+  function close(): void {
+    console.log("close");
+    setAlerts((old) => {
+      return old.slice(0, -1);
+    });
+  }
+
+  return (
+    <>
+      {alerts.length > 0 && (
+        <Modal open={true} onClose={close}>
+          <Typography>{alerts[0].text}</Typography>
+        </Modal>
+      )}
+    </>
+  );
+}