From 6e71c1c61af406b91714e8b00d260df81ac6729a Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sun, 1 Jan 2023 04:21:40 +0100
Subject: [PATCH] Created the DialogContext.jsx

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

diff --git a/admin/src/common/contexts/Dialog/DialogContext.jsx b/admin/src/common/contexts/Dialog/DialogContext.jsx
new file mode 100644
index 0000000..ca4671d
--- /dev/null
+++ b/admin/src/common/contexts/Dialog/DialogContext.jsx
@@ -0,0 +1,38 @@
+import React, {createContext, useEffect, useRef} from "react";
+import "./styles.sass";
+
+export const DialogContext = createContext({});
+
+export const DialogProvider = (props) => {
+    const ref = useRef();
+
+    const close = () => {
+        ref.current?.classList.add("dialog-hidden");
+    }
+
+    const onClose = (e) => {
+        if (e.animationName === "fadeOut") props?.close();
+    }
+
+    const handleKeyDown = (event) => {
+        if (event.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">
+                <div className="dialog" ref={ref} onAnimationEnd={onClose} onKeyDown={handleKeyDown} style={{maxWidth: props.maxWidth || 650}}>
+                    {props.children}
+                </div>
+            </div>
+        </DialogContext.Provider>
+    )
+}
\ No newline at end of file