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

Add clear command (fix #4)

Browse Source
This commit is contained in:
Daniel Kluge 2021-12-26 14:17:11 +01:00
parent 3dea76b80f
commit b9e4a4558c
3 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/REPL/REPLInput.tsx
View File

@ -5,15 +5,22 @@ import styles from "../../styles/REPL/REPLInput.module.css";
interface REPLInputParams { interface REPLInputParams {
historyCallback: CallableFunction; historyCallback: CallableFunction;
historyClear: CallableFunction;
inputRef: MutableRefObject<HTMLInputElement|undefined>; inputRef: MutableRefObject<HTMLInputElement|undefined>;
} }
const REPLInput: NextPage<REPLInputParams> = ({historyCallback, inputRef}) => { const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef}) => {
const typed = React.createRef<HTMLSpanElement>(); const typed = React.createRef<HTMLSpanElement>();
const completion = React.createRef<HTMLSpanElement>(); const completion = React.createRef<HTMLSpanElement>();
const [currentCmd, setCurrentCmd] = React.useState<string[]>([]); const [currentCmd, setCurrentCmd] = React.useState<string[]>([]);
const [justTabbed, setJustTabbed] = React.useState<number>(0); const [justTabbed, setJustTabbed] = React.useState<number>(0);
const clearInput = (inputRef: HTMLInputElement) => {
inputRef.value = "";
if(typed.current) typed.current.innerHTML = "";
if(completion.current) completion.current.innerHTML = "";
}
const replinOnChange = (e: React.FormEvent<HTMLInputElement>) => { const replinOnChange = (e: React.FormEvent<HTMLInputElement>) => {
const input = (e.target as HTMLInputElement); const input = (e.target as HTMLInputElement);
const currentInput = input.value.toLowerCase(); const currentInput = input.value.toLowerCase();
@ -50,22 +57,30 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, inputRef}) => {
if (e.key === "Enter") { if (e.key === "Enter") {
e.preventDefault(); e.preventDefault();
const result = executeCommand((e.target as HTMLInputElement).value); const command = (e.target as HTMLInputElement).value
input.value = ""; if (command === "clear") {
if(typed.current) typed.current.innerHTML = ""; clearInput(input);
if(completion.current) completion.current.innerHTML = ""; historyClear();
return false;
}
const result = executeCommand(command);
clearInput(input);
historyCallback(result); historyCallback(result);
} }
if (e.key === "d" && e.ctrlKey) { if (e.key === "d" && e.ctrlKey) {
e.preventDefault(); e.preventDefault();
const result = executeCommand("exit"); const result = executeCommand("exit");
input.value = ""; clearInput(input);
if(typed.current) typed.current.innerHTML = "";
if(completion.current) completion.current.innerHTML = "";
historyCallback(result); historyCallback(result);
} }
if (e.key === "l" && e.ctrlKey) {
e.preventDefault();
clearInput(input);
historyClear();
}
return false; return false;
}; };

3
components/REPL/index.tsx
View File

@ -6,6 +6,7 @@ const REPL = () => {
const [history, manipulateHistory] = useState<string[]>([]); const [history, manipulateHistory] = useState<string[]>([]);
const inputRef = useRef<HTMLInputElement>(); const inputRef = useRef<HTMLInputElement>();
const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000)); const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
const onClearHistory = () => manipulateHistory([]);
const focusInput = () => { const focusInput = () => {
if (inputRef.current) inputRef.current.focus(); if (inputRef.current) inputRef.current.focus();
@ -13,7 +14,7 @@ const REPL = () => {
return (<> return (<>
<REPLHistory history={history} inputRef={inputRef} /> <REPLHistory history={history} inputRef={inputRef} />
<REPLInput historyCallback={onCommandExecuted} inputRef={inputRef} /> <REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} />
<div style={{flexGrow: 2}} onClick={focusInput}></div> <div style={{flexGrow: 2}} onClick={focusInput}></div>
</>); </>);
}; };

8
lib/commands/definitions.ts
View File

@ -195,4 +195,10 @@ const exitCmd: Command = {
} }
} }
export const commandList = [about, help, man, project, exitCmd]; const clear: Command = {
name: "clear",
desc: "Clears the output on screen.",
execute: () => []
}
export const commandList = [about, help, man, project, exitCmd, clear];