diff --git a/package-lock.json b/package-lock.json index abf32ab..2d5914b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2490,6 +2490,11 @@ "is-string": "^1.0.5" } }, + "array-move": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/array-move/-/array-move-2.2.1.tgz", + "integrity": "sha512-qQpEHBnVT6HAFgEVUwRdHVd8TYJThrZIT5wSXpEUTPwBaYhPLclw12mEpyUvRWVdl1VwPOqnIy6LqTFN3cSeUQ==" + }, "array-union": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", diff --git a/package.json b/package.json index bac612c..65f8df1 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@mapbox/mapbox-gl-rtl-text": "^0.2.3", "@mapbox/mapbox-gl-style-spec": "^13.12.0", "@mdi/react": "^1.3.0", + "array-move": "^2.2.1", "classnames": "^2.2.6", "codemirror": "^5.52.0", "color": "^3.1.2", diff --git a/src/components/App.jsx b/src/components/App.jsx index aabc06d..690c46e 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -4,7 +4,7 @@ import cloneDeep from 'lodash.clonedeep' import clamp from 'lodash.clamp' import get from 'lodash.get' import {unset} from 'lodash' -import {arrayMove} from 'react-sortable-hoc' +import arrayMove from 'array-move' import url from 'url' import MapboxGlMap from './map/MapboxGlMap' @@ -353,7 +353,7 @@ export default class App extends React.Component { parsed: { type: "layer", data: { - index, + index: parseInt(index, 10), key: "id", message, } @@ -371,7 +371,7 @@ export default class App extends React.Component { parsed: { type: "layer", data: { - index, + index: parseInt(index, 10), key, message } diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx index 5375fbb..e1543c7 100644 --- a/src/components/fields/DocLabel.jsx +++ b/src/components/fields/DocLabel.jsx @@ -9,8 +9,8 @@ export default class DocLabel extends React.Component { PropTypes.object, PropTypes.string ]).isRequired, - fieldSpec: PropTypes.object.isRequired, - onToggleDoc: PropTypes.func.isRequired, + fieldSpec: PropTypes.object, + onToggleDoc: PropTypes.func, } constructor (props) { diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx index e11125b..b995157 100644 --- a/src/components/filter/FilterEditor.jsx +++ b/src/components/filter/FilterEditor.jsx @@ -223,7 +223,7 @@ export default class CombiningFilterEditor extends React.Component { const error = errors[`filter[${idx+1}]`]; return ( - <> +
{error && -
{error.message}
+
{error.message}
} - +
); }) diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx index 5c6fa58..bf297e0 100644 --- a/src/components/inputs/StringInput.jsx +++ b/src/components/inputs/StringInput.jsx @@ -33,6 +33,7 @@ class StringInput extends React.Component { value: props.value }; } + return {}; } render() { diff --git a/src/components/layers/LayerIdBlock.jsx b/src/components/layers/LayerIdBlock.jsx index 120378d..74ff31b 100644 --- a/src/components/layers/LayerIdBlock.jsx +++ b/src/components/layers/LayerIdBlock.jsx @@ -10,7 +10,7 @@ class LayerIdBlock extends React.Component { value: PropTypes.string.isRequired, wdKey: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, - error: PropTypes.object.isRequired, + error: PropTypes.object, } render() { diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx index b080a00..e856482 100644 --- a/src/components/layers/LayerList.jsx +++ b/src/components/layers/LayerList.jsx @@ -165,10 +165,12 @@ class LayerListContainer extends React.Component { return propsChanged; } - componentDidUpdate () { - const selectedItemNode = this.selectedItemRef.current; - if (selectedItemNode && selectedItemNode.node) { - selectedItemNode.node.scrollIntoView(); + componentDidUpdate (prevProps) { + if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) { + const selectedItemNode = this.selectedItemRef.current; + if (selectedItemNode && selectedItemNode.node) { + selectedItemNode.node.scrollIntoView(); + } } } @@ -184,7 +186,7 @@ class LayerListContainer extends React.Component { if(layers.length > 1) { const grp =