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

New structure and more tabbing

Browse Source
This commit is contained in:
Daniel Kluge
2021-12-15 18:56:32 +01:00
parent b99bdb366c
commit ced2559551
4 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/REPLInput.tsx → components/REPL/REPLInput.tsx
View File

@ -1,27 +1,30 @@
import type { NextPage } from "next";
import React from "react";
import { commandCompletion } from "../lib/commands";
import styles from "../styles/REPLInput.module.css";
import { commandCompletion } from "../../lib/commands";
import styles from "../../styles/REPLInput.module.css";
const REPLInput: NextPage = () => {
const REPLInput: NextPage<{historyCallback: CallableFunction}> = ({historyCallback}) => {
const typed = React.createRef<HTMLSpanElement>();
const completion = React.createRef<HTMLSpanElement>();
const [currentCmd, setCurrentCmd] = React.useState("");
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.substring(currentInput.length);
if (completion.current) completion.current.innerHTML = suggest[0].substring(currentInput.length);
};
const tabComplete = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Tab" && currentCmd !== "") {
if (e.key === "Tab" && currentCmd.length !== 0) {
e.preventDefault();
(e.target as HTMLInputElement).value = currentCmd;
if(typed.current) typed.current.innerHTML = currentCmd;
(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);
}
return false;
};

9
components/REPL/index.tsx Normal file
View File

@ -0,0 +1,9 @@
import { useCallback, useState } from "react";
import REPLInput from "./REPLInput";
const REPL = () => {
const [history, manipulateHistory] = useState([]);
return <REPLInput historyCallback={manipulateHistory} />;
};
export default REPL;