Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Handle clicking items

Browse Source
This commit is contained in:
Michael Shamoon 2022-10-19 09:04:34 -07:00
parent fa46c9a1a4
commit db9633496b
1 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/search.jsx
View File

@ -12,17 +12,20 @@ export default function HomepageSearch({bookmarksAndServices, searchString, setS
const [results, setResults] = useState([]); const [results, setResults] = useState([]);
const [currentItemIndex, setCurrentItemIndex] = useState(null); const [currentItemIndex, setCurrentItemIndex] = useState(null);
function resetAndClose() {
setSearchString("");
close(false);
}
function handleSearchChange(event) { function handleSearchChange(event) {
setSearchString(event.target.value.toLowerCase()) setSearchString(event.target.value.toLowerCase())
} }
function handleSearchKeyDown(event) { function handleSearchKeyDown(event) {
if (event.key === "Escape") { if (event.key === "Escape") {
setSearchString(""); resetAndClose();
close(false);
} else if (event.key === "Enter" && results.length) { } else if (event.key === "Enter" && results.length) {
setSearchString(""); resetAndClose();
close(false);
const result = results[currentItemIndex]; const result = results[currentItemIndex];
window.open(result.href, '_blank'); window.open(result.href, '_blank');
} else if (event.key === "ArrowDown" && results[currentItemIndex + 1]) { } else if (event.key === "ArrowDown" && results[currentItemIndex + 1]) {
@ -34,6 +37,10 @@ export default function HomepageSearch({bookmarksAndServices, searchString, setS
} }
} }
function handleItemClick() {
resetAndClose();
}
useEffect(() => { useEffect(() => {
if (searchString.length === 0) setResults([]); if (searchString.length === 0) setResults([]);
else { else {
@ -76,10 +83,11 @@ export default function HomepageSearch({bookmarksAndServices, searchString, setS
)} type="text" ref={searchField} value={searchString} onChange={handleSearchChange} onKeyDown={handleSearchKeyDown} /> )} type="text" ref={searchField} value={searchString} onChange={handleSearchChange} onKeyDown={handleSearchKeyDown} />
{results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto"> {results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto">
{results.map((r, i) => ( {results.map((r, i) => (
<li className={classNames( <li key={r.name}>
<a className={classNames(
i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50", i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
"flex flex-row items-center justify-between rounded-md text-sm md:text-xl m-2 py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 hover:bg-theme-200/50 dark:hover:bg-theme-900/30", "flex flex-row items-center justify-between rounded-md text-sm md:text-xl m-2 py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 hover:bg-theme-200/50 dark:hover:bg-theme-900/30",
)} key={r.name}> )} href={r.href} target="_blank" rel="noreferrer" onClick={handleItemClick}>
<div className="flex flex-row items-center mr-4"> <div className="flex flex-row items-center mr-4">
<div className="w-5 text-xs mr-4"> <div className="w-5 text-xs mr-4">
{r.icon && resolveIcon(r.icon)} {r.icon && resolveIcon(r.icon)}
@ -88,6 +96,7 @@ export default function HomepageSearch({bookmarksAndServices, searchString, setS
{r.name} {r.name}
</div> </div>
<div className="text-xs text-theme-600">{r.abbr ? t("homepagesearch.bookmark") : t("homepagesearch.service")}</div> <div className="text-xs text-theme-600">{r.abbr ? t("homepagesearch.bookmark") : t("homepagesearch.service")}</div>
</a>
</li> </li>
))} ))}
</ul>} </ul>}