idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-25 01:39:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): update deprecated HeadlessUI v2 components (#1580)

Browse source 
* 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 2024-08-12 20:36:45 +02:00 • committed by GitHub
parent 21a8e27260
commit 7d7bf9ed4c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 185 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web/src/components/inputs/switch.tsx
View file

@ -4,8 +4,8 @@
*/
import type { FieldProps } from "formik";
import { Field } from "formik";
import { Switch as HeadlessSwitch } from "@headlessui/react";
import { Field as FormikField } from "formik";
import { Field, Label, Description } from "@headlessui/react";
import { classNames } from "@utils";
import { DocsTooltip } from "@components/tooltips/DocsTooltip";
@ -30,7 +30,7 @@ const SwitchGroup = ({
disabled,
className
}: SwitchGroupProps) => (
<HeadlessSwitch.Group
<Field
as="div"
className={classNames(
className ?? "py-2",
@ -38,7 +38,7 @@ const SwitchGroup = ({
)}
>
{label && <div className="flex flex-col">
<HeadlessSwitch.Label
<Label
passive
as={heading ? "h2" : "span"}
className={classNames(
@ -51,16 +51,16 @@ const SwitchGroup = ({
<DocsTooltip label={label}>{tooltip}</DocsTooltip>
) : label}
</div>
</HeadlessSwitch.Label>
</Label>
{description && (
<HeadlessSwitch.Description as="span" className="text-sm mt-1 pr-4 text-gray-500 dark:text-gray-400">
<Description as="span" className="text-sm mt-1 pr-4 text-gray-500 dark:text-gray-400">
{description}
</HeadlessSwitch.Description>
</Description>
)}
</div>
}
<Field name={name} type="checkbox">
<FormikField name={name} type="checkbox">
{({
field,
form: { setFieldValue }
@ -75,8 +75,8 @@ const SwitchGroup = ({
disabled={disabled}
/>
)}
</Field>
</HeadlessSwitch.Group>
</FormikField>
</Field>
);
export { SwitchGroup };