remove deprecated react lifecycle methods (#863)

visgl · Aug 13, 2019 · a4e3620 · a4e3620
1 parent 0b2cecb
commit a4e3620
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 182 deletions.
diff --git a/examples/deckgl-overlay/src/app.js b/examples/deckgl-overlay/src/app.js
@@ -3,6 +3,8 @@ import {render} from 'react-dom';
 import DeckGL, {ArcLayer} from 'deck.gl';
 import MapGL from 'react-map-gl';
 
+const TOKEN = ''; // Set your mapbox token here
+
 export default class App extends Component {
   constructor(props) {
     super(props);
@@ -31,7 +33,7 @@ export default class App extends Component {
         height="100%"
         maxPitch={85}
         onViewportChange={this._onViewportChange}
-        mapboxApiAccessToken="<YOUR TOKEN HERE>"
+        mapboxApiAccessToken={TOKEN}
       >
         <DeckGL
           viewState={viewport}

diff --git a/examples/deckgl-overlay/view.js b/examples/deckgl-overlay/view.js
diff --git a/examples/main/example-container.js b/examples/main/example-container.js
@@ -32,7 +32,7 @@ export default class App extends Component {
     };
   }
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     window.onresize = () =>
       this.setState({
         viewport: {

diff --git a/examples/main/views/style-diffing.js b/examples/main/views/style-diffing.js
@@ -80,7 +80,7 @@ export default class StyleDiffingExample extends Component {
     this._onClick = this._onClick.bind(this);
   }
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     const colors = ['red', 'green', 'blue'];
     let i = 0;
     this._intervalId = window.setInterval(

diff --git a/src/components/interactive-map.js b/src/components/interactive-map.js
@@ -245,14 +245,6 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
     this._updateInteractiveContext({mapContainer});
   }
 
-  UNSAFE_componentWillUpdate(nextProps: InteractiveMapProps, nextState: State) {
-    this._setControllerProps(nextProps);
-
-    if (nextState.isDragging !== this.state.isDragging) {
-      this._updateInteractiveContext({isDragging: nextState.isDragging});
-    }
-  }
-
   componentWillUnmount() {
     this._eventManager.destroy();
   }
@@ -286,10 +278,11 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
 
     this._controller.setOptions(props);
 
-    this._updateInteractiveContext({
-      onViewStateChange: props.onViewStateChange,
-      onViewportChange: props.onViewportChange
-    });
+    // Pass callbacks via MapContext
+    // Do not create a new context object because these do not affect render
+    const context = this._interactiveContext;
+    context.onViewportChange = props.onViewportChange;
+    context.onViewStateChange = props.onViewStateChange;
   }
 
   _getFeatures({pos, radius}: {pos: Array<number>, radius: number}) {
@@ -315,6 +308,7 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
   _onInteractionStateChange = (interactionState: InteractionState) => {
     const {isDragging = false} = interactionState;
     if (isDragging !== this.state.isDragging) {
+      this._updateInteractiveContext({isDragging});
       this.setState({isDragging});
     }
 
@@ -495,6 +489,8 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
   };
 
   render() {
+    this._setControllerProps(this.props);
+
     const {width, height, style, getCursor} = this.props;
 
     const eventCanvasStyle = Object.assign({position: 'relative'}, style, {