diff --git a/packages/base-map/__mocks__/ContextMenuDemo.js b/packages/base-map/__mocks__/ContextMenuDemo.js new file mode 100644 index 000000000..fa81628ce --- /dev/null +++ b/packages/base-map/__mocks__/ContextMenuDemo.js @@ -0,0 +1,30 @@ +/* eslint-disable react/prop-types */ +import React, { Component } from "react"; +import BaseMap from ".."; + +export default class ContextMenuDemo extends Component { + constructor() { + super(); + + this.state = { location: null }; + } + + handleContextMenu = e => { + this.setState({ location: [e.latlng.lat, e.latlng.lng] }); + }; + + render() { + const { location } = this.state; + const center = [45.522862, -122.667837]; + + return ( +
+ Context Menu }} + onContextMenu={this.handleContextMenu} + /> +
+ ); + } +} diff --git a/packages/base-map/src/index.js b/packages/base-map/src/index.js index 902aac97e..e8f9ff61f 100644 --- a/packages/base-map/src/index.js +++ b/packages/base-map/src/index.js @@ -118,6 +118,7 @@ class BaseMap extends Component { children, maxZoom, popup, + onContextMenu, onPopupClosed, zoom } = this.props; @@ -146,6 +147,7 @@ class BaseMap extends Component { maxZoom={maxZoom} // onClick={this.onLeftClick} // Note: Map-click is handled via single-click plugin, set up in componentDidMount() + onContextMenu={onContextMenu} onOverlayAdd={this.handleOverlayAdded} onOverlayRemove={this.handleOverlayRemoved} onViewportChanged={this.handleViewportChanged} @@ -253,6 +255,11 @@ BaseMap.propTypes = { * See https://leafletjs.com/reference-1.6.0.html#map-click for details. */ onClick: PropTypes.func, + /** + * Triggered when the user right-clicks on the map or, on a mobile device, presses the map for a second ("long-press"). + * See https://leafletjs.com/reference-1.6.0.html#map-contextmenu for details. + */ + onContextMenu: PropTypes.func, /** * Triggered when the user makes an overlay visible using the map's layers control. * See https://leafletjs.com/reference-1.6.0.html#map-overlayadd for details. @@ -303,6 +310,7 @@ BaseMap.defaultProps = { ], maxZoom: 20, onClick: null, + onContextMenu: null, onOverlayAdded: null, onOverlayRemoved: null, onPopupClosed: null, diff --git a/packages/base-map/src/index.story.js b/packages/base-map/src/index.story.js index 74954a691..76e55aa0a 100644 --- a/packages/base-map/src/index.story.js +++ b/packages/base-map/src/index.story.js @@ -6,6 +6,7 @@ import { withInfo } from "@storybook/addon-info"; import BaseMap from "."; import SelectVehicles from "../__mocks__/SelectVehicles"; import AllVehiclesOverlay from "../__mocks__/AllVehicles"; +import ContextMenuDemo from "../__mocks__/ContextMenuDemo"; import "../assets/map.css"; @@ -64,6 +65,7 @@ const samplePopup = ( ); const onClick = action("onClick"); +const onContextMenu = action("onContextMenu"); const onPopupClosed = action("onPopupClosed"); const onOverlayAdded = action("onOverlayAdded"); const onOverlayRemoved = action("onOverlayRemoved"); @@ -77,6 +79,7 @@ export const clickAndViewportchangedEvents = () => ( ); @@ -152,3 +155,5 @@ export const customLocationPopupContent = () => ( onPopupClosed={onPopupClosed} /> ); + +export const onContextMenuPopup = () => ;