ngskcloud
/
gcgj-dify-1.7.0
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: consolidate DialogWrapper component usage and improve prop handling across input fields

Browse Source
pull/21398/head
twwu 8 months ago
parent 3164f90327
commit 176b844cd5
6 changed files with 37 additions and 130 deletions
Show Stats Download Patch File Download Diff File

47
web/app/components/rag-pipeline/components/input-field/dialog-wrapper.tsx
Unescape Escape View File

@ -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>

54
web/app/components/rag-pipeline/components/input-field/editor/dialog-wrapper.tsx
Unescape Escape View File

@ -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

6
web/app/components/rag-pipeline/components/input-field/editor/index.tsx
Unescape Escape View File

@ -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')}

1
web/app/components/rag-pipeline/components/input-field/index.tsx
Unescape Escape View File

@ -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'>

54
web/app/components/rag-pipeline/components/input-field/preview/dialog-wrapper.tsx
Unescape Escape View File

@ -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

5
web/app/components/rag-pipeline/components/input-field/preview/index.tsx
Unescape Escape View File

@ -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'>

Write Preview
Loading…
Cancel
Save