chore: to new transation

This commit is contained in:
Joel
2025-02-06 18:06:55 +08:00
parent fef2326d6e
commit 7ddb568804
6 changed files with 103 additions and 192 deletions

View File

@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react'
import type { ReactNode } from 'react'
import { Dialog, DialogPanel, Transition } from '@headlessui/react'
import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
import cn from '@/utils/classnames'
type DialogProps = {
@ -22,39 +22,29 @@ const DialogWrapper = ({
return (
<Transition appear show={show} as={Fragment}>
<Dialog as="div" className="relative z-40" onClose={close}>
{/* <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"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child> */}
{/* TODO: to new Transition */}
<div className="fixed inset-0 bg-black bg-opacity-25" />
<TransitionChild>
<div className={cn(
'fixed inset-0 bg-black bg-opacity-25',
'data-[closed]:opacity-0',
'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:opacity-100',
'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:opacity-0',
)} />
</TransitionChild>
<div className="fixed inset-0">
<div className={cn('flex flex-col items-end justify-center min-h-full pb-2', inWorkflow ? 'pt-[112px]' : 'pt-[64px] pr-2')}>
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<DialogPanel className={cn('grow flex flex-col relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-components-panel-border shadow-xl', inWorkflow ? 'border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] rounded-l-2xl' : 'border-[0.5px] rounded-2xl', className)}>
<TransitionChild>
<DialogPanel className={cn(
'grow flex flex-col relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-components-panel-border shadow-xl',
inWorkflow ? 'border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] rounded-l-2xl' : 'border-[0.5px] rounded-2xl',
'data-[closed]:opacity-0 data-[closed]:scale-95',
'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:opacity-100 data-[enter]:scale-100',
'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:opacity-0 data-[enter]:scale-95',
className,
)}>
{children}
</DialogPanel>
</Transition.Child> */}
{/* TODO: to new Transition */}
<DialogPanel className={cn('grow flex flex-col relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-components-panel-border shadow-xl', inWorkflow ? 'border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] rounded-l-2xl' : 'border-[0.5px] rounded-2xl', className)}>
{children}
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>