79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import { type FormEvent, useEffect, useRef, useState } from "react";
|
|
import { useNavigate } from "react-router";
|
|
import { t } from "@lingui/core/macro";
|
|
|
|
interface SearchBarProps {
|
|
collapsible?: boolean;
|
|
}
|
|
|
|
export function SearchBar({ collapsible = false }: SearchBarProps) {
|
|
const [value, setValue] = useState(
|
|
() => new URLSearchParams(location.search).get("q") ?? "",
|
|
);
|
|
const [expanded, setExpanded] = useState(!collapsible);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
if (collapsible && expanded) inputRef.current?.focus();
|
|
}, [expanded, collapsible]);
|
|
|
|
function handleIconClick() {
|
|
if (!collapsible) return;
|
|
if (expanded) {
|
|
setExpanded(false);
|
|
setValue("");
|
|
} else {
|
|
setExpanded(true);
|
|
}
|
|
}
|
|
|
|
function handleSubmit(e: FormEvent) {
|
|
e.preventDefault();
|
|
const q = value.trim();
|
|
if (!q) return;
|
|
navigate(`/search?q=${encodeURIComponent(q)}&tab=dumps`);
|
|
if (collapsible) {
|
|
setExpanded(false);
|
|
setValue("");
|
|
}
|
|
}
|
|
|
|
function handleKeyDown(e: React.KeyboardEvent) {
|
|
if (e.key === "Escape" && collapsible) {
|
|
setExpanded(false);
|
|
setValue("");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form
|
|
className={`search-bar${collapsible ? " search-bar--collapsible" : ""}${
|
|
expanded ? " search-bar--expanded" : ""
|
|
}`}
|
|
onSubmit={handleSubmit}
|
|
role="search"
|
|
>
|
|
<input
|
|
ref={inputRef}
|
|
type="search"
|
|
className="search-bar-input"
|
|
placeholder={t`Search dumps, users, playlists…`}
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
aria-label={t`Search`}
|
|
tabIndex={expanded ? 0 : -1}
|
|
/>
|
|
<button
|
|
type={expanded && !collapsible ? "submit" : "button"}
|
|
className="search-bar-btn"
|
|
aria-label={expanded ? t`Submit search` : t`Open search`}
|
|
onClick={collapsible ? handleIconClick : undefined}
|
|
>
|
|
🔍
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|