From 409f81f0d809a84bd9418c2705f63669c0f245f4 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 7 Aug 2018 20:13:45 +0100
Subject: [PATCH] More componentWillUpdate transition fixes.

---
 src/components/fields/_ZoomProperty.jsx | 13 +++++++++----
 src/components/map/MapboxGlMap.jsx      | 10 ++++++----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/fields/_ZoomProperty.jsx b/src/components/fields/_ZoomProperty.jsx
index 2d6baac..6007cae 100644
--- a/src/components/fields/_ZoomProperty.jsx
+++ b/src/components/fields/_ZoomProperty.jsx
@@ -62,18 +62,23 @@ export default class ZoomProperty extends React.Component {
   }
 
   componentDidMount() {
-    this.setState({
-      refs: setStopRefs(this.props, this.state)
-    })
+    const newRefs = setStopRefs(this.props, this.state);
+
+    if(newRefs) {
+      this.setState({
+        refs: newRefs
+      })
+    }
   }
 
-  static getDerivedStateFromProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
     const newRefs = setStopRefs(props, state);
     if(newRefs) {
       return {
         refs: newRefs
       };
     }
+    return null;
   }
 
   // Order the stops altering the refs to reflect their new position.
diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx
index 18f3e95..1858e46 100644
--- a/src/components/map/MapboxGlMap.jsx
+++ b/src/components/map/MapboxGlMap.jsx
@@ -81,21 +81,23 @@ export default class MapboxGlMap extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  updateMapFromProps(props) {
     if(!this.state.map) return
-    const metadata = nextProps.mapStyle.metadata || {}
+    const metadata = props.mapStyle.metadata || {}
     MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox
 
-    if(!nextProps.inspectModeEnabled) {
+    if(!props.inspectModeEnabled) {
       //Mapbox GL now does diffing natively so we don't need to calculate
       //the necessary operations ourselves!
-      this.state.map.setStyle(nextProps.mapStyle, { diff: true})
+      this.state.map.setStyle(props.mapStyle, { diff: true})
     }
   }
 
   componentDidUpdate(prevProps) {
     const map = this.state.map;
 
+    this.updateMapFromProps(this.props);
+
     if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
       this.state.inspect.toggleInspector()
     }