aboutsummaryrefslogtreecommitdiff
path: root/src/console/components/CommandPrompt.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/console/components/CommandPrompt.tsx')
-rw-r--r--src/console/components/CommandPrompt.tsx36
1 files changed, 28 insertions, 8 deletions
diff --git a/src/console/components/CommandPrompt.tsx b/src/console/components/CommandPrompt.tsx
index 0e2506c..5d4cb6e 100644
--- a/src/console/components/CommandPrompt.tsx
+++ b/src/console/components/CommandPrompt.tsx
@@ -3,6 +3,7 @@ import Completion from "./console/Completion";
import Input from "./console//Input";
import styled from "styled-components";
import { useCompletions, useSelectCompletion } from "../completion/hooks";
+import useDebounce from "../hooks/useDebounce";
import useAutoResize from "../hooks/useAutoResize";
import { CompletionProvider } from "../completion/provider";
import { useExecCommand, useHide } from "../app/hooks";
@@ -17,14 +18,23 @@ interface Props {
initialInputValue: string;
}
+enum SelectQueueType {
+ SelectNext,
+ SelectPrev,
+}
+
const CommandPromptInner: React.FC<Props> = ({ initialInputValue }) => {
const hide = useHide();
const [inputValue, setInputValue] = React.useState(initialInputValue);
- const { completions, updateCompletions } = useCompletions();
+ const debouncedValue = useDebounce(inputValue, 100);
+ const { completions, loading } = useCompletions(debouncedValue);
const { select, currentValue, selectNext, selectPrev } =
useSelectCompletion();
const execCommand = useExecCommand();
+ // The value is set after the user presses Tab (or Shift+Tab) key and waiting the completion
+ const [selecting, setSelecting] = React.useState<SelectQueueType>();
+
useAutoResize();
const onBlur = () => {
@@ -65,9 +75,9 @@ const CommandPromptInner: React.FC<Props> = ({ initialInputValue }) => {
execCommand(value);
hide();
} else if (isNextKey(e)) {
- selectNext();
+ setSelecting(SelectQueueType.SelectNext);
} else if (isPrevKey(e)) {
- selectPrev();
+ setSelecting(SelectQueueType.SelectPrev);
} else {
return;
}
@@ -76,15 +86,25 @@ const CommandPromptInner: React.FC<Props> = ({ initialInputValue }) => {
e.preventDefault();
};
+ React.useEffect(() => {
+ if (inputValue !== debouncedValue || loading) {
+ // The completions of the latest input value are not fetched
+ return;
+ }
+ if (selecting === SelectQueueType.SelectNext) {
+ selectNext();
+ setSelecting(undefined);
+ } else if (selecting === SelectQueueType.SelectPrev) {
+ selectPrev();
+ setSelecting(undefined);
+ }
+ }, [inputValue, debouncedValue, selecting, loading]);
+
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const text = e.target.value;
setInputValue(text);
};
- React.useEffect(() => {
- updateCompletions(inputValue);
- }, [inputValue]);
-
return (
<ConsoleWrapper>
<Completion
@@ -97,7 +117,7 @@ const CommandPromptInner: React.FC<Props> = ({ initialInputValue }) => {
onBlur={onBlur}
onKeyDown={onKeyDown}
onChange={onChange}
- value={select == -1 ? inputValue : currentValue}
+ value={select == -1 || loading ? inputValue : currentValue}
/>
</ConsoleWrapper>
);