aboutsummaryrefslogtreecommitdiff
path: root/src/console
diff options
context:
space:
mode:
Diffstat (limited to 'src/console')
-rw-r--r--src/console/components/CommandPrompt.tsx182
-rw-r--r--src/console/components/Console.tsx187
-rw-r--r--src/console/components/FindPrompt.tsx2
3 files changed, 186 insertions, 185 deletions
diff --git a/src/console/components/CommandPrompt.tsx b/src/console/components/CommandPrompt.tsx
new file mode 100644
index 0000000..d69fae6
--- /dev/null
+++ b/src/console/components/CommandPrompt.tsx
@@ -0,0 +1,182 @@
+import React from "react";
+import * as consoleActions from "../../console/actions/console";
+import AppContext from "./AppContext";
+import CommandLineParser, {
+ InputPhase,
+} from "../commandline/CommandLineParser";
+import Completion from "./console/Completion";
+import ConsoleFrameClient from "../clients/ConsoleFrameClient";
+import Input from "./console//Input";
+import { Command } from "../../shared/Command";
+import styled from "styled-components";
+
+const COMPLETION_MAX_ITEMS = 33;
+
+const ConsoleWrapper = styled.div`
+ border-top: 1px solid gray;
+`;
+
+const CommandPrompt: 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));
+ updateCompletions(text);
+ };
+
+ React.useEffect(() => {
+ updateCompletions(state.consoleText);
+ }, []);
+
+ React.useEffect(() => {
+ const {
+ scrollWidth: width,
+ scrollHeight: height,
+ } = document.getElementById("vimvixen-console")!;
+ consoleFrameClient.resize(width, height);
+ });
+
+ 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;
+ }
+ }
+ };
+
+ 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>
+ );
+};
+
+export default CommandPrompt;
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":
diff --git a/src/console/components/FindPrompt.tsx b/src/console/components/FindPrompt.tsx
index c6a0489..c79e4d3 100644
--- a/src/console/components/FindPrompt.tsx
+++ b/src/console/components/FindPrompt.tsx
@@ -42,8 +42,6 @@ const FindPrompt: React.FC = () => {
};
React.useEffect(() => {
- window.focus();
-
const {
scrollWidth: width,
scrollHeight: height,
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 18:11:42 +0000