Change how the functionality to accept left clicks is implemented (PR #27)

This fixes a problem where the left click was always triggering the
context menu.

Author: julienw

docs/api.md

@@ -39,6 +39,7 @@ Contextmenu Trigger Component
 | holdToDisplay           | Number                  |           | `1000`  | This is applicable only for touch screens. The time (in ms) for which, user has to hold down his/her finger before the menu is shown.  **Note:** To disable the long press trigger on left-click just set a negative holdToDisplay value such as `-1` |
 | renderTag               | String or React Element |           |         | The element inside which the Component must be wrapped. By default `div` is used. But this prop can used to customize it.                                                                                                                         |
 | disableIfShiftIsPressed | Boolean                 |           | `false` | If true and shift is pressed, it will open the native browser context menu and ignore this custom component |
+| triggerOnLeftClick      | Boolean                 |           | `false` | If true, the menu will open with the left click in addition to the right click (or ctrl + click on MacOS) |
 
 ### `<MenuItem />`
 

src/ContextMenuTrigger.js

@@ -17,8 +17,8 @@ export default class ContextMenuTrigger extends Component {
         posX: PropTypes.number,
         posY: PropTypes.number,
         renderTag: PropTypes.elementType,
-        // 0 is left click, 2 is right click
-        mouseButton: PropTypes.number,
+        // Trigger on left click in addition to right click
+        triggerOnLeftClick: PropTypes.bool,
         disableIfShiftIsPressed: PropTypes.bool
     };
 
@@ -30,7 +30,7 @@ export default class ContextMenuTrigger extends Component {
         renderTag: 'div',
         posX: 0,
         posY: 0,
-        mouseButton: null,
+        triggerOnLeftClick: false,
         disableIfShiftIsPressed: false
     };
 
@@ -90,18 +90,13 @@ export default class ContextMenuTrigger extends Component {
     };
 
     handleContextMenu = (event) => {
-        const { mouseButton } = this.props;
-        if (mouseButton === null || event.button === mouseButton) {
-            this.handleContextClick(event);
-        }
+        this.handleContextClick(event);
         callIfExists(this.props.attributes.onContextMenu, event);
     };
 
+    // Note: this function is registered only if triggerOnLeftClick is true.
     handleMouseClick = (event) => {
-        const { mouseButton } = this.props;
-        if (mouseButton === null || event.button === mouseButton) {
-            this.handleContextClick(event);
-        }
+        this.handleContextClick(event);
         callIfExists(this.props.attributes.onClick, event);
     };
 
@@ -151,18 +146,19 @@ export default class ContextMenuTrigger extends Component {
     };
 
     render() {
-        const { renderTag, attributes, children } = this.props;
-        const newAttrs = assign({}, attributes, {
+        const { renderTag, attributes, children, triggerOnLeftClick } = this.props;
+        const newAttrs = {
+            ...attributes,
             className: cx(cssClasses.menuWrapper, attributes.className),
             onContextMenu: this.handleContextMenu,
-            onClick: this.handleMouseClick,
+            onClick: triggerOnLeftClick ? this.handleMouseClick : null,
             onMouseDown: this.handleMouseDown,
             onMouseUp: this.handleMouseUp,
             onTouchStart: this.handleTouchstart,
             onTouchEnd: this.handleTouchEnd,
             onMouseOut: this.handleMouseOut,
             ref: this.elemRef
-        });
+        };
 
         return React.createElement(renderTag, newAttrs, children);
     }

src/index.d.ts

@@ -23,7 +23,7 @@ declare module "@firefox-devtools/react-contextmenu" {
         disable?: boolean,
         holdToDisplay?: number,
         renderTag?: React.ElementType,
-        mouseButton?: number,
+        triggerOnLeftClick?: boolean,
         disableIfShiftIsPressed?: boolean,
         [key: string]: any
     }

tests/ContextMenuTrigger.test.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ContextMenu from '../src/ContextMenu';
+import ContextMenuTrigger from '../src/ContextMenuTrigger';
+
+describe('ContextMenuTrigger tests', () => {
+    function baseSetup(options = {}) {
+        const ID = 'CORRECT_ID';
+        const component = mount(<>
+            <ContextMenu id={ID} />
+            <ContextMenuTrigger id={ID} {...options} />
+        </>);
+
+        const wrapper = () => component.find('.react-contextmenu-wrapper');
+        const contextMenu = () => component.find('.react-contextmenu');
+        return { component, contextMenu, wrapper };
+    }
+
+    describe('without triggerOnLeftClick', () => {
+        const setup = baseSetup;
+        test('shows a ContextMenu when right clicking', () => {
+            const { contextMenu, wrapper } = setup();
+            wrapper().simulate('contextmenu', { button: 2, buttons: 2 });
+            expect(contextMenu().hasClass('react-contextmenu--visible')).toBe(true);
+        });
+
+        test('shows a ContextMenu when ctrl + left clicking', () => {
+            const { contextMenu, wrapper } = setup();
+            wrapper().simulate('contextmenu', { button: 0, buttons: 1 });
+            expect(contextMenu().hasClass('react-contextmenu--visible')).toBe(true);
+        });
+
+        test('does not show a ContextMenu when left clicking without a modifier', () => {
+            const { contextMenu, wrapper } = setup();
+            wrapper().simulate('click', { button: 0, buttons: 1 });
+            expect(contextMenu().hasClass('react-contextmenu--visible')).toBe(false);
+        });
+    });
+
+    describe('with triggerOnLeftClick', () => {
+        function setup() {
+            return baseSetup({ triggerOnLeftClick: true });
+        }
+
+        test('shows a ContextMenu when right clicking', () => {
+            const { contextMenu, wrapper } = setup();
+            wrapper().simulate('contextmenu', { button: 2, buttons: 2 });
+            expect(contextMenu().hasClass('react-contextmenu--visible')).toBe(true);
+        });
+
+        test('shows a ContextMenu when ctrl + left clicking', () => {
+            const { contextMenu, wrapper } = setup();
+            wrapper().simulate('contextmenu', { button: 0, buttons: 1 });
+            expect(contextMenu().hasClass('react-contextmenu--visible')).toBe(true);
+        });
+
+        test('shows a ContextMenu when left clicking without a modifier', () => {
+            const { contextMenu, wrapper } = setup();
+            wrapper().simulate('click', { button: 0, buttons: 1 });
+            expect(contextMenu().hasClass('react-contextmenu--visible')).toBe(true);
+        });
+    });
+});
+