idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-26 10:19: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

6
web/src/components/header/Header.tsx
View file

@ -6,7 +6,7 @@
import toast from "react-hot-toast";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useRouter } from "@tanstack/react-router";
import { Disclosure } from "@headlessui/react";
import { Disclosure, DisclosureButton } from "@headlessui/react";
import { Bars3Icon, XMarkIcon, MegaphoneIcon } from "@heroicons/react/24/outline";
import { APIClient } from "@api/APIClient";
@ -60,7 +60,7 @@ export const Header = () => {
<RightNav logoutMutation={logoutMutation.mutate} />
<div className="-mr-2 flex sm:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="bg-gray-200 dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-white hover:bg-gray-700">
<DisclosureButton className="bg-gray-200 dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-white hover:bg-gray-700">
<span className="sr-only">Open main menu</span>
{open ? (
<XMarkIcon
@ -73,7 +73,7 @@ export const Header = () => {
aria-hidden="true"
/>
)}
</Disclosure.Button>
</DisclosureButton>
</div>
</div>
</div>

8
web/src/components/header/MobileNav.tsx
View file

@ -3,8 +3,8 @@
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import {Link} from "@tanstack/react-router";
import { Disclosure } from "@headlessui/react";
import { Link } from "@tanstack/react-router";
import { DisclosurePanel } from "@headlessui/react";
import { classNames } from "@utils";
@ -12,7 +12,7 @@ import { NAV_ROUTES } from "./_shared";
import type { RightNavProps } from "./_shared";
export const MobileNav = (props: RightNavProps) => (
<Disclosure.Panel className="border-b border-gray-300 dark:border-gray-700 md:hidden">
<DisclosurePanel className="border-b border-gray-300 dark:border-gray-700 md:hidden">
<div className="px-2 py-3 space-y-1 sm:px-3">
{NAV_ROUTES.map((item) => (
<Link
@ -48,5 +48,5 @@ export const MobileNav = (props: RightNavProps) => (
Logout
</button>
</div>
</Disclosure.Panel>
</DisclosurePanel>
);

22
web/src/components/header/RightNav.tsx
View file

@ -5,7 +5,7 @@
import { Fragment } from "react";
import { UserIcon } from "@heroicons/react/24/solid";
import { Menu, Transition } from "@headlessui/react";
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
import { classNames } from "@utils";
@ -44,7 +44,7 @@ export const RightNav = (props: RightNavProps) => {
<Menu as="div" className="ml-2 relative">
{({ open }) => (
<>
<Menu.Button
<MenuButton
className={classNames(
open ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-white" : "hover:text-gray-900 dark:hover:text-white",
"text-gray-600 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 px-3 py-2 rounded-2xl text-sm font-medium",
@ -62,7 +62,7 @@ export const RightNav = (props: RightNavProps) => {
className="inline ml-1 h-5 w-5"
aria-hidden="true"
/>
</Menu.Button>
</MenuButton>
<Transition
show={open}
as={Fragment}
@ -73,11 +73,11 @@ export const RightNav = (props: RightNavProps) => {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
static
className="origin-top-right absolute right-0 mt-2 w-48 z-10 divide-y divide-gray-100 dark:divide-gray-750 rounded-md shadow-lg bg-white dark:bg-gray-800 border border-gray-250 dark:border-gray-775 focus:outline-none"
>
<Menu.Item>
<MenuItem>
{({ active }) => (
<Link
to="/settings/account"
@ -95,8 +95,8 @@ export const RightNav = (props: RightNavProps) => {
Account
</Link>
)}
</Menu.Item>
<Menu.Item>
</MenuItem>
<MenuItem>
{({ active }) => (
<Link
to="/settings"
@ -114,8 +114,8 @@ export const RightNav = (props: RightNavProps) => {
Settings
</Link>
)}
</Menu.Item>
<Menu.Item>
</MenuItem>
<MenuItem>
{({ active }) => (
<button
onClick={(e) => {
@ -136,8 +136,8 @@ export const RightNav = (props: RightNavProps) => {
Log out
</button>
)}
</Menu.Item>
</Menu.Items>
</MenuItem>
</MenuItems>
</Transition>
</>
)}