From 012e4b670eb50552a0a90984239b6b3be99bc0c0 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 8 Oct 2018 09:31:28 +0100 Subject: [PATCH] Updated mapbox-gl and react-sortable-hoc usage --- package-lock.json | 101 +++++++++++------------- package.json | 2 +- src/components/App.jsx | 14 +++- src/components/inputs/StringInput.jsx | 8 +- src/components/layers/LayerList.jsx | 7 +- src/components/layers/LayerListItem.jsx | 10 ++- 6 files changed, 73 insertions(+), 69 deletions(-) diff --git a/package-lock.json b/package-lock.json index a8902da..1a3976d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e39a386..33b41b2 100644 --- a/package.json +++ b/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", diff --git a/src/components/App.jsx b/src/components/App.jsx index 0a318e4..df8983c 100644 --- a/src/components/App.jsx +++ b/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 +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) { diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx index b5f6bac..f9d2853 100644 --- a/src/components/inputs/StringInput.jsx +++ b/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() { diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx index dcabe6b..9f62856 100644 --- a/src/components/layers/LayerList.jsx +++ b/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) => ) + export default class LayerList extends React.Component { static propTypes = {...layerListPropTypes} render() { - return ) + 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, })}> - + {this.props.layerId} ); + +export default LayerListItemSortable;