Llewellyn/conky
1
0
Fork 0
mirror of https://github.com/Llewellynvdm/conky.git synced 2025-02-05 05:28:32 +00:00
Code Issues Releases Activity

Add search keyboard shortcut.

Browse Source
This commit is contained in:
Brenden Matthews 2022-10-01 17:35:57 -05:00 committed by Brenden Matthews
parent e992f83a1d
commit 34a0040d27
2 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/Header.tsx
View File

@ -60,7 +60,7 @@ export default function Header({
<NavLink href="/lua" name="Lua" /> <NavLink href="/lua" name="Lua" />
</div> </div>
)} )}
<LineChart width={300} height={40} darkMode={darkMode} /> <LineChart width={400} height={40} darkMode={darkMode} />
<Search index={searchIndex} /> <Search index={searchIndex} />
<div className="flex"> <div className="flex">
<div className="border-r mx-1 px-1 border-slate-700"> <div className="border-r mx-1 px-1 border-slate-700">

50
web/components/Search.tsx
View File

@ -1,5 +1,5 @@
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
import React, { Fragment, useState } from 'react' import React, { Fragment, useCallback, useEffect, useState } from 'react'
import { Search as SearchIcon } from 'react-feather' import { Search as SearchIcon } from 'react-feather'
import { SearchIndex, SearchItem } from '../utils/search' import { SearchIndex, SearchItem } from '../utils/search'
import { Dialog, Transition, Combobox } from '@headlessui/react' import { Dialog, Transition, Combobox } from '@headlessui/react'
@ -74,24 +74,44 @@ const Search: React.FunctionComponent<SearchProps> = (props) => {
Fuse.parseIndex(props.index.index) Fuse.parseIndex(props.index.index)
) )
}) })
let [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const handleKeyPress = useCallback(
(event: KeyboardEvent) => {
if (event.key == '/' && !isOpen) {
setIsOpen(true)
event.preventDefault()
}
},
[isOpen]
)
useEffect(() => {
document.addEventListener('keydown', handleKeyPress)
return () => {
document.removeEventListener('keydown', handleKeyPress)
}
}, [handleKeyPress])
const setSearch = (value: string) => { const setSearch = (value: string) => {
setSearchText(value) setSearchText(value)
const searchResult = fuse.search(value) const searchResult = fuse.search(value)
setSearchResults(searchResult) setSearchResults(searchResult)
} }
const onChange = (value: Fuse.FuseResult<SearchItem>) => { const onChange = (value?: Fuse.FuseResult<SearchItem>) => {
if (value.item.kind === 'var') { if (value) {
router.push(`/variables#${value.item.name}`, undefined, { scroll: false }) if (value.item.kind === 'var') {
} router.push(`/variables#${value.item.name}`, undefined, {
if (value.item.kind === 'config') { scroll: false,
router.push(`/config_settings#${value.item.name}`, undefined, { })
scroll: false, }
}) if (value.item.kind === 'config') {
} router.push(`/config_settings#${value.item.name}`, undefined, {
if (value.item.kind === 'lua') { scroll: false,
router.push(`/lua#${value.item.name}`, undefined, { scroll: false }) })
}
if (value.item.kind === 'lua') {
router.push(`/lua#${value.item.name}`, undefined, { scroll: false })
}
} }
setIsOpen(false) setIsOpen(false)
} }
@ -107,7 +127,7 @@ const Search: React.FunctionComponent<SearchProps> = (props) => {
return ( return (
<> <>
<div className="flex items-center ml-2"> <div className="flex items-center ml-2">
<button onClick={openModal}> <button onClick={openModal} title="Search (/)">
<SearchIcon size={32} /> <SearchIcon size={32} />
</button> </button>
</div> </div>
@ -144,7 +164,7 @@ const Search: React.FunctionComponent<SearchProps> = (props) => {
<SearchIcon size={32} /> <SearchIcon size={32} />
</Combobox.Label> </Combobox.Label>
<Combobox.Input <Combobox.Input
placeholder="Search docs" placeholder="Search docs (/)"
className="mx-1 p-2 w-full bg-gray-200 dark:bg-gray-800 outline-none" className="mx-1 p-2 w-full bg-gray-200 dark:bg-gray-800 outline-none"
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
/> />