mirror of https://github.com/morpheus65535/bazarr
Added submission on select to search box
This commit is contained in:
parent
ff8fd8c9a4
commit
c4f5511915
|
@ -1,9 +0,0 @@
|
||||||
.result {
|
|
||||||
@include light {
|
|
||||||
color: var(--mantine-color-dark-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include dark {
|
|
||||||
color: var(--mantine-color-gray-1);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,16 +1,10 @@
|
||||||
import { FunctionComponent, useMemo, useState } from "react";
|
import { FunctionComponent, useMemo, useState } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import {
|
import { Autocomplete, ComboboxItem, OptionsFilter, Text } from "@mantine/core";
|
||||||
Anchor,
|
|
||||||
Autocomplete,
|
|
||||||
ComboboxItem,
|
|
||||||
OptionsFilter,
|
|
||||||
} from "@mantine/core";
|
|
||||||
import { faSearch } from "@fortawesome/free-solid-svg-icons";
|
import { faSearch } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { useServerSearch } from "@/apis/hooks";
|
import { useServerSearch } from "@/apis/hooks";
|
||||||
import { useDebouncedValue } from "@/utilities";
|
import { useDebouncedValue } from "@/utilities";
|
||||||
import styles from "./Search.module.scss";
|
|
||||||
|
|
||||||
type SearchResultItem = {
|
type SearchResultItem = {
|
||||||
value: string;
|
value: string;
|
||||||
|
@ -57,21 +51,8 @@ const optionsFilter: OptionsFilter = ({ options, search }) => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const ResultComponent = ({ name, link }: { name: string; link: string }) => {
|
|
||||||
return (
|
|
||||||
<Anchor
|
|
||||||
component={Link}
|
|
||||||
to={link}
|
|
||||||
underline="never"
|
|
||||||
className={styles.result}
|
|
||||||
p="sm"
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</Anchor>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const Search: FunctionComponent = () => {
|
const Search: FunctionComponent = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
|
|
||||||
const results = useSearch(query);
|
const results = useSearch(query);
|
||||||
|
@ -79,14 +60,7 @@ const Search: FunctionComponent = () => {
|
||||||
return (
|
return (
|
||||||
<Autocomplete
|
<Autocomplete
|
||||||
leftSection={<FontAwesomeIcon icon={faSearch} />}
|
leftSection={<FontAwesomeIcon icon={faSearch} />}
|
||||||
renderOption={(input) => (
|
renderOption={(input) => <Text p="xs">{input.option.value}</Text>}
|
||||||
<ResultComponent
|
|
||||||
name={input.option.value}
|
|
||||||
link={
|
|
||||||
results.find((a) => a.value === input.option.value)?.link || "/"
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
size="sm"
|
size="sm"
|
||||||
data={results}
|
data={results}
|
||||||
|
@ -96,6 +70,9 @@ const Search: FunctionComponent = () => {
|
||||||
onChange={setQuery}
|
onChange={setQuery}
|
||||||
onBlur={() => setQuery("")}
|
onBlur={() => setQuery("")}
|
||||||
filter={optionsFilter}
|
filter={optionsFilter}
|
||||||
|
onOptionSubmit={(option) =>
|
||||||
|
navigate(results.find((a) => a.value === option)?.link || "/")
|
||||||
|
}
|
||||||
></Autocomplete>
|
></Autocomplete>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue