Merge branch 'develop' into feature/multiarch_build

This commit is contained in:
M. Mert Yıldıran 2022-01-18 13:49:28 +03:00 committed by GitHub
commit f973748c61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 62 additions and 14 deletions

View File

@ -9,6 +9,8 @@ import filterUIExample2 from "./assets/filter-ui-example-2.png"
import variables from '../variables.module.scss';
import {useRecoilState} from "recoil";
import queryAtom from "../recoil/query";
import useKeyPress from "../hooks/useKeyPress"
import shortcutsKeyboard from "../configs/shortcutsKeyboard"
interface FiltersProps {
backgroundColor: string
@ -60,6 +62,8 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, ws, openWe
setQuery(e.target.value);
}
const handleSubmit = (e) => {
ws.close();
if (query) {
@ -70,6 +74,8 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, ws, openWe
e.preventDefault();
}
useKeyPress(shortcutsKeyboard.ctrlEnter, handleSubmit, formRef.current);
return <>
<form
ref={formRef}

View File

@ -1,5 +1,5 @@
import { Button } from "@material-ui/core";
import React, { useState } from "react";
import React, { useState,useRef } from "react";
import { adminUsername } from "../consts";
import Api, { FormValidationErrorType } from "../helpers/api";
import { toast } from 'react-toastify';
@ -7,6 +7,9 @@ import LoadingOverlay from "./LoadingOverlay";
import { useCommonStyles } from "../helpers/commonStyle";
import {useSetRecoilState} from "recoil";
import entPageAtom, {Page} from "../recoil/entPage";
import useKeyPress from "../hooks/useKeyPress"
import shortcutsKeyboard from "../configs/shortcutsKeyboard"
const api = Api.getInstance();
@ -16,6 +19,7 @@ interface InstallPageProps {
export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
const formRef = useRef(null);
const classes = useCommonStyles();
const [isLoading, setIsLoading] = useState(false);
const [password, setPassword] = useState("");
@ -54,13 +58,9 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
}
const handleFormOnKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
onFormSubmit();
}
};
useKeyPress(shortcutsKeyboard.enter, onFormSubmit, formRef.current);
return <div className="centeredForm" onKeyPress={handleFormOnKeyPress}>
return <div className="centeredForm" ref={formRef}>
{isLoading && <LoadingOverlay/>}
<div className="form-title left-text">Setup</div>
<span className="form-subtitle">Welcome to Mizu, please set up the admin user to continue</span>

View File

@ -1,11 +1,14 @@
import { Button } from "@material-ui/core";
import React, { useState } from "react";
import React, { useState,useRef } from "react";
import { toast } from "react-toastify";
import Api from "../helpers/api";
import { useCommonStyles } from "../helpers/commonStyle";
import LoadingOverlay from "./LoadingOverlay";
import entPageAtom, {Page} from "../recoil/entPage";
import {useSetRecoilState} from "recoil";
import useKeyPress from "../hooks/useKeyPress"
import shortcutsKeyboard from "../configs/shortcutsKeyboard"
const api = Api.getInstance();
@ -15,6 +18,7 @@ const LoginPage: React.FC = () => {
const [isLoading, setIsLoading] = useState(false);
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const formRef = useRef(null);
const setEntPage = useSetRecoilState(entPageAtom);
@ -36,13 +40,9 @@ const LoginPage: React.FC = () => {
}
}
const handleFormOnKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
onFormSubmit();
}
};
useKeyPress(shortcutsKeyboard.enter, onFormSubmit, formRef.current);
return <div className="centeredForm" onKeyPress={handleFormOnKeyPress}>
return <div className="centeredForm" ref={formRef}>
{isLoading && <LoadingOverlay/>}
<div className="form-title left-text">Login</div>
<div className="form-input">

View File

@ -0,0 +1,7 @@
const dictionary = {
ctrlEnter : [{metaKey : true, code:"Enter"}, {ctrlKey:true, code:"Enter"}], // support Ctrl/command
enter : [{code:"Enter"}]
};
export default dictionary;

View File

@ -0,0 +1,35 @@
import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
const useKeyPress = (eventConfigs, callback, node = null) => {
// implement the callback ref pattern
const callbackRef = useRef(callback);
useLayoutEffect(() => {
callbackRef.current = callback;
});
// handle what happens on key press
const handleKeyPress = useCallback(
(event) => {
// check if one of the key is part of the ones we want
if (eventConfigs.some((eventConfig) => Object.keys(eventConfig).every(nameKey => eventConfig[nameKey] === event[nameKey]))) {
callbackRef.current(event);
}
},
[eventConfigs]
);
useEffect(() => {
// target is either the provided node or the document
const targetNode = node ?? document;
// attach the event listener
targetNode &&
targetNode.addEventListener("keydown", handleKeyPress);
// remove the event listener
return () =>
targetNode &&
targetNode.removeEventListener("keydown", handleKeyPress);
}, [handleKeyPress, node]);
};
export default useKeyPress;