Folderの位置を変えることができる

lib/components/modal/Preference/FolderRow.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'
 import linkState from 'boost/linkState'
 import FolderMark from 'boost/components/FolderMark'
 import store from 'boost/store'
-import { updateFolder, destroyFolder } from 'boost/actions'
+import { updateFolder, destroyFolder, replaceFolder } from 'boost/actions'
 
 const IDLE = 'IDLE'
 const EDIT = 'EDIT'
@@ -17,6 +17,20 @@ export default class FolderRow extends React.Component {
     }
   }
 
+  handleUpClick (e) {
+    let { index } = this.props
+    if (index > 0) {
+      store.dispatch(replaceFolder(index, index - 1))
+    }
+  }
+
+  handleDownClick (e) {
+    let { index, count } = this.props
+    if (index < count - 1) {
+      store.dispatch(replaceFolder(index, index + 1))
+    }
+  }
+
   handleCancelButtonClick (e) {
     this.setState({
       mode: IDLE
@@ -141,6 +155,10 @@ export default class FolderRow extends React.Component {
       default:
         return (
           <div className='FolderRow'>
+            <div className='sortBtns'>
+              <button onClick={e => this.handleUpClick(e)}><i className='fa fa-sort-up fa-fw'/></button>
+              <button onClick={e => this.handleDownClick(e)}><i className='fa fa-sort-down fa-fw'/></button>
+            </div>
             <div className='folderColor'><FolderMark color={folder.color}/></div>
             <div className='folderName'>{folder.name}</div>
             <div className='folderControl'>
@@ -155,6 +173,8 @@ export default class FolderRow extends React.Component {
 
 FolderRow.propTypes = {
   folder: PropTypes.shape(),
+  index: PropTypes.number,
+  count: PropTypes.number,
   setAlert: PropTypes.func
 }
 

lib/components/modal/Preference/FolderSettingTab.js

@@ -40,10 +40,16 @@ export default class FolderSettingTab extends React.Component {
 
   render () {
     let { folders } = this.props
-    let folderElements = folders.map(folder => {
+    let folderElements = folders.map((folder, index) => {
       return (
-        <FolderRow key={'folder-' + folder.key} folder={folder} setAlert={(alert, cb) => this.setAlert(alert, cb)}/>
-        )
+        <FolderRow
+          key={'folder-' + folder.key}
+          folder={folder}
+          index={index}
+          count={folders.length}
+          setAlert={(alert, cb) => this.setAlert(alert, cb)}
+        />
+      )
     })
 
     let alert = this.state.alert
@@ -59,7 +65,6 @@ export default class FolderSettingTab extends React.Component {
           <div className='sectionTitle'>Manage folder</div>
           <div className='folderTable'>
             <div className='folderHeader'>
-              <div className='folderColor'></div>
               <div className='folderName'>Folder</div>
               <div className='folderControl'>Edit/Delete</div>
             </div>