From 4ba4c15e23bb351ebdeb4e255230d0ec548ebd1a Mon Sep 17 00:00:00 2001
From: Joel Therrien <joel@joeltherrien.ca>
Date: Sun, 20 Aug 2023 17:26:52 -0700
Subject: [PATCH] Transfer previous Modal code

---
 ui/src/Modal.tsx  | 39 +++++++++++++++++++++++++++++++++++++++
 ui/src/style.less | 25 +++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 ui/src/Modal.tsx

diff --git a/ui/src/Modal.tsx b/ui/src/Modal.tsx
new file mode 100644
index 0000000..041a13e
--- /dev/null
+++ b/ui/src/Modal.tsx
@@ -0,0 +1,39 @@
+import {useEffect, useRef} from "react";
+
+export function Modal(props: {
+    isOpen: boolean;
+    setClosed: () => void;
+    children: any;
+}){
+
+    const ref = useRef<HTMLDialogElement>();
+    useEffect(() => {
+        if(props.isOpen){
+            // @ts-ignore
+            ref.current.showModal();
+        } else {
+            // @ts-ignore
+            ref.current.close();
+        }
+    }, [props.isOpen])
+
+
+    return(
+        // The style part is just to make sure the dialog is hidden the split second before useEffect runs,
+        // in case the dialog content is derived from whatever determines isOpen
+        <dialog ref={ref} style={!props.isOpen ? {display: 'none'} : null}>
+            <div className="close-button-div" >
+                <button onClick={(e) => {
+                    // we manually trigger a close anyway because the children can get updated before the dialog gets closed otherwise
+                    // @ts-ignore
+                    ref.current.close();
+                    props.setClosed();
+                }}>✕</button>
+            </div>
+            <div>
+                {props.children}
+            </div>
+        </dialog>
+    );
+
+}
\ No newline at end of file
diff --git a/ui/src/style.less b/ui/src/style.less
index d34f7df..a205905 100644
--- a/ui/src/style.less
+++ b/ui/src/style.less
@@ -163,4 +163,29 @@
     margin-left: 10px;
     margin-right: 10px;
   }
+}
+
+dialog {
+  border-radius: 10px;
+  z-index: 1;
+
+
+  .close-button-div {
+    display: flex;
+    justify-content: end;
+
+    button {
+      border: 0;
+      background-color: inherit;
+      font-size: 1.5rem;
+      color: #aaaaaa;
+      font-weight: bold;
+
+      &:hover {
+        color: black;
+        cursor: pointer;
+      }
+    }
+  }
+
 }
\ No newline at end of file