Consolidate InteractiveContext and StaticContext into one (#718)

src/components/base-control.js

@@ -20,8 +20,7 @@
 // THE SOFTWARE.
 import {PureComponent, createElement, createRef} from 'react';
 import PropTypes from 'prop-types';
-import {InteractiveContext} from './interactive-map';
-import {StaticContext} from './static-map';
+import MapContext from './map-context';
 
 import type {MjolnirEvent} from 'mjolnir.js';
 
@@ -132,15 +131,10 @@ export default class BaseControl extends PureComponent<ControlProps> {
 
   render() {
     return (
-      createElement(InteractiveContext.Consumer, null,
-        (interactiveContext) => {
-          // Save event manager
-          return createElement(StaticContext.Consumer, null,
-            (staticContext) => {
-              this._context = Object.assign({}, interactiveContext, staticContext);
-              return this._render();
-            }
-          );
+      createElement(MapContext.Consumer, null,
+        context => {
+          this._context = context;
+          return this._render();
         }
       )
     );

src/components/interactive-map.js

@@ -1,5 +1,5 @@
 // @flow
-import {PureComponent, createElement, createContext, createRef} from 'react';
+import {PureComponent, createElement, createRef} from 'react';
 import PropTypes from 'prop-types';
 
 import StaticMap from './static-map';
@@ -7,6 +7,7 @@ import {MAPBOX_LIMITS} from '../utils/map-state';
 import WebMercatorViewport from 'viewport-mercator-project';
 
 import TransitionManager from '../utils/transition-manager';
+import MapContext from './map-context';
 
 import {EventManager} from 'mjolnir.js';
 import MapController from '../utils/map-controller';
@@ -16,11 +17,6 @@ import type {ViewState} from '../mapbox/mapbox';
 import type {StaticMapProps} from './static-map';
 import type {MjolnirEvent} from 'mjolnir.js';
 
-export const InteractiveContext = createContext({
-  eventManager: null,
-  isDragging: false
-});
-
 const propTypes = Object.assign({}, StaticMap.propTypes, {
   // Additional props on top of StaticMap
 
@@ -442,7 +438,7 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
       cursor: getCursor(this.state)
     });
 
-    return createElement(InteractiveContext.Provider, {value: this._interactiveContext},
+    return createElement(MapContext.Provider, {value: this._interactiveContext},
       createElement('div', {
         key: 'event-canvas',
         ref: this._eventCanvasRef,

src/components/map-context.js

@@ -0,0 +1,19 @@
+import {createContext} from 'react';
+
+export default createContext({
+  /* Map context */
+
+  // Viewport
+  viewport: null,
+  // mapboxgl.Map instance
+  map: null,
+  // DOM element that contains the map
+  mapContainer: null,
+
+  /* Interactive-only context */
+
+  // EventManager instance
+  eventManager: null,
+  // whether the map is being dragged
+  isDragging: false
+});

src/components/static-map.js

@@ -18,7 +18,7 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
-import {PureComponent, createElement, createContext, createRef} from 'react';
+import {PureComponent, createElement, createRef} from 'react';
 import PropTypes from 'prop-types';
 
 import {normalizeStyle} from '../utils/style-utils';
@@ -30,6 +30,7 @@ import Mapbox from '../mapbox/mapbox';
 import mapboxgl from '../utils/mapboxgl';
 import {checkVisibilityConstraints} from '../utils/map-constraints';
 import {MAPBOX_LIMITS} from '../utils/map-state';
+import MapContext from './map-context';
 
 import type {ViewState} from '../mapbox/mapbox';
 import type {Node} from 'react';
@@ -39,11 +40,6 @@ const TOKEN_DOC_URL = 'https://uber.github.io/react-map-gl/#/Documentation/getti
 const NO_TOKEN_WARNING = 'A valid API access token is required to use Mapbox data';
 /* eslint-disable max-len */
 
-export const StaticContext = createContext({
-  viewport: null,
-  map: null
-});
-
 function noop() {}
 
 const UNAUTHORIZED_ERROR_CODE = 401;
@@ -270,13 +266,16 @@ export default class StaticMap extends PureComponent<StaticMapProps, State> {
       map: this._map
     };
 
-    return createElement(StaticContext.Provider, {value: staticContext},
-      createElement('div', {
-        key: 'map-overlays',
-        className: 'overlays',
-        style: CONTAINER_STYLE,
-        children: this.props.children
-      })
+    return createElement(MapContext.Consumer, null, interactiveContext =>
+      createElement(MapContext.Provider,
+        {value: Object.assign(staticContext, interactiveContext)},
+        createElement('div', {
+          key: 'map-overlays',
+          className: 'overlays',
+          style: CONTAINER_STYLE,
+          children: this.props.children
+        })
+      )
     );
   }
 

src/index.js

@@ -44,4 +44,4 @@ export {
 export {default as MapController} from './utils/map-controller';
 
 // Experimental Features (May change in minor version bumps, use at your own risk)
-export {StaticContext as _MapContext} from './components/static-map';
+export {default as _MapContext} from './components/map-context';

test/src/components/marker.spec.js

@@ -5,8 +5,7 @@ import WebMercatorViewport from 'viewport-mercator-project';
 import sinon from 'sinon';
 import test from 'tape-catch';
 
-import {StaticContext} from 'react-map-gl/components/static-map';
-import {InteractiveContext} from 'react-map-gl/components/interactive-map';
+import {_MapContext as MapContext} from 'react-map-gl';
 
 const mockStaticContext = {
   viewport: new WebMercatorViewport({
@@ -17,30 +16,31 @@ const mockStaticContext = {
     zoom: 14
   })
 };
-const mockInteractiveContext = {
+const mockInteractiveContext = Object.assign({}, mockStaticContext, {
   eventManager: {
     on: sinon.spy(),
     off: sinon.spy()
   }
-};
+});
 
 test('Marker#renders children', t => {
   t.ok(Marker, 'Marker is defined');
 
-  const staticUsage = React.createElement(StaticContext.Provider,
-    {value: mockStaticContext},
-    React.createElement(
-      Marker,
-      {
-        latitude: 37,
-        longitude: -122
-      },
-      React.createElement('div', {className: 'test-marker'}, ['hello'])
-    )
+  const marker = React.createElement(
+    Marker,
+    {
+      latitude: 37,
+      longitude: -122
+    },
+    React.createElement('div', {className: 'test-marker'}, ['hello'])
   );
-  const interactiveUsage = React.createElement(InteractiveContext.Provider,
+  const staticUsage = React.createElement(MapContext.Provider,
+    {value: mockStaticContext},
+    marker
+  );
+  const interactiveUsage = React.createElement(MapContext.Provider,
     {value: mockInteractiveContext},
-    [staticUsage]
+    marker
   );
 
   const result = ReactTestRenderer.create(staticUsage);