Merge pull request #6 from fritz-c/fix-canDrag

Fix canDrag

Author: fritz-c

demo/app.js

@@ -29,7 +29,10 @@ class App extends Component {
         {
           title: 'tmp',
           isDirectory: true,
-          children: [{ title: '12214124-log' }],
+          children: [
+            { title: '12214124-log' },
+            { title: 'drag-disabled-file', dragDisabled: true },
+          ],
         },
         {
           title: 'build',
@@ -174,6 +177,7 @@ class App extends Component {
                 searchFocusIndex:
                   matches.length > 0 ? searchFocusIndex % matches.length : 0,
               })}
+            canDrag={({ node }) => !node.dragDisabled}
             canDrop={({ nextParent }) => !nextParent || nextParent.isDirectory}
             generateNodeProps={rowInfo => ({
               icons: rowInfo.node.isDirectory

node-content-renderer.js

@@ -90,7 +90,7 @@ class FileThemeNodeContentRenderer extends Component {
       }
     });
 
-    return connectDragSource(
+    const nodeContent = (
       <div style={{ height: '100%' }} {...otherProps}>
         {toggleChildrenVisibility &&
           node.children &&
@@ -113,7 +113,12 @@ class FileThemeNodeContentRenderer extends Component {
             />
           )}
 
-        <div className={styles.rowWrapper}>
+        <div
+          className={
+            styles.rowWrapper +
+            (!canDrag ? ` ${styles.rowWrapperDragDisabled}` : '')
+          }
+        >
           {/* Set the row preview to be used during drag and drop */}
           {connectDragPreview(
             <div style={{ display: 'flex' }}>
@@ -177,9 +182,12 @@ class FileThemeNodeContentRenderer extends Component {
             </div>
           )}
         </div>
-      </div>,
-      { dropEffect: 'copy' }
+      </div>
     );
+
+    return canDrag
+      ? connectDragSource(nodeContent, { dropEffect: 'copy' })
+      : nodeContent;
   }
 }
 

node-content-renderer.scss

@@ -12,6 +12,10 @@
   }
 }
 
+.rowWrapperDragDisabled {
+  cursor: default;
+}
+
 .row {
   height: 100%;
   white-space: nowrap;

package-lock.json

@@ -69,7 +69,7 @@
     "enzyme-adapter-react-16": "^1.0.1",
     "eslint": "^4.10.0",
     "eslint-config-airbnb": "^16.0.0",
-    "eslint-config-prettier": "^2.6.0",
+    "eslint-config-prettier": "^2.7.0",
     "eslint-loader": "^1.9.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",