mirror of
https://github.com/langgenius/dify.git
synced 2025-12-25 01:00:42 -05:00
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:
@@ -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>}
|
||||
|
||||
Reference in New Issue
Block a user