Updated mapbox-gl and react-sortable-hoc usage

This commit is contained in:
orangemug 2018-10-08 09:31:28 +01:00
parent d17d6b43c0
commit 012e4b670e
6 changed files with 73 additions and 69 deletions

101
package-lock.json generated
View file

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

View file

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

View file

@ -35,7 +35,19 @@ import Debug from '../libs/debug'
import queryUtil from '../libs/query-util' import queryUtil from '../libs/query-util'
import MapboxGl from 'mapbox-gl' 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) { function updateRootSpec(spec, fieldName, newValues) {

View file

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

View file

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

View file

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