mirror of https://github.com/langgenius/dify.git
refactor: consolidate DialogWrapper component usage and improve prop handling across input fields
This commit is contained in:
twwu
parent
3164f90327
commit
176b844cd5
|
|
@ -1,47 +1,58 @@
|
|||
import { Fragment, useCallback } from 'react'
|
||||
import { useCallback } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type DialogWrapperProps = {
|
||||
dialogClassName?: string
|
||||
className?: string
|
||||
panelWrapperClassName?: string
|
||||
outerWrapperClassName?: string
|
||||
children: ReactNode
|
||||
show: boolean
|
||||
onClose?: () => void
|
||||
}
|
||||
|
||||
const DialogWrapper = ({
|
||||
dialogClassName,
|
||||
className,
|
||||
panelWrapperClassName,
|
||||
outerWrapperClassName,
|
||||
children,
|
||||
show,
|
||||
onClose,
|
||||
}: DialogWrapperProps) => {
|
||||
const close = useCallback(() => onClose?.(), [onClose])
|
||||
return (
|
||||
<Transition appear show={show} as={Fragment}>
|
||||
<Dialog as='div' className='relative z-[1000000]' onClose={close}>
|
||||
<Transition appear show={show}>
|
||||
<Dialog
|
||||
as='div'
|
||||
className={cn('relative z-40', dialogClassName)}
|
||||
onClose={close}
|
||||
>
|
||||
<TransitionChild>
|
||||
<div className={cn(
|
||||
'fixed inset-0 bg-black/25',
|
||||
'data-[closed]:opacity-0',
|
||||
'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
|
||||
'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
|
||||
)} />
|
||||
<div
|
||||
className={cn(
|
||||
'fixed inset-0 bg-black/25',
|
||||
'data-[closed]:opacity-0',
|
||||
'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
|
||||
'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
|
||||
)}
|
||||
/>
|
||||
</TransitionChild>
|
||||
|
||||
<div className='fixed inset-0'>
|
||||
<div className={cn('fixed inset-0', outerWrapperClassName)}>
|
||||
<div className={cn('flex min-h-full flex-col items-end justify-center pb-1 pt-[116px]', panelWrapperClassName)}>
|
||||
<TransitionChild>
|
||||
<DialogPanel className={cn(
|
||||
'relative flex w-[420px] grow flex-col overflow-hidden border-components-panel-border bg-components-panel-bg-alt p-0 shadow-xl shadow-shadow-shadow-5 transition-all',
|
||||
'rounded-l-2xl border-y-[0.5px] border-l-[0.5px]',
|
||||
'data-[closed]:scale-95 data-[closed]:opacity-0',
|
||||
'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
|
||||
'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
|
||||
className,
|
||||
)}>
|
||||
<DialogPanel
|
||||
className={cn(
|
||||
'relative flex w-[420px] flex-col overflow-hidden border-components-panel-border bg-components-panel-bg-alt p-0 shadow-xl shadow-shadow-shadow-5 transition-all',
|
||||
'data-[closed]:scale-95 data-[closed]:opacity-0',
|
||||
'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
|
||||
'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
import { Fragment, useCallback } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type DialogWrapperProps = {
|
||||
className?: string
|
||||
panelWrapperClassName?: string
|
||||
children: ReactNode
|
||||
show: boolean
|
||||
onClose?: () => void
|
||||
}
|
||||
|
||||
const DialogWrapper = ({
|
||||
className,
|
||||
panelWrapperClassName,
|
||||
children,
|
||||
show,
|
||||
onClose,
|
||||
}: DialogWrapperProps) => {
|
||||
const close = useCallback(() => onClose?.(), [onClose])
|
||||
return (
|
||||
<Transition appear show={show} as={Fragment}>
|
||||
<Dialog as='div' className='relative z-[1000001]' onClose={close}>
|
||||
<TransitionChild>
|
||||
<div className={cn(
|
||||
'fixed inset-0 bg-black/25',
|
||||
'data-[closed]:opacity-0',
|
||||
'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
|
||||
'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
|
||||
)} />
|
||||
</TransitionChild>
|
||||
|
||||
<div className='fixed inset-0 overflow-y-auto'>
|
||||
<div className={cn('flex min-h-full flex-col items-end justify-start pb-1 pt-[116px]', panelWrapperClassName)}>
|
||||
<TransitionChild>
|
||||
<DialogPanel className={cn(
|
||||
'relative flex w-[400px] flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl shadow-shadow-shadow-9 transition-all',
|
||||
'data-[closed]:scale-95 data-[closed]:opacity-0',
|
||||
'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
|
||||
'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
|
||||
className,
|
||||
)}>
|
||||
{children}
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition >
|
||||
)
|
||||
}
|
||||
|
||||
export default DialogWrapper
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { RiCloseLine } from '@remixicon/react'
|
||||
import DialogWrapper from './dialog-wrapper'
|
||||
import DialogWrapper from '../dialog-wrapper'
|
||||
import InputFieldForm from './form'
|
||||
import { convertFormDataToINputField, convertToInputFieldFormData } from './utils'
|
||||
import { useCallback } from 'react'
|
||||
|
|
@ -33,7 +33,9 @@ const InputFieldEditor = ({
|
|||
<DialogWrapper
|
||||
show={show}
|
||||
onClose={onClose}
|
||||
panelWrapperClassName='pr-[424px]'
|
||||
outerWrapperClassName='overflow-y-auto'
|
||||
panelWrapperClassName='pr-[424px] justify-start'
|
||||
className='w-[400px] rounded-2xl border-[0.5px] bg-components-panel-bg shadow-shadow-shadow-9'
|
||||
>
|
||||
<div className='system-xl-semibold flex items-center pb-1 pl-4 pr-11 pt-3.5 text-text-primary'>
|
||||
{initialData ? t('datasetPipeline.inputFieldPanel.editInputField') : t('datasetPipeline.inputFieldPanel.addInputField')}
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ const InputFieldDialog = ({
|
|||
<DialogWrapper
|
||||
show={!!showInputFieldDialog}
|
||||
onClose={closePanel}
|
||||
className='grow rounded-l-2xl border-y-[0.5px] border-l-[0.5px]'
|
||||
>
|
||||
<div className='flex grow flex-col'>
|
||||
<div className='flex items-center p-4 pb-0'>
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
import { Fragment, useCallback } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type DialogWrapperProps = {
|
||||
className?: string
|
||||
panelWrapperClassName?: string
|
||||
children: ReactNode
|
||||
show: boolean
|
||||
onClose?: () => void
|
||||
}
|
||||
|
||||
const DialogWrapper = ({
|
||||
className,
|
||||
panelWrapperClassName,
|
||||
children,
|
||||
show,
|
||||
onClose,
|
||||
}: DialogWrapperProps) => {
|
||||
const close = useCallback(() => onClose?.(), [onClose])
|
||||
return (
|
||||
<Transition appear show={show} as={Fragment}>
|
||||
<Dialog as='div' className='relative z-[1000001]' onClose={close}>
|
||||
<TransitionChild>
|
||||
<div className={cn(
|
||||
'fixed inset-0 bg-black/25',
|
||||
'data-[closed]:opacity-0',
|
||||
'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
|
||||
'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
|
||||
)} />
|
||||
</TransitionChild>
|
||||
|
||||
<div className='fixed inset-0'>
|
||||
<div className={cn('flex min-h-full flex-col items-end justify-start pb-1 pt-[116px]', panelWrapperClassName)}>
|
||||
<TransitionChild>
|
||||
<DialogPanel className={cn(
|
||||
'relative flex w-[480px] grow flex-col overflow-hidden rounded-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl shadow-shadow-shadow-5 transition-all',
|
||||
'data-[closed]:scale-95 data-[closed]:opacity-0',
|
||||
'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
|
||||
'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
|
||||
className,
|
||||
)}>
|
||||
{children}
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition >
|
||||
)
|
||||
}
|
||||
|
||||
export default DialogWrapper
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { useState } from 'react'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import DialogWrapper from './dialog-wrapper'
|
||||
import DialogWrapper from '../dialog-wrapper'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Badge from '@/app/components/base/badge'
|
||||
import DataSource from './data-source'
|
||||
|
|
@ -24,7 +24,8 @@ const PreviewPanel = ({
|
|||
<DialogWrapper
|
||||
show={show}
|
||||
onClose={onClose}
|
||||
panelWrapperClassName='pr-[424px]'
|
||||
panelWrapperClassName='pr-[424px] justify-start'
|
||||
className='w-[480px] grow rounded-2xl border-[0.5px] bg-components-panel-bg'
|
||||
>
|
||||
<div className='flex items-center gap-x-2 px-4 pt-1'>
|
||||
<div className='grow py-1'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue