Merge pull request #634 from orangemug/fix/issue-630

Scroll selected <LayerListItem/> into view

src/components/layers/LayerList.jsx

@@ -42,11 +42,15 @@ class LayerListContainer extends React.Component {
     onLayerSelect: () => {},
   }
 
-  state = {
+  constructor(props) {
-    collapsedGroups: {},
+    super(props);
-    areAllGroupsExpanded: false,
+    this.selectedItemRef = React.createRef();
-    isOpen: {
+    this.state = {
-      add: false,
+      collapsedGroups: {},
+      areAllGroupsExpanded: false,
+      isOpen: {
+        add: false,
+      }
     }
   }
 
@@ -161,6 +165,13 @@ class LayerListContainer extends React.Component {
     return propsChanged;
   }
 
+  componentDidUpdate () {
+    const selectedItemNode = this.selectedItemRef.current;
+    if (selectedItemNode && selectedItemNode.node) {
+      selectedItemNode.node.scrollIntoView();
+    }
+  }
+
   render() {
 
     const listItems = []
@@ -192,6 +203,11 @@ class LayerListContainer extends React.Component {
           );
         });
 
+        const additionalProps = {};
+        if (idx === this.props.selectedLayerIndex) {
+          additionalProps.ref = this.selectedItemRef;
+        }
+
         layerIdCount.set(layer.id,
           layerIdCount.has(layer.id) ? layerIdCount.get(layer.id) + 1 : 0
         );
@@ -213,6 +229,7 @@ class LayerListContainer extends React.Component {
           onLayerDestroy={this.props.onLayerDestroy.bind(this)}
           onLayerCopy={this.props.onLayerCopy.bind(this)}
           onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
+          {...additionalProps}
         />
         listItems.push(listItem)
         idx += 1

src/components/map/MapboxGlMap.jsx

@@ -170,7 +170,7 @@ export default class MapboxGlMap extends React.Component {
         if(this.props.inspectModeEnabled) {
           return renderPopup(<FeaturePropertyPopup features={features} />, tmpNode);
         } else {
-          return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} zoom={this.state.zoom} />, tmpNode);
+          return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
         }
       }
     })
@@ -208,6 +208,11 @@ export default class MapboxGlMap extends React.Component {
     map.on("zoomend", mapViewChange);
   }
 
+  onLayerSelectById = (id) => {
+    const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
+    this.props.onLayerSelect(index);
+  }
+
   render() {
     if(IS_SUPPORTED) {
       return <div