generated from pengx17/logseq-plugin-template-react
-
-
Notifications
You must be signed in to change notification settings - Fork 10
/
TaskInput.tsx
62 lines (55 loc) · 1.65 KB
/
TaskInput.tsx
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
import React, { useImperativeHandle, useRef } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { CirclePlus } from 'tabler-icons-react';
import { inputState } from '../state/input';
import { themeStyleState } from '../state/theme';
export interface ITaskInputRef {
focus: () => void;
}
export interface ITaskInputProps {
onCreateTask(content: string): void;
}
const TaskInput: React.ForwardRefRenderFunction<
ITaskInputRef,
ITaskInputProps
> = (props, ref) => {
const [input, setInput] = useRecoilState(inputState);
const inputRef = useRef<HTMLInputElement>(null);
const themeStyle = useRecoilValue(themeStyleState);
const focus = () => {
if (inputRef.current) {
inputRef.current.focus();
}
};
useImperativeHandle(ref, () => ({
focus,
}));
return (
<div className="flex mb-2">
<div
className="px-2 h-9 flex items-center flex-1 inline rounded-lg"
style={{
backgroundColor: themeStyle.secondaryBackgroundColor,
}}
>
<CirclePlus size={20} className="stroke-gray-400 dark:stroke-gray-200" />
<input
type="text"
ref={inputRef}
className="flex-1 bg-transparent p-1 outline-none text-sm dark:text-gray-100"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Type to search, enter to create"
onKeyPress={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
props.onCreateTask(input);
setInput('');
}
}}
/>
</div>
</div>
);
};
export default React.forwardRef(TaskInput);