refactor: replace component with common component

browser/main/SideNav/StorageItem.js

@@ -6,6 +6,7 @@ import modal from 'browser/main/lib/modal'
 import CreateFolderModal from 'browser/main/modals/CreateFolderModal'
 import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
 import dataApi from 'browser/main/lib/dataApi'
+import StorageItemChild from 'browser/components/StorageItem'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -134,34 +135,24 @@ class StorageItem extends React.Component {
     let { storage, location, isFolded, data } = this.props
     let { folderNoteMap } = data
     let folderList = storage.folders.map((folder) => {
-      let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key))
+      let isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
       let noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
       let noteCount = noteSet != null
         ? noteSet.size
         : 0
-      return <button styleName={isActive
-          ? 'folderList-item--active'
-          : 'folderList-item'
-        }
-        key={folder.key}
-        onClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
-        onContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
-      >
-        <span styleName='folderList-item-name'
-          style={{borderColor: folder.color}}
-        >
-          {isFolded ? folder.name.substring(0, 1) : folder.name}
-        </span>
-        {!isFolded &&
-          <span styleName='folderList-item-noteCount'>{noteCount}</span>
-        }
-        {isFolded &&
-          <span styleName='folderList-item-tooltip'>
-            {folder.name}
-          </span>
-        }
-      </button>
+      return (
+        <StorageItemChild
+          key={folder.key}
+          isActive={isActive}
+          handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
+          handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
+          folderName={folder.name}
+          folderColor={folder.color}
+          isFolded={isFolded}
+          noteCount={noteCount}
+        />
+      )
     })
 
     let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))

browser/main/SideNav/StorageItem.styl

@@ -80,63 +80,6 @@
   &:active
     color $ui-active-color
 
-.folderList-item
-  display flex
-  width 100%
-  height 26px
-  background-color transparent
-  color $ui-inactive-text-color
-  padding 0
-  margin-bottom 5px
-  text-align left
-  border none
-  overflow ellipsis
-  font-size 14px
-  &:first-child
-    margin-top 0
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:active
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-
-.folderList-item--active
-  @extend .folderList-item
-  color $ui-button--active-color
-  background-color $ui-button--active-backgroundColor
-  &:hover
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-
-.folderList-item-name
-  display block
-  flex 1
-  padding 0 30px
-  height 26px
-  line-height 26px
-  border-width 0 0 0 3px
-  border-style solid
-  border-color transparent
-
-.folderList-item-noteCount
-  float right
-  line-height 26px
-  padding-right 5px
-  font-size 12px
-
-.folderList-item-tooltip
-  tooltip()
-  position fixed
-  padding 0 10px
-  left 44px
-  z-index 10
-  pointer-events none
-  opacity 0
-  border-top-right-radius 2px
-  border-bottom-right-radius 2px
-  height 26px
-  line-height 26px
-
 .root--folded
   @extend .root
   .header
@@ -163,11 +106,7 @@
   .header-info--folded-tooltip-path
     font-size 10px
     margin 0 5px
-  .folderList-item:hover, .folderList-item--active:hover
-    .folderList-item-tooltip
-      opacity 1
-  .folderList-item-name
-    padding-left 14px
+
 body[data-theme="dark"]
   .header-toggleButton
   .header-addFolderButton