diff options
Diffstat (limited to 'src/console/components/FindPrompt.tsx')
-rw-r--r-- | src/console/components/FindPrompt.tsx | 58 |
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; |