diff --git a/components/popconfirm/PurePanel.tsx b/components/popconfirm/PurePanel.tsx index 52b21eaaf6..5398ff9fbf 100644 --- a/components/popconfirm/PurePanel.tsx +++ b/components/popconfirm/PurePanel.tsx @@ -2,14 +2,14 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; import classNames from 'classnames'; import * as React from 'react'; import type { PopconfirmProps } from '.'; +import ActionButton from '../_util/ActionButton'; +import { getRenderPropValue } from '../_util/getRenderPropValue'; import Button from '../button'; import { convertLegacyProps } from '../button/button'; import { ConfigContext } from '../config-provider'; -import defaultLocale from '../locale/en_US'; import { useLocale } from '../locale'; +import defaultLocale from '../locale/en_US'; import PopoverPurePanel from '../popover/PurePanel'; -import ActionButton from '../_util/ActionButton'; -import { getRenderPropValue } from '../_util/getRenderPropValue'; import useStyle from './style'; @@ -30,6 +30,7 @@ export interface OverlayProps | 'showCancel' | 'title' | 'description' + | 'onPopupClick' > { prefixCls: string; close?: Function; @@ -52,6 +53,7 @@ export const Overlay: React.FC = (props) => { close, onConfirm, onCancel, + onPopupClick, } = props; const { getPrefixCls } = React.useContext(ConfigContext); @@ -59,7 +61,7 @@ export const Overlay: React.FC = (props) => { const [contextLocale] = useLocale('Popconfirm', defaultLocale.Popconfirm); return ( -
+
{icon && {icon}}
{ // expect(container.textContent).toEqual('Unmounted'); expect(error).not.toHaveBeenCalled(); }); + + it('should trigger onPopupClick', async () => { + const onPopupClick = jest.fn(); + + const popconfirm = render( + + show me your code + , + ); + const triggerNode = popconfirm.container.querySelector('span')!; + fireEvent.click(triggerNode); + await waitFakeTimer(); + fireEvent.click(popconfirm.container.querySelector('.ant-popover-inner-content')!); + expect(onPopupClick).toHaveBeenCalled(); + }); }); diff --git a/components/popconfirm/demo/basic.tsx b/components/popconfirm/demo/basic.tsx index 5f982a81dc..8813a6f383 100644 --- a/components/popconfirm/demo/basic.tsx +++ b/components/popconfirm/demo/basic.tsx @@ -1,5 +1,5 @@ -import React from 'react'; import { Button, message, Popconfirm } from 'antd'; +import React from 'react'; const confirm = (e: React.MouseEvent) => { console.log(e); diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md index 7deb3dc4ab..8e8e87ba0e 100644 --- a/components/popconfirm/index.en-US.md +++ b/components/popconfirm/index.en-US.md @@ -45,6 +45,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha | description | The description of the confirmation box title | ReactNode \| () => ReactNode | - | 5.1.0 | | onCancel | A callback of cancel | function(e) | - | | | onConfirm | A callback of confirmation | function(e) | - | | +| onPopupClick | A callback of popup click | function(e) | - | 5.5.0 | Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs. diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx index d8c4aa1ed3..791de691e1 100644 --- a/components/popconfirm/index.tsx +++ b/components/popconfirm/index.tsx @@ -1,15 +1,15 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; import classNames from 'classnames'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; import KeyCode from 'rc-util/lib/KeyCode'; -import * as React from 'react'; +import useMergedState from 'rc-util/lib/hooks/useMergedState'; import omit from 'rc-util/lib/omit'; +import * as React from 'react'; +import type { RenderFunction } from '../_util/getRenderPropValue'; +import { cloneElement } from '../_util/reactNode'; import type { ButtonProps, LegacyButtonType } from '../button/button'; import { ConfigContext } from '../config-provider'; import Popover from '../popover'; import type { AbstractTooltipProps } from '../tooltip'; -import type { RenderFunction } from '../_util/getRenderPropValue'; -import { cloneElement } from '../_util/reactNode'; import PurePanel, { Overlay } from './PurePanel'; import usePopconfirmStyle from './style'; @@ -30,6 +30,7 @@ export interface PopconfirmProps extends AbstractTooltipProps { open: boolean, e?: React.MouseEvent | React.KeyboardEvent, ) => void; + onPopupClick?: (e: React.MouseEvent) => void; } export interface PopconfirmState { diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index a1d66956f3..f9595f290b 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/components/popconfirm/index.zh-CN.md @@ -46,6 +46,7 @@ demo: | description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 | | onCancel | 点击取消的回调 | function(e) | - | | | onConfirm | 点击确认的回调 | function(e) | - | | +| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 | 更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。