Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-05-01 21:13:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Handle click to close, close animation timing

Browse Source
This commit is contained in:
Michael Shamoon 2022-10-19 20:16:29 -07:00
parent a1788b01c3
commit 5abe13c726
2 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/quicklaunch.jsx
View File

@ -1,5 +1,5 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef, useCallback } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { resolveIcon } from "./services/item"; import { resolveIcon } from "./services/item";
@ -17,10 +17,12 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
window.open(result.href, '_blank'); window.open(result.href, '_blank');
} }
function resetAndClose() { const closeAndReset = useCallback(() => {
setSearchString("");
close(false); close(false);
} setTimeout(() => {
setSearchString("");
}, 200); // delay a little for animations
}, [close, setSearchString]);
function handleSearchChange(event) { function handleSearchChange(event) {
setSearchString(event.target.value.toLowerCase()) setSearchString(event.target.value.toLowerCase())
@ -28,9 +30,9 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
function handleSearchKeyDown(event) { function handleSearchKeyDown(event) {
if (event.key === "Escape") { if (event.key === "Escape") {
resetAndClose(); closeAndReset();
} else if (event.key === "Enter" && results.length) { } else if (event.key === "Enter" && results.length) {
resetAndClose(); closeAndReset();
openCurrentItem(); openCurrentItem();
} else if (event.key === "ArrowDown" && results[currentItemIndex + 1]) { } else if (event.key === "ArrowDown" && results[currentItemIndex + 1]) {
setCurrentItemIndex(currentItemIndex + 1); setCurrentItemIndex(currentItemIndex + 1);
@ -46,7 +48,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
} }
function handleItemClick() { function handleItemClick() {
resetAndClose(); closeAndReset();
openCurrentItem(); openCurrentItem();
} }
@ -59,20 +61,27 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
setCurrentItemIndex(0); setCurrentItemIndex(0);
} }
} }
}, [searchString, servicesAndBookmarks]) }, [searchString, servicesAndBookmarks]);
const [hidden, setHidden] = useState(true); const [hidden, setHidden] = useState(true);
useEffect(() => { useEffect(() => {
function handleBackdropClick(event) {
if (event.target?.tagName === "DIV") closeAndReset();
}
if (isOpen) { if (isOpen) {
searchField.current.focus(); searchField.current.focus();
document.body.addEventListener('click', handleBackdropClick);
setHidden(false); setHidden(false);
} else { } else {
document.body.removeEventListener('click', handleBackdropClick);
setTimeout(() => { setTimeout(() => {
setHidden(true); setHidden(true);
}, 300); // disable on close }, 300); // disable on close
} }
}, [isOpen])
}, [isOpen, closeAndReset]);
return ( return (
<div className={classNames( <div className={classNames(
@ -84,12 +93,12 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
<div className="fixed inset-0 bg-gray-500 bg-opacity-50" /> <div className="fixed inset-0 bg-gray-500 bg-opacity-50" />
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full min-w-full items-start justify-center text-center"> <div className="flex min-h-full min-w-full items-start justify-center text-center">
<div className="mt-[10%] min-w-[80%] max-w-[90%] md:min-w-[40%] rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-50 dark:bg-theme-800"> <dialog className="mt-[10%] min-w-[80%] max-w-[90%] md:min-w-[40%] rounded-md p-0 block font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-50 dark:bg-theme-800">
<input placeholder="Search" className={classNames( <input placeholder="Search" className={classNames(
results.length > 0 && "rounded-t-md", results.length > 0 && "rounded-t-md",
results.length === 0 && "rounded-md", results.length === 0 && "rounded-md",
"w-full p-4 m-0 border-0 border-b border-slate-700 focus:border-slate-700 focus:outline-0 focus:ring-0 text-sm md:text-xl text-theme-700 dark:text-theme-200 bg-theme-60 dark:bg-theme-800" "w-full p-4 m-0 border-0 border-b border-slate-700 focus:border-slate-700 focus:outline-0 focus:ring-0 text-sm md:text-xl text-theme-700 dark:text-theme-200 bg-theme-60 dark:bg-theme-800"
)} type="text" ref={searchField} value={searchString} onChange={handleSearchChange} onKeyDown={handleSearchKeyDown} /> )} type="text" autoCorrect="false" ref={searchField} value={searchString} onChange={handleSearchChange} onKeyDown={handleSearchKeyDown} />
{results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto m-2"> {results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto m-2">
{results.map((r, i) => ( {results.map((r, i) => (
<li key={r.name}> <li key={r.name}>
@ -112,7 +121,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
</li> </li>
))} ))}
</ul>} </ul>}
</div> </dialog>
</div> </div>
</div> </div>
</div> </div>

2
src/pages/index.jsx
View File

@ -209,7 +209,7 @@ function Home({ initialSettings }) {
document.addEventListener('keydown', handleKeyDown); document.addEventListener('keydown', handleKeyDown);
return function cleanup() { return function cleanup() {
document.removeEventListener('keydown', handleKeyDown); document.removeEventListener('keydown', handleKeyDown);
} }
}) })