mirror of
https://github.com/idanoo/autobrr
synced 2025-07-25 01:39:13 +00:00
refactor(web): headlessui v2 (#1570)
* 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
GitHub
parent
0841a1ce7c
commit
7821f7fb2f
13 changed files with 139 additions and 180 deletions
|
|
@ -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">
|
||||
​
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import { Fragment, useRef, ReactNode, ReactElement } from "react";
|
||||
import { XMarkIcon } from "@heroicons/react/24/solid";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
|
||||
import { Form, Formik } from "formik";
|
||||
import type { FormikValues, FormikProps } from "formik";
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ function SlideOver<DataType extends FormikValues>({
|
|||
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Transition show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
|
||||
{deleteAction && (
|
||||
<DeleteModal
|
||||
|
|
@ -68,16 +68,14 @@ function SlideOver<DataType extends FormikValues>({
|
|||
)}
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Dialog.Overlay className="absolute inset-0" />
|
||||
|
||||
<div
|
||||
<DialogPanel
|
||||
className="fixed inset-y-0 right-0 max-w-full flex"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Transition.Child
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
enterFrom="translate-x-full"
|
||||
|
|
@ -107,7 +105,7 @@ function SlideOver<DataType extends FormikValues>({
|
|||
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
|
||||
<div className="flex items-start justify-between space-x-3">
|
||||
<div className="space-y-1">
|
||||
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">{type === "CREATE" ? "Create" : "Update"} {title}</Dialog.Title>
|
||||
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">{type === "CREATE" ? "Create" : "Update"} {title}</DialogTitle>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{type === "CREATE" ? "Create" : "Update"} {title}.
|
||||
</p>
|
||||
|
|
@ -225,11 +223,11 @@ function SlideOver<DataType extends FormikValues>({
|
|||
</Formik>
|
||||
</div>
|
||||
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -116,11 +116,10 @@ export const Tooltip = ({
|
|||
</div>
|
||||
<Transition
|
||||
show={isTooltipVisible || visible}
|
||||
className="z-10"
|
||||
enter="transition duration-200 ease-out"
|
||||
enter="transition-opacity duration-200 ease-out"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition duration-200 ease-in"
|
||||
leave="transition-opacity duration-200 ease-in"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue