blob: c6a04892348136642b635b81b45d26906c52e32b (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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;
|
