opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-23 16:37:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: transation new

Browse Source
This commit is contained in:
Joel 2025-02-06 17:30:46 +08:00
parent a7575e6a41
commit fef2326d6e
2 changed files with 36 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
web/app/components/app/create-app-dialog/newAppDialog.tsx
View File

@ -1,63 +0,0 @@
import { Fragment, useCallback } from 'react'
import type { ReactNode } from 'react'
import { Dialog, DialogPanel, Transition } from '@headlessui/react'
import cn from '@/utils/classnames'
type DialogProps = {
className?: string
children: ReactNode
show: boolean
onClose?: () => void
}
const NewAppDialog = ({
className,
children,
show,
onClose,
}: DialogProps) => {
const close = useCallback(() => onClose?.(), [onClose])
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" />
<div className="fixed inset-0">
<div className="flex flex-col items-center justify-center min-h-full pt-[56px]">
{/* <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 relative w-full h-[calc(100vh-56px)] p-0 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-t-xl', className)}>
{children}
</DialogPanel>
</Transition.Child> */}
{/* TODO: to new Transition */}
<DialogPanel className={cn('grow relative w-full h-[calc(100vh-56px)] p-0 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-t-xl', className)}>
{children}
</DialogPanel>
</div>
</div>
</Dialog>
</Transition >
)
}
export default NewAppDialog

92
web/app/components/base/fullscreen-modal/index.tsx
View File

@ -1,7 +1,7 @@
import { Dialog, DialogPanel, Transition } from '@headlessui/react' import { Dialog, DialogPanel, Transition } from '@headlessui/react'
import { Fragment } from 'react'
import { RiCloseLargeLine } from '@remixicon/react' import { RiCloseLargeLine } from '@remixicon/react'
import classNames from '@/utils/classnames' import classNames from '@/utils/classnames'
import { useEffect, useState } from 'react'
type IModal = { type IModal = {
className?: string className?: string
@ -24,62 +24,42 @@ export default function FullScreenModal({
closable = false, closable = false,
overflowVisible = false, overflowVisible = false,
}: IModal) { }: IModal) {
const [showTransition, setShowTransition] = useState(false)
useEffect(() => {
if (!open) {
setShowTransition(false)
return
}
setTimeout(() => {
setShowTransition(true)
}, 100)
}, [open])
return ( return (
<Transition show={open} as={Fragment}> <Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose} open={open}>
<Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose}> <Transition show={showTransition}>
{/* <Transition.Child <div className={classNames(
as={Fragment} 'fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px] transition',
enter="ease-out duration-300" 'data-[closed]:opacity-0',
enterFrom="opacity-0" 'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:opacity-100',
enterTo="opacity-100" 'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:opacity-0',
leave="ease-in duration-200" )} />
leaveFrom="opacity-100" </Transition>
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]" />
</Transition.Child> */}
{/* TODO: to new Transition */}
<div className="fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]" />
<div <div
className="fixed inset-0 h-screen w-screen p-4" className="fixed inset-0 h-screen w-screen p-4"
onClick={(e) => { onClick={(e) => {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
}} }}
> >
<div className="w-full h-full bg-background-default-subtle rounded-2xl border border-effects-highlight relative"> <div className="w-full h-full bg-background-default-subtle rounded-2xl border border-effects-highlight relative">
{/* <Transition.Child <Transition show={showTransition}>
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={classNames(
'h-full',
overflowVisible ? 'overflow-visible' : 'overflow-hidden',
className,
)}>
{closable
&& <div
className='absolute z-50 top-3 right-3 w-9 h-9 flex items-center justify-center rounded-[10px]
bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover cursor-pointer'
onClick={(e) => {
e.stopPropagation()
onClose()
}}>
<RiCloseLargeLine className='w-3.5 h-3.5 text-components-button-tertiary-text' />
</div>}
{children}
</DialogPanel>
</Transition.Child> */}
{/* TODO: to new Transition */}
<DialogPanel className={classNames( <DialogPanel className={classNames(
'h-full', 'h-full transition',
overflowVisible ? 'overflow-visible' : 'overflow-hidden', overflowVisible ? 'overflow-visible' : 'overflow-hidden',
'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',
className, className,
)}> )}>
{closable {closable
@ -94,9 +74,9 @@ export default function FullScreenModal({
</div>} </div>}
{children} {children}
</DialogPanel> </DialogPanel>
</div> </Transition>
</div> </div>
</Dialog> </div>
</Transition> </Dialog>
) )
} }