diff --git a/components/REPLInput.tsx b/components/REPL/REPLInput.tsx similarity index 64% rename from components/REPLInput.tsx rename to components/REPL/REPLInput.tsx index ece4031..23bd174 100644 --- a/components/REPLInput.tsx +++ b/components/REPL/REPLInput.tsx @@ -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(); const completion = React.createRef(); - const [currentCmd, setCurrentCmd] = React.useState(""); + const [currentCmd, setCurrentCmd] = React.useState([]); + const [justTabbed, setJustTabbed] = React.useState(0); const replinOnChange = (e: React.FormEvent) => { 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) => { - 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; }; diff --git a/components/REPL/index.tsx b/components/REPL/index.tsx new file mode 100644 index 0000000..a3bdfc8 --- /dev/null +++ b/components/REPL/index.tsx @@ -0,0 +1,9 @@ +import { useCallback, useState } from "react"; +import REPLInput from "./REPLInput"; + +const REPL = () => { + const [history, manipulateHistory] = useState([]); + return ; +}; + +export default REPL; \ No newline at end of file diff --git a/lib/commands.ts b/lib/commands.ts index 9032157..0006724 100644 --- a/lib/commands.ts +++ b/lib/commands.ts @@ -1,7 +1,7 @@ const commandList = ["about", "navigate", "external", "help", "ed", "nano"]; -export function commandCompletion(input: string): string { - if (input === "") return ""; - const candidates = commandList.map((cmd) => [cmd.substring(0, input.length), cmd]).filter((cmd) => cmd[0] === input); - return candidates.length > 0 ? candidates[0][1] : ""; +export function commandCompletion(input: string): string[] { + if (input === "") return []; + const candidates = commandList.filter((cmd) => cmd.substring(0, input.length) === input); + return candidates; } \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index 5950576..b81bd9d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,9 +1,9 @@ import type { NextPage } from "next"; -import REPLInput from "../components/REPLInput"; +import REPL from "../components/REPL"; const Home: NextPage = () => { return ( - + ); };