Merge remote-tracking branch 'upstream/master' into fix/request-abort-and-oerlapping-modals

src/components/fields/_ZoomProperty.jsx

@@ -13,6 +13,30 @@ import docUid from '../../libs/document-uid'
 import sortNumerically from '../../libs/sort-numerically'
 
 
+/**
+ * We cache a reference for each stop by its index.
+ *
+ * When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus.
+ */
+function setStopRefs(props, state) {
+  // This is initialsed below only if required to improved performance.
+  let newRefs;
+
+  if(props.value && props.value.stops) {
+    props.value.stops.forEach((val, idx) => {
+      if(!state.refs.hasOwnProperty(idx)) {
+        if(!newRefs) {
+          newRefs = {...state};
+        }
+        newRefs[idx] = docUid("stop-");
+      }
+    })
+  }
+
+  return newRefs;
+}
+
+
 export default class ZoomProperty extends React.Component {
   static propTypes = {
     onChange: PropTypes.func,
@@ -34,36 +58,8 @@ export default class ZoomProperty extends React.Component {
   }
 
   componentDidMount() {
-    this.setState({
-      refs: this.setStopRefs(this.props)
-    })
-  }
+    const newRefs = setStopRefs(this.props, this.state);
 
-  /**
-   * We cache a reference for each stop by its index.
-   *
-   * When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus.
-   */
-  setStopRefs(props) {
-    // This is initialsed below only if required to improved performance.
-    let newRefs;
-
-    if(props.value && props.value.stops) {
-      props.value.stops.forEach((val, idx) => {
-        if(!this.state.refs.hasOwnProperty(idx)) {
-          if(!newRefs) {
-            newRefs = {...this.state.refs};
-          }
-          newRefs[idx] = docUid("stop-");
-        }
-      })
-    }
-
-    return newRefs;
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const newRefs = this.setStopRefs(nextProps);
     if(newRefs) {
       this.setState({
         refs: newRefs
@@ -71,6 +67,16 @@ export default class ZoomProperty extends React.Component {
     }
   }
 
+  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.
   orderStopsByZoom(stops) {
     const mappedWithRef = stops

src/components/inputs/NumberInput.jsx

@@ -17,8 +17,10 @@ class NumberInput extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({ value: nextProps.value })
+  static getDerivedStateFromProps(props, state) {
+    return {
+      value: props.value
+    };
   }
 
   changeValue(newValue) {

src/components/inputs/StringInput.jsx

@@ -18,8 +18,10 @@ class StringInput extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({ value: nextProps.value || '' })
+  static getDerivedStateFromProps(props, state) {
+    return {
+      value: props.value || ''
+    };
   }
 
   render() {

src/components/layers/JSONEditor.jsx

@@ -29,10 +29,10 @@ class JSONEditor extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      code: JSON.stringify(nextProps.layer, null, 2)
-    })
+  static getDerivedStateFromProps(props, state) {
+    return {
+      code: JSON.stringify(props.layer, null, 2)
+    };
   }
 
   shouldComponentUpdate(nextProps, nextState) {

src/components/layers/LayerEditor.jsx

@@ -76,18 +76,18 @@ export default class LayerEditor extends React.Component {
     this.state = { editorGroups }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const additionalGroups = { ...this.state.editorGroups }
+  static getDerivedStateFromProps(props, state) {
+    const additionalGroups = { ...state.editorGroups }
 
-    layout[nextProps.layer.type].groups.forEach(group => {
+    layout[props.layer.type].groups.forEach(group => {
       if(!(group.title in additionalGroups)) {
         additionalGroups[group.title] = true
       }
     })
 
-    this.setState({
+    return {
       editorGroups: additionalGroups
-    })
+    };
   }
 
   getChildContext () {

src/components/layers/LayerListItem.jsx

@@ -114,7 +114,7 @@ class LayerListItem extends React.Component {
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
-          action={this.props.visibility === 'visible' ? 'hide' : 'show'}
+          action={this.props.visibility === 'visible' ? 'show' : 'hide'}
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />
     </li>

src/components/map/MapboxGlMap.jsx

@@ -83,17 +83,17 @@ export default class MapboxGlMap extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  updateMapFromProps(props) {
     if(!IS_SUPPORTED) return;
 
     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})
     }
   }
 
@@ -102,6 +102,8 @@ export default class MapboxGlMap extends React.Component {
 
     const map = this.state.map;
 
+    this.updateMapFromProps(this.props);
+
     if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
       this.state.inspect.toggleInspector()
     }
@@ -109,8 +111,10 @@ export default class MapboxGlMap extends React.Component {
       this.state.inspect.render()
     }
 
-    map.showTileBoundaries = this.props.options.showTileBoundaries;
-    map.showCollisionBoxes = this.props.options.showCollisionBoxes;
+    if (map) {
+      map.showTileBoundaries = this.props.options.showTileBoundaries;
+      map.showCollisionBoxes = this.props.options.showCollisionBoxes;
+    }
   }
 
   componentDidMount() {

src/components/map/OpenLayers3Map.jsx

@@ -27,10 +27,10 @@ class OpenLayers3Map extends React.Component {
     const styleFunc = olms.apply(this.map, newMapStyle)
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate() {
     require.ensure(["ol", "ol-mapbox-style"], () => {
       if(!this.map) return
-      this.updateStyle(nextProps.mapStyle)
+      this.updateStyle(this.props.mapStyle)
     })
   }