From 313b639a5f1f2427be663b05cad10bc228930a56 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 6 Apr 2020 15:30:16 +0100
Subject: [PATCH] Only scroll to selected item in <LayerList/> if not already
 in view.

---
 src/components/AppLayout.jsx        |  4 +---
 src/components/layers/LayerList.jsx | 17 +++++++++++++++--
 src/styles/_layer.scss              |  3 +++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/AppLayout.jsx b/src/components/AppLayout.jsx
index 8ea4cae..99b669e 100644
--- a/src/components/AppLayout.jsx
+++ b/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}
-        </ScrollContainer>
+        {this.props.layerList}
       </div>
       <div className="maputnik-layout-drawer">
         <ScrollContainer>
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index e856482..f7bf9ef 100644
--- a/src/components/layers/LayerList.jsx
+++ b/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}
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index 4e059f0..14308f6 100644
--- a/src/styles/_layer.scss
+++ b/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;