From 87e3a6c1b711c1bc45ecdde88486ed9f9be40c59 Mon Sep 17 00:00:00 2001
From: GRZ4NA <grzanatv@gmail.com>
Date: Mon, 4 Oct 2021 00:15:39 +0200
Subject: [PATCH] created universal popup window

---
 public/index.html                       |  1 +
 src/components/Window/index.js          |  9 +++++++
 src/components/Window/index.module.scss | 32 +++++++++++++++++++++++++
 src/utils/spawnPopup.js                 | 30 +++++++++++++++++++++++
 4 files changed, 72 insertions(+)
 create mode 100644 src/components/Window/index.js
 create mode 100644 src/components/Window/index.module.scss
 create mode 100644 src/utils/spawnPopup.js

diff --git a/public/index.html b/public/index.html
index 5dc1a87..9524d1c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,5 +15,6 @@
                 <img src="%PUBLIC_URL%/leaf.svg" alt="eco-meet logo" style="width: 15%; height: 15%" />
             </div>
         </div>
+        <div id="popup-container" style="display: none; width: 100vw; height: 100vh; z-index: 20; position: absolute; top: 0; left: 0"></div>
     </body>
 </html>
diff --git a/src/components/Window/index.js b/src/components/Window/index.js
new file mode 100644
index 0000000..7e425ad
--- /dev/null
+++ b/src/components/Window/index.js
@@ -0,0 +1,9 @@
+import styles from "./index.module.scss";
+
+export const Window = (props) => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.window}>{props.children}</div>
+        </div>
+    );
+};
diff --git a/src/components/Window/index.module.scss b/src/components/Window/index.module.scss
new file mode 100644
index 0000000..f51ad2e
--- /dev/null
+++ b/src/components/Window/index.module.scss
@@ -0,0 +1,32 @@
+@import "../../index.scss";
+
+.container {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.window {
+    max-width: 80%;
+    max-height: 80%;
+    min-width: 100px;
+    min-height: 100px;
+    border-radius: 10px;
+    background-color: $bggray;
+    padding: 10px;
+    animation: animate-in 0.3s ease backwards;
+}
+
+@keyframes animate-in {
+    from {
+        transform: scale(0.4);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
diff --git a/src/utils/spawnPopup.js b/src/utils/spawnPopup.js
new file mode 100644
index 0000000..2f4355e
--- /dev/null
+++ b/src/utils/spawnPopup.js
@@ -0,0 +1,30 @@
+import ReactDOM from "react-dom";
+import { Window } from "../components/Window";
+import { window as windowStyles } from "../components/Window/index.module.scss";
+
+const closeWindow = (resolver) => {
+    return () => {
+        document.getElementsByClassName(windowStyles)[0].animate(
+            [
+                { transform: "scale(1)", opacity: 1 },
+                { transform: "scale(0)", opacity: 0 },
+            ],
+            {
+                easing: "ease",
+                duration: 300,
+            }
+        );
+        setTimeout(() => {
+            ReactDOM.unmountComponentAtNode(document.getElementById("popup-container"));
+            document.getElementById("popup-container").style.display = "none";
+            resolver();
+        }, 300);
+    };
+};
+
+export const spawnPopup = async (elements) => {
+    return new Promise((resolve) => {
+        document.getElementById("popup-container").style.display = "block";
+        ReactDOM.render(<Window>{elements(closeWindow(resolve))}</Window>, document.getElementById("popup-container"));
+    });
+};