From bf38f682e8b5addcb385af98a70445dc1033fc50 Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Thu, 30 May 2019 10:27:22 -0700 Subject: [PATCH] Pass callbacks via MapContext (#799) --- docs/components/geolocate-control.md | 32 +++++++++------------------ docs/components/navigation-control.md | 17 +++++++++----- examples/controls/src/app.js | 2 +- examples/locate-user/src/app.js | 1 - src/components/geolocate-control.js | 16 ++++++++------ src/components/interactive-map.js | 5 +++++ src/components/map-context.js | 2 ++ src/components/navigation-control.js | 12 ++++++---- 8 files changed, 47 insertions(+), 40 deletions(-) diff --git a/docs/components/geolocate-control.md b/docs/components/geolocate-control.md index 90fed5b8..babda3f1 100644 --- a/docs/components/geolocate-control.md +++ b/docs/components/geolocate-control.md @@ -7,31 +7,20 @@ import React, { Component } from "react"; import ReactMapGL, {GeolocateControl} from "react-map-gl"; class Map extends Component { - constructor(props) { - super(props); - this.state = { - viewport: { - width: 800, - height: 600, - longitude: -122.45, - latitude: 37.78, - zoom: 14 - } - } - } - - _updateViewport = (viewport) => { - this.setState({viewport}); + state = { + viewport: {longitude: -122.45, latitude: 37.78, zoom: 14} } render() { const {viewport} = this.state; return ( - + this.setState({viewport})}> ); @@ -41,13 +30,12 @@ class Map extends Component { ## Properties -##### `onViewportChange` {Function} - -Callback when the viewport needs to be updated. See [InteractiveMap](/docs/components/interactive-map.md). - - Accepts all the options of [Mapbox GeolocatControl](https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol). +##### `onViewportChange` {Function, optional} + +Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing [InteractiveMap](/docs/components/interactive-map.md)'s `onViewportChange`. + ##### `positionOptions` {Object} - default: `{enableHighAccuracy:false, timeout:6000}` A Geolocation API [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) object. diff --git a/docs/components/navigation-control.md b/docs/components/navigation-control.md index eacfa490..f2c4cf86 100644 --- a/docs/components/navigation-control.md +++ b/docs/components/navigation-control.md @@ -8,12 +8,19 @@ import React, {Component} from 'react'; import ReactMapGL, {NavigationControl} from 'react-map-gl'; class Map extends Component { + state = { + viewport: {longitude: -122.45, latitude: 37.78, zoom: 12} + }; + render() { - const {viewport, updateViewport} = this.props; + const {viewport} = this.state; return ( - + this.setState({viewport})}>
- +
); @@ -23,8 +30,8 @@ class Map extends Component { ## Properties -##### `onViewportChange` {Function} -Callback when the viewport needs to be updated. See [InteractiveMap](/docs/components/interactive-map.md). +##### `onViewportChange` {Function, optional} +Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing [InteractiveMap](/docs/components/interactive-map.md)'s `onViewportChange`. ##### `showCompass` {Boolean} - default: `true` Show or hide the compass button diff --git a/examples/controls/src/app.js b/examples/controls/src/app.js index 0dd88e15..f7759275 100644 --- a/examples/controls/src/app.js +++ b/examples/controls/src/app.js @@ -91,7 +91,7 @@ export default class App extends Component {
- +
diff --git a/examples/locate-user/src/app.js b/examples/locate-user/src/app.js index f3d85d79..9588bc37 100644 --- a/examples/locate-user/src/app.js +++ b/examples/locate-user/src/app.js @@ -38,7 +38,6 @@ export default class App extends Component { mapboxApiAccessToken={MAPBOX_TOKEN}> diff --git a/src/components/geolocate-control.js b/src/components/geolocate-control.js index 5923c7d7..f2a00663 100644 --- a/src/components/geolocate-control.js +++ b/src/components/geolocate-control.js @@ -19,6 +19,8 @@ const LINEAR_TRANSITION_PROPS = Object.assign( } ); +const noop = () => {}; + const propTypes = Object.assign({}, BaseControl.propTypes, { // Custom className className: PropTypes.string, @@ -45,11 +47,7 @@ const defaultProps = Object.assign({}, BaseControl.defaultProps, { positionOptions: null, fitBoundsOptions: null, trackUserLocation: false, - showUserLocation: true, - - // viewport handlers - onViewStateChange: () => {}, - onViewportChange: () => {} + showUserLocation: true }); export default class GeolocateControl extends BaseControl { @@ -168,11 +166,15 @@ export default class GeolocateControl extends BaseControl { LINEAR_TRANSITION_PROPS ); + const onViewportChange = this.props.onViewportChange || this._context.onViewportChange || noop; + const onViewStateChange = + this.props.onViewStateChange || this._context.onViewStateChange || noop; + // Call new style callback - this.props.onViewStateChange({viewState}); + onViewStateChange({viewState}); // Call old style callback - this.props.onViewportChange(viewState); + onViewportChange(viewState); }; _renderButton = (type, label, callback, children) => { diff --git a/src/components/interactive-map.js b/src/components/interactive-map.js index 754ecc9f..37d6aa49 100644 --- a/src/components/interactive-map.js +++ b/src/components/interactive-map.js @@ -285,6 +285,11 @@ export default class InteractiveMap extends PureComponent, radius : number}) { diff --git a/src/components/map-context.js b/src/components/map-context.js index 7cd562ec..ee2e0a07 100644 --- a/src/components/map-context.js +++ b/src/components/map-context.js @@ -11,6 +11,8 @@ export default createContext({ mapContainer: null, /* Interactive-only context */ + onViewportChange: null, + onViewStateChange: null, // EventManager instance eventManager: null, diff --git a/src/components/navigation-control.js b/src/components/navigation-control.js index 032bdaec..42c3f624 100644 --- a/src/components/navigation-control.js +++ b/src/components/navigation-control.js @@ -7,6 +7,8 @@ import {LINEAR_TRANSITION_PROPS} from '../utils/map-controller'; import deprecateWarn from '../utils/deprecate-warn'; +const noop = () => {}; + const propTypes = Object.assign({}, BaseControl.propTypes, { // Custom className className: PropTypes.string, @@ -22,8 +24,6 @@ const propTypes = Object.assign({}, BaseControl.propTypes, { const defaultProps = Object.assign({}, BaseControl.defaultProps, { className: '', - onViewStateChange: () => {}, - onViewportChange: () => {}, showCompass: true, showZoom: true }); @@ -48,11 +48,15 @@ export default class NavigationControl extends BaseControl { const mapState = new MapState(Object.assign({}, viewport, opts)); const viewState = Object.assign({}, mapState.getViewportProps(), LINEAR_TRANSITION_PROPS); + const onViewportChange = this.props.onViewportChange || this._context.onViewportChange || noop; + const onViewStateChange = + this.props.onViewStateChange || this._context.onViewStateChange || noop; + // Call new style callback - this.props.onViewStateChange({viewState}); + onViewStateChange({viewState}); // Call old style callback - this.props.onViewportChange(viewState); + onViewportChange(viewState); } _onZoomIn = () => {