From 4bfeddda79fe212c1a32e20df4ba046daa6385fe Mon Sep 17 00:00:00 2001
From: Martavis Parker <47053705+martavis@users.noreply.github.com>
Date: Tue, 15 Jun 2021 09:56:23 -0700
Subject: [PATCH] Escape key closes modals (#1088)

* Closes #922

* #922 added Windows section to build docs

* go sum updated

* updated go sum

* fixed #963 - calling teams api if not on core

* added command for seeding queries

* added command default to higher level

* linted test

* only need 2 queries

* fixed e2e command for seeding queries

* fixes #952 - added esc key binding to modals

* #952 lint fix
---
 frontend/components/modals/Modal/Modal.tsx | 51 +++++++++++++---------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/frontend/components/modals/Modal/Modal.tsx b/frontend/components/modals/Modal/Modal.tsx
index bc56fdec04..2a7c532303 100644
--- a/frontend/components/modals/Modal/Modal.tsx
+++ b/frontend/components/modals/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useEffect } from "react";
 import classnames from "classnames";
 
 const baseClass = "modal";
@@ -10,28 +10,39 @@ interface IModalProps {
   className?: string;
 }
 
-class Modal extends Component<IModalProps> {
-  render(): JSX.Element {
-    const { children, className, onExit, title } = this.props;
-    const modalContainerClassName = classnames(
-      `${baseClass}__modal_container`,
-      className
-    );
+const Modal = ({ children, onExit, title, className }: IModalProps) => {
+  useEffect(() => {
+    const closeWithEscapeKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onExit();
+      }
+    };
 
-    return (
-      <div className={`${baseClass}__background`}>
-        <div className={modalContainerClassName}>
-          <div className={`${baseClass}__header`}>
-            <span>{title}</span>
-            <div className={`${baseClass}__ex`}>
-              <button className="button button--unstyled" onClick={onExit} />
-            </div>
+    document.addEventListener("keydown", closeWithEscapeKey);
+
+    return () => {
+      document.removeEventListener("keydown", closeWithEscapeKey);
+    };
+  }, []);
+
+  const modalContainerClassName = classnames(
+    `${baseClass}__modal_container`,
+    className
+  );
+
+  return (
+    <div className={`${baseClass}__background`}>
+      <div className={modalContainerClassName}>
+        <div className={`${baseClass}__header`}>
+          <span>{title}</span>
+          <div className={`${baseClass}__ex`}>
+            <button className="button button--unstyled" onClick={onExit} />
           </div>
-          <div className={`${baseClass}__content`}>{children}</div>
         </div>
+        <div className={`${baseClass}__content`}>{children}</div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default Modal;