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)
     })
   }
 

src/config/styles.json

@@ -34,23 +34,5 @@
     "title": "Empty Style",
     "url": "https://rawgit.com/maputnik/editor/master/src/config/empty-style.json",
     "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
-  },
-  {
-    "id": "mapbox-satellite",
-    "title": "Mapbox Satellite",
-    "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/satellite-v9.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-satellite.png"
-  },
-  {
-    "id": "mapbox-bright",
-    "title": "Mapbox Bright",
-    "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/bright-v9.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-bright.png"
-  },
-  {
-    "id": "mapbox-basic",
-    "title": "Mapbox Basic",
-    "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/basic-v9.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-basic.png"
   }
 ]

src/config/tilesets.json

@@ -1,9 +1,4 @@
 {
-  "mapbox-streets": {
-    "type": "vector",
-    "url": "mapbox://mapbox.mapbox-streets-v7",
-    "title": "Mapbox Streets"
-  },
   "openmaptiles": {
     "type": "vector",
     "url": "https://free.tilehosting.com/data/v3.json?key={key}",

src/libs/style.js

@@ -102,9 +102,12 @@ function replaceAccessTokens(mapStyle, opts={}) {
   })
 
   if (mapStyle.glyphs && mapStyle.glyphs.match(/\.tilehosting\.com/)) {
-    changedStyle = {
-      ...changedStyle,
-      glyphs: mapStyle.glyphs.replace('{key}', getAccessToken("openmaptiles", mapStyle, opts))
+    const newAccessToken = getAccessToken("openmaptiles", mapStyle, opts);
+    if (newAccessToken) {
+      changedStyle = {
+        ...changedStyle,
+        glyphs: mapStyle.glyphs.replace('{key}', newAccessToken)
+      }
     }
   }