Merge pull request #72 from MrPeak/master

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

Author: afc163

examples/simple.js

@@ -192,6 +192,15 @@ class Test extends React.Component {
           />
           click
         </label>
+        <label>
+          <input
+            value="contextMenu"
+            checked={!!trigger.contextMenu}
+            type="checkbox"
+            onChange={this.onTriggerChange}
+          />
+          contextMenu
+        </label>
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>
           <input

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;
 
@@ -173,7 +173,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);
@@ -187,6 +187,17 @@ const Trigger = createReactClass({
         this.touchOutsideHandler = addEventListener(currentDocument,
           'click', 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;
     }
 
@@ -252,6 +263,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
@@ -412,6 +435,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;
@@ -432,6 +465,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;
@@ -489,6 +527,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;

tests/index.js

@@ -215,6 +215,28 @@ describe('rc-trigger', function main() {
       }], done);
     });
 
+    it('contextMenu works', done => {
+      const trigger = ReactDOM.render((
+        <Trigger
+          action={['contextMenu']}
+          popupAlign={placementAlignMap.left}
+          popup={<strong>trigger</strong>}
+        >
+          <div className="target">contextMenu</div>
+        </Trigger>
+      ), div);
+
+      const target = scryRenderedDOMComponentsWithClass(trigger, 'target')[0];
+      // can not simulate mouseenter
+      Simulate.contextMenu(target);
+      async.series([timeout(200), (next) => {
+        const popupDomNode = trigger.getPopupDomNode();
+        expect(popupDomNode).to.be.ok();
+        expect($(popupDomNode).css('display')).to.be('block');
+        next();
+      }], done);
+    });
+
     it('afterPopupVisibleChange can be triggered', (done) => {
       let triggered = 0;
       const trigger = ReactDOM.render((
@@ -601,33 +623,33 @@ describe('rc-trigger', function main() {
         const domNode = ReactDOM.findDOMNode(trigger);
         Simulate.click(domNode);
         async.series([timeout(100),
-            (next) => {
-              const popupDomNode = trigger.getPopupDomNode();
-              expect(popupDomNode).to.be.ok();
-              expect($(popupDomNode).css('opacity')).not.to.be('1');
-              next();
-            },
-            timeout(500),
-            (next) => {
-              const popupDomNode = trigger.getPopupDomNode();
-              expect(popupDomNode).to.be.ok();
-              expect($(popupDomNode).css('opacity')).to.be('1');
-              Simulate.click(domNode);
-              next();
-            },
-            timeout(100),
-            (next) => {
-              const popupDomNode = trigger.getPopupDomNode();
-              expect(popupDomNode).to.be.ok();
-              expect($(popupDomNode).css('opacity')).not.to.be('1');
-              next();
-            },
-            timeout(500),
-            (next) => {
-              const popupDomNode = trigger.getPopupDomNode();
-              expect($(popupDomNode).css('display')).to.be('none');
-              next();
-            }],
+        (next) => {
+          const popupDomNode = trigger.getPopupDomNode();
+          expect(popupDomNode).to.be.ok();
+          expect($(popupDomNode).css('opacity')).not.to.be('1');
+          next();
+        },
+        timeout(500),
+        (next) => {
+          const popupDomNode = trigger.getPopupDomNode();
+          expect(popupDomNode).to.be.ok();
+          expect($(popupDomNode).css('opacity')).to.be('1');
+          Simulate.click(domNode);
+          next();
+        },
+        timeout(100),
+        (next) => {
+          const popupDomNode = trigger.getPopupDomNode();
+          expect(popupDomNode).to.be.ok();
+          expect($(popupDomNode).css('opacity')).not.to.be('1');
+          next();
+        },
+        timeout(500),
+        (next) => {
+          const popupDomNode = trigger.getPopupDomNode();
+          expect($(popupDomNode).css('display')).to.be('none');
+          next();
+        }],
           done);
       });
     });