Browse Source

Add useKeyPress hook to ImportModal

cihat 3 years ago
parent
commit
715a8971dc
1 changed files with 14 additions and 0 deletions
  1. 14 0
      src/containers/ImportModal/index.tsx

+ 14 - 0
src/containers/ImportModal/index.tsx

@@ -7,6 +7,7 @@ import { ConfigActionType } from "src/reducer/reducer";
 import { Modal, ModalProps } from "src/components/Modal";
 import { Modal, ModalProps } from "src/components/Modal";
 import { Button } from "src/components/Button";
 import { Button } from "src/components/Button";
 import { AiOutlineUpload } from "react-icons/ai";
 import { AiOutlineUpload } from "react-icons/ai";
+import useKeyPress from "../../hooks/useKeyPress";
 
 
 const StyledInput = styled.input`
 const StyledInput = styled.input`
   background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
   background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
@@ -97,6 +98,19 @@ export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
     }
     }
   };
   };
 
 
+  const handleEspacePress = useKeyPress("Escape");
+  const handleEnterKeyPress = useKeyPress("Enter");
+  React.useEffect(() => {
+    if (handleEspacePress) {
+      setVisible(false);
+    }
+
+    if (handleEnterKeyPress) {
+      console.log("test enter");
+      handleImportFile();
+    }
+  }, [handleEspacePress, handleEnterKeyPress]);
+
   React.useEffect(() => {
   React.useEffect(() => {
     return () => {
     return () => {
       setJsonFile(null);
       setJsonFile(null);