usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-21 06:55:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: press cmd+f to focus on the search bar (#800)

Browse source
This commit is contained in:
ChasLui 2022-12-21 00:46:22 +08:00 committed by GitHub
parent 40f39fd66c
commit 358a5c0ed9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/src/components/SearchBar.tsx
View file

@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { useEffect, useState, useRef } from "react";
import { useTranslation } from "react-i18next";
import { useLocationStore } from "../store/module";
import { useLocationStore, useDialogStore } from "../store/module";
import { memoSpecialTypes } from "../helpers/filter";
import Icon from "./Icon";
import "../less/search-bar.less";
@ -8,8 +8,31 @@ import "../less/search-bar.less";
const SearchBar = () => {
const { t } = useTranslation();
const locationStore = useLocationStore();
const dialogStore = useDialogStore();
const memoType = locationStore.state.query.type;
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 = locationStore.getState().query.text;
@ -39,6 +62,7 @@ const SearchBar = () => {
autoComplete="new-password"
type="text"
placeholder=""
ref={inputRef}
value={queryText}
onChange={handleTextQueryInput}
/>