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

chore: change some

Browse Source
chore/upgrade-next
Joel 1 year ago
parent 58403b8238
commit 4ad152f525
5 changed files with 89 additions and 37 deletions
Show Stats Download Patch File Download Diff File

20
web/app/components/app/create-app-dialog/newAppDialog.tsx
Unescape Escape View File

@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react' import { Fragment, useCallback } from 'react'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
import { Dialog, Transition } from '@headlessui/react' import { Dialog, DialogPanel, Transition } from '@headlessui/react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
type DialogProps = { type DialogProps = {
@ -20,7 +20,7 @@ const NewAppDialog = ({
return ( return (
<Transition appear show={show} as={Fragment}> <Transition appear show={show} as={Fragment}>
<Dialog as="div" className="relative z-40" onClose={close}> <Dialog as="div" className="relative z-40" onClose={close}>
<Transition.Child {/* <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
@ -30,11 +30,13 @@ const NewAppDialog = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-black bg-opacity-25" /> <div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child> </Transition.Child> */}
{/* TODO: to new Transition */}
<div className="fixed inset-0 bg-black bg-opacity-25" />
<div className="fixed inset-0"> <div className="fixed inset-0">
<div className="flex flex-col items-center justify-center min-h-full pt-[56px]"> <div className="flex flex-col items-center justify-center min-h-full pt-[56px]">
<Transition.Child {/* <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"
@ -43,10 +45,14 @@ const NewAppDialog = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel 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)}> <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} {children}
</Dialog.Panel> </DialogPanel>
</Transition.Child> </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>
</div> </div>
</Dialog> </Dialog>

39
web/app/components/base/dialog/index.tsx
Unescape Escape View File

@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react' import { Fragment, useCallback } from 'react'
import type { ElementType, ReactNode } from 'react' import type { ElementType, ReactNode } from 'react'
import { Dialog, Transition } from '@headlessui/react' import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react'
import classNames from '@/utils/classnames' import classNames from '@/utils/classnames'
// https://headlessui.com/react/dialog // https://headlessui.com/react/dialog
@ -34,7 +34,7 @@ const CustomDialog = ({
return ( return (
<Transition appear show={show} as={Fragment}> <Transition appear show={show} as={Fragment}>
<Dialog as="div" className="relative z-40" onClose={close}> <Dialog as="div" className="relative z-40" onClose={close}>
<Transition.Child {/* <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
@ -44,11 +44,13 @@ const CustomDialog = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-black bg-opacity-25" /> <div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child> </Transition.Child> */}
{/* TODO: to new Transition */}
<div className="fixed inset-0 bg-black bg-opacity-25" />
<div className="fixed inset-0 overflow-y-auto"> <div className="fixed inset-0 overflow-y-auto">
<div className="flex items-center justify-center min-h-full"> <div className="flex items-center justify-center min-h-full">
<Transition.Child {/* <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"
@ -57,14 +59,14 @@ const CustomDialog = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className={classNames('w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', className)}> <DialogPanel className={classNames('w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', className)}>
{Boolean(title) && ( {Boolean(title) && (
<Dialog.Title <DialogTitle
as={titleAs || 'h3'} as={titleAs || 'h3'}
className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)} className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
> >
{title} {title}
</Dialog.Title> </DialogTitle>
)} )}
<div className={classNames(bodyClassName)}> <div className={classNames(bodyClassName)}>
{children} {children}
@ -74,8 +76,27 @@ const CustomDialog = ({
{footer} {footer}
</div> </div>
)} )}
</Dialog.Panel> </DialogPanel>
</Transition.Child> </Transition.Child> */}
{/* TODO: to new Transition */}
<DialogPanel className={classNames('w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', className)}>
{Boolean(title) && (
<DialogTitle
as={titleAs || 'h3'}
className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
>
{title}
</DialogTitle>
)}
<div className={classNames(bodyClassName)}>
{children}
</div>
{Boolean(footer) && (
<div className={classNames('flex items-center justify-end gap-2 px-6 pb-6 pt-3', footerClassName)}>
{footer}
</div>
)}
</DialogPanel>
</div> </div>
</div> </div>
</Dialog> </Dialog>

14
web/app/components/base/drawer/index.tsx
Unescape Escape View File

@ -1,5 +1,5 @@
'use client' 'use client'
import { Dialog } from '@headlessui/react' import { Dialog, DialogPanel, DialogTitle } from '@headlessui/react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/24/outline' import { XMarkIcon } from '@heroicons/react/24/outline'
import Button from '../button' import Button from '../button'
@ -48,21 +48,21 @@ export default function Drawer({
> >
<div className={cn('flex w-screen h-screen justify-end', positionCenter && '!justify-center')}> <div className={cn('flex w-screen h-screen justify-end', positionCenter && '!justify-center')}>
{/* mask */} {/* mask */}
<Dialog.Overlay <DialogPanel
className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')} className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')}
/> />
<div className={cn('relative z-50 flex flex-col justify-between bg-background-body w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}> <div className={cn('relative z-50 flex flex-col justify-between bg-background-body w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
<> <>
{title && <Dialog.Title {title && <DialogTitle
as="h3" as="h3"
className="text-lg font-medium leading-6 text-gray-900" className="text-lg font-medium leading-6 text-gray-900"
> >
{title} {title}
</Dialog.Title>} </DialogTitle>}
{showClose && <Dialog.Title className="flex items-center mb-4" as="div"> {showClose && <DialogTitle className="flex items-center mb-4" as="div">
<XMarkIcon className='w-4 h-4 text-gray-500' onClick={onClose} /> <XMarkIcon className='w-4 h-4 text-gray-500' onClick={onClose} />
</Dialog.Title>} </DialogTitle>}
{description && <Dialog.Description className='text-gray-500 text-xs font-normal mt-2'>{description}</Dialog.Description>} {description && <div className='text-gray-500 text-xs font-normal mt-2'>{description}</div>}
{children} {children}
</> </>
{footer || (footer === null {footer || (footer === null

19
web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
Unescape Escape View File

@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react' import { Fragment, useCallback } from 'react'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
import { Dialog, Transition } from '@headlessui/react' import { Dialog, DialogPanel, Transition } from '@headlessui/react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
type DialogProps = { type DialogProps = {
@ -22,7 +22,7 @@ const DialogWrapper = ({
return ( return (
<Transition appear show={show} as={Fragment}> <Transition appear show={show} as={Fragment}>
<Dialog as="div" className="relative z-40" onClose={close}> <Dialog as="div" className="relative z-40" onClose={close}>
<Transition.Child {/* <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
@ -32,11 +32,12 @@ const DialogWrapper = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-black bg-opacity-25" /> <div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child> </Transition.Child> */}
<div className="fixed inset-0 bg-black bg-opacity-25" />
<div className="fixed inset-0"> <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')}> <div className={cn('flex flex-col items-end justify-center min-h-full pb-2', inWorkflow ? 'pt-[112px]' : 'pt-[64px] pr-2')}>
<Transition.Child {/* <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"
@ -45,10 +46,14 @@ const DialogWrapper = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel 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)}> <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} {children}
</Dialog.Panel> </DialogPanel>
</Transition.Child> </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>
</div> </div>
</div> </div>
</Dialog> </Dialog>

34
web/app/components/base/fullscreen-modal/index.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
import { Dialog, Transition } from '@headlessui/react' import { Dialog, DialogPanel, Transition } from '@headlessui/react'
import { Fragment } from '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'
@ -27,7 +27,7 @@ export default function FullScreenModal({
return ( return (
<Transition show={open} as={Fragment}> <Transition show={open} as={Fragment}>
<Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose}> <Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose}>
<Transition.Child {/* <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
@ -37,7 +37,9 @@ export default function FullScreenModal({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]" /> <div className="fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]" />
</Transition.Child> </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"
@ -47,7 +49,7 @@ export default function FullScreenModal({
}} }}
> >
<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.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"
@ -56,7 +58,7 @@ export default function FullScreenModal({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className={classNames( <DialogPanel className={classNames(
'h-full', 'h-full',
overflowVisible ? 'overflow-visible' : 'overflow-hidden', overflowVisible ? 'overflow-visible' : 'overflow-hidden',
className, className,
@ -72,8 +74,26 @@ export default function FullScreenModal({
<RiCloseLargeLine className='w-3.5 h-3.5 text-components-button-tertiary-text' /> <RiCloseLargeLine className='w-3.5 h-3.5 text-components-button-tertiary-text' />
</div>} </div>}
{children} {children}
</Dialog.Panel> </DialogPanel>
</Transition.Child> </Transition.Child> */}
{/* TODO: to new Transition */}
<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>
</div> </div>
</div> </div>
</Dialog> </Dialog>

Write Preview
Loading…
Cancel
Save