aboutsummaryrefslogtreecommitdiff
path: root/src/console/components/FindPrompt.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/console/components/FindPrompt.tsx')
-rw-r--r--src/console/components/FindPrompt.tsx58
1 files changed, 58 insertions, 0 deletions
diff --git a/src/console/components/FindPrompt.tsx b/src/console/components/FindPrompt.tsx
new file mode 100644
index 0000000..c437d16
--- /dev/null
+++ b/src/console/components/FindPrompt.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import Input from "./console/Input";
+import styled from "styled-components";
+import useAutoResize from "../hooks/useAutoResize";
+import { useExecFind, useHide } from "../app/hooks";
+
+const ConsoleWrapper = styled.div`
+ border-top: 1px solid gray;
+`;
+
+const FindPrompt: React.FC = () => {
+ const [inputValue, setInputValue] = React.useState("");
+ const hide = useHide();
+ const execFind = useExecFind();
+
+ const onBlur = () => {
+ hide();
+ };
+
+ useAutoResize();
+
+ const doEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+ e.stopPropagation();
+ e.preventDefault();
+
+ const value = (e.target as HTMLInputElement).value;
+ execFind(value === "" ? undefined : value);
+ };
+
+ const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+ switch (e.key) {
+ case "Escape":
+ hide();
+ break;
+ case "Enter":
+ doEnter(e);
+ break;
+ }
+ };
+
+ const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setInputValue(e.target.value);
+ };
+
+ return (
+ <ConsoleWrapper>
+ <Input
+ prompt={"/"}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ onChange={onChange}
+ value={inputValue}
+ />
+ </ConsoleWrapper>
+ );
+};
+
+export default FindPrompt;