feat: introduce trigger functionality (#27644)
Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com> Co-authored-by: Stream <Stream_2@qq.com> Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com> Co-authored-by: zhsama <torvalds@linux.do> Co-authored-by: Harry <xh001x@hotmail.com> Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com> Co-authored-by: yessenia <yessenia.contact@gmail.com> Co-authored-by: hjlarry <hjlarry@163.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: WTW0313 <twwu@dify.ai> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -8,6 +8,7 @@ import { noop } from 'lodash-es'
|
||||
type IModal = {
|
||||
className?: string
|
||||
wrapperClassName?: string
|
||||
containerClassName?: string
|
||||
isShow: boolean
|
||||
onClose?: () => void
|
||||
title?: React.ReactNode
|
||||
@@ -16,11 +17,14 @@ type IModal = {
|
||||
closable?: boolean
|
||||
overflowVisible?: boolean
|
||||
highPriority?: boolean // For modals that need to appear above dropdowns
|
||||
overlayOpacity?: boolean // For semi-transparent overlay instead of default
|
||||
clickOutsideNotClose?: boolean // Prevent closing when clicking outside modal
|
||||
}
|
||||
|
||||
export default function Modal({
|
||||
className,
|
||||
wrapperClassName,
|
||||
containerClassName,
|
||||
isShow,
|
||||
onClose = noop,
|
||||
title,
|
||||
@@ -29,19 +33,21 @@ export default function Modal({
|
||||
closable = false,
|
||||
overflowVisible = false,
|
||||
highPriority = false,
|
||||
overlayOpacity = false,
|
||||
clickOutsideNotClose = false,
|
||||
}: IModal) {
|
||||
return (
|
||||
<Transition appear show={isShow} as={Fragment}>
|
||||
<Dialog as="div" className={classNames('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={onClose}>
|
||||
<Dialog as="div" className={classNames('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={clickOutsideNotClose ? noop : onClose}>
|
||||
<TransitionChild>
|
||||
<div className={classNames(
|
||||
'fixed inset-0 bg-background-overlay',
|
||||
'fixed inset-0',
|
||||
overlayOpacity ? 'bg-workflow-canvas-canvas-overlay' : 'bg-background-overlay',
|
||||
'duration-300 ease-in data-[closed]:opacity-0',
|
||||
'data-[enter]:opacity-100',
|
||||
'data-[leave]:opacity-0',
|
||||
)} />
|
||||
</TransitionChild>
|
||||
|
||||
<div
|
||||
className="fixed inset-0 overflow-y-auto"
|
||||
onClick={(e) => {
|
||||
@@ -49,7 +55,7 @@ export default function Modal({
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<div className={classNames('flex min-h-full items-center justify-center p-4 text-center', containerClassName)}>
|
||||
<TransitionChild>
|
||||
<DialogPanel className={classNames(
|
||||
'relative w-full max-w-[480px] rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import { memo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import type { ButtonProps } from '@/app/components/base/button'
|
||||
import Button from '@/app/components/base/button'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Button from '@/app/components/base/button'
|
||||
import type { ButtonProps } from '@/app/components/base/button'
|
||||
import cn from '@/utils/classnames'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import { noop } from 'lodash-es'
|
||||
import { memo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type ModalProps = {
|
||||
onClose?: () => void
|
||||
@@ -26,6 +27,9 @@ type ModalProps = {
|
||||
footerSlot?: React.ReactNode
|
||||
bottomSlot?: React.ReactNode
|
||||
disabled?: boolean
|
||||
containerClassName?: string
|
||||
wrapperClassName?: string
|
||||
clickOutsideNotClose?: boolean
|
||||
}
|
||||
const Modal = ({
|
||||
onClose,
|
||||
@@ -44,24 +48,28 @@ const Modal = ({
|
||||
footerSlot,
|
||||
bottomSlot,
|
||||
disabled,
|
||||
containerClassName,
|
||||
wrapperClassName,
|
||||
clickOutsideNotClose = false,
|
||||
}: ModalProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<PortalToFollowElem open>
|
||||
<PortalToFollowElemContent
|
||||
className='z-[9998] flex h-full w-full items-center justify-center bg-background-overlay'
|
||||
onClick={onClose}
|
||||
className={cn('z-[9998] flex h-full w-full items-center justify-center bg-background-overlay', wrapperClassName)}
|
||||
onClick={clickOutsideNotClose ? noop : onClose}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'max-h-[80%] w-[480px] overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs',
|
||||
size === 'sm' && 'w-[480px',
|
||||
'flex max-h-[80%] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs',
|
||||
size === 'sm' && 'w-[480px]',
|
||||
size === 'md' && 'w-[640px]',
|
||||
containerClassName,
|
||||
)}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className='title-2xl-semi-bold relative p-6 pb-3 pr-14 text-text-primary'>
|
||||
<div className='title-2xl-semi-bold relative shrink-0 p-6 pb-3 pr-14 text-text-primary'>
|
||||
{title}
|
||||
{
|
||||
subTitle && (
|
||||
@@ -79,10 +87,10 @@ const Modal = ({
|
||||
</div>
|
||||
{
|
||||
children && (
|
||||
<div className='px-6 py-3'>{children}</div>
|
||||
<div className='min-h-0 flex-1 overflow-y-auto px-6 py-3'>{children}</div>
|
||||
)
|
||||
}
|
||||
<div className='flex justify-between p-6 pt-5'>
|
||||
<div className='flex shrink-0 justify-between p-6 pt-5'>
|
||||
<div>
|
||||
{footerSlot}
|
||||
</div>
|
||||
@@ -117,7 +125,11 @@ const Modal = ({
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{bottomSlot}
|
||||
{bottomSlot && (
|
||||
<div className='shrink-0'>
|
||||
{bottomSlot}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
|
||||
Reference in New Issue
Block a user