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

Add Modal

Browse Source
This commit is contained in:
Daniel Kluge
2022-01-14 14:27:19 +01:00
parent ee8e4b9fb9
commit a2f035ce1a
13 changed files with 592 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/REPL/REPLInput.tsx
View File

@ -1,19 +1,24 @@
import type { NextPage } from "next";
import React, { MutableRefObject } from "react";
import { commandCompletion, executeCommand } from "../../lib/commands";
import { CommandInterface } from "../../lib/commands";
import styles from "../../styles/REPL/REPLInput.module.css";
interface REPLInputParams {
historyCallback: CallableFunction;
historyClear: CallableFunction;
inputRef: MutableRefObject<HTMLInputElement|undefined>;
modalManipulation: {
setModalVisible: CallableFunction;
setModalProject: CallableFunction;
}
}
const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef}) => {
const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef, modalManipulation}) => {
const typed = React.createRef<HTMLSpanElement>();
const completion = React.createRef<HTMLSpanElement>();
const [currentCmd, setCurrentCmd] = React.useState<string[]>([]);
const [justTabbed, setJustTabbed] = React.useState<number>(0);
const cmdIf = new CommandInterface(modalManipulation);
const clearInput = (inputRef: HTMLInputElement) => {
inputRef.value = "";
@ -37,7 +42,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
} else {
input.maxLength = 20;
// Get completion hint
const suggest = commandCompletion(currentInput);
const suggest = CommandInterface.commandCompletion(currentInput);
setCurrentCmd(suggest);
if (suggest.length === 0) suggest.push("");
if (typed.current) typed.current.innerHTML = currentInput;
@ -64,7 +69,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
historyClear();
return false;
}
const result = executeCommand(command);
const result = cmdIf.executeCommand(command);
clearInput(input);
historyCallback(result);
return false;
@ -72,7 +77,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
if (e.key === "d" && e.ctrlKey) {
e.preventDefault();
const result = executeCommand("exit");
const result = cmdIf.executeCommand("exit");
clearInput(input);
historyCallback(result);
return false;

12
components/REPL/index.tsx
View File

@ -4,7 +4,15 @@ import REPLHistory from "./REPLHistory";
import styles from "../../styles/REPL/REPLComplete.module.css";
import type { NextPage } from "next";
const REPL: NextPage<{inputRef: MutableRefObject<HTMLInputElement|undefined>}> = ({ inputRef }) => {
interface IREPLProps {
inputRef: MutableRefObject<HTMLInputElement|undefined>;
modalManipulation: {
setModalVisible: CallableFunction;
setModalProject: CallableFunction;
}
}
const REPL: NextPage<IREPLProps> = ({ inputRef, modalManipulation }) => {
const [history, manipulateHistory] = useState<string[]>([]);
const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
const onClearHistory = () => manipulateHistory([]);
@ -15,7 +23,7 @@ const REPL: NextPage<{inputRef: MutableRefObject<HTMLInputElement|undefined>}> =
return (<div className={styles.container}>
<REPLHistory history={history} inputRef={inputRef} />
<REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} />
<REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} modalManipulation={modalManipulation} />
<div style={{flexGrow: 2}} onClick={focusInput}></div>
</div>);
};