diff options
Diffstat (limited to 'src/console/components/Console.tsx')
-rw-r--r-- | src/console/components/Console.tsx | 187 |
1 files changed, 4 insertions, 183 deletions
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index d4c9151..8a1f73c 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -1,203 +1,24 @@ import React from "react"; -import Input from "./console/Input"; -import Completion from "./console/Completion"; import FindPrompt from "./FindPrompt"; +import CommandPrompt from "./CommandPrompt"; import InfoMessage from "./InfoMessage"; import ErrorMessage from "./ErrorMessage"; import * as consoleActions from "../../console/actions/console"; -import CommandLineParser, { - InputPhase, -} from "../commandline/CommandLineParser"; -import { Command } from "../../shared/Command"; -import ColorSchemeProvider, { styled } from "./ColorSchemeProvider"; -import ConsoleFrameClient from "../clients/ConsoleFrameClient"; +import ColorSchemeProvider from "./ColorSchemeProvider"; import AppContext from "./AppContext"; -const ConsoleWrapper = styled.div` - border-top: 1px solid gray; -`; - -const COMPLETION_MAX_ITEMS = 33; - const Console: React.FC = () => { const { state, dispatch } = React.useContext(AppContext); - const commandLineParser = new CommandLineParser(); - const consoleFrameClient = new ConsoleFrameClient(); - - const onBlur = () => { - if (state.mode === "command" || state.mode === "find") { - dispatch(consoleActions.hideCommand()); - } - }; - - const doEnter = (e: React.KeyboardEvent<HTMLInputElement>) => { - e.stopPropagation(); - e.preventDefault(); - - const value = (e.target as HTMLInputElement).value; - if (state.mode === "command") { - dispatch(consoleActions.enterCommand(value)); - } else if (state.mode === "find") { - dispatch(consoleActions.enterFind(value === "" ? undefined : value)); - } - }; - - const selectNext = (e: React.KeyboardEvent<HTMLInputElement>) => { - dispatch(consoleActions.completionNext()); - e.stopPropagation(); - e.preventDefault(); - }; - - const selectPrev = (e: React.KeyboardEvent<HTMLInputElement>) => { - dispatch(consoleActions.completionPrev()); - e.stopPropagation(); - e.preventDefault(); - }; - - const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { - switch (e.key) { - case "Escape": - dispatch(consoleActions.hideCommand()); - break; - case "Enter": - doEnter(e); - break; - case "Tab": - if (e.shiftKey) { - dispatch(consoleActions.completionPrev()); - } else { - dispatch(consoleActions.completionNext()); - } - e.stopPropagation(); - e.preventDefault(); - break; - case "[": - if (e.ctrlKey) { - e.preventDefault(); - dispatch(consoleActions.hideCommand()); - } - break; - case "c": - if (e.ctrlKey) { - e.preventDefault(); - dispatch(consoleActions.hideCommand()); - } - break; - case "m": - if (e.ctrlKey) { - doEnter(e); - } - break; - case "n": - if (e.ctrlKey) { - selectNext(e); - } - break; - case "p": - if (e.ctrlKey) { - selectPrev(e); - } - break; - } - }; - - const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { - const text = e.target.value; - dispatch(consoleActions.setConsoleText(text)); - if (state.mode !== "command") { - return; - } - updateCompletions(text); - }; - const prevState = React.useRef(state); React.useEffect(() => { - if (prevState.current.mode !== "command" && state.mode === "command") { - updateCompletions(state.consoleText); - focus(); - } else if (prevState.current.mode !== "find" && state.mode === "find") { - focus(); - } - - const { - scrollWidth: width, - scrollHeight: height, - } = document.getElementById("vimvixen-console")!; - consoleFrameClient.resize(width, height); - - prevState.current = state; - }); - - const focus = () => { dispatch(consoleActions.setColorScheme()); - window.focus(); - }; - - const updateCompletions = (text: string) => { - const phase = commandLineParser.inputPhase(text); - if (phase === InputPhase.OnCommand) { - dispatch(consoleActions.getCommandCompletions(text)); - } else { - const cmd = commandLineParser.parse(text); - switch (cmd.command) { - case Command.Open: - case Command.TabOpen: - case Command.WindowOpen: - dispatch( - consoleActions.getOpenCompletions( - state.completionTypes, - text, - cmd.command, - cmd.args - ) - ); - break; - case Command.Buffer: - dispatch( - consoleActions.getTabCompletions(text, cmd.command, cmd.args, false) - ); - break; - case Command.BufferDelete: - case Command.BuffersDelete: - dispatch( - consoleActions.getTabCompletions(text, cmd.command, cmd.args, true) - ); - break; - case Command.BufferDeleteForce: - case Command.BuffersDeleteForce: - dispatch( - consoleActions.getTabCompletions(text, cmd.command, cmd.args, false) - ); - break; - case Command.Set: - dispatch( - consoleActions.getPropertyCompletions(text, cmd.command, cmd.args) - ); - break; - } - } - }; + }, []); const ele = (() => { switch (state.mode) { case "command": - return ( - <ConsoleWrapper> - <Completion - size={COMPLETION_MAX_ITEMS} - completions={state.completions} - select={state.select} - /> - <Input - prompt={":"} - onBlur={onBlur} - onKeyDown={onKeyDown} - onChange={onChange} - value={state.consoleText} - /> - </ConsoleWrapper> - ); + return <CommandPrompt />; case "find": return <FindPrompt />; case "info": |