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 {
historyCallback: CallableFunction;
historyClear: CallableFunction;
inputRef: MutableRefObject<HTMLInputElement|undefined>;
}
const REPLInput: NextPage<REPLInputParams> = ({historyCallback, inputRef}) => {
const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef}) => {
const typed = React.createRef<HTMLSpanElement>();
const completion = React.createRef<HTMLSpanElement>();
const [currentCmd, setCurrentCmd] = React.useState<string[]>([]);
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 input = (e.target as HTMLInputElement);
const currentInput = input.value.toLowerCase();
@ -50,22 +57,30 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, inputRef}) => {
if (e.key === "Enter") {
e.preventDefault();
const result = executeCommand((e.target as HTMLInputElement).value);
input.value = "";
if(typed.current) typed.current.innerHTML = "";
if(completion.current) completion.current.innerHTML = "";
const command = (e.target as HTMLInputElement).value
if (command === "clear") {
clearInput(input);
historyClear();
return false;
}
const result = executeCommand(command);
clearInput(input);
historyCallback(result);
}
if (e.key === "d" && e.ctrlKey) {
e.preventDefault();
const result = executeCommand("exit");
input.value = "";
if(typed.current) typed.current.innerHTML = "";
if(completion.current) completion.current.innerHTML = "";
clearInput(input);
historyCallback(result);
}
if (e.key === "l" && e.ctrlKey) {
e.preventDefault();
clearInput(input);
historyClear();
}
return false;
};

3
components/REPL/index.tsx
View File

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