mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +00:00
refactor(web): update deprecated HeadlessUI v2 components (#1580)
* refactor(web): move away from old headless UI dot notation * refactor(web): refactor `Disclosure` component * refactor(web): rename formik's `Field` to `FormikField` and keep original HeadlessUI component names
This commit is contained in:
martylukyy
GitHub
parent
21a8e27260
commit
7d7bf9ed4c
13 changed files with 185 additions and 176 deletions
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import { Fragment } from "react";
|
||||
import { Field, FieldProps } from "formik";
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { Listbox, ListboxButton, Label, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/solid";
|
||||
import { MultiSelect as RMSC } from "react-multi-select-component";
|
||||
|
||||
|
|
@ -166,11 +166,11 @@ export function DownloadClientSelect({
|
|||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Label className="block text-xs font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">
|
||||
<Label className="block text-xs font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">
|
||||
Client
|
||||
</Listbox.Label>
|
||||
</Label>
|
||||
<div className="mt-1 relative">
|
||||
<Listbox.Button className="block w-full shadow-sm sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
|
||||
<ListboxButton className="block w-full shadow-sm sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
|
||||
<span className="block truncate">
|
||||
{field.value
|
||||
? clients.find((c) => c.id === field.value)?.name
|
||||
|
|
@ -181,7 +181,7 @@ export function DownloadClientSelect({
|
|||
className="h-5 w-5 text-gray-400 dark:text-gray-300"
|
||||
aria-hidden="true" />
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
|
|
@ -190,14 +190,14 @@ export function DownloadClientSelect({
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
<ListboxOptions
|
||||
static
|
||||
className="absolute z-10 mt-1 w-full border border-gray-400 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto focus:outline-none sm:text-sm"
|
||||
>
|
||||
{clients
|
||||
.filter((c) => c.type === action.type)
|
||||
.map((client) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
key={client.id}
|
||||
className={({ active }) => classNames(
|
||||
active
|
||||
|
|
@ -232,9 +232,9 @@ export function DownloadClientSelect({
|
|||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
{meta.touched && meta.error && (
|
||||
<p className="error text-sm text-red-600 mt-1">* {meta.error}</p>
|
||||
|
|
@ -294,13 +294,13 @@ export const Select = ({
|
|||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Label className="flex text-xs font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">
|
||||
<Label className="flex text-xs font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">
|
||||
{tooltip ? (
|
||||
<DocsTooltip label={label}>{tooltip}</DocsTooltip>
|
||||
) : label}
|
||||
</Listbox.Label>
|
||||
</Label>
|
||||
<div className="mt-1 relative">
|
||||
<Listbox.Button className="block w-full relative shadow-sm sm:text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
|
||||
<ListboxButton className="block w-full relative shadow-sm sm:text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
|
||||
<span className="block truncate">
|
||||
{field.value
|
||||
? options.find((c) => c.value === field.value)?.label
|
||||
|
|
@ -313,7 +313,7 @@ export const Select = ({
|
|||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
|
|
@ -322,12 +322,12 @@ export const Select = ({
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
<ListboxOptions
|
||||
static
|
||||
className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 focus:outline-none sm:text-sm"
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
key={opt.value}
|
||||
className={({ active: hovered, selected }) =>
|
||||
classNames(
|
||||
|
|
@ -359,9 +359,9 @@ export const Select = ({
|
|||
</span>
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -395,11 +395,11 @@ export const SelectWide = ({
|
|||
{({ open }) => (
|
||||
<div className="py-4 flex items-center justify-between">
|
||||
|
||||
<Listbox.Label className="block text-sm font-medium text-gray-900 dark:text-white">
|
||||
<Label className="block text-sm font-medium text-gray-900 dark:text-white">
|
||||
{label}
|
||||
</Listbox.Label>
|
||||
</Label>
|
||||
<div className="w-full">
|
||||
<Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
|
||||
<ListboxButton className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
|
||||
<span className="block truncate">
|
||||
{field.value
|
||||
? options.find((c) => c.value === field.value)?.label
|
||||
|
|
@ -412,7 +412,7 @@ export const SelectWide = ({
|
|||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
|
|
@ -421,12 +421,12 @@ export const SelectWide = ({
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
<ListboxOptions
|
||||
static
|
||||
className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
key={opt.value}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
|
|
@ -464,9 +464,9 @@ export const SelectWide = ({
|
|||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -512,14 +512,14 @@ export const AgeSelect = ({
|
|||
{({ open }) => (
|
||||
<>
|
||||
<div className="mt-0 relative">
|
||||
<Listbox.Button className="block w-full relative shadow-sm text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-400">
|
||||
<ListboxButton className="block w-full relative shadow-sm text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-400">
|
||||
<span className="block truncate text-gray-500 dark:text-white">
|
||||
{duration ? options.find(opt => opt.value === duration)?.label : 'Select...'}
|
||||
</span>
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<ChevronUpDownIcon className="h-5 w-5 text-gray-700 dark:text-gray-500" aria-hidden="true" />
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
|
|
@ -527,9 +527,9 @@ export const AgeSelect = ({
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-white focus:outline-none text-sm">
|
||||
<ListboxOptions className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-white focus:outline-none text-sm">
|
||||
{options.map((option) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
key={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`relative cursor-default select-none py-2 pl-3 pr-9 ${selected ? "font-bold text-black dark:text-white bg-gray-300 dark:bg-gray-950" : active ? "text-black dark:text-gray-100 font-normal bg-gray-200 dark:bg-gray-800" : "text-gray-700 dark:text-gray-300 font-normal"
|
||||
|
|
@ -547,9 +547,9 @@ export const AgeSelect = ({
|
|||
)}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue