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

38
web/src/screens/settings/Irc.tsx
View file

@ -6,7 +6,7 @@
import { Fragment, MouseEvent, useEffect, useMemo, useRef, useState } from "react";
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
import { ArrowPathIcon, LockClosedIcon, LockOpenIcon, PlusIcon } from "@heroicons/react/24/solid";
import { Menu, Transition } from "@headlessui/react";
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
import { toast } from "react-hot-toast";
import {
ArrowsPointingInIcon,
@ -462,12 +462,12 @@ const ListItemDropdown = ({
title={`Remove network: ${network.name}`}
text="Are you sure you want to remove this network? This action cannot be undone."
/>
<Menu.Button className="px-4 py-2">
<MenuButton className="px-4 py-2">
<EllipsisHorizontalIcon
className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
aria-hidden="true"
/>
</Menu.Button>
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@ -477,11 +477,11 @@ const ListItemDropdown = ({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className="absolute right-0 w-56 mt-2 origin-top-right bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-none z-10"
>
<div className="px-1 py-1">
<Menu.Item>
<MenuItem>
{({ active }) => (
<button
className={classNames(
@ -500,8 +500,8 @@ const ListItemDropdown = ({
Edit
</button>
)}
</Menu.Item>
{/*<Menu.Item>*/}
</MenuItem>
{/*<MenuItem>*/}
{/* {({ active }) => (*/}
{/* <button*/}
{/* className={classNames(*/}
@ -520,8 +520,8 @@ const ListItemDropdown = ({
{/* {network.enabled ? "Disable" : "Enable"}*/}
{/* </button>*/}
{/* )}*/}
{/*</Menu.Item>*/}
<Menu.Item>
{/*</MenuItem>*/}
<MenuItem>
{({ active }) => (
<button
className={classNames(
@ -546,10 +546,10 @@ const ListItemDropdown = ({
Restart
</button>
)}
</Menu.Item>
</MenuItem>
</div>
<div className="px-1 py-1">
<Menu.Item>
<MenuItem>
{({ active }) => (
<button
className={classNames(
@ -568,9 +568,9 @@ const ListItemDropdown = ({
Delete
</button>
)}
</Menu.Item>
</MenuItem>
</div>
</Menu.Items>
</MenuItems>
</Transition>
</Menu>
);
@ -776,9 +776,9 @@ const IRCLogsDropdown = () => {
// at IRCLogsDropdown (http://localhost:3000/src/screens/settings/Irc.tsx?t=1694269937935:1354:53)
return (
<Menu as="div" className="relative">
<Menu.Button className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded shadow bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
<MenuButton className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded shadow bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
<span className="flex items-center">Options <Cog6ToothIcon className="ml-1 w-4 h-4" /></span>
</Menu.Button>
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@ -788,10 +788,10 @@ const IRCLogsDropdown = () => {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className="absolute z-10 right-0 mt-2 px-3 py-2 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-750 focus:outline-none"
>
<Menu.Item>
<MenuItem>
{() => (
<Checkbox
label="Scroll to bottom on new message"
@ -799,8 +799,8 @@ const IRCLogsDropdown = () => {
setValue={(newValue) => onSetValue("scrollOnNewLog", newValue)}
/>
)}
</Menu.Item>
</Menu.Items>
</MenuItem>
</MenuItems>
</Transition>
</Menu>
);