feat: Add new trigger type --- 'contextmenu'

Author: MrPeak

examples/simple.js

@@ -57,7 +57,7 @@ class Test extends React.Component {
     maskClosable: false,
     placement: 'right',
     trigger: {
-      hover: 1,
+      contextMenu: 1,
     },
     offsetX: undefined,
     offsetY: undefined,
@@ -165,6 +165,16 @@ class Test extends React.Component {
 
         trigger:
 
+        <label>
+          <input
+            value="contextMenu"
+            checked={!!trigger.contextMenu}
+            type="checkbox"
+            onChange={this.onTriggerChange}
+          />
+          contextMenu
+        </label>
+
         <label>
           <input
             value="hover"

src/index.js

@@ -21,7 +21,7 @@ function returnDocument() {
 }
 
 const ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter',
-  'onMouseLeave', 'onFocus', 'onBlur'];
+  'onMouseLeave', 'onFocus', 'onBlur', 'onContextMenu'];
 
 const IS_REACT_16 = !!createPortal;
 
@@ -169,7 +169,7 @@ const Trigger = createReactClass({
     // https://github.com/react-component/trigger/issues/50
     if (state.popupVisible) {
       let currentDocument;
-      if (!this.clickOutsideHandler && this.isClickToHide()) {
+      if (!this.clickOutsideHandler && (this.isClickToHide() || this.isContextMenuToShow())) {
         currentDocument = props.getDocument();
         this.clickOutsideHandler = addEventListener(currentDocument,
           'mousedown', this.onDocumentClick);
@@ -180,6 +180,17 @@ const Trigger = createReactClass({
         this.touchOutsideHandler = addEventListener(currentDocument,
           'touchstart', this.onDocumentClick);
       }
+      // close popup when trigger type contains 'onContextMenu' and document is scrolling.
+      if (!this.contextMenuOutsideHandler1 && this.isContextMenuToShow()) {
+        currentDocument = currentDocument || props.getDocument();
+        this.contextMenuOutsideHandler1 = addEventListener(currentDocument,
+          'scroll', this.onContextMenuClose);
+      }
+      // close popup when trigger type contains 'onContextMenu' and window is blur.
+      if (!this.contextMenuOutsideHandler2 && this.isContextMenuToShow()) {
+        this.contextMenuOutsideHandler2 = addEventListener(window,
+          'blur', this.onContextMenuClose);
+      }
       return;
     }
 
@@ -245,6 +256,18 @@ const Trigger = createReactClass({
     }
   },
 
+  onContextMenu(e) {
+    e.preventDefault();
+    this.fireEvents('onContextMenu', e);
+    this.setPopupVisible(true);
+  },
+
+  onContextMenuClose() {
+    if (this.isContextMenuToShow()) {
+      this.close();
+    }
+  },
+
   onClick(event) {
     this.fireEvents('onClick', event);
     // focus will trigger click
@@ -405,6 +428,16 @@ const Trigger = createReactClass({
       this.clickOutsideHandler = null;
     }
 
+    if (this.contextMenuOutsideHandler1) {
+      this.contextMenuOutsideHandler1.remove();
+      this.contextMenuOutsideHandler1 = null;
+    }
+
+    if (this.contextMenuOutsideHandler2) {
+      this.contextMenuOutsideHandler2.remove();
+      this.contextMenuOutsideHandler2 = null;
+    }
+
     if (this.touchOutsideHandler) {
       this.touchOutsideHandler.remove();
       this.touchOutsideHandler = null;
@@ -425,6 +458,11 @@ const Trigger = createReactClass({
     return action.indexOf('click') !== -1 || showAction.indexOf('click') !== -1;
   },
 
+  isContextMenuToShow() {
+    const { action, showAction } = this.props;
+    return action.indexOf('contextMenu') !== -1 || showAction.indexOf('contextMenu') !== -1;
+  },
+
   isClickToHide() {
     const { action, hideAction } = this.props;
     return action.indexOf('click') !== -1 || hideAction.indexOf('click') !== -1;
@@ -482,6 +520,13 @@ const Trigger = createReactClass({
     const children = props.children;
     const child = React.Children.only(children);
     const newChildProps = { key: 'trigger' };
+
+    if (this.isContextMenuToShow()) {
+      newChildProps.onContextMenu = this.onContextMenu;
+    } else {
+      newChildProps.onContextMenu = this.createTwoChains('onContextMenu');
+    }
+
     if (this.isClickToHide() || this.isClickToShow()) {
       newChildProps.onClick = this.onClick;
       newChildProps.onMouseDown = this.onMouseDown;