Updated mapbox-gl and react-sortable-hoc usage

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;