diff --git a/src/popconfirm/Popcontent.tsx b/src/popconfirm/Popcontent.tsx index 4c4153858..58c43d7bf 100644 --- a/src/popconfirm/Popcontent.tsx +++ b/src/popconfirm/Popcontent.tsx @@ -2,7 +2,7 @@ import React from 'react'; import isString from 'lodash/isString'; import classNames from 'classnames'; import { InfoCircleFilledIcon as TdInfoCircleFilledIcon } from 'tdesign-icons-react'; -import Button from '../button'; +import Button, { ButtonProps } from '../button'; import noop from '../_util/noop'; import useConfig from '../hooks/useConfig'; import useGlobalIcon from '../hooks/useGlobalIcon'; @@ -71,6 +71,7 @@ const Popcontent = (props: PopconfirmProps & { onClose?: (context: PopconfirmVis onClose({ e, trigger: 'cancel' }); onCancel({ e }); }} + {...(typeof cancelBtn === 'object' ? { ...(cancelBtn as ButtonProps) } : {})} > {isString(cancelBtn) && cancelBtn} @@ -99,6 +100,7 @@ const Popcontent = (props: PopconfirmProps & { onClose?: (context: PopconfirmVis onClose({ e, trigger: 'confirm' }); onConfirm({ e }); }} + {...(typeof confirmBtn === 'object' ? { ...(confirmBtn as ButtonProps) } : {})} > {isString(confirmBtn) && confirmBtn} diff --git a/src/popconfirm/__tests__/popconfirm.test.tsx b/src/popconfirm/__tests__/popconfirm.test.tsx index 8bad25584..4ccad92ac 100644 --- a/src/popconfirm/__tests__/popconfirm.test.tsx +++ b/src/popconfirm/__tests__/popconfirm.test.tsx @@ -84,6 +84,53 @@ describe('Popconfirm 组件测试', () => { expect(onConfirmMock).toHaveBeenCalledTimes(1); }); + test('确认/取消按钮透传 null/object 测试', async () => { + const onCancelMock = vi.fn(); + const onConfirmMock = vi.fn(); + const { getByText, queryByTestId, queryByText, queryAllByRole } = render( + {text}} + onCancel={onCancelMock} + onConfirm={onConfirmMock} + destroyOnClose={false} + // 传入 null + confirmBtn={null} + // 传入 object + cancelBtn={{ onClick: onCancelMock, content: '取消操作', theme: 'danger' }} + > + {triggerElement} + , + ); + + // 鼠标点击前,没有元素存在 + const element1 = await waitFor(() => queryByTestId(testId)); + expect(element1).toBeNull(); + + // 模拟鼠标点击 + act(() => { + fireEvent.click(getByText(triggerElement)); + }); + + // 鼠标进入后,有元素,而且内容为 popupText, 且 confirmBtn={null} 只有一个按钮 + const element2 = await waitFor(() => queryByTestId(testId)); + expect(element2).not.toBeNull(); + + // 测试只有一个按钮 + const buttons = await waitFor(() => queryAllByRole('button')); + expect(buttons).toHaveLength(1); + + const cancelBtn = await waitFor(() => queryByText('取消操作')); + // 查询 content 验证透传成功 + expect(cancelBtn).not.toBeNull(); + + // 测试点击事件透传成功 + act(() => { + fireEvent.click(cancelBtn); + }); + expect(onCancelMock).toHaveBeenCalledTimes(1); + }); + test('ref test', () => { render( {text}} theme="warning">