feat: add event listener option

Author: gonenoob

examples/auto-close.js

@@ -0,0 +1,77 @@
+/* eslint no-console:0 */
+
+import React from 'react';
+import Trigger from '../src';
+import '../assets/index.less';
+
+const builtinPlacements = {
+  left: {
+    points: ['cr', 'cl'],
+  },
+  right: {
+    points: ['cl', 'cr'],
+  },
+  top: {
+    points: ['bc', 'tc'],
+  },
+  bottom: {
+    points: ['tc', 'bc'],
+  },
+  topLeft: {
+    points: ['bl', 'tl'],
+  },
+  topRight: {
+    points: ['br', 'tr'],
+  },
+  bottomRight: {
+    points: ['tr', 'br'],
+  },
+  bottomLeft: {
+    points: ['tl', 'bl'],
+  },
+};
+
+const popupBorderStyle = {
+  border: '1px solid red',
+  padding: 10,
+  background: 'rgba(255, 0, 0, 0.1)',
+};
+
+class Test extends React.Component {
+  render() {
+    return (
+      <div style={{ margin: 200 }}>
+        <div onMouseDown={e => e.stopPropagation()}>
+          <Trigger
+            popupPlacement="right"
+            action={['click']}
+            builtinPlacements={builtinPlacements}
+            popup={
+              <div>popup content</div>
+            }
+            //effect on react 17
+            triggerEventListenerOption={{
+              capture: true
+            }}
+          >
+            <span>Click Me1</span>
+          </Trigger>
+        </div>
+        <div onMouseDown={e => e.stopPropagation()}>
+          <Trigger
+            popupPlacement="right"
+            action={['click']}
+            builtinPlacements={builtinPlacements}
+            popup={
+              <div>popup content2 </div>
+            }
+          >
+            <span>Click Me2</span>
+          </Trigger>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Test;

src/index.tsx

@@ -111,6 +111,7 @@ export interface TriggerProps {
   /** @private Bump fixed position at bottom in mobile.
    * This is internal usage currently, do not use in your prod */
   mobile?: MobileConfig;
+  triggerEventListenerOption?: object
 }
 
 interface TriggerState {
@@ -150,6 +151,7 @@ export function generateTrigger(
       showAction: [],
       hideAction: [],
       autoDestroy: false,
+      triggerEventListenerOption: {}
     };
 
     popupRef = React.createRef<PopupInnerRef>();
@@ -207,6 +209,7 @@ export function generateTrigger(
     componentDidUpdate() {
       const { props } = this;
       const { state } = this;
+      const { triggerEventListenerOption = {} } = props
 
       // We must listen to `mousedown` or `touchstart`, edge case:
       // https://github.com/ant-design/ant-design/issues/5804
@@ -223,6 +226,7 @@ export function generateTrigger(
             currentDocument,
             'mousedown',
             this.onDocumentClick,
+            triggerEventListenerOption
           );
         }
         // always hide on mobile
@@ -233,6 +237,7 @@ export function generateTrigger(
             currentDocument,
             'touchstart',
             this.onDocumentClick,
+            triggerEventListenerOption
           );
         }
         // close popup when trigger type contains 'onContextMenu' and document is scrolling.
@@ -243,6 +248,7 @@ export function generateTrigger(
             currentDocument,
             'scroll',
             this.onContextMenuClose,
+            triggerEventListenerOption
           );
         }
         // close popup when trigger type contains 'onContextMenu' and window is blur.