55 lines
2.5 KiB
TypeScript
55 lines
2.5 KiB
TypeScript
import type { NextPage } from "next";
|
|
import React, { MutableRefObject } from "react";
|
|
import { commandCompletion, executeCommand } from "../../lib/commands";
|
|
import styles from "../../styles/REPL/REPLInput.module.css";
|
|
|
|
interface REPLInputParams {
|
|
historyCallback: CallableFunction;
|
|
inputRef: MutableRefObject<HTMLInputElement|undefined>;
|
|
}
|
|
|
|
const REPLInput: NextPage<REPLInputParams> = ({historyCallback, 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 replinOnChange = (e: React.FormEvent<HTMLInputElement>) => {
|
|
const currentInput = (e.target as HTMLInputElement).value;
|
|
const suggest = commandCompletion(currentInput);
|
|
setCurrentCmd(suggest);
|
|
if (suggest.length === 0) suggest.push("");
|
|
if (typed.current) typed.current.innerHTML = currentInput;
|
|
if (completion.current) completion.current.innerHTML = suggest[0].substring(currentInput.length);
|
|
};
|
|
|
|
const tabComplete = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Tab" && currentCmd.length !== 0) {
|
|
e.preventDefault();
|
|
(e.target as HTMLInputElement).value = currentCmd[justTabbed % currentCmd.length];
|
|
if(typed.current) typed.current.innerHTML = currentCmd[justTabbed % currentCmd.length];
|
|
if(completion.current) completion.current.innerHTML = "";
|
|
setJustTabbed(justTabbed + 1);
|
|
} else setJustTabbed(0);
|
|
|
|
if (e.key === "Enter") {
|
|
const result = executeCommand((e.target as HTMLInputElement).value);
|
|
(e.target as HTMLInputElement).value = "";
|
|
if(typed.current) typed.current.innerHTML = "";
|
|
if(completion.current) completion.current.innerHTML = "";
|
|
historyCallback(result);
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
return <div className={styles.wrapperwrapper}>
|
|
<span className={styles.inputstart}>$ </span>
|
|
<div className={styles.wrapper}>
|
|
<input ref={inputRef as MutableRefObject<HTMLInputElement>} className={styles.in} type={"text"} onChange={replinOnChange} onKeyDown={tabComplete} spellCheck={"false"} autoFocus />
|
|
<span className={styles.completionWrapper}><span ref={typed} className={styles.typed}></span><span ref={completion} className={styles.completion}></span></span>
|
|
</div>
|
|
</div>;
|
|
};
|
|
|
|
export default REPLInput; |