idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +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

36
web/src/components/inputs/input_wide.tsx
View file

@ -3,9 +3,9 @@
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import { Field } from "formik";
import { Field as FormikField } from "formik";
import Select from "react-select";
import { Switch } from "@headlessui/react";
import { Field, Label, Description } from "@headlessui/react";
import type { FieldProps, FieldValidator } from "formik";
import { classNames } from "@utils";
@ -55,7 +55,7 @@ export const TextFieldWide = ({
</label>
</div>
<div className="sm:col-span-2">
<Field
<FormikField
name={name}
value={defaultValue}
required={required}
@ -81,7 +81,7 @@ export const TextFieldWide = ({
data-1p-ignore
/>
)}
</Field>
</FormikField>
{help && (
<p className="mt-2 text-sm text-gray-500" id={`${name}-description`}>{help}</p>
)}
@ -130,7 +130,7 @@ export const PasswordFieldWide = ({
</label>
</div>
<div className="sm:col-span-2">
<Field
<FormikField
name={name}
defaultValue={defaultValue}
validate={validate}
@ -159,7 +159,7 @@ export const PasswordFieldWide = ({
</div>
</div>
)}
</Field>
</FormikField>
{help && (
<p className="mt-2 text-sm text-gray-500" id={`${name}-description`}>{help}</p>
)}
@ -203,7 +203,7 @@ export const NumberFieldWide = ({
</label>
</div>
<div className="sm:col-span-2">
<Field
<FormikField
name={name}
defaultValue={defaultValue ?? 0}
>
@ -229,7 +229,7 @@ export const NumberFieldWide = ({
placeholder={placeholder}
/>
)}
</Field>
</FormikField>
{help && (
<p className="mt-2 text-sm text-gray-500 dark:text-gray-500" id={`${name}-description`}>{help}</p>
)}
@ -255,23 +255,23 @@ export const SwitchGroupWide = ({
defaultValue
}: SwitchGroupWideProps) => (
<ul className="px-4 divide-y divide-gray-200 dark:divide-gray-700">
<Switch.Group as="li" className="py-4 flex items-center justify-between">
<Field as="li" className="py-4 flex items-center justify-between">
<div className="flex flex-col">
<Switch.Label as="div" passive className="text-sm font-medium text-gray-900 dark:text-white">
<Label as="div" passive className="text-sm font-medium text-gray-900 dark:text-white">
<div className="flex">
{tooltip ? (
<DocsTooltip label={label}>{tooltip}</DocsTooltip>
) : label}
</div>
</Switch.Label>
</Label>
{description && (
<Switch.Description className="text-sm text-gray-500 dark:text-gray-700">
<Description className="text-sm text-gray-500 dark:text-gray-700">
{description}
</Switch.Description>
</Description>
)}
</div>
<Field
<FormikField
name={name}
defaultValue={defaultValue as boolean}
type="checkbox"
@ -288,8 +288,8 @@ export const SwitchGroupWide = ({
}}
/>
)}
</Field>
</Switch.Group>
</FormikField>
</Field>
</ul>
);
@ -314,7 +314,7 @@ export const SelectFieldWide = ({
</label>
</div>
<div className="sm:col-span-2">
<Field name={name} type="select">
<FormikField name={name} type="select">
{({
field,
form: { setFieldValue }
@ -352,7 +352,7 @@ export const SelectFieldWide = ({
options={options}
/>
)}
</Field>
</FormikField>
</div>
</div>
);