feat(layer): support context menu events (#372) (h/t @chwallen)

src/components/Layer/index.d.ts

@@ -55,6 +55,17 @@ type Props = LayerSpecification & {
    * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
    */
   onLeave?: (event: InteractionEvent) => any;
+
+  /**
+   * Called when the layer is right-clicked.
+   * @callback
+   * @param {Object} event - The mouse event.
+   * @param {[Number, Number]} event.lngLat - The coordinates of the pointer
+   * @param {Array} event.features - The features under the pointer,
+   * using Mapbox's queryRenderedFeatures API:
+   * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
+   */
+  onContextMenu?: (event: InteractionEvent) => any;
 
   /**
    * Radius to detect features around a clicked/hovered point

src/components/Layer/index.js

@@ -14,7 +14,8 @@ const eventListeners = [
   ['onClick', 'click'],
   ['onHover', 'mousemove'],
   ['onEnter', 'mouseenter'],
-  ['onLeave', 'mouseleave']
+  ['onLeave', 'mouseleave'],
+  ['onContextMenu', 'contextmenu']
 ];
 
 type InteractionEvent = { ...MapMouseEvent, features?: GeoJSONFeature[] };
@@ -70,6 +71,17 @@ type Props = {|
    */
   onLeave?: (event: InteractionEvent) => any,
 
+  /**
+   * Called when the layer is right-clicked.
+   * @callback
+   * @param {Object} event - The mouse event.
+   * @param {[Number, Number]} event.lngLat - The coordinates of the pointer
+   * @param {Array} event.features - The features under the pointer,
+   * using Mapbox's queryRenderedFeatures API:
+   * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
+   */
+  onContextMenu?: (event: InteractionEvent) => any,
+
   /**
    * Radius to detect features around a clicked/hovered point
    */
@@ -95,6 +107,8 @@ class Layer extends PureComponent<Props> {
 
   _onLeave: (event: MapMouseEvent) => void;
 
+  _onContextMenu: (event: MapMouseEvent) => void;
+
   static displayName = 'Layer';
 
   static defaultProps = {
@@ -179,6 +193,7 @@ class Layer extends PureComponent<Props> {
       onHover,
       onEnter,
       onLeave,
+      onContextMenu,
       ...layer
     } = props;
 
@@ -277,6 +292,19 @@ class Layer extends PureComponent<Props> {
     this.props.onLeave({ ...event, features });
   };
 
+  _onContextMenu = (event: MapMouseEvent) => {
+    const position: [number, number] = [event.point.x, event.point.y];
+    const features = queryRenderedFeatures(
+      this._map,
+      this._id,
+      position,
+      this.props.radius
+    );
+
+    // $FlowFixMe
+    this.props.onContextMenu({ ...event, features });
+  }
+
   render() {
     return createElement(MapContext.Consumer, {}, (map) => {
       if (map) {

src/components/Layer/index.test.js

@@ -210,11 +210,12 @@ test('handlers', () => {
         onHover={handler}
         onEnter={handler}
         onLeave={handler}
+        onContextMenu={handler}
       />
     ]
   });
 
-  expect(handler).toHaveBeenCalledTimes(4);
+  expect(handler).toHaveBeenCalledTimes(5);
 
   wrapper.setProps({
     children: [
@@ -223,7 +224,7 @@ test('handlers', () => {
     ]
   });
 
-  expect(handler).toHaveBeenCalledTimes(4);
+  expect(handler).toHaveBeenCalledTimes(5);
 
   // wrapper.setProps({ children: [] });
 });