Run prettier
This commit is contained in:
LukeGus
@@ -1,182 +1,203 @@
|
||||
import React, {useState, useCallback, useEffect} from "react";
|
||||
import React, { useState, useCallback, useEffect } from "react";
|
||||
import Keyboard from "react-simple-keyboard";
|
||||
import "react-simple-keyboard/build/css/index.css";
|
||||
import "./kb-dark-theme.css";
|
||||
|
||||
interface TerminalKeyboardProps {
|
||||
onSendInput: (input: string) => void;
|
||||
onLayoutChange: () => void;
|
||||
onSendInput: (input: string) => void;
|
||||
onLayoutChange: () => void;
|
||||
}
|
||||
|
||||
export function TerminalKeyboard({onSendInput, onLayoutChange}: TerminalKeyboardProps) {
|
||||
const [layoutName, setLayoutName] = useState("default");
|
||||
const [isCtrl, setIsCtrl] = useState(false);
|
||||
const [isAlt, setIsAlt] = useState(false);
|
||||
export function TerminalKeyboard({
|
||||
onSendInput,
|
||||
onLayoutChange,
|
||||
}: TerminalKeyboardProps) {
|
||||
const [layoutName, setLayoutName] = useState("default");
|
||||
const [isCtrl, setIsCtrl] = useState(false);
|
||||
const [isAlt, setIsAlt] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (onLayoutChange) {
|
||||
const timeoutId = setTimeout(() => onLayoutChange(), 100);
|
||||
return () => clearTimeout(timeoutId);
|
||||
}
|
||||
}, [layoutName, onLayoutChange]);
|
||||
|
||||
const onKeyPress = useCallback((button: string) => {
|
||||
if (button === "{shift}") {
|
||||
setLayoutName("shift");
|
||||
return;
|
||||
}
|
||||
if (button === "{unshift}") {
|
||||
setLayoutName("default");
|
||||
return;
|
||||
}
|
||||
if (button === "{more}") {
|
||||
setLayoutName("more");
|
||||
return;
|
||||
}
|
||||
if (button === "{less}") {
|
||||
setLayoutName("default");
|
||||
return;
|
||||
}
|
||||
if (button === "{hide}") {
|
||||
setLayoutName("hide");
|
||||
return;
|
||||
}
|
||||
if (button === "{unhide}") {
|
||||
setLayoutName("default");
|
||||
return;
|
||||
}
|
||||
|
||||
if (button === "{ctrl}") {
|
||||
setIsCtrl(prev => !prev);
|
||||
return;
|
||||
}
|
||||
if (button === "{alt}") {
|
||||
setIsAlt(prev => !prev);
|
||||
return;
|
||||
}
|
||||
|
||||
let input = button;
|
||||
|
||||
const specialKeyMap: { [key: string]: string } = {
|
||||
"{esc}": "\x1b", "{enter}": "\r", "{tab}": "\t", "{backspace}": "\x7f",
|
||||
"{arrowUp}": "\x1b[A", "{arrowDown}": "\x1b[B", "{arrowRight}": "\x1b[C", "{arrowLeft}": "\x1b[D",
|
||||
"{home}": "\x1b[H", "{end}": "\x1b[F", "{pgUp}": "\x1b[5~", "{pgDn}": "\x1b[6~",
|
||||
"F1": "\x1bOP", "F2": "\x1bOQ", "F3": "\x1bOR", "F4": "\x1bOS",
|
||||
"F5": "\x1b[15~", "F6": "\x1b[17~", "F7": "\x1b[18~", "F8": "\x1b[19~",
|
||||
"F9": "\x1b[20~", "F10": "\x1b[21~", "F11": "\x1b[23~", "F12": "\x1b[24~",
|
||||
"{space}": " "
|
||||
};
|
||||
|
||||
if (specialKeyMap[input]) {
|
||||
input = specialKeyMap[input];
|
||||
}
|
||||
|
||||
if (isCtrl) {
|
||||
if (input.length === 1) {
|
||||
const charCode = input.toUpperCase().charCodeAt(0);
|
||||
if (charCode >= 64 && charCode <= 95) {
|
||||
input = String.fromCharCode(charCode - 64);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isAlt) {
|
||||
input = `\x1b${input}`;
|
||||
}
|
||||
|
||||
try {
|
||||
if (navigator.vibrate) {
|
||||
navigator.vibrate(20);
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
|
||||
onSendInput(input);
|
||||
}, [onSendInput, isCtrl, isAlt]);
|
||||
|
||||
const buttonTheme = [
|
||||
{
|
||||
class: "hg-space-big",
|
||||
buttons: "{space}",
|
||||
},
|
||||
{
|
||||
class: "hg-space-medium",
|
||||
buttons: "{enter} {backspace}",
|
||||
},
|
||||
{
|
||||
class: "hg-space-small",
|
||||
buttons: "{hide} {unhide} {less} {more}",
|
||||
}
|
||||
];
|
||||
|
||||
if (isCtrl) {
|
||||
buttonTheme.push({class: "key-active", buttons: "{ctrl}"});
|
||||
}
|
||||
if (isAlt) {
|
||||
buttonTheme.push({class: "key-active", buttons: "{alt}"});
|
||||
useEffect(() => {
|
||||
if (onLayoutChange) {
|
||||
const timeoutId = setTimeout(() => onLayoutChange(), 100);
|
||||
return () => clearTimeout(timeoutId);
|
||||
}
|
||||
}, [layoutName, onLayoutChange]);
|
||||
|
||||
return (
|
||||
<div className="z-10">
|
||||
<Keyboard
|
||||
layout={{
|
||||
default: [
|
||||
"{esc} {tab} {ctrl} {alt} {arrowLeft} {arrowRight} {arrowUp} {arrowDown}",
|
||||
"q w e r t y u i o p",
|
||||
"a s d f g h j k l",
|
||||
"{shift} z x c v b n m {backspace}",
|
||||
"{hide} {more} {space} {enter}",
|
||||
],
|
||||
shift: [
|
||||
"{esc} {tab} {ctrl} {alt} {arrowLeft} {arrowRight} {arrowUp} {arrowDown}",
|
||||
"Q W E R T Y U I O P",
|
||||
"A S D F G H J K L",
|
||||
"{unshift} Z X C V B N M {backspace}",
|
||||
"{hide} {more} {space} {enter}",
|
||||
],
|
||||
more: [
|
||||
"{esc} {tab} {ctrl} {alt} {end} {home} {pgUp} {pgDn}",
|
||||
"1 2 3 4 5 6 7 8 9 0",
|
||||
"! @ # $ % ^ & * ( ) _ +",
|
||||
"[ ] { } | \\ ; : ' \" , . / < >",
|
||||
"F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12",
|
||||
"{arrowLeft} {arrowRight} {arrowUp} {arrowDown} {backspace}",
|
||||
"{hide} {less} {space} {enter}",
|
||||
],
|
||||
hide: [
|
||||
"{unhide}"
|
||||
]
|
||||
}}
|
||||
layoutName={layoutName}
|
||||
onKeyPress={onKeyPress}
|
||||
display={{
|
||||
"{shift}": "up",
|
||||
"{unshift}": "dn",
|
||||
"{backspace}": "back",
|
||||
"{more}": "more",
|
||||
"{less}": "less",
|
||||
"{space}": "space",
|
||||
"{enter}": "enter",
|
||||
"{arrowLeft}": "←",
|
||||
"{arrowRight}": "→",
|
||||
"{arrowUp}": "↑",
|
||||
"{arrowDown}": "↓",
|
||||
"{hide}": "hide",
|
||||
"{unhide}": "unhide",
|
||||
"{esc}": "esc",
|
||||
"{tab}": "tab",
|
||||
"{ctrl}": "ctrl",
|
||||
"{alt}": "alt",
|
||||
"{end}": "end",
|
||||
"{home}": "home",
|
||||
"{pgUp}": "pgUp",
|
||||
"{pgDn}": "pgDn",
|
||||
}}
|
||||
theme={"hg-theme-default dark-theme"}
|
||||
useTouchEvents={true}
|
||||
disableButtonHold={true}
|
||||
buttonTheme={buttonTheme}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const onKeyPress = useCallback(
|
||||
(button: string) => {
|
||||
if (button === "{shift}") {
|
||||
setLayoutName("shift");
|
||||
return;
|
||||
}
|
||||
if (button === "{unshift}") {
|
||||
setLayoutName("default");
|
||||
return;
|
||||
}
|
||||
if (button === "{more}") {
|
||||
setLayoutName("more");
|
||||
return;
|
||||
}
|
||||
if (button === "{less}") {
|
||||
setLayoutName("default");
|
||||
return;
|
||||
}
|
||||
if (button === "{hide}") {
|
||||
setLayoutName("hide");
|
||||
return;
|
||||
}
|
||||
if (button === "{unhide}") {
|
||||
setLayoutName("default");
|
||||
return;
|
||||
}
|
||||
|
||||
if (button === "{ctrl}") {
|
||||
setIsCtrl((prev) => !prev);
|
||||
return;
|
||||
}
|
||||
if (button === "{alt}") {
|
||||
setIsAlt((prev) => !prev);
|
||||
return;
|
||||
}
|
||||
|
||||
let input = button;
|
||||
|
||||
const specialKeyMap: { [key: string]: string } = {
|
||||
"{esc}": "\x1b",
|
||||
"{enter}": "\r",
|
||||
"{tab}": "\t",
|
||||
"{backspace}": "\x7f",
|
||||
"{arrowUp}": "\x1b[A",
|
||||
"{arrowDown}": "\x1b[B",
|
||||
"{arrowRight}": "\x1b[C",
|
||||
"{arrowLeft}": "\x1b[D",
|
||||
"{home}": "\x1b[H",
|
||||
"{end}": "\x1b[F",
|
||||
"{pgUp}": "\x1b[5~",
|
||||
"{pgDn}": "\x1b[6~",
|
||||
F1: "\x1bOP",
|
||||
F2: "\x1bOQ",
|
||||
F3: "\x1bOR",
|
||||
F4: "\x1bOS",
|
||||
F5: "\x1b[15~",
|
||||
F6: "\x1b[17~",
|
||||
F7: "\x1b[18~",
|
||||
F8: "\x1b[19~",
|
||||
F9: "\x1b[20~",
|
||||
F10: "\x1b[21~",
|
||||
F11: "\x1b[23~",
|
||||
F12: "\x1b[24~",
|
||||
"{space}": " ",
|
||||
};
|
||||
|
||||
if (specialKeyMap[input]) {
|
||||
input = specialKeyMap[input];
|
||||
}
|
||||
|
||||
if (isCtrl) {
|
||||
if (input.length === 1) {
|
||||
const charCode = input.toUpperCase().charCodeAt(0);
|
||||
if (charCode >= 64 && charCode <= 95) {
|
||||
input = String.fromCharCode(charCode - 64);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isAlt) {
|
||||
input = `\x1b${input}`;
|
||||
}
|
||||
|
||||
try {
|
||||
if (navigator.vibrate) {
|
||||
navigator.vibrate(20);
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
onSendInput(input);
|
||||
},
|
||||
[onSendInput, isCtrl, isAlt],
|
||||
);
|
||||
|
||||
const buttonTheme = [
|
||||
{
|
||||
class: "hg-space-big",
|
||||
buttons: "{space}",
|
||||
},
|
||||
{
|
||||
class: "hg-space-medium",
|
||||
buttons: "{enter} {backspace}",
|
||||
},
|
||||
{
|
||||
class: "hg-space-small",
|
||||
buttons: "{hide} {unhide} {less} {more}",
|
||||
},
|
||||
];
|
||||
|
||||
if (isCtrl) {
|
||||
buttonTheme.push({ class: "key-active", buttons: "{ctrl}" });
|
||||
}
|
||||
if (isAlt) {
|
||||
buttonTheme.push({ class: "key-active", buttons: "{alt}" });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="z-10">
|
||||
<Keyboard
|
||||
layout={{
|
||||
default: [
|
||||
"{esc} {tab} {ctrl} {alt} {arrowLeft} {arrowRight} {arrowUp} {arrowDown}",
|
||||
"q w e r t y u i o p",
|
||||
"a s d f g h j k l",
|
||||
"{shift} z x c v b n m {backspace}",
|
||||
"{hide} {more} {space} {enter}",
|
||||
],
|
||||
shift: [
|
||||
"{esc} {tab} {ctrl} {alt} {arrowLeft} {arrowRight} {arrowUp} {arrowDown}",
|
||||
"Q W E R T Y U I O P",
|
||||
"A S D F G H J K L",
|
||||
"{unshift} Z X C V B N M {backspace}",
|
||||
"{hide} {more} {space} {enter}",
|
||||
],
|
||||
more: [
|
||||
"{esc} {tab} {ctrl} {alt} {end} {home} {pgUp} {pgDn}",
|
||||
"1 2 3 4 5 6 7 8 9 0",
|
||||
"! @ # $ % ^ & * ( ) _ +",
|
||||
"[ ] { } | \\ ; : ' \" , . / < >",
|
||||
"F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12",
|
||||
"{arrowLeft} {arrowRight} {arrowUp} {arrowDown} {backspace}",
|
||||
"{hide} {less} {space} {enter}",
|
||||
],
|
||||
hide: ["{unhide}"],
|
||||
}}
|
||||
layoutName={layoutName}
|
||||
onKeyPress={onKeyPress}
|
||||
display={{
|
||||
"{shift}": "up",
|
||||
"{unshift}": "dn",
|
||||
"{backspace}": "back",
|
||||
"{more}": "more",
|
||||
"{less}": "less",
|
||||
"{space}": "space",
|
||||
"{enter}": "enter",
|
||||
"{arrowLeft}": "←",
|
||||
"{arrowRight}": "→",
|
||||
"{arrowUp}": "↑",
|
||||
"{arrowDown}": "↓",
|
||||
"{hide}": "hide",
|
||||
"{unhide}": "unhide",
|
||||
"{esc}": "esc",
|
||||
"{tab}": "tab",
|
||||
"{ctrl}": "ctrl",
|
||||
"{alt}": "alt",
|
||||
"{end}": "end",
|
||||
"{home}": "home",
|
||||
"{pgUp}": "pgUp",
|
||||
"{pgDn}": "pgDn",
|
||||
}}
|
||||
theme={"hg-theme-default dark-theme"}
|
||||
useTouchEvents={true}
|
||||
disableButtonHold={true}
|
||||
buttonTheme={buttonTheme}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user