Refactor multi & single providers & retain provider key only
This commit is contained in:
shamoon
parent
3bc0522812
commit
87dbbcb1e0
1 changed files with 79 additions and 99 deletions
|
|
@ -41,33 +41,12 @@ function classNames(...classes) {
|
|||
return classes.filter(Boolean).join(" ");
|
||||
}
|
||||
|
||||
function useProviderState() {
|
||||
const key = "search-name";
|
||||
|
||||
const [value, setValue] = useState(providers.google);
|
||||
useEffect(() => {
|
||||
const storedName = localStorage.getItem(key);
|
||||
let storedProvider = null;
|
||||
if (storedName) {
|
||||
storedProvider = Object.values(providers).find((el) => el.name === storedName);
|
||||
if (storedProvider) {
|
||||
setValue(storedProvider);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
return [
|
||||
value,
|
||||
(val) => {
|
||||
setValue(val);
|
||||
localStorage.setItem(key, val.name);
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function getAvailableProviderIds(options) {
|
||||
if (options.providers && Array.isArray(options.providers)) {
|
||||
return Object.keys(providers).filter((value) => options.providers.includes(value));
|
||||
if (options.provider && Array.isArray(options.provider)) {
|
||||
return Object.keys(searchProviders).filter((value) => options.provider.includes(value));
|
||||
}
|
||||
if (options.provider && searchProviders[options.provider]) {
|
||||
return [options.provider];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -75,19 +54,34 @@ function getAvailableProviderIds(options) {
|
|||
export default function Search({ options }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const provider = searchProviders[options.provider];
|
||||
const [query, setQuery] = useState("");
|
||||
const [selectedProvider, setSelectedProvider] = useProviderState();
|
||||
|
||||
const availableProviderIds = getAvailableProviderIds(options);
|
||||
if (!provider && !availableProviderIds) {
|
||||
|
||||
const key = "search-name";
|
||||
|
||||
const [query, setQuery] = useState("");
|
||||
const [selectedProvider, setSelectedProvider] = useState(searchProviders[availableProviderIds[0] ?? searchProviders.google]);
|
||||
|
||||
useEffect(() => {
|
||||
const storedName = localStorage.getItem(key);
|
||||
let storedProvider = null;
|
||||
let storedProviderKey = null;
|
||||
if (storedName) {
|
||||
storedProvider = Object.values(searchProviders).find((el) => el.name === storedName);
|
||||
storedProviderKey = Object.keys(searchProviders).find((pkey) => searchProviders[pkey] === storedProvider);
|
||||
if (storedProvider && availableProviderIds.includes(storedProviderKey)) {
|
||||
setSelectedProvider(storedProvider);
|
||||
}
|
||||
}
|
||||
}, [availableProviderIds]);
|
||||
|
||||
if (!availableProviderIds) {
|
||||
return null;
|
||||
}
|
||||
|
||||
function handleSubmit(event) {
|
||||
const q = encodeURIComponent(query);
|
||||
|
||||
const url = provider ? provider.url : selectedProvider.url;
|
||||
const url = { selectedProvider };
|
||||
if (url) {
|
||||
window.open(`${url}${q}`, options.target || "_blank");
|
||||
} else {
|
||||
|
|
@ -99,72 +93,10 @@ export default function Search({ options }) {
|
|||
setQuery("");
|
||||
}
|
||||
|
||||
const multiProviders = () => (
|
||||
<Listbox as="div" value={selectedProvider} onChange={setSelectedProvider} className="relative text-left">
|
||||
<div>
|
||||
<Listbox.Button
|
||||
className="
|
||||
absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
|
||||
text-white font-medium text-sm
|
||||
bg-theme-600/40 dark:bg-white/10
|
||||
focus:ring-theme-500 dark:focus:ring-white/50"
|
||||
>
|
||||
<selectedProvider.icon className="text-white w-3 h-3" />
|
||||
<span className="sr-only">{t("search.search")}</span>
|
||||
</Listbox.Button>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Listbox.Options
|
||||
className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
|
||||
bg-theme-100 dark:bg-theme-600 shadow-lg
|
||||
ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
{availableProviderIds.map((providerId) => {
|
||||
const p = providers[providerId];
|
||||
return (
|
||||
<Listbox.Option key={providerId} value={p} as={Fragment}>
|
||||
{({ active }) => (
|
||||
<li
|
||||
className={classNames(
|
||||
"rounded-md cursor-pointer",
|
||||
active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100"
|
||||
)}
|
||||
>
|
||||
<p.icon className="h-4 w-4 mx-4 my-2" />
|
||||
</li>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</Listbox>
|
||||
);
|
||||
|
||||
const singleProvider = () => (
|
||||
<button
|
||||
type="submit"
|
||||
className="
|
||||
absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
|
||||
text-white font-medium text-sm
|
||||
bg-theme-600/40 dark:bg-white/10
|
||||
focus:ring-theme-500 dark:focus:ring-white/50"
|
||||
>
|
||||
<provider.icon className="text-white w-3 h-3" />
|
||||
<span className="sr-only">{t("search.search")}</span>
|
||||
</button>
|
||||
);
|
||||
const onChangeProvider = (provider) => {
|
||||
setSelectedProvider(provider);
|
||||
localStorage.setItem(key, provider.name);
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="flex-col relative h-8 my-4 min-w-fit grow first:ml-0 ml-4" onSubmit={handleSubmit}>
|
||||
|
|
@ -188,7 +120,55 @@ export default function Search({ options }) {
|
|||
// eslint-disable-next-line jsx-a11y/no-autofocus
|
||||
autoFocus={options.focus}
|
||||
/>
|
||||
{provider ? singleProvider() : multiProviders()}
|
||||
<Listbox as="div" value={selectedProvider} onChange={onChangeProvider} className="relative text-left" disabled={availableProviderIds?.length === 1}>
|
||||
<div>
|
||||
<Listbox.Button
|
||||
className="
|
||||
absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
|
||||
text-white font-medium text-sm
|
||||
bg-theme-600/40 dark:bg-white/10
|
||||
focus:ring-theme-500 dark:focus:ring-white/50"
|
||||
>
|
||||
<selectedProvider.icon className="text-white w-3 h-3" />
|
||||
<span className="sr-only">{t("search.search")}</span>
|
||||
</Listbox.Button>
|
||||
</div>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Listbox.Options
|
||||
className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
|
||||
bg-theme-100 dark:bg-theme-600 shadow-lg
|
||||
ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
{availableProviderIds.map((providerId) => {
|
||||
const p = searchProviders[providerId];
|
||||
return (
|
||||
<Listbox.Option key={providerId} value={p} as={Fragment}>
|
||||
{({ active }) => (
|
||||
<li
|
||||
className={classNames(
|
||||
"rounded-md cursor-pointer",
|
||||
active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100"
|
||||
)}
|
||||
>
|
||||
<p.icon className="h-4 w-4 mx-4 my-2" />
|
||||
</li>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</Listbox>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue