feat: Add onPopupClick event (#299)

* feat: Add onPopupClick

* test: test case

Author: zombieJ

src/Popup/MobilePopupInner.tsx

@@ -21,6 +21,7 @@ const MobilePopupInner = React.forwardRef<PopupInnerRef, MobilePopupInnerProps>(
         popupMotion = {},
         popupRender,
       } = {},
+      onClick,
     } = props;
     const elementRef = React.useRef<HTMLDivElement>();
 
@@ -67,6 +68,7 @@ const MobilePopupInner = React.forwardRef<PopupInnerRef, MobilePopupInnerProps>(
             <div
               ref={motionRef}
               className={mergedClassName}
+              onClick={onClick}
               style={{
                 ...motionStyle,
                 ...mergedStyle,

src/Popup/PopupInner.tsx

@@ -50,6 +50,7 @@ export interface PopupInnerProps {
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
   onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
   onTouchStart?: React.TouchEventHandler<HTMLDivElement>;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 
 export interface PopupInnerRef {
@@ -82,6 +83,7 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
       onMouseLeave,
       onMouseDown,
       onTouchStart,
+      onClick,
     } = props;
 
     const alignRef = useRef<RefAlign>();
@@ -251,6 +253,7 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
                 onMouseLeave={onMouseLeave}
                 onMouseDownCapture={onMouseDown}
                 onTouchStartCapture={onTouchStart}
+                onClick={onClick}
                 style={{
                   ...motionStyle,
                   ...mergedStyle,

src/Popup/index.tsx

@@ -29,6 +29,7 @@ export interface PopupProps {
   onMouseLeave?: React.MouseEventHandler<HTMLElement>;
   onMouseDown?: React.MouseEventHandler<HTMLElement>;
   onTouchStart?: React.TouchEventHandler<HTMLElement>;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
   stretch?: StretchType;
   children?: React.ReactNode;
   point?: Point;

src/index.tsx

@@ -59,6 +59,7 @@ export interface TriggerProps {
   hideAction?: ActionType[];
   getPopupClassNameFromAlign?: (align: AlignType) => string;
   onPopupVisibleChange?: (visible: boolean) => void;
+  onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
   afterPopupVisibleChange?: (visible: boolean) => void;
   popup: React.ReactNode | (() => React.ReactNode);
   popupStyle?: React.CSSProperties;
@@ -516,6 +517,7 @@ export function generateTrigger(
         alignPoint,
         mobile,
         forceRender,
+        onPopupClick,
       } = this.props;
       const { popupVisible, point } = this.state;
 
@@ -557,6 +559,7 @@ export function generateTrigger(
           motion={popupMotion}
           mobile={mobile}
           forceRender={forceRender}
+          onClick={onPopupClick}
         >
           {typeof popup === 'function' ? popup() : popup}
         </Popup>

tests/basic.test.jsx

@@ -839,4 +839,22 @@ describe('Trigger.Basic', () => {
     trigger(container, '.target');
     expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
   });
+
+  it('onPopupClick', () => {
+    const onPopupClick = jest.fn();
+
+    render(
+      <Trigger
+        popupVisible
+        popup={<strong>trigger</strong>}
+        onPopupClick={onPopupClick}
+      >
+        <div />
+      </Trigger>,
+    );
+
+    fireEvent.click(document.querySelector('strong'));
+
+    expect(onPopupClick).toHaveBeenCalled();
+  });
 });