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:
Yeuoly
2025-11-12 17:59:37 +08:00
committed by GitHub
parent ca7794305b
commit b76e17b25d
785 changed files with 41186 additions and 3725 deletions

View File

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
import { useTranslation } from 'react-i18next'
import Button from '../button'
import Tooltip from '../tooltip'
export type IConfirm = {
className?: string
@@ -37,7 +38,9 @@ function Confirm({
}: IConfirm) {
const { t } = useTranslation()
const dialogRef = useRef<HTMLDivElement>(null)
const titleRef = useRef<HTMLDivElement>(null)
const [isVisible, setIsVisible] = useState(isShow)
const [isTitleTruncated, setIsTitleTruncated] = useState(false)
const confirmTxt = confirmText || `${t('common.operation.confirm')}`
const cancelTxt = cancelText || `${t('common.operation.cancel')}`
@@ -80,6 +83,13 @@ function Confirm({
}
}, [isShow])
useEffect(() => {
if (titleRef.current) {
const isOverflowing = titleRef.current.scrollWidth > titleRef.current.clientWidth
setIsTitleTruncated(isOverflowing)
}
}, [title, isVisible])
if (!isVisible)
return null
@@ -92,8 +102,18 @@ function Confirm({
<div ref={dialogRef} className={'relative w-full max-w-[480px] overflow-hidden'}>
<div className='shadows-shadow-lg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid border-components-panel-border bg-components-panel-bg'>
<div className='flex flex-col items-start gap-2 self-stretch pb-4 pl-6 pr-6 pt-6'>
<div className='title-2xl-semi-bold text-text-primary'>{title}</div>
<div className='system-md-regular w-full text-text-tertiary'>{content}</div>
<Tooltip
popupContent={title}
disabled={!isTitleTruncated}
portalContentClassName='!z-[10000001]'
asChild={false}
triggerClassName='w-full'
>
<div ref={titleRef} className='title-2xl-semi-bold w-full truncate text-text-primary'>
{title}
</div>
</Tooltip>
<div className='system-md-regular w-full whitespace-pre-wrap break-words text-text-tertiary'>{content}</div>
</div>
<div className='flex items-start justify-end gap-2 self-stretch p-6'>
{showCancel && <Button onClick={onCancel}>{cancelTxt}</Button>}