Merge pull request #639 from orangemug/fix/only-scroll-layer-list-if-item-not-in-view

Only scroll to selected item in <LayerList/> if not already in view.

src/components/AppLayout.jsx

@@ -26,9 +26,7 @@ class AppLayout extends React.Component {
     return <div className="maputnik-layout">
       {this.props.toolbar}
       <div className="maputnik-layout-list">
-        <ScrollContainer>
+        {this.props.layerList}
-          {this.props.layerList}
-        </ScrollContainer>
       </div>
       <div className="maputnik-layout-drawer">
         <ScrollContainer>

src/components/layers/LayerList.jsx

@@ -45,6 +45,7 @@ class LayerListContainer extends React.Component {
   constructor(props) {
     super(props);
     this.selectedItemRef = React.createRef();
+    this.scrollContainerRef = React.createRef();
     this.state = {
       collapsedGroups: {},
       areAllGroupsExpanded: false,
@@ -169,7 +170,19 @@ class LayerListContainer extends React.Component {
     if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
       const selectedItemNode = this.selectedItemRef.current;
       if (selectedItemNode && selectedItemNode.node) {
-        selectedItemNode.node.scrollIntoView();
+        const target = selectedItemNode.node;
+        const options = {
+          root: this.scrollContainerRef.current,
+          threshold: 1.0
+        }
+        const observer = new IntersectionObserver(entries => {
+          observer.unobserve(target);
+          if (entries.length > 0 && entries[0].intersectionRatio < 1) {
+            target.scrollIntoView();
+          }
+        }, options);
+
+        observer.observe(target);
       }
     }
   }
@@ -238,7 +251,7 @@ class LayerListContainer extends React.Component {
       })
     })
 
-    return <div className="maputnik-layer-list">
+    return <div className="maputnik-layer-list" ref={this.scrollContainerRef}>
       <AddModal
           layers={this.props.layers}
           sources={this.props.sources}

src/styles/_layer.scss

@@ -1,5 +1,8 @@
 // LAYER LIST
 .maputnik-layer-list {
+  height: 100%;
+  overflow: auto;
+
   &-header {
     padding: $margin-2 $margin-2 $margin-3;