Folders in the side nav are now draggable

BoostIO · Mar 1, 2018 · 5aa7ef5 · 5aa7ef5
1 parent 6bcb639
commit 5aa7ef5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 29 deletions.
diff --git a/browser/components/StorageItem.js b/browser/components/StorageItem.js
@@ -6,6 +6,7 @@ import React from 'react'
 import styles from './StorageItem.styl'
 import CSSModules from 'browser/lib/CSSModules'
 import _ from 'lodash'
+import { SortableHandle } from 'react-sortable-hoc'
 
 /**
  * @param {boolean} isActive
@@ -23,32 +24,35 @@ import _ from 'lodash'
 const StorageItem = ({
   isActive, handleButtonClick, handleContextMenu, folderName,
   folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
-}) => (
-  <button styleName={isActive
+}) => {
+  const FolderDragger = SortableHandle(({ className }) => <i className={className} />)
+  return (
+    <button styleName={isActive
       ? 'folderList-item--active'
       : 'folderList-item'
     }
-    onClick={handleButtonClick}
-    onContextMenu={handleContextMenu}
-    onDrop={handleDrop}
-    onDragEnter={handleDragEnter}
-    onDragLeave={handleDragLeave}
-  >
-    <span styleName={isFolded
-      ? 'folderList-item-name--folded' : 'folderList-item-name'
-    }>
-      <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <i className='fa fa-folder-open-o' /> : <i className='fa fa-folder-o' />}</text>{isFolded ? _.truncate(folderName, {length: 1, omission: ''}) : folderName}
-    </span>
-    {(!isFolded && _.isNumber(noteCount)) &&
-      <span styleName='folderList-item-noteCount'>{noteCount}</span>
-    }
-    {isFolded &&
-      <span styleName='folderList-item-tooltip'>
-        {folderName}
+      onClick={handleButtonClick}
+      onContextMenu={handleContextMenu}
+      onDrop={handleDrop}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+    >
+      <span styleName={isFolded
+        ? 'folderList-item-name--folded' : 'folderList-item-name'
+      }>
+        <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <FolderDragger className='fa fa-folder-open-o' /> : <FolderDragger className='fa fa-folder-o' />}</text>{isFolded ? _.truncate(folderName, {length: 1, omission: ''}) : folderName}
       </span>
-    }
-  </button>
-)
+      {(!isFolded && _.isNumber(noteCount)) &&
+        <span styleName='folderList-item-noteCount'>{noteCount}</span>
+      }
+      {isFolded &&
+        <span styleName='folderList-item-tooltip'>
+          {folderName}
+        </span>
+      }
+    </button>
+  )
+}
 
 StorageItem.propTypes = {
   isActive: PropTypes.bool.isRequired,

diff --git a/browser/main/SideNav/StorageItem.js b/browser/main/SideNav/StorageItem.js
@@ -9,6 +9,7 @@ import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
 import dataApi from 'browser/main/lib/dataApi'
 import StorageItemChild from 'browser/components/StorageItem'
 import _ from 'lodash'
+import { SortableElement } from 'react-sortable-hoc'
 
 const { remote } = require('electron')
 const { Menu, dialog } = remote
@@ -236,7 +237,8 @@ class StorageItem extends React.Component {
   render () {
     const { storage, location, isFolded, data, dispatch } = this.props
     const { folderNoteMap, trashedSet } = data
-    const folderList = storage.folders.map((folder) => {
+    const SortableStorageItemChild = SortableElement(StorageItemChild)
+    const folderList = storage.folders.map((folder, index) => {
       const isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
       const noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
@@ -250,8 +252,9 @@ class StorageItem extends React.Component {
         noteCount = noteSet.size - trashedNoteCount
       }
       return (
-        <StorageItemChild
+        <SortableStorageItemChild
           key={folder.key}
+          index={index}
           isActive={isActive}
           handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
           handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
@@ -273,9 +276,9 @@ class StorageItem extends React.Component {
         key={storage.key}
       >
         <div styleName={isActive
-            ? 'header--active'
-            : 'header'
-          }
+          ? 'header--active'
+          : 'header'
+        }
           onContextMenu={(e) => this.handleHeaderContextMenu(e)}
         >
           <button styleName='header-toggleButton'
@@ -284,7 +287,7 @@ class StorageItem extends React.Component {
             <img src={this.state.isOpen
               ? '../resources/icon/icon-down.svg'
               : '../resources/icon/icon-right.svg'
-              }
+            }
             />
           </button>
 

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
@@ -17,6 +17,7 @@ import EventEmitter from 'browser/main/lib/eventEmitter'
 import PreferenceButton from './PreferenceButton'
 import ListButton from './ListButton'
 import TagButton from './TagButton'
+import {SortableContainer} from 'react-sortable-hoc'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -68,6 +69,17 @@ class SideNav extends React.Component {
     router.push('/alltags')
   }
 
+  onSortEnd (storage) {
+    return ({oldIndex, newIndex}) => {
+      const { dispatch } = this.props
+      dataApi
+        .reorderFolder(storage.key, oldIndex, newIndex)
+        .then((data) => {
+          dispatch({ type: 'REORDER_FOLDER', storage: data.storage })
+        })
+    }
+  }
+
   SideNavComponent (isFolded, storageList) {
     const { location, data } = this.props
 
@@ -180,13 +192,16 @@ class SideNav extends React.Component {
     const isFolded = config.isSideNavFolded
 
     const storageList = data.storageMap.map((storage, key) => {
-      return <StorageItem
+      const SortableStorageItem = SortableContainer(StorageItem)
+      return <SortableStorageItem
         key={storage.key}
         storage={storage}
         data={data}
         location={location}
         isFolded={isFolded}
         dispatch={dispatch}
+        onSortEnd={this.onSortEnd.bind(this)(storage)}
+        useDragHandle
       />
     })
     const style = {}