From 8109ff985cda29f95d6272d3967963c17ece3bab Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Fri, 2 Jun 2023 20:15:11 +0200
Subject: [PATCH] Created the DialogContext.jsx

---
 .../common/contexts/Dialog/DialogContext.jsx  | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 client/src/common/contexts/Dialog/DialogContext.jsx

diff --git a/client/src/common/contexts/Dialog/DialogContext.jsx b/client/src/common/contexts/Dialog/DialogContext.jsx
new file mode 100644
index 0000000..69cb784
--- /dev/null
+++ b/client/src/common/contexts/Dialog/DialogContext.jsx
@@ -0,0 +1,44 @@
+import React, {createContext, useEffect, useRef} from "react";
+import "./styles.sass";
+
+export const DialogContext = createContext({});
+
+export const DialogProvider = (props) => {
+    const areaRef = useRef();
+    const ref = useRef();
+
+    const close = (force = false) => {
+        if (props.disableClosing && !force) return;
+        areaRef.current?.classList.add("dialog-area-hidden");
+        ref.current?.classList.add("dialog-hidden");
+    }
+
+    const onClose = (e) => {
+        if (e.animationName === "fadeOut") {
+            props?.close();
+        }
+    }
+
+    const handleKeyDown = (e) => {
+        if (e.code === "Enter" && props.submit) props.submit();
+    }
+
+    useEffect(() => {
+        const handleClick = (event) => {
+            if (!ref.current?.contains(event.target)) close();
+        }
+
+        document.addEventListener("mousedown", handleClick);
+    }, [ref]);
+
+    return (
+        <DialogContext.Provider value={close}>
+            <div className="dialog-area" ref={areaRef}>
+                <div className={"dialog" + (props.customClass ? " " + props.customClass : "")} ref={ref}
+                     onAnimationEnd={onClose} onKeyDown={handleKeyDown}>
+                    {props.children}
+                </div>
+            </div>
+        </DialogContext.Provider>
+    )
+}
\ No newline at end of file