Pass callbacks via MapContext (#799)

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 (
-      <ReactMapGL {...viewport} onViewportChange={updateViewport}>
+      <ReactMapGL {...viewport}
+        width="100vw"
+        height="100vh"
+        onViewportChange={viewport => this.setState({viewport})}>
         <GeolocateControl 
           positionOptions={{enableHighAccuracy: true}}
           trackUserLocation={true}
-          onViewportChange={this._updateViewport}
         />
       </ReactMapGL>
     );
@@ -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.

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 (
-      <ReactMapGL {...viewport} onViewportChange={updateViewport}>
+      <ReactMapGL {...viewport}
+        width="100vw"
+        height="100vh"
+        onViewportChange={viewport => this.setState({viewport})}>
         <div style={{position: 'absolute', right: 0}}>
-          <NavigationControl onViewportChange={updateViewport} />
+          <NavigationControl />
         </div>
       </ReactMapGL>
     );
@@ -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

examples/controls/src/app.js

@@ -91,7 +91,7 @@ export default class App extends Component {
           <FullscreenControl />
         </div>
         <div className="nav" style={navStyle}>
-          <NavigationControl onViewportChange={this._updateViewport} />
+          <NavigationControl />
         </div>
 
         <ControlPanel containerComponent={this.props.containerComponent} />

examples/locate-user/src/app.js

@@ -38,7 +38,6 @@ export default class App extends Component {
         mapboxApiAccessToken={MAPBOX_TOKEN}>
         <GeolocateControl
           style={geolocateStyle}
-          onViewportChange={this._onViewportChange}
           positionOptions={{enableHighAccuracy: true}}
           trackUserLocation={true}
         />

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) => {

src/components/interactive-map.js

@@ -285,6 +285,11 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
     });
 
     this._controller.setOptions(props);
+
+    this._updateInteractiveContext({
+      onViewStateChange: props.onViewStateChange,
+      onViewportChange: props.onViewportChange
+    });
   }
 
   _getFeatures({pos, radius} : {pos : Array<number>, radius : number}) {

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,

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 = () => {