diff --git a/ui/src/components/GlobalKeydownTrigger.tsx b/ui/src/components/GlobalKeydownTrigger.tsx new file mode 100644 index 000000000..d857f336c --- /dev/null +++ b/ui/src/components/GlobalKeydownTrigger.tsx @@ -0,0 +1,21 @@ +import React, {useEffect, useMemo, useState} from "react"; + +interface GlobalKeydownTriggerProps { + onKeyDown: (key: string) => void; +} + +const GlobalKeydownTrigger: React.FC = ({onKeyDown}) => { + // @ts-ignore + useEffect(() => { + const keyDownHandler = e => onKeyDown(e.key); + document.addEventListener("keydown", keyDownHandler); + return () => { + //clean up listener on unmount or on callback change + document.removeEventListener("keydown", keyDownHandler); + } + }, [onKeyDown]); + + return <> +}; + +export default GlobalKeydownTrigger; diff --git a/ui/src/components/LoginPage.tsx b/ui/src/components/LoginPage.tsx index 3196f7641..161739a1b 100644 --- a/ui/src/components/LoginPage.tsx +++ b/ui/src/components/LoginPage.tsx @@ -4,6 +4,7 @@ import { toast } from "react-toastify"; import { MizuContext, Page } from "../EntApp"; import Api from "../helpers/api"; import { useCommonStyles } from "../helpers/commonStyle"; +import GlobalKeydownTrigger from "./GlobalKeydownTrigger"; import LoadingOverlay from "./LoadingOverlay"; const api = Api.getInstance(); @@ -35,14 +36,15 @@ const LoginPage: React.FC = () => { } } - const handleFormOnKeyPress = (e: React.KeyboardEvent) => { - if (e.key === "Enter") { + const handleFormOnKeyPress = (key: string) => { + if (key === "Enter") { onFormSubmit(); } }; - return
+ return
+ {isLoading && }
Login