From 50cd0b794ba6d7f3a2a7f1eca17876cd1c614732 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Wed, 5 Apr 2017 10:08:09 +0900
Subject: [PATCH] change color with hover during dragging

---
 browser/components/StorageItem.js   |  8 +++++++-
 browser/main/SideNav/StorageItem.js | 14 ++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/browser/components/StorageItem.js b/browser/components/StorageItem.js
index 6b6be754..ab2616fb 100644
--- a/browser/components/StorageItem.js
+++ b/browser/components/StorageItem.js
@@ -15,11 +15,13 @@ import { isNumber } from 'lodash'
  * @param {boolean} isFolded
  * @param {number} noteCount
  * @param {Function} handleDrop
+ * @param {Function} handleDragEnter
+ * @param {Function} handleDragOut
  * @return {React.Component}
  */
 const StorageItem = ({
   isActive, handleButtonClick, handleContextMenu, folderName,
-  folderColor, isFolded, noteCount, handleDrop
+  folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
 }) => (
   <button styleName={isActive
       ? 'folderList-item--active'
@@ -28,6 +30,8 @@ const StorageItem = ({
     onClick={handleButtonClick}
     onContextMenu={handleContextMenu}
     onDrop={handleDrop}
+    onDragEnter={handleDragEnter}
+    onDragLeave={handleDragLeave}
   >
     <span styleName={isFolded
       ? 'folderList-item-name--folded' : 'folderList-item-name'
@@ -54,6 +58,8 @@ StorageItem.propTypes = {
   folderName: PropTypes.string.isRequired,
   folderColor: PropTypes.string,
   isFolded: PropTypes.bool.isRequired,
+  handleDragEnter: PropTypes.func.isRequired,
+  handleDragLeave: PropTypes.func.isRequired,
   noteCount: PropTypes.number
 }
 
diff --git a/browser/main/SideNav/StorageItem.js b/browser/main/SideNav/StorageItem.js
index fb4d2b24..46bb556d 100644
--- a/browser/main/SideNav/StorageItem.js
+++ b/browser/main/SideNav/StorageItem.js
@@ -132,7 +132,19 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleDragEnter (e) {
+    e.dataTransfer.setData("defaultColor", e.target.style.backgroundColor)
+    e.target.style.backgroundColor = "rgba(129, 130, 131, 0.08)"
+  }
+
+  handleDragLeave (e) {
+    e.target.style.opacity = "1"
+    e.target.style.backgroundColor = e.dataTransfer.getData("defaultColor")
+  }
+
   handleDrop (e, storage, folder, dispatch, location) {
+    e.target.style.opacity = "1"
+    e.target.style.backgroundColor = e.dataTransfer.getData("defaultColor")
     const noteData = JSON.parse(e.dataTransfer.getData("note"))
     if (folder.key !== noteData.folder) {
       dataApi
@@ -197,6 +209,8 @@ class StorageItem extends React.Component {
           isFolded={isFolded}
           noteCount={noteCount}
           handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)}
+          handleDragEnter={this.handleDragEnter}
+          handleDragLeave={this.handleDragLeave}
         />
       )
     })