Ver Fonte

Add useKeyPress hook to ImportModal

cihat há 3 anos atrás
pai
commit
715a8971dc
1 ficheiros alterados com 14 adições e 0 exclusões
  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 { Button } from "src/components/Button";
 import { AiOutlineUpload } from "react-icons/ai";
+import useKeyPress from "../../hooks/useKeyPress";
 
 const StyledInput = styled.input`
   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(() => {
     return () => {
       setJsonFile(null);