76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import { useEffect, useState, useRef } from "react";
|
|
import useDebounce from "../hooks/useDebounce";
|
|
import { useFilterStore, useDialogStore, useLayoutStore } from "../store/module";
|
|
import { resolution } from "../utils/layout";
|
|
import Icon from "./Icon";
|
|
|
|
const SearchBar = () => {
|
|
const filterStore = useFilterStore();
|
|
const dialogStore = useDialogStore();
|
|
const layoutStore = useLayoutStore();
|
|
const [queryText, setQueryText] = useState("");
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (!inputRef.current) {
|
|
return;
|
|
}
|
|
if (dialogStore.getState().dialogStack.length) {
|
|
return;
|
|
}
|
|
const isMetaKey = event.ctrlKey || event.metaKey;
|
|
if (isMetaKey && event.key === "f") {
|
|
event.preventDefault();
|
|
inputRef.current.focus();
|
|
return;
|
|
}
|
|
};
|
|
document.body.addEventListener("keydown", handleKeyDown);
|
|
return () => {
|
|
document.body.removeEventListener("keydown", handleKeyDown);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const text = filterStore.getState().text;
|
|
setQueryText(text === undefined ? "" : text);
|
|
}, [filterStore.state.text]);
|
|
|
|
useEffect(() => {
|
|
if (layoutStore.state.showHomeSidebar) {
|
|
if (window.innerWidth < resolution.sm) {
|
|
inputRef.current?.focus();
|
|
}
|
|
}
|
|
}, [layoutStore.state.showHomeSidebar]);
|
|
|
|
useDebounce(
|
|
() => {
|
|
filterStore.setTextFilter(queryText.length === 0 ? undefined : queryText);
|
|
},
|
|
200,
|
|
[queryText]
|
|
);
|
|
|
|
const handleTextQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
|
|
const text = event.currentTarget.value;
|
|
setQueryText(text);
|
|
};
|
|
|
|
return (
|
|
<div className="w-full h-9 flex flex-row justify-start items-center py-2 px-3 rounded-md bg-gray-200 dark:bg-zinc-700">
|
|
<Icon.Search className="w-4 h-auto opacity-30 dark:text-gray-200" />
|
|
<input
|
|
className="flex ml-2 w-24 grow text-sm outline-none bg-transparent dark:text-gray-200"
|
|
type="text"
|
|
placeholder="Search memos"
|
|
ref={inputRef}
|
|
value={queryText}
|
|
onChange={handleTextQueryInput}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SearchBar;
|