From 8383015f11eec66904c4dac2b4a22c79a8349fb3 Mon Sep 17 00:00:00 2001
From: Xiaoji Chen <Pessimistress@users.noreply.github.com>
Date: Wed, 13 Jun 2018 16:07:53 -0700
Subject: [PATCH] Add onContextMenu prop (#529)

---
 docs/components/interactive-map.md |  6 ++++++
 src/components/interactive-map.js  | 21 ++++++++++++++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/docs/components/interactive-map.md b/docs/components/interactive-map.md
index c48d84127..90a465f63 100644
--- a/docs/components/interactive-map.md
+++ b/docs/components/interactive-map.md
@@ -135,6 +135,12 @@ Parameters
     [queryRenderedFeatures](https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures) API.
     To make a layer interactive, set the `interactive` property in the layer style to `true`.
 
+##### `onContextMenu` {Function}
+
+Called when the context menu is activated. Prevent default here to enable right button interaction.
+
+Default: `event => event.preventDefault()`
+
 ##### `getCursor` {Function}
 
 Accessor that returns a cursor style to show interactive state. Called when the component is being rendered.
diff --git a/src/components/interactive-map.js b/src/components/interactive-map.js
index a02d53dd5..73c9f4f54 100644
--- a/src/components/interactive-map.js
+++ b/src/components/interactive-map.js
@@ -88,6 +88,10 @@ const propTypes = Object.assign({}, StaticMap.propTypes, {
     * https://www.mapbox.com/mapbox-gl-style-spec/#layer-interactive
     */
   onClick: PropTypes.func,
+  /**
+    * Called when the context menu is activated.
+    */
+  onContextMenu: PropTypes.func,
 
   /** Custom touch-action CSS for the event canvas. Defaults to 'none' */
   touchAction: PropTypes.string,
@@ -126,6 +130,7 @@ const defaultProps = Object.assign({},
     onViewportChange: null,
     onClick: null,
     onHover: null,
+    onContextMenu: event => event.preventDefault(),
 
     scrollZoom: true,
     dragPan: true,
@@ -169,7 +174,6 @@ export default class InteractiveMap extends PureComponent {
     this._mapControls = props.mapControls || new MapControls();
 
     this._eventManager = new EventManager(null, {
-      rightButton: true,
       legacyBlockScroll: false,
       touchAction: props.touchAction
     });
@@ -180,8 +184,6 @@ export default class InteractiveMap extends PureComponent {
     this._getFeatures = this._getFeatures.bind(this);
     this._onInteractiveStateChange = this._onInteractiveStateChange.bind(this);
     this._getPos = this._getPos.bind(this);
-    this._onMouseMove = this._onMouseMove.bind(this);
-    this._onMouseClick = this._onMouseClick.bind(this);
     this._eventCanvasLoaded = this._eventCanvasLoaded.bind(this);
     this._staticMapLoaded = this._staticMapLoaded.bind(this);
   }
@@ -198,8 +200,11 @@ export default class InteractiveMap extends PureComponent {
     const eventManager = this._eventManager;
 
     // Register additional event handlers for click and hover
-    eventManager.on('mousemove', this._onMouseMove);
-    eventManager.on('click', this._onMouseClick);
+    eventManager.on({
+      mousemove: this._onMouseMove.bind(this),
+      click: this._onMouseClick.bind(this),
+      contextmenu: this._onContextMenu.bind(this)
+    });
 
     this._mapControls.setOptions(Object.assign({}, this.props, {
       onStateChange: this._onInteractiveStateChange,
@@ -300,6 +305,12 @@ export default class InteractiveMap extends PureComponent {
     }
   }
 
+  _onContextMenu(event) {
+    if (this.props.onContextMenu) {
+      this.props.onContextMenu(event);
+    }
+  }
+
   _eventCanvasLoaded(ref) {
     // This will be called with `null` after unmount, releasing event manager resource
     this._eventManager.setElement(ref);