Merge pull request #62 from cihat/add-shortcut-in-popup

Add `useKeyPress` hooks and shortcut in ImportModal

src/components/Modal/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { ReactComponent } from "src/typings/global";
 import { Button } from "src/components/Button";
 import * as Styled from "./styles";
+import useKeyPress from "src/hooks/useKeyPress";
 
 type ControlProps = React.PropsWithChildren<{
   setVisible: (status: boolean) => void;
@@ -31,6 +32,12 @@ const Content: ReactComponent = ({ children }) => {
 };
 
 const Controls: React.FC<ControlProps> = ({ children, setVisible }) => {
+  const handleEspacePress = useKeyPress("Escape");
+
+  React.useEffect(() => {
+    if (handleEspacePress) setVisible(false);
+  }, [handleEspacePress]);
+
   return (
     <Styled.ControlsWrapper>
       <Button onClick={() => setVisible(false)}>Close</Button>

src/hooks/useKeyPress.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+const useKeyPress = (targetKey) => {
+  const [keyPressed, setKeyPressed] = React.useState(false);
+
+  function downHandler({ key }) {
+    if (key === targetKey) setKeyPressed(true);
+  }
+  const upHandler = ({ key }) => {
+    if (key === targetKey) setKeyPressed(false);
+  };
+  React.useEffect(() => {
+    window.addEventListener("keydown", downHandler);
+    window.addEventListener("keyup", upHandler);
+
+    return () => {
+      window.removeEventListener("keydown", downHandler);
+      window.removeEventListener("keyup", upHandler);
+    };
+  }, []);
+  return keyPressed;
+};
+
+export default useKeyPress;