From 618fb497c443662531eb3befe7696a04efe9651d Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 11 Apr 2021 18:00:51 +0900 Subject: Replace completion state with Custom Hooks --- src/console/actions/completion.ts | 243 --------------------------- src/console/actions/console.ts | 17 +- src/console/completion/actions.ts | 76 +++++++++ src/console/completion/context.ts | 9 + src/console/completion/hooks.ts | 277 +++++++++++++++++++++++++++++++ src/console/completion/provider.tsx | 25 +++ src/console/completion/reducer.ts | 96 +++++++++++ src/console/components/CommandPrompt.tsx | 219 +++++++----------------- src/console/components/Console.tsx | 2 +- src/console/reducers/completion.ts | 99 ----------- src/console/reducers/console.ts | 3 - 11 files changed, 549 insertions(+), 517 deletions(-) delete mode 100644 src/console/actions/completion.ts create mode 100644 src/console/completion/actions.ts create mode 100644 src/console/completion/context.ts create mode 100644 src/console/completion/hooks.ts create mode 100644 src/console/completion/provider.tsx create mode 100644 src/console/completion/reducer.ts delete mode 100644 src/console/reducers/completion.ts (limited to 'src') diff --git a/src/console/actions/completion.ts b/src/console/actions/completion.ts deleted file mode 100644 index 2f6f82f..0000000 --- a/src/console/actions/completion.ts +++ /dev/null @@ -1,243 +0,0 @@ -import { Command } from "../../shared/Command"; -import CompletionClient from "../clients/CompletionClient"; -import CompletionType from "../../shared/CompletionType"; -import Completions from "../Completions"; -import TabFlag from "../../shared/TabFlag"; - -const completionClient = new CompletionClient(); - -const commandDocs = { - [Command.Set]: "Set a value of the property", - [Command.Open]: "Open a URL or search by keywords in current tab", - [Command.TabOpen]: "Open a URL or search by keywords in new tab", - [Command.WindowOpen]: "Open a URL or search by keywords in new window", - [Command.Buffer]: "Select tabs by matched keywords", - [Command.BufferDelete]: "Close a certain tab matched by keywords", - [Command.BuffersDelete]: "Close all tabs matched by keywords", - [Command.Quit]: "Close the current tab", - [Command.QuitAll]: "Close all tabs", - [Command.AddBookmark]: "Add current page to bookmarks", - [Command.Help]: "Open Vim Vixen help in new tab", -}; - -const propertyDocs: { [key: string]: string } = { - hintchars: "hint characters on follow mode", - smoothscroll: "smooth scroll", - complete: "which are completed at the open page", - colorscheme: "color scheme of the console", -}; - -export const COMPLETION_START_COMPLETION = "console.start.completion"; -export const COMPLETION_SET_COMPLETIONS = "console.set.completions"; -export const COMPLETION_COMPLETION_NEXT = "completion.completion.next"; -export const COMPLETION_COMPLETION_PREV = "completion.completion.prev"; - -export interface CompletionStartCompletionAction { - type: typeof COMPLETION_START_COMPLETION; - completionTypes: CompletionType[]; -} - -export interface SetCompletionsAction { - type: typeof COMPLETION_SET_COMPLETIONS; - completions: Completions; - completionSource: string; -} - -export interface CompletionNextAction { - type: typeof COMPLETION_COMPLETION_NEXT; -} - -export interface CompletionPrevAction { - type: typeof COMPLETION_COMPLETION_PREV; -} - -export type CompletionAction = - | CompletionStartCompletionAction - | SetCompletionsAction - | CompletionNextAction - | CompletionPrevAction; -const startCompletion = async (): Promise => { - const completionTypes = await completionClient.getCompletionTypes(); - return { - type: COMPLETION_START_COMPLETION, - completionTypes, - }; -}; - -const getCommandCompletions = (text: string): SetCompletionsAction => { - const items = Object.entries(commandDocs) - .filter(([name]) => name.startsWith(text.trimLeft())) - .map(([name, doc]) => ({ - caption: name, - content: name, - url: doc, - })); - const completions = [ - { - name: "Console Command", - items, - }, - ]; - return { - type: COMPLETION_SET_COMPLETIONS, - completions, - completionSource: text, - }; -}; - -const getOpenCompletions = async ( - types: CompletionType[], - original: string, - command: Command, - query: string -): Promise => { - const completions: Completions = []; - for (const type of types) { - switch (type) { - case CompletionType.SearchEngines: { - const items = await completionClient.requestSearchEngines(query); - if (items.length === 0) { - break; - } - completions.push({ - name: "Search Engines", - items: items.map((key) => ({ - caption: key.title, - content: command + " " + key.title, - })), - }); - break; - } - case CompletionType.History: { - const items = await completionClient.requestHistory(query); - if (items.length === 0) { - break; - } - completions.push({ - name: "History", - items: items.map((item) => ({ - caption: item.title, - content: command + " " + item.url, - url: item.url, - })), - }); - break; - } - case CompletionType.Bookmarks: { - const items = await completionClient.requestBookmarks(query); - if (items.length === 0) { - break; - } - completions.push({ - name: "Bookmarks", - items: items.map((item) => ({ - caption: item.title, - content: command + " " + item.url, - url: item.url, - })), - }); - break; - } - } - } - - return { - type: COMPLETION_SET_COMPLETIONS, - completions, - completionSource: original, - }; -}; - -const getTabCompletions = async ( - original: string, - command: Command, - query: string, - excludePinned: boolean -): Promise => { - const items = await completionClient.requestTabs(query, excludePinned); - let completions: Completions = []; - if (items.length > 0) { - completions = [ - { - name: "Buffers", - items: items.map((item) => ({ - content: command + " " + item.url, - caption: `${item.index}: ${ - item.flag != TabFlag.None ? item.flag : " " - } ${item.title}`, - url: item.url, - icon: item.faviconUrl, - })), - }, - ]; - } - return { - type: COMPLETION_SET_COMPLETIONS, - completions, - completionSource: original, - }; -}; - -const getPropertyCompletions = async ( - original: string, - command: Command, - query: string -): Promise => { - const properties = await completionClient.getProperties(); - const items = properties - .map((item) => { - const desc = propertyDocs[item.name] || ""; - if (item.type === "boolean") { - return [ - { - caption: item.name, - content: command + " " + item.name, - url: "Enable " + desc, - }, - { - caption: "no" + item.name, - content: command + " no" + item.name, - url: "Disable " + desc, - }, - ]; - } else { - return [ - { - caption: item.name, - content: command + " " + item.name, - url: "Set " + desc, - }, - ]; - } - }) - .reduce((acc, val) => acc.concat(val), []) - .filter((item) => item.caption.startsWith(query)); - const completions: Completions = [{ name: "Properties", items }]; - return { - type: COMPLETION_SET_COMPLETIONS, - completions, - completionSource: original, - }; -}; - -const completionNext = (): CompletionNextAction => { - return { - type: COMPLETION_COMPLETION_NEXT, - }; -}; - -const completionPrev = (): CompletionPrevAction => { - return { - type: COMPLETION_COMPLETION_PREV, - }; -}; - -export { - startCompletion, - getCommandCompletions, - getOpenCompletions, - getTabCompletions, - getPropertyCompletions, - completionNext, - completionPrev, -}; diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts index bce2c67..2338067 100644 --- a/src/console/actions/console.ts +++ b/src/console/actions/console.ts @@ -4,7 +4,6 @@ export const CONSOLE_SHOW_COMMAND = "console.show.command"; export const CONSOLE_SHOW_ERROR = "console.show.error"; export const CONSOLE_SHOW_INFO = "console.show.info"; export const CONSOLE_HIDE_COMMAND = "console.hide.command"; -export const CONSOLE_SET_CONSOLE_TEXT = "console.set.command"; export const CONSOLE_SHOW_FIND = "console.show.find"; export const CONSOLE_HIDE = "console.hide"; @@ -35,19 +34,13 @@ export interface HideCommandAction { type: typeof CONSOLE_HIDE_COMMAND; } -export interface SetConsoleTextAction { - type: typeof CONSOLE_SET_CONSOLE_TEXT; - consoleText: string; -} - export type ConsoleAction = | HideAction | ShowCommand | ShowFindAction | ShowErrorAction | ShowInfoAction - | HideCommandAction - | SetConsoleTextAction; + | HideCommandAction; const hide = (): ConsoleAction => { return { @@ -113,13 +106,6 @@ const enterFind = (text?: string): HideCommandAction => { return hideCommand(); }; -const setConsoleText = (consoleText: string): SetConsoleTextAction => { - return { - type: CONSOLE_SET_CONSOLE_TEXT, - consoleText, - }; -}; - export { hide, showCommand, @@ -127,7 +113,6 @@ export { showError, showInfo, hideCommand, - setConsoleText, enterCommand, enterFind, }; diff --git a/src/console/completion/actions.ts b/src/console/completion/actions.ts new file mode 100644 index 0000000..59d1a04 --- /dev/null +++ b/src/console/completion/actions.ts @@ -0,0 +1,76 @@ +import CompletionType from "../../shared/CompletionType"; +import Completions from "../Completions"; + +export const INIT_COMPLETIONS = "reset.completions"; +export const SET_COMPLETION_SOURCE = "set.completion.source"; +export const SET_COMPLETIONS = "set.completions"; +export const COMPLETION_NEXT = "completion.next"; +export const COMPLETION_PREV = "completion.prev"; + +export interface InitCompletionAction { + type: typeof INIT_COMPLETIONS; + completionTypes: CompletionType[]; +} + +export interface SetCompletionSourceAction { + type: typeof SET_COMPLETION_SOURCE; + completionSource: string; +} + +export interface SetCompletionsAction { + type: typeof SET_COMPLETIONS; + completions: Completions; +} + +export interface CompletionNextAction { + type: typeof COMPLETION_NEXT; +} + +export interface CompletionPrevAction { + type: typeof COMPLETION_PREV; +} + +export type CompletionAction = + | InitCompletionAction + | SetCompletionSourceAction + | SetCompletionsAction + | CompletionNextAction + | CompletionPrevAction; + +export const initCompletion = ( + completionTypes: CompletionType[] +): InitCompletionAction => { + return { + type: INIT_COMPLETIONS, + completionTypes, + }; +}; +export const setCompletionSource = ( + query: string +): SetCompletionSourceAction => { + return { + type: SET_COMPLETION_SOURCE, + completionSource: query, + }; +}; + +export const setCompletions = ( + completions: Completions +): SetCompletionsAction => { + return { + type: SET_COMPLETIONS, + completions, + }; +}; + +export const selectNext = (): CompletionNextAction => { + return { + type: COMPLETION_NEXT, + }; +}; + +export const selectPrev = (): CompletionPrevAction => { + return { + type: COMPLETION_PREV, + }; +}; diff --git a/src/console/completion/context.ts b/src/console/completion/context.ts new file mode 100644 index 0000000..2fafcf8 --- /dev/null +++ b/src/console/completion/context.ts @@ -0,0 +1,9 @@ +import React from "react"; +import { State, defaultState } from "./reducer"; +import { CompletionAction } from "./actions"; + +export const CompletionStateContext = React.createContext(defaultState); + +export const CompletionDispatchContext = React.createContext< + (action: CompletionAction) => void +>(() => {}); diff --git a/src/console/completion/hooks.ts b/src/console/completion/hooks.ts new file mode 100644 index 0000000..aac431b --- /dev/null +++ b/src/console/completion/hooks.ts @@ -0,0 +1,277 @@ +import React from "react"; +import * as actions from "./actions"; +import { Command } from "../../shared/Command"; +import TabFlag from "../../shared/TabFlag"; +import { CompletionStateContext, CompletionDispatchContext } from "./context"; +import CompletionClient from "../clients/CompletionClient"; +import CommandLineParser, { + CommandLine, + InputPhase, +} from "../commandline/CommandLineParser"; +import { UnknownCommandError } from "../commandline/CommandParser"; +import Completions from "../Completions"; +import CompletionType from "../../shared/CompletionType"; + +const commandDocs = { + [Command.Set]: "Set a value of the property", + [Command.Open]: "Open a URL or search by keywords in current tab", + [Command.TabOpen]: "Open a URL or search by keywords in new tab", + [Command.WindowOpen]: "Open a URL or search by keywords in new window", + [Command.Buffer]: "Select tabs by matched keywords", + [Command.BufferDelete]: "Close a certain tab matched by keywords", + [Command.BuffersDelete]: "Close all tabs matched by keywords", + [Command.Quit]: "Close the current tab", + [Command.QuitAll]: "Close all tabs", + [Command.AddBookmark]: "Add current page to bookmarks", + [Command.Help]: "Open Vim Vixen help in new tab", +}; + +const propertyDocs: { [key: string]: string } = { + hintchars: "hint characters on follow mode", + smoothscroll: "smooth scroll", + complete: "which are completed at the open page", + colorscheme: "color scheme of the console", +}; + +const completionClient = new CompletionClient(); + +const getCommandCompletions = async (query: string): Promise => { + const items = Object.entries(commandDocs) + .filter(([name]) => name.startsWith(query)) + .map(([name, doc]) => ({ + caption: name, + content: name, + url: doc, + })); + return [ + { + name: "Console Command", + items, + }, + ]; +}; + +const getOpenCompletions = async ( + command: string, + query: string, + completionTypes: CompletionType[] +): Promise => { + const completions: Completions = []; + for (const type of completionTypes) { + switch (type) { + case CompletionType.SearchEngines: { + const items = await completionClient.requestSearchEngines(query); + if (items.length === 0) { + break; + } + completions.push({ + name: "Search Engines", + items: items.map((key) => ({ + caption: key.title, + content: command + " " + key.title, + })), + }); + break; + } + case CompletionType.History: { + const items = await completionClient.requestHistory(query); + if (items.length === 0) { + break; + } + completions.push({ + name: "History", + items: items.map((item) => ({ + caption: item.title, + content: command + " " + item.url, + url: item.url, + })), + }); + break; + } + case CompletionType.Bookmarks: { + const items = await completionClient.requestBookmarks(query); + if (items.length === 0) { + break; + } + completions.push({ + name: "Bookmarks", + items: items.map((item) => ({ + caption: item.title, + content: command + " " + item.url, + url: item.url, + })), + }); + break; + } + } + } + return completions; +}; + +export const getTabCompletions = async ( + command: string, + query: string, + excludePinned: boolean +): Promise => { + const items = await completionClient.requestTabs(query, excludePinned); + if (items.length === 0) { + return []; + } + + return [ + { + name: "Buffers", + items: items.map((item) => ({ + content: command + " " + item.url, + caption: `${item.index}: ${ + item.flag != TabFlag.None ? item.flag : " " + } ${item.title}`, + url: item.url, + icon: item.faviconUrl, + })), + }, + ]; +}; + +export const getPropertyCompletions = async ( + command: string, + query: string +): Promise => { + const properties = await completionClient.getProperties(); + const items = properties + .map((item) => { + const desc = propertyDocs[item.name] || ""; + if (item.type === "boolean") { + return [ + { + caption: item.name, + content: command + " " + item.name, + url: "Enable " + desc, + }, + { + caption: "no" + item.name, + content: command + " no" + item.name, + url: "Disable " + desc, + }, + ]; + } else { + return [ + { + caption: item.name, + content: command + " " + item.name, + url: "Set " + desc, + }, + ]; + } + }) + .reduce((acc, val) => acc.concat(val), []) + .filter((item) => item.caption.startsWith(query)); + return [{ name: "Properties", items }]; +}; + +export const useCompletions = () => { + const state = React.useContext(CompletionStateContext); + const dispatch = React.useContext(CompletionDispatchContext); + const commandLineParser = React.useMemo(() => new CommandLineParser(), []); + + const updateCompletions = React.useCallback((source: string) => { + dispatch(actions.setCompletionSource(source)); + }, []); + + const initCompletion = React.useCallback((source: string) => { + completionClient.getCompletionTypes().then((completionTypes) => { + dispatch(actions.initCompletion(completionTypes)); + dispatch(actions.setCompletionSource(source)); + }); + }, []); + + React.useEffect(() => { + const text = state.completionSource; + const phase = commandLineParser.inputPhase(text); + if (phase === InputPhase.OnCommand) { + getCommandCompletions(text).then((completions) => + dispatch(actions.setCompletions(completions)) + ); + } else { + let cmd: CommandLine | null = null; + try { + cmd = commandLineParser.parse(text); + } catch (e) { + if (e instanceof UnknownCommandError) { + return; + } + } + switch (cmd?.command) { + case Command.Open: + case Command.TabOpen: + case Command.WindowOpen: + if (!state.completionTypes) { + initCompletion(text); + return; + } + + getOpenCompletions( + cmd.command, + cmd.args, + state.completionTypes + ).then((completions) => + dispatch(actions.setCompletions(completions)) + ); + break; + case Command.Buffer: + getTabCompletions(cmd.command, cmd.args, false).then((completions) => + dispatch(actions.setCompletions(completions)) + ); + break; + case Command.BufferDelete: + case Command.BuffersDelete: + getTabCompletions(cmd.command, cmd.args, true).then((completions) => + dispatch(actions.setCompletions(completions)) + ); + break; + case Command.BufferDeleteForce: + case Command.BuffersDeleteForce: + getTabCompletions(cmd.command, cmd.args, false).then((completions) => + dispatch(actions.setCompletions(completions)) + ); + break; + case Command.Set: + getPropertyCompletions(cmd.command, cmd.args).then((completions) => + dispatch(actions.setCompletions(completions)) + ); + break; + } + } + }, [state.completionSource, state.completionTypes]); + + return { + completions: state.completions, + updateCompletions, + initCompletion, + }; +}; + +export const useSelectCompletion = () => { + const state = React.useContext(CompletionStateContext); + const dispatch = React.useContext(CompletionDispatchContext); + const next = React.useCallback(() => dispatch(actions.selectNext()), [ + dispatch, + ]); + const prev = React.useCallback(() => dispatch(actions.selectPrev()), [ + dispatch, + ]); + const currentValue = React.useMemo(() => { + if (state.select < 0) { + return state.completionSource; + } + const items = state.completions.map((g) => g.items).flat(); + return items[state.select]?.content || ""; + }, [state.completionSource, state.select]); + + return { + select: state.select, + currentValue, + selectNext: next, + selectPrev: prev, + }; +}; diff --git a/src/console/completion/provider.tsx b/src/console/completion/provider.tsx new file mode 100644 index 0000000..c0de250 --- /dev/null +++ b/src/console/completion/provider.tsx @@ -0,0 +1,25 @@ +import reducer, { defaultState } from "./reducer"; +import React from "react"; +import { CompletionDispatchContext, CompletionStateContext } from "./context"; + +interface Props { + initialInputValue: string; +} + +export const CompletionProvider: React.FC = ({ + initialInputValue, + children, +}) => { + const initialState = { + ...defaultState, + completionSource: initialInputValue, + }; + const [state, dispatch] = React.useReducer(reducer, initialState); + return ( + + + {children} + + + ); +}; diff --git a/src/console/completion/reducer.ts b/src/console/completion/reducer.ts new file mode 100644 index 0000000..905451f --- /dev/null +++ b/src/console/completion/reducer.ts @@ -0,0 +1,96 @@ +import Completions from "../Completions"; +import CompletionType from "../../shared/CompletionType"; +import { + INIT_COMPLETIONS, + SET_COMPLETION_SOURCE, + SET_COMPLETIONS, + COMPLETION_NEXT, + COMPLETION_PREV, + CompletionAction, +} from "./actions"; + +export interface State { + completionTypes?: CompletionType[]; + completionSource: string; + completions: Completions; + select: number; +} + +export const defaultState = { + completionTypes: undefined, + completionSource: "", + completions: [], + select: -1, +}; + +const nextSelection = (state: State): number => { + const length = state.completions + .map((g) => g.items.length) + .reduce((x, y) => x + y, 0); + if (length === 0) { + return -1; + } + if (state.select < 0) { + return 0; + } + if (state.select + 1 < length) { + return state.select + 1; + } + return -1; +}; + +const prevSelection = (state: State): number => { + if (state.completions.length === 0) { + return -1; + } + const length = state.completions + .map((g) => g.items.length) + .reduce((x, y) => x + y); + if (state.select < 0) { + return length - 1; + } + return state.select - 1; +}; + +// eslint-disable-next-line max-lines-per-function +export default function reducer( + state: State = defaultState, + action: CompletionAction +): State { + switch (action.type) { + case INIT_COMPLETIONS: + return { + ...state, + completionTypes: action.completionTypes, + completions: [], + select: -1, + }; + case SET_COMPLETION_SOURCE: + return { + ...state, + completionSource: action.completionSource, + select: -1, + }; + case SET_COMPLETIONS: + return { + ...state, + completions: action.completions, + }; + case COMPLETION_NEXT: { + const select = nextSelection(state); + return { + ...state, + select: select, + }; + } + case COMPLETION_PREV: { + const select = prevSelection(state); + return { + ...state, + select: select, + }; + } + default: + return state; + } +} diff --git a/src/console/components/CommandPrompt.tsx b/src/console/components/CommandPrompt.tsx index f6f4d8f..24f46ae 100644 --- a/src/console/components/CommandPrompt.tsx +++ b/src/console/components/CommandPrompt.tsx @@ -1,17 +1,12 @@ import React from "react"; import * as consoleActions from "../actions/console"; -import * as completionActions from "../actions/completion"; import AppContext from "./AppContext"; -import CommandLineParser, { - InputPhase, -} from "../commandline/CommandLineParser"; import Completion from "./console/Completion"; import Input from "./console//Input"; -import { Command } from "../../shared/Command"; import styled from "styled-components"; -import reducer, { defaultState, completedText } from "../reducers/completion"; -import CompletionType from "../../shared/CompletionType"; +import { useCompletions, useSelectCompletion } from "../completion/hooks"; import useAutoResize from "../hooks/useAutoResize"; +import { CompletionProvider } from "../completion/provider"; const COMPLETION_MAX_ITEMS = 33; @@ -19,13 +14,20 @@ const ConsoleWrapper = styled.div` border-top: 1px solid gray; `; -const CommandPrompt: React.FC = () => { - const { state, dispatch } = React.useContext(AppContext); - const [completionState, completionDispatch] = React.useReducer( - reducer, - defaultState - ); - const commandLineParser = new CommandLineParser(); +interface Props { + initialInputValue: string; +} + +const CommandPromptInner: React.FC = ({ initialInputValue }) => { + const { dispatch } = React.useContext(AppContext); + const [inputValue, setInputValue] = React.useState(initialInputValue); + const { completions, updateCompletions } = useCompletions(); + const { + select, + currentValue, + selectNext, + selectPrev, + } = useSelectCompletion(); useAutoResize(); @@ -33,174 +35,81 @@ const CommandPrompt: React.FC = () => { dispatch(consoleActions.hideCommand()); }; - const doEnter = (e: React.KeyboardEvent) => { - e.stopPropagation(); - e.preventDefault(); + const isCancelKey = React.useCallback( + (e: React.KeyboardEvent) => + e.key === "Escape" || + (e.ctrlKey && e.key === "[") || + (e.ctrlKey && e.key === "c"), + [] + ); - const value = (e.target as HTMLInputElement).value; - dispatch(consoleActions.enterCommand(value)); - }; + const isNextKey = React.useCallback( + (e: React.KeyboardEvent) => + (!e.shiftKey && e.key === "Tab") || (e.ctrlKey && e.key === "n"), + [] + ); - const selectNext = (e: React.KeyboardEvent) => { - completionDispatch(completionActions.completionNext()); - e.stopPropagation(); - e.preventDefault(); - }; + const isPrevKey = React.useCallback( + (e: React.KeyboardEvent) => + (e.shiftKey && e.key === "Tab") || (e.ctrlKey && e.key === "p"), + [] + ); - const selectPrev = (e: React.KeyboardEvent) => { - completionDispatch(completionActions.completionPrev()); - e.stopPropagation(); - e.preventDefault(); - }; + const isEnterKey = React.useCallback( + (e: React.KeyboardEvent) => + e.key === "Enter" || (e.ctrlKey && e.key === "m"), + [] + ); const onKeyDown = (e: React.KeyboardEvent) => { - switch (e.key) { - case "Escape": - dispatch(consoleActions.hideCommand()); - break; - case "Enter": - doEnter(e); - break; - case "Tab": - if (e.shiftKey) { - completionDispatch(completionActions.completionPrev()); - } else { - completionDispatch(completionActions.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; + if (isCancelKey(e)) { + dispatch(consoleActions.hideCommand()); + } else if (isEnterKey(e)) { + const value = (e.target as HTMLInputElement).value; + dispatch(consoleActions.enterCommand(value)); + } else if (isNextKey(e)) { + selectNext(); + } else if (isPrevKey(e)) { + selectPrev(); + } else { + return; } + + e.stopPropagation(); + e.preventDefault(); }; const onChange = (e: React.ChangeEvent) => { const text = e.target.value; - dispatch(consoleActions.setConsoleText(text)); - const action = getCompletionAction(text); - Promise.resolve(action).then((a) => { - if (a) { - completionDispatch(a); - } - }); + setInputValue(text); }; React.useEffect(() => { - completionActions.startCompletion().then((action) => { - completionDispatch(action); - - const completionAction = getCompletionAction( - state.consoleText, - action.completionTypes - ); - Promise.resolve(completionAction).then((a) => { - if (a) { - completionDispatch(a); - } - }); - }); - }, []); - - const getCompletionAction = ( - text: string, - completionTypes: CompletionType[] | undefined = undefined - ) => { - const types = completionTypes || completionState.completionTypes; - const phase = commandLineParser.inputPhase(text); - if (phase === InputPhase.OnCommand) { - return completionActions.getCommandCompletions(text); - } else { - const cmd = commandLineParser.parse(text); - switch (cmd.command) { - case Command.Open: - case Command.TabOpen: - case Command.WindowOpen: - return completionActions.getOpenCompletions( - types, - text, - cmd.command, - cmd.args - ); - case Command.Buffer: - return completionActions.getTabCompletions( - text, - cmd.command, - cmd.args, - false - ); - case Command.BufferDelete: - case Command.BuffersDelete: - return completionActions.getTabCompletions( - text, - cmd.command, - cmd.args, - true - ); - case Command.BufferDeleteForce: - case Command.BuffersDeleteForce: - return completionActions.getTabCompletions( - text, - cmd.command, - cmd.args, - false - ); - case Command.Set: - return completionActions.getPropertyCompletions( - text, - cmd.command, - cmd.args - ); - } - } - return undefined; - }; + updateCompletions(inputValue); + }, [inputValue]); return ( ); }; +const CommandPrompt: React.FC = ({ initialInputValue }) => ( + + + +); + export default CommandPrompt; diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index f6f4234..508c6eb 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -16,7 +16,7 @@ const Console: React.FC = () => { switch (state.mode) { case "command": - return ; + return ; case "find": return ; case "info": diff --git a/src/console/reducers/completion.ts b/src/console/reducers/completion.ts deleted file mode 100644 index 2c7ee55..0000000 --- a/src/console/reducers/completion.ts +++ /dev/null @@ -1,99 +0,0 @@ -import Completions from "../Completions"; -import CompletionType from "../../shared/CompletionType"; -import { - COMPLETION_COMPLETION_NEXT, - COMPLETION_COMPLETION_PREV, - COMPLETION_SET_COMPLETIONS, - COMPLETION_START_COMPLETION, - CompletionAction, -} from "../actions/completion"; - -export interface State { - completionTypes: CompletionType[]; - completionSource: string; - completions: Completions; - select: number; -} - -export const defaultState = { - completionTypes: [], - completionSource: "", - completions: [], - select: -1, -}; - -const nextSelection = (state: State): number => { - if (state.completions.length === 0) { - return -1; - } - if (state.select < 0) { - return 0; - } - - const length = state.completions - .map((g) => g.items.length) - .reduce((x, y) => x + y); - if (state.select + 1 < length) { - return state.select + 1; - } - return -1; -}; - -const prevSelection = (state: State): number => { - const length = state.completions - .map((g) => g.items.length) - .reduce((x, y) => x + y); - if (state.select < 0) { - return length - 1; - } - return state.select - 1; -}; - -export const completedText = (state: State): string => { - if (state.select < 0) { - return state.completionSource; - } - const items = state.completions - .map((g) => g.items) - .reduce((g1, g2) => g1.concat(g2)); - return items[state.select].content || ""; -}; - -// eslint-disable-next-line max-lines-per-function -export default function reducer( - state: State = defaultState, - action: CompletionAction -): State { - switch (action.type) { - case COMPLETION_START_COMPLETION: - return { - ...state, - completionTypes: action.completionTypes, - completions: [], - select: -1, - }; - case COMPLETION_SET_COMPLETIONS: - return { - ...state, - completions: action.completions, - completionSource: action.completionSource, - select: -1, - }; - case COMPLETION_COMPLETION_NEXT: { - const select = nextSelection(state); - return { - ...state, - select: select, - }; - } - case COMPLETION_COMPLETION_PREV: { - const select = prevSelection(state); - return { - ...state, - select: select, - }; - } - default: - return state; - } -} diff --git a/src/console/reducers/console.ts b/src/console/reducers/console.ts index 37f1efc..babad69 100644 --- a/src/console/reducers/console.ts +++ b/src/console/reducers/console.ts @@ -1,7 +1,6 @@ import { CONSOLE_HIDE, CONSOLE_HIDE_COMMAND, - CONSOLE_SET_CONSOLE_TEXT, CONSOLE_SHOW_COMMAND, CONSOLE_SHOW_ERROR, CONSOLE_SHOW_FIND, @@ -47,8 +46,6 @@ export default function reducer( mode: state.mode === "command" || state.mode === "find" ? "" : state.mode, }; - case CONSOLE_SET_CONSOLE_TEXT: - return { ...state, consoleText: action.consoleText }; default: return state; } -- cgit v1.2.3