From 4a8520c36de35e3dae0b80915d73de09f6ef90a0 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Sat, 17 Dec 2016 20:19:01 +0100
Subject: [PATCH] Scroll container component

---
 src/layers/editor.jsx   | 10 +++++++---
 src/layers/list.jsx     | 18 ++++++------------
 src/scrollcontainer.jsx | 19 +++++++++++++++++++
 3 files changed, 32 insertions(+), 15 deletions(-)
 create mode 100644 src/scrollcontainer.jsx

diff --git a/src/layers/editor.jsx b/src/layers/editor.jsx
index b8a05112..36c78bcd 100644
--- a/src/layers/editor.jsx
+++ b/src/layers/editor.jsx
@@ -17,6 +17,8 @@ import MdVisibilityOff from 'react-icons/lib/md/visibility-off'
 import MdDelete from 'react-icons/lib/md/delete'
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
+import ScrollContainer from '../scrollcontainer.jsx'
+
 class UnsupportedLayer extends React.Component {
   render() {
     return <div></div>
@@ -141,9 +143,11 @@ export class LayerEditor extends React.Component {
           <MdDelete />
         </NavItem>
       </Toolbar>
-      <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
-      {this.layerFromType(this.props.layer.get('type'))}
-      </div>
+      <ScrollContainer>
+        <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
+        {this.layerFromType(this.props.layer.get('type'))}
+        </div>
+      </ScrollContainer>
     </div>
   }
 }
diff --git a/src/layers/list.jsx b/src/layers/list.jsx
index 12b6663a..605e905b 100644
--- a/src/layers/list.jsx
+++ b/src/layers/list.jsx
@@ -8,9 +8,9 @@ import Space from 'rebass/dist/Space'
 
 import { LayerEditor } from './editor.jsx'
 import LayerListItem from './listitem.jsx'
-import scrollbars from '../scrollbars.scss'
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import theme from '../theme.js'
+import ScrollContainer from '../scrollcontainer.jsx'
 
 import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
 
@@ -53,17 +53,11 @@ class LayerListContainer extends React.Component {
         onLayerSelected={this.props.onLayerSelected}
       />
     })
-    return <ul className={scrollbars.darkScrollbar} style={{
-        overflowY: "scroll",
-        bottom:0,
-        left:0,
-        right:0,
-        top:1,
-        position: "absolute",
-        padding: theme.scale[2],
-      }}>
-      {layerPanels}
-    </ul>
+    return <ScrollContainer>
+      <ul style={{ padding: theme.scale[2] }}>
+        {layerPanels}
+      </ul>
+    </ScrollContainer>
   }
 }
 
diff --git a/src/scrollcontainer.jsx b/src/scrollcontainer.jsx
new file mode 100644
index 00000000..8c06cc8d
--- /dev/null
+++ b/src/scrollcontainer.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import theme from './theme.js'
+import scrollbars from './scrollbars.scss'
+
+const ScrollContainer = (props) => {
+  return <div className={scrollbars.darkScrollbar} style={{
+    overflowY: "scroll",
+    bottom:0,
+    left:0,
+    right:0,
+    top:1,
+    position: "absolute",
+    padding: theme.scale[2],
+  }}>
+    {props.children}
+  </div>
+}
+
+export default ScrollContainer