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

refactor(web): headlessui v2 (#1570)

Browse source 
* refactor(web): fix build errors, SlideOver panels and forms

* refactor(web): fix build errors

* refactor(web): fix filter importer

* refactor(web): fix modals

* chore(web): bump pnpm

* refactor(web): pending component

* refactor(web): Dialog.Title to DialogTitle
This commit is contained in:
martylukyy 2024-06-18 14:51:04 +02:00 • committed by GitHub
parent 0841a1ce7c
commit 7821f7fb2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 139 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

56
web/src/components/modals/index.tsx
View file

@ -5,7 +5,7 @@
import { FC, Fragment, MutableRefObject, useState } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
import { RingResizeSpinner } from "@components/Icons";
@ -42,9 +42,9 @@ const ModalUpper = ({ title, text }: ModalUpperProps) => (
<div className="sm:flex sm:items-start">
<ExclamationTriangleIcon className="h-16 w-16 text-red-500 dark:text-red-500" aria-hidden="true" />
<div className="mt-3 text-left sm:mt-0 sm:ml-4 sm:pr-8 max-w-full">
<Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900 dark:text-white break-words">
<DialogTitle as="h3" className="text-lg leading-6 font-medium text-gray-900 dark:text-white break-words">
{title}
</Dialog.Title>
</DialogTitle>
<div className="mt-2">
<p className="text-sm text-gray-500 dark:text-gray-300">
{text}
@ -90,32 +90,20 @@ const ModalLower = ({ isOpen, isLoading, toggle, deleteAction }: ModalLowerProps
);
export const DeleteModal: FC<DeleteModalProps> = (props: DeleteModalProps) => (
<Transition.Root show={props.isOpen} as={Fragment}>
<Transition show={props.isOpen} as={Fragment}>
<Dialog
as="div"
static
className="fixed z-10 inset-0 overflow-y-auto"
className="fixed z-10 inset-0 overflow-y-auto bg-gray-700/60 dark:bg-black/60 transition-opacity"
initialFocus={props.buttonRef}
open={props.isOpen}
onClose={props.toggle}
>
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-700/60 dark:bg-black/60 transition-opacity" />
</Transition.Child>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
<Transition.Child
<TransitionChild
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@ -124,14 +112,14 @@ export const DeleteModal: FC<DeleteModalProps> = (props: DeleteModalProps) => (
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<DialogPanel className="inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<ModalUpper {...props} />
<ModalLower {...props} />
</div>
</Transition.Child>
</DialogPanel>
</TransitionChild>
</div>
</Dialog>
</Transition.Root>
</Transition>
);
export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps) => {
@ -170,7 +158,7 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
};
return (
<Transition.Root show={props.isOpen} as={Fragment}>
<Transition show={props.isOpen} as={Fragment}>
<Dialog
as="div"
static
@ -180,19 +168,7 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
onClose={handleClose}
>
<div className="grid place-items-center min-h-screen">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-700/60 dark:bg-black/60 transition-opacity" />
</Transition.Child>
<Transition.Child
<TransitionChild
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@ -201,7 +177,7 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<DialogPanel className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<ModalUpper title={props.title} text={props.text} />
<div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 flex justify-center">
@ -244,10 +220,10 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
</>
)}
</div>
</div>
</Transition.Child>
</DialogPanel>
</TransitionChild>
</div>
</Dialog>
</Transition.Root>
</Transition>
);
};