Updated mapbox-gl and react-sortable-hoc usage

package-lock.json

@@ -1283,6 +1283,11 @@
         "wgs84": "0.0.0"
       }
     },
+    "@mapbox/geojson-types": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
+      "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
+    },
     "@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.1.tgz",
@@ -1324,11 +1329,6 @@
       "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
       "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
     },
-    "@mapbox/shelf-pack": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/shelf-pack/-/shelf-pack-3.2.0.tgz",
-      "integrity": "sha512-dyQxe6ukILV6qaEvxoKCIwhblgRjYp1ZGlClo4xvfbmxzFO5LYu7Tnrg2AZrRgN7VsSragsGcNjzUe9kCdKHYQ=="
-    },
     "@mapbox/tiny-sdf": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.1.0.tgz",
@@ -2011,6 +2011,7 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha1-vNZ5HqWuCXJeF+WtmIE0zUCz2RE=",
+      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -4879,6 +4880,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
       "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dev": true,
       "requires": {
         "is-extendable": "^0.1.0"
       }
@@ -5632,14 +5634,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5659,8 +5659,7 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -5808,7 +5807,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6376,17 +6374,6 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
-    "gray-matter": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-3.1.1.tgz",
-      "integrity": "sha512-nZ1qjLmayEv0/wt3sHig7I0s3/sJO0dkAaKYQ5YAOApUtYEOonXSFdWvL1khvnZMTvov4UufkqlFsilPnejEXA==",
-      "requires": {
-        "extend-shallow": "^2.0.1",
-        "js-yaml": "^3.10.0",
-        "kind-of": "^5.0.2",
-        "strip-bom-string": "^1.0.0"
-      }
-    },
     "grid-index": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.0.0.tgz",
@@ -7602,7 +7589,8 @@
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+      "dev": true
     },
     "is-extglob": {
       "version": "1.0.0",
@@ -8157,6 +8145,7 @@
       "version": "3.11.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.11.0.tgz",
       "integrity": "sha512-saJstZWv7oNeOyBh3+Dx1qWzhW0+e6/8eDzo7p5rDFqxntSztloLtuKu+Ejhtq82jsilwOIZYsCz+lIjthg1Hw==",
+      "dev": true,
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -8165,7 +8154,8 @@
         "esprima": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
-          "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw=="
+          "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==",
+          "dev": true
         }
       }
     },
@@ -8281,7 +8271,8 @@
     "kind-of": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-      "integrity": "sha1-cpyR4thXt6QZofmqZWhcTDP1hF0="
+      "integrity": "sha1-cpyR4thXt6QZofmqZWhcTDP1hF0=",
+      "dev": true
     },
     "klaw": {
       "version": "1.3.1",
@@ -8592,36 +8583,41 @@
       }
     },
     "mapbox-gl": {
-      "version": "0.47.0",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-0.47.0.tgz",
-      "integrity": "sha512-y1AlNYMAKaqEtaqni0zOMYj9gTc1gZ0lqLkxXK9iFg5+ZBITc5DL9AcrXhpEXNxUzXKFa7dZkSULyNaqXFQ8yQ==",
+      "version": "0.50.0-beta.1",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-0.50.0-beta.1.tgz",
+      "integrity": "sha512-i13u/PC5rb6UWytU0n/cEXoKo4BJ0/ZAdD/+eM/rlMlL00lmiEIBIARc4NFHkoWEbYxYiE38aBrTgYka9E6c7g==",
       "requires": {
-        "@mapbox/jsonlint-lines-primitives": "^2.0.1",
+        "@mapbox/geojson-types": "^1.0.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
         "@mapbox/mapbox-gl-supported": "^1.4.0",
         "@mapbox/point-geometry": "^0.1.0",
-        "@mapbox/shelf-pack": "^3.1.0",
         "@mapbox/tiny-sdf": "^1.1.0",
         "@mapbox/unitbezier": "^0.0.0",
         "@mapbox/vector-tile": "^1.3.1",
-        "@mapbox/whoots-js": "^3.0.0",
+        "@mapbox/whoots-js": "^3.1.0",
         "brfs": "^1.4.4",
         "csscolorparser": "~1.0.2",
         "earcut": "^2.1.3",
         "geojson-rewind": "^0.3.0",
-        "geojson-vt": "^3.1.4",
+        "geojson-vt": "^3.2.0",
         "gl-matrix": "^2.6.1",
-        "gray-matter": "^3.0.8",
         "grid-index": "^1.0.0",
         "minimist": "0.0.8",
+        "murmurhash-js": "^1.0.0",
         "pbf": "^3.0.5",
+        "potpack": "^1.0.1",
         "quickselect": "^1.0.0",
         "rw": "^1.3.3",
-        "shuffle-seed": "^1.1.6",
-        "sort-object": "^0.3.2",
-        "supercluster": "^4.0.1",
-        "through2": "^2.0.3",
+        "supercluster": "^4.1.1",
         "tinyqueue": "^1.1.0",
         "vt-pbf": "^3.0.1"
+      },
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+          "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
+        }
       }
     },
     "mapbox-gl-inspect": {
@@ -9040,6 +9036,11 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E="
+    },
     "mute-stream": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
@@ -10711,6 +10712,11 @@
       "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
       "dev": true
     },
+    "potpack": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.1.tgz",
+      "integrity": "sha512-15vItUAbViaYrmaB/Pbw7z6qX2xENbFSTA7Ii4tgbPtasxm5v6ryKhKtL91tpWovDJzTiZqdwzhcFBCwiMVdVw=="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -12171,11 +12177,6 @@
         }
       }
     },
-    "seedrandom": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-2.4.4.tgz",
-      "integrity": "sha512-9A+PDmgm+2du77B5i0Ip2cxOqqHjgNxnBgglxLcX78A2D6c2rTo61z4jnVABpF4cKeDMDG+cmXXvdnqse2VqMA=="
-    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -12486,14 +12487,6 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
-    "shuffle-seed": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/shuffle-seed/-/shuffle-seed-1.1.6.tgz",
-      "integrity": "sha1-UzwSaDurO0+j6HUfxOViFGdEJgs=",
-      "requires": {
-        "seedrandom": "^2.4.2"
-      }
-    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -12881,7 +12874,8 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
     },
     "sshpk": {
       "version": "1.13.1",
@@ -13197,11 +13191,6 @@
         "is-utf8": "^0.2.0"
       }
     },
-    "strip-bom-string": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
-      "integrity": "sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI="
-    },
     "strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",

package.json

@@ -33,7 +33,7 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^0.47.0",
+    "mapbox-gl": "^0.50.0-beta.1",
     "mapbox-gl-inspect": "^1.3.1",
     "maputnik-design": "github:maputnik/design",
     "ol": "^5.2.0",

src/components/App.jsx

@@ -35,7 +35,19 @@ import Debug from '../libs/debug'
 import queryUtil from '../libs/query-util'
 
 import MapboxGl from 'mapbox-gl'
-import { normalizeSourceURL } from 'mapbox-gl/src/util/mapbox'
+
+
+// Similar functionality as <https://github.com/mapbox/mapbox-gl-js/blob/7e30aadf5177486c2cfa14fe1790c60e217b5e56/src/util/mapbox.js>
+function normalizeSourceURL (url, apiToken="") {
+  const matches = url.match(/^mapbox:\/\/(.*)/);
+  if (matches) {
+    // mapbox://mapbox.mapbox-streets-v7
+    return `https://api.mapbox.com/v4/${matches[1]}.json?secure&access_token=${apiToken}`
+  }
+  else {
+    return url;
+  }
+}
 
 
 function updateRootSpec(spec, fieldName, newValues) {

src/components/inputs/StringInput.jsx

@@ -18,10 +18,10 @@ class StringInput extends React.Component {
     }
   }
 
-  static getDerivedStateFromProps(props, state) {
-    return {
-      value: props.value || ''
-    };
+  componentDidUpdate(prevProps) {
+    if(this.props.value !== prevProps.value) {
+      this.setState({value: this.props.value})
+    }
   }
 
   render() {

src/components/layers/LayerList.jsx

@@ -6,7 +6,7 @@ import LayerListGroup from './LayerListGroup'
 import LayerListItem from './LayerListItem'
 import AddModal from '../modals/AddModal'
 
-import {SortableContainer, SortableHandle} from 'react-sortable-hoc';
+import {SortableContainer} from 'react-sortable-hoc';
 
 const layerListPropTypes = {
   layers: PropTypes.array.isRequired,
@@ -35,7 +35,6 @@ function findClosestCommonPrefix(layers, idx) {
 }
 
 // List of collapsible layer editors
-@SortableContainer
 class LayerListContainer extends React.Component {
   static propTypes = {...layerListPropTypes}
   static defaultProps = {
@@ -197,11 +196,13 @@ class LayerListContainer extends React.Component {
   }
 }
 
+const LayerListContainerSortable = SortableContainer((props) => <LayerListContainer {...props} />)
+
 export default class LayerList extends React.Component {
   static propTypes = {...layerListPropTypes}
 
   render() {
-    return <LayerListContainer
+    return <LayerListContainerSortable
       {...this.props}
       onSortEnd={this.props.onMoveLayer.bind(this)}
       useDragHandle={true}

src/components/layers/LayerListItem.jsx

@@ -7,7 +7,6 @@ import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icon
 import LayerIcon from '../icons/LayerIcon'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'
 
-@SortableHandle
 class LayerTypeDragHandle extends React.Component {
   static propTypes = LayerIcon.propTypes
 
@@ -24,6 +23,8 @@ class LayerTypeDragHandle extends React.Component {
   }
 }
 
+const Handle = SortableHandle((props) => <LayerTypeDragHandle {...props} />)
+
 class IconAction extends React.Component {
   static propTypes = {
     action: PropTypes.string.isRequired,
@@ -66,7 +67,6 @@ class IconAction extends React.Component {
   }
 }
 
-@SortableElement
 class LayerListItem extends React.Component {
   static propTypes = {
     layerId: PropTypes.string.isRequired,
@@ -111,7 +111,7 @@ class LayerListItem extends React.Component {
         "maputnik-layer-list-item-selected": this.props.isSelected,
         [this.props.className]: true,
       })}>
-        <LayerTypeDragHandle type={this.props.layerType} />
+        <Handle type={this.props.layerType} />
         <span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
         <span style={{flexGrow: 1}} />
         <IconAction
@@ -137,4 +137,6 @@ class LayerListItem extends React.Component {
   }
 }
 
-export default LayerListItem;
+const LayerListItemSortable = SortableElement((props) => <LayerListItem {...props} />);
+
+export default LayerListItemSortable;