Separate FindPrompt

3 files changed, 92 insertions, 32 deletions

diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
index 951b627..d4c9151 100644
--- a/src/console/components/Console.tsx
+++ b/src/console/components/Console.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Input from "./console/Input";
 import Completion from "./console/Completion";
+import FindPrompt from "./FindPrompt";
 import InfoMessage from "./InfoMessage";
 import ErrorMessage from "./ErrorMessage";
 import * as consoleActions from "../../console/actions/console";
@@ -178,11 +179,10 @@ const Console: React.FC = () => {
     }
   };
 
-  switch (state.mode) {
-    case "command":
-    case "find":
-      return (
-        <ColorSchemeProvider colorscheme={state.colorscheme}>
+  const ele = (() => {
+    switch (state.mode) {
+      case "command":
+        return (
           <ConsoleWrapper>
             <Completion
               size={COMPLETION_MAX_ITEMS}
@@ -190,30 +190,30 @@ const Console: React.FC = () => {
               select={state.select}
             />
             <Input
-              mode={state.mode}
+              prompt={":"}
               onBlur={onBlur}
               onKeyDown={onKeyDown}
               onChange={onChange}
               value={state.consoleText}
             />
           </ConsoleWrapper>
-        </ColorSchemeProvider>
-      );
-    case "info":
-      return (
-        <ColorSchemeProvider colorscheme={state.colorscheme}>
-          <InfoMessage>{state.messageText}</InfoMessage>
-        </ColorSchemeProvider>
-      );
-    case "error":
-      return (
-        <ColorSchemeProvider colorscheme={state.colorscheme}>
-          <ErrorMessage>{state.messageText}</ErrorMessage>
-        </ColorSchemeProvider>
-      );
-    default:
-      return null;
-  }
+        );
+      case "find":
+        return <FindPrompt />;
+      case "info":
+        return <InfoMessage>{state.messageText}</InfoMessage>;
+      case "error":
+        return <ErrorMessage>{state.messageText}</ErrorMessage>;
+      default:
+        return null;
+    }
+  })();
+
+  return (
+    <ColorSchemeProvider colorscheme={state.colorscheme}>
+      {ele}
+    </ColorSchemeProvider>
+  );
 };
 
 export default Console;
diff --git a/src/console/components/FindPrompt.tsx b/src/console/components/FindPrompt.tsx
new file mode 100644
index 0000000..c6a0489
--- /dev/null
+++ b/src/console/components/FindPrompt.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import * as consoleActions from "../../console/actions/console";
+import ConsoleFrameClient from "../clients/ConsoleFrameClient";
+import AppContext from "./AppContext";
+import Input from "./console/Input";
+import styled from "styled-components";
+
+const ConsoleWrapper = styled.div`
+  border-top: 1px solid gray;
+`;
+
+const FindPrompt: React.FC = () => {
+  const { dispatch } = React.useContext(AppContext);
+  const [inputValue, setInputValue] = React.useState("");
+
+  const consoleFrameClient = new ConsoleFrameClient();
+  const onBlur = () => {
+    dispatch(consoleActions.hideCommand());
+  };
+
+  const doEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const value = (e.target as HTMLInputElement).value;
+    dispatch(consoleActions.enterFind(value === "" ? undefined : value));
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    switch (e.key) {
+      case "Escape":
+        dispatch(consoleActions.hideCommand());
+        break;
+      case "Enter":
+        doEnter(e);
+        break;
+    }
+  };
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  React.useEffect(() => {
+    window.focus();
+
+    const {
+      scrollWidth: width,
+      scrollHeight: height,
+    } = document.getElementById("vimvixen-console")!;
+    consoleFrameClient.resize(width, height);
+  }, []);
+
+  return (
+    <ConsoleWrapper>
+      <Input
+        prompt={"/"}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+        onChange={onChange}
+        value={inputValue}
+      />
+    </ConsoleWrapper>
+  );
+};
+
+export default FindPrompt;
diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx
index 1f56036..7850f43 100644
--- a/src/console/components/console/Input.tsx
+++ b/src/console/components/console/Input.tsx
@@ -19,7 +19,7 @@ const InputInner = styled.input`
 `;
 
 interface Props {
-  mode: string;
+  prompt: string;
   value: string;
   onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
@@ -33,16 +33,9 @@ const Input: React.FC<Props> = (props) => {
     input?.current?.focus();
   }, []);
 
-  let prompt = "";
-  if (props.mode === "command") {
-    prompt = ":";
-  } else if (props.mode === "find") {
-    prompt = "/";
-  }
-
   return (
     <Container>
-      <Prompt>{prompt}</Prompt>
+      <Prompt>{props.prompt}</Prompt>
       <InputInner
         ref={input}
         onBlur={props.onBlur}