mirror of
https://github.com/karl0ss/homepage.git
synced 2025-05-03 22:13:39 +01:00
Add quicklook searchDescriptions option
This commit is contained in:
parent
f62021633b
commit
9c1c0e4465
@ -6,7 +6,7 @@ import { resolveIcon } from "./services/item";
|
||||
|
||||
import { SettingsContext } from "utils/contexts/settings";
|
||||
|
||||
export default function QuickLaunch({servicesAndBookmarks, searchString, setSearchString, isOpen, close}) {
|
||||
export default function QuickLaunch({servicesAndBookmarks, searchString, setSearchString, isOpen, close, searchDescriptions}) {
|
||||
const { t } = useTranslation();
|
||||
const { settings } = useContext(SettingsContext);
|
||||
|
||||
@ -59,13 +59,27 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
|
||||
useEffect(() => {
|
||||
if (searchString.length === 0) setResults([]);
|
||||
else {
|
||||
const newResults = servicesAndBookmarks.filter(r => r.name.toLowerCase().includes(searchString));
|
||||
let newResults = servicesAndBookmarks.filter(r => {
|
||||
const nameMatch = r.name.toLowerCase().includes(searchString);
|
||||
let descriptionMatch;
|
||||
if (searchDescriptions) {
|
||||
descriptionMatch = r.description?.toLowerCase().includes(searchString)
|
||||
r.priority = nameMatch ? 2 * (+nameMatch) : +descriptionMatch; // eslint-disable-line no-param-reassign
|
||||
}
|
||||
return nameMatch || descriptionMatch;
|
||||
});
|
||||
|
||||
if (searchDescriptions) {
|
||||
newResults = newResults.sort((a, b) => b.priority - a.priority);
|
||||
}
|
||||
|
||||
setResults(newResults);
|
||||
|
||||
if (newResults.length) {
|
||||
setCurrentItemIndex(0);
|
||||
}
|
||||
}
|
||||
}, [searchString, servicesAndBookmarks]);
|
||||
}, [searchString, servicesAndBookmarks, searchDescriptions]);
|
||||
|
||||
|
||||
const [hidden, setHidden] = useState(true);
|
||||
@ -87,6 +101,11 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
|
||||
|
||||
}, [isOpen, closeAndReset]);
|
||||
|
||||
function highlightText(text) {
|
||||
const parts = text.split(new RegExp(`(${searchString})`, 'gi'));
|
||||
return <span>{parts.map(part => part.toLowerCase() === searchString.toLowerCase() ? <span className="bg-theme-300/10">{part}</span> : part)}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames(
|
||||
"relative z-10 ease-in-out duration-300 transition-opacity",
|
||||
@ -117,7 +136,11 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row text-left items-baseline mr-4 pointer-events-none">
|
||||
<span className="mr-4">{r.name}</span>
|
||||
{r.description && <span className="text-xs text-theme-600 text-light">{r.description}</span>}
|
||||
{r.description &&
|
||||
<span className="text-xs text-theme-600 text-light">
|
||||
{searchDescriptions && r.priority < 2 ? highlightText(r.description) : r.description}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-theme-600 font-bold pointer-events-none">{r.abbr ? t("homepagesearch.bookmark") : t("homepagesearch.service")}</div>
|
||||
|
@ -236,7 +236,14 @@ function Home({ initialSettings }) {
|
||||
headerStyles[initialSettings.headerStyle || "underlined"]
|
||||
)}
|
||||
>
|
||||
<QuickLaunch servicesAndBookmarks={servicesAndBookmarks} searchString={searchString} setSearchString={setSearchString} isOpen={searching} close={setSearching} />
|
||||
<QuickLaunch
|
||||
servicesAndBookmarks={servicesAndBookmarks}
|
||||
searchString={searchString}
|
||||
setSearchString={setSearchString}
|
||||
isOpen={searching}
|
||||
close={setSearching}
|
||||
searchDescriptions={settings.quicklook?.searchDescriptions}
|
||||
/>
|
||||
{widgets && (
|
||||
<>
|
||||
{widgets
|
||||
|
Loading…
x
Reference in New Issue
Block a user