c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Fix tabbing

Browse Source
This commit is contained in:
Daniel Kluge 2022-06-12 15:19:24 +02:00
parent da277794af
commit 6e1175ee55
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/REPL/REPLInput.tsx
View File

@ -15,7 +15,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
const typed = createRef<HTMLSpanElement>(); const typed = createRef<HTMLSpanElement>();
const completion = createRef<HTMLSpanElement>(); const completion = createRef<HTMLSpanElement>();
const [currentCmd, setCurrentCmd] = useState<string[]>([]); const [currentCmd, setCurrentCmd] = useState<string[]>([]);
const [justTabbed, setJustTabbed] = useState<number>(0); let [justTabbed, setJustTabbed] = useState<number>(0); // Because setters are not in sync but the events are too fast
const [inCmdHistory, setInCmdHistory] = useState<number>(-1); const [inCmdHistory, setInCmdHistory] = useState<number>(-1);
const [cmdHistory, setCmdHistory] = useState<string[]>([]); const [cmdHistory, setCmdHistory] = useState<string[]>([]);
const [usrInputTmp, setUsrInputTmp] = useState<string>(""); const [usrInputTmp, setUsrInputTmp] = useState<string>("");
@ -29,7 +29,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
//if(typed.current) typed.current.innerHTML = input; //if(typed.current) typed.current.innerHTML = input;
//if(completion.current) completion.current.innerHTML = ""; //if(completion.current) completion.current.innerHTML = "";
inputRef.dispatchEvent(new Event("input", { bubbles: true })); inputRef.dispatchEvent(new Event("input", { bubbles: true }));
inputRef.dispatchEvent(new Event("change", { bubbles: true })); inputRef.dispatchEvent(new Event("change", { bubbles: true, }));
}; };
const clearInput = (inputRef: HTMLInputElement) => { const clearInput = (inputRef: HTMLInputElement) => {
@ -52,24 +52,30 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
return; return;
} else { } else {
input.maxLength = 20; input.maxLength = 20;
if(justTabbed === 0) {
// Get completion hint // Get completion hint
const suggest = CommandInterface.commandCompletion(currentInput); const suggest = CommandInterface.commandCompletion(currentInput);
setCurrentCmd(suggest); setCurrentCmd(suggest);
if (suggest.length === 0) suggest.push(""); if (suggest.length === 0) suggest.push("");
if (typed.current) typed.current.innerHTML = currentInput; if (typed.current) typed.current.innerHTML = currentInput;
if (completion.current) completion.current.innerHTML = suggest[0].substring(currentInput.length); if (completion.current) completion.current.innerHTML = suggest[0].substring(currentInput.length);
} else {
if (typed.current) typed.current.innerHTML = "";
if (completion.current) completion.current.innerHTML = "";
}
} }
}; };
const keyEvent = (e: React.KeyboardEvent<HTMLInputElement>) => { const keyEvent = (e: React.KeyboardEvent<HTMLInputElement>) => {
const input = (e.target as HTMLInputElement); const input = (e.target as HTMLInputElement);
if (e.key === "Tab") { if (e.key === "Tab") e.preventDefault();
e.preventDefault();
}
if (e.key === "Tab" && currentCmd.length !== 0) { if (e.key === "Tab" && currentCmd.length !== 0) {
const cmd = `${currentCmd[justTabbed % currentCmd.length]}${currentCmd.length === 1 ? " " : ""}`; const cmd = `${currentCmd[justTabbed % currentCmd.length]}${currentCmd.length === 1 ? " " : ""}`;
setInput(input, cmd);
setJustTabbed(justTabbed + 1); setJustTabbed(justTabbed + 1);
justTabbed += 1; // Because setters are not in sync but the events are too fast
setInput(input, cmd);
return false; return false;
} else setJustTabbed(0); } else setJustTabbed(0);

2
lib/commands/index.ts
View File

@ -17,7 +17,7 @@ export class CommandInterface {
static commandCompletion(input: string): string[] { static commandCompletion(input: string): string[] {
if (input === "") return []; if (input === "") return [];
const candidates = commandList.filter(cmd => cmd.name.substring(0, input.length) === input).map(cmd => cmd.name); const candidates = commandList.filter(cmd => cmd.name.startsWith(input)).map(cmd => cmd.name);
return candidates; return candidates;
} }