feat: add onPopupClick props (#42272)

* feat: add onPopupClick props

* fix: update en-us md

---------

Co-authored-by: pineapple <zhanglongchao@shizhuang-inc.com>

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<OverlayProps> = (props) => {
     close,
     onConfirm,
     onCancel,
+    onPopupClick,
   } = props;
 
   const { getPrefixCls } = React.useContext(ConfigContext);
@@ -59,7 +61,7 @@ export const Overlay: React.FC<OverlayProps> = (props) => {
   const [contextLocale] = useLocale('Popconfirm', defaultLocale.Popconfirm);
 
   return (
-    <div className={`${prefixCls}-inner-content`}>
+    <div className={`${prefixCls}-inner-content`} onClick={onPopupClick}>
       <div className={`${prefixCls}-message`}>
         {icon && <span className={`${prefixCls}-message-icon`}>{icon}</span>}
         <div

components/popconfirm/__tests__/index.test.tsx

@@ -286,4 +286,19 @@ describe('Popconfirm', () => {
     // expect(container.textContent).toEqual('Unmounted');
     expect(error).not.toHaveBeenCalled();
   });
+
+  it('should trigger onPopupClick', async () => {
+    const onPopupClick = jest.fn();
+
+    const popconfirm = render(
+      <Popconfirm title="pop test" onPopupClick={onPopupClick}>
+        <span>show me your code</span>
+      </Popconfirm>,
+    );
+    const triggerNode = popconfirm.container.querySelector('span')!;
+    fireEvent.click(triggerNode);
+    await waitFakeTimer();
+    fireEvent.click(popconfirm.container.querySelector('.ant-popover-inner-content')!);
+    expect(onPopupClick).toHaveBeenCalled();
+  });
 });

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<HTMLElement>) => {
   console.log(e);

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.
 

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<HTMLElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => void;
+  onPopupClick?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
 export interface PopconfirmState {

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)。