Scroll container component

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}}>
+      <ScrollContainer>
-      {this.layerFromType(this.props.layer.get('type'))}
+        <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
-      </div>
+        {this.layerFromType(this.props.layer.get('type'))}
+        </div>
+      </ScrollContainer>
     </div>
   }
 }

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={{
+    return <ScrollContainer>
-        overflowY: "scroll",
+      <ul style={{ padding: theme.scale[2] }}>
-        bottom:0,
+        {layerPanels}
-        left:0,
+      </ul>
-        right:0,
+    </ScrollContainer>
-        top:1,
-        position: "absolute",
-        padding: theme.scale[2],
-      }}>
-      {layerPanels}
-    </ul>
   }
 }
 

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