cut out StorageList component

browser/components/StorageList.js

@@ -0,0 +1,23 @@
+/**
+* @fileoverview Micro component for showing StorageList
+*/
+import React, { PropTypes } from 'react'
+import styles from './StorgaeList.styl'
+import CSSModules from 'browser/lib/CSSModules'
+
+/**
+* @param {Array} storgaeList
+*/
+
+const StorageList = ({storageList}) => (
+  <div styleName='storageList'>
+    {storageList.length > 0 ? storageList : (
+      <div styleName='storgaeList-empty'>No storage mount.</div>
+    )}
+  </div>
+)
+
+StorageList.propTypes = {
+  storgaeList: PropTypes.array.isRequired
+}
+export default CSSModules(StorageList, styles)

browser/components/StorgaeList.styl

@@ -0,0 +1,20 @@
+.storageList
+  absolute left right
+  bottom 37px
+  top 160px
+  overflow-y auto
+
+.storageList-empty
+  padding 0 10px
+  margin-top 15px
+  line-height 24px
+  color $ui-inactive-text-color
+
+body[data-theme="dark"]
+  .storageList-empty
+    color $ui-dark-inactive-text-color
+
+.root-folded
+  .storageList-empty
+    white-space nowrap
+    transform rotate(90deg)

browser/main/SideNav/SideNav.styl

@@ -31,18 +31,6 @@
   margin-left 5px
   overflow ellipsis
 
-.storageList
-  absolute left right
-  bottom 37px
-  top 160px
-  overflow-y auto
-
-.storageList-empty
-  padding 0 10px
-  margin-top 15px
-  line-height 24px
-  color $ui-inactive-text-color
-
 .tagList
   absolute left right
   bottom 37px
@@ -64,9 +52,6 @@
 .root--folded
   @extend .root
   width 44px
-  .storageList-empty
-    white-space nowrap
-    transform rotate(90deg)
   .top-menu
     width 44px - 1
     text-align center
@@ -132,9 +117,6 @@ body[data-theme="dark"]
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
 
-  .storageList-empty
-    color $ui-dark-inactive-text-color
-
   .navToggle
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)

browser/main/SideNav/index.js

@@ -7,6 +7,7 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import StorageItem from './StorageItem'
 import TagListItem from 'browser/components/TagListItem'
 import SideNavFilter from 'browser/components/SideNavFilter'
+import StorageList from 'browser/components/StorageList'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -67,11 +68,7 @@ class SideNav extends React.Component {
             handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
           />
 
-          <div styleName='storageList'>
+          <StorageList storageList={storageList} />
-            {storageList.length > 0 ? storageList : (
-              <div styleName='storageList-empty'>No storage mount.</div>
-            )}
-          </div>
           <button styleName='navToggle'
             onClick={(e) => this.handleToggleButtonClick(e)}
           >