fix: update htmlContent type and wrap button in div for manualClose (#16716)

This commit is contained in:
Wu Tianwei 2025-03-25 14:58:42 +08:00 committed by GitHub
parent 40cadab8a6
commit 6a0f1dad7f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 10 deletions

View File

@ -9,7 +9,7 @@ export type HtmlContentProps = {
type IPopover = { type IPopover = {
className?: string className?: string
htmlContent: React.ReactNode<HtmlContentProps> htmlContent: React.ReactNode
popupClassName?: string popupClassName?: string
trigger?: 'click' | 'hover' trigger?: 'click' | 'hover'
position?: 'bottom' | 'br' | 'bl' position?: 'bottom' | 'br' | 'bl'
@ -90,7 +90,7 @@ export default function CustomPopover({
> >
{({ close }) => ( {({ close }) => (
<div <div
className={cn('w-fit min-w-[130px] overflow-hidden rounded-lg bg-components-panel-bg shadow-lg ring-1 ring-black ring-opacity-5', popupClassName)} className={cn('w-fit min-w-[130px] overflow-hidden rounded-lg bg-components-panel-bg shadow-lg ring-1 ring-black/5', popupClassName)}
{...(trigger !== 'hover' {...(trigger !== 'hover'
? {} ? {}
: { : {
@ -99,7 +99,7 @@ export default function CustomPopover({
}) })
} }
> >
{cloneElement(htmlContent as React.ReactNode<HtmlContentProps>, { {cloneElement(htmlContent as React.ReactElement, {
onClose: () => onMouseLeave(open), onClose: () => onMouseLeave(open),
...(manualClose ...(manualClose
? { ? {

View File

@ -103,6 +103,8 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
manualClose manualClose
trigger='click' trigger='click'
htmlContent={ htmlContent={
// need to wrapper the button with div when manualClose is true
<div className='w-full p-1'>
<button <button
type='button' type='button'
className='system-md-regular flex w-full items-center rounded-lg px-2 py-1.5 text-text-secondary' className='system-md-regular flex w-full items-center rounded-lg px-2 py-1.5 text-text-secondary'
@ -110,6 +112,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
> >
{t('datasetDocuments.list.action.batchAdd')} {t('datasetDocuments.list.action.batchAdd')}
</button> </button>
</div>
} }
btnElement={ btnElement={
<div className='flex items-center justify-center' > <div className='flex items-center justify-center' >