used react-sortable-hoc on folderList and folderItem

browser/main/modals/PreferencesModal/FolderItem.js

@@ -5,6 +5,7 @@ import styles from './FolderItem.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { SketchPicker } from 'react-color'
+import { SortableElement } from 'react-sortable-hoc'
 
 class FolderItem extends React.Component {
   constructor (props) {
@@ -273,4 +274,6 @@ FolderItem.propTypes = {
   })
 }
 
-export default CSSModules(FolderItem, styles)
+const StyledFolderItem = CSSModules(FolderItem, styles)
+
+export default SortableElement(StyledFolderItem)

browser/main/modals/PreferencesModal/FolderList.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './FolderList.styl'
 import FolderItem from './FolderItem'
+import { SortableContainer } from 'react-sortable-hoc'
 
 class FolderList extends React.Component {
   constructor (props) {
@@ -11,10 +12,11 @@ class FolderList extends React.Component {
   render () {
     let { storage, hostBoundingBox } = this.props
 
-    let folderList = storage.folders.map((folder) => {
+    let folderList = storage.folders.map((folder, index) => {
       return <FolderItem key={folder.key}
         folder={folder}
         storage={storage}
+        index = {index}
         hostBoundingBox={hostBoundingBox}
       />
     })
@@ -43,10 +45,28 @@ FolderList.propTypes = {
     key: PropTypes.string
   }),
   folder: PropTypes.shape({
-    key: PropTypes.string,
+    key: PropTypes.number,
     color: PropTypes.string,
     name: PropTypes.string
   })
 }
 
-export default CSSModules(FolderList, styles)
+const StyledFolderList = CSSModules(FolderList, styles)
+const SortableFolderList = SortableContainer(StyledFolderList)
+
+class SortableFolderListComponent extends React.Component {
+  constructor (props) {
+    super(props)
+    this.onSortEnd = ({oldIndex, newIndex}) => {
+      console.log("end")
+    }
+  }
+
+  render() {
+    return (
+      <SortableFolderList onSortEnd={this.onSortEnd} {...this.props} />
+    )
+  }
+}
+
+export default SortableFolderListComponent

package.json

@@ -77,6 +77,7 @@
     "react-codemirror": "^0.3.0",
     "react-dom": "^15.0.2",
     "react-redux": "^4.4.5",
+    "react-sortable-hoc": "^0.6.7",
     "redux": "^3.5.2",
     "sander": "^0.5.1",
     "superagent": "^1.2.0",

yarn.lock

@@ -1059,6 +1059,13 @@ babel-register@^6.11.6, babel-register@^6.24.1:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
+babel-runtime@^6.11.6:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.3.19:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
@@ -3951,7 +3958,7 @@ lodash@^3.5.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.11.1, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.11.1, lodash@^4.12.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -5339,6 +5346,15 @@ react-router@^2.4.0:
     loose-envify "^1.2.0"
     warning "^3.0.0"
 
+react-sortable-hoc@^0.6.7:
+  version "0.6.7"
+  resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.6.7.tgz#e30d247bc36dd5a605430c331ac9cb50a5fa72a6"
+  dependencies:
+    babel-runtime "^6.11.6"
+    invariant "^2.2.1"
+    lodash "^4.12.0"
+    prop-types "^15.5.7"
+
 react-transform-catch-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz#1b4d4a76e97271896fc16fe3086c793ec88a9eeb"
@@ -5499,6 +5515,10 @@ regenerator-runtime@^0.10.0:
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
 
+regenerator-runtime@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+
 regenerator-transform@0.9.11:
   version "0.9.11"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.11.tgz#3a7d067520cb7b7176769eb5ff868691befe1283"