DEP Replace react-dnd with dnd-kit

client/src/components/BackButton/BackButton.js

@@ -54,4 +54,4 @@ BackButton.propTypes = {
 
 export { BackButton as Component };
 
-export default droppable('GalleryItem')(BackButton);
+export default droppable(BackButton);

client/src/components/GalleryItem/GalleryItem.js

@@ -135,6 +135,10 @@ class GalleryItem extends Component {
       thumbnailClassNames.push('gallery-item__thumbnail--no-preview');
     }
 
+    if (this.props.item.type === 'folder') {
+      thumbnailClassNames.push('gallery-item__thumbnail--folder');
+    }
+
     // Check loading status of thumbnail
     switch (this.props.loadState) {
       // Show loading indicator for preloading images
@@ -603,10 +607,9 @@ function mapDispatchToProps(dispatch) {
 }
 
 const ConnectedGalleryItem = connect(mapStateToProps, mapDispatchToProps)(GalleryItem);
-const type = 'GalleryItem';
 
-const File = createSelectable(draggable(type)(ConnectedGalleryItem));
-const Folder = createSelectable(droppable(type)(File));
+const File = createSelectable(draggable(ConnectedGalleryItem));
+const Folder = createSelectable(droppable(File));
 export {
   GalleryItem as Component,
   Folder,

client/src/components/GalleryItem/GalleryItem.scss

@@ -298,23 +298,23 @@ $gallery-item-label-height: 40px;
 }
 
 .gallery-item--archive .gallery-item__thumbnail {
-  background: $white url("../../images/icon_archive.png") center center no-repeat;
+  background: transparent url("../../images/icon_archive.png") center center no-repeat;
 }
 
 .gallery-item--audio .gallery-item__thumbnail {
-  background: $white url("../../images/icon_audio.png") center center no-repeat;
+  background: transparent url("../../images/icon_audio.png") center center no-repeat;
 }
 
 .gallery-item--video .gallery-item__thumbnail {
-  background: $white url("../../images/icon_video.png") center center no-repeat;
+  background: transparent url("../../images/icon_video.png") center center no-repeat;
 }
 
 .gallery-item--document .gallery-item__thumbnail {
-  background: $white url("../../images/icon_document.png") center center no-repeat;
+  background: transparent url("../../images/icon_document.png") center center no-repeat;
 }
 
 .gallery-item--false .gallery-item__thumbnail {
-  background: $white url("../../images/icon_file.png") center center no-repeat;
+  background: transparent url("../../images/icon_file.png") center center no-repeat;
 }
 
 // Individual progress bar
@@ -417,35 +417,20 @@ $gallery-item-label-height: 40px;
 .gallery-item--dragging {
   opacity: 0.2;
 
-  &.gallery-item {
-    cursor: grabbing;
-  }
-
-  .gallery-item__drag-layer-item & {
+  .gallery-item__drag-layer & {
     opacity: 1;
   }
 }
 
 .gallery-item__drag-layer {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 100;
-}
-
-.gallery-item__drag-layer-preview {
-  transform: scale(0.4) translate(-100%, -160%);
-  border: 1px solid $component-active-border-color;
-
-  .gallery-item__thumbnail {
-    transform: scale(2.5) translate(22px, 16px);
-  }
-}
-
-.gallery-item__drag-layer-item {
+  transform: scale(0.4);
+  transform-origin: 0 0;
   display: inline-block;
   position: relative;
   opacity: 1;
+  inset: 0;
+  z-index: 100;
+  cursor: grabbing;
 
   .gallery-item {
     border-width: 2px;
@@ -456,14 +441,29 @@ $gallery-item-label-height: 40px;
   .gallery-item__title {
     display: none;
   }
+
+  .gallery-item__thumbnail--folder,
+  .gallery-item__drag-layer-count {
+    transform: scale(2.5);
+  }
+
+  .gallery-item__thumbnail--folder {
+    transform-origin: top center;
+    background-position: center;
+  }
+}
+
+.gallery-item__drag-layer-preview {
+  pointer-events: none;
+  border: 1px solid $component-active-border-color;
 }
 
 .gallery-item__drag-layer-count {
   display: inline-block;
   position: absolute;
   font-size: 1rem;
-  top: -45%;
-  left: 25%;
+  top: 0;
+  right: 0;
   z-index: 105;
 }
 

client/src/components/GalleryItem/GalleryItemDragLayer.js

@@ -1,76 +1,38 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { DragLayer } from 'react-dnd';
 import Badge from 'components/Badge/Badge';
 import GalleryItem from './GalleryItem';
 
-class GalleryItemDragLayer extends Component {
-  getOffset() {
-    const {
-      offset,
-      dragged,
-    } = this.props;
-    return {
-      transform: offset && `translate(${offset.x + dragged.x}px, ${offset.y + dragged.y}px)`,
-    };
-  }
+function GalleryItemDragLayer(props) {
+  const { draggingItems, draggingItemProps } = props;
+  const selectionCount = draggingItems.length;
+  const shadows = [
+    selectionCount > 1
+      ? <div key="1" className="gallery-item__drag-shadow" />
+      : null,
+    selectionCount > 2
+      ? <div key="2" className="gallery-item__drag-shadow gallery-item__drag-shadow--second" />
+      : null,
+  ];
 
-  render() {
-    if (!this.props.isDragging) {
-      return null;
-    }
-    const { item } = this.props;
-    if (!item.selected) {
-      return null;
-    }
-    const selectionCount = item.selected.length;
-    const shadows = [
-      selectionCount > 1
-        ? <div key="1" className="gallery-item__drag-shadow" />
-        : null,
-      selectionCount > 2
-        ? <div key="2" className="gallery-item__drag-shadow gallery-item__drag-shadow--second" />
-        : null,
-    ];
-
-    return (
-      <div className="gallery-item__drag-layer">
-        <div className="gallery-item__drag-layer-item" style={this.getOffset()}>
-          <div className="gallery-item__drag-layer-preview">
-            {shadows}
-            <GalleryItem {...item.props} isDragging />
-          </div>
-          {selectionCount > 1
-            ? (
-              <Badge
-                className="gallery-item__drag-layer-count"
-                status="info"
-                message={`${selectionCount}`}
-              />
-            )
-            : null
-          }
-        </div>
+  return (
+    <div className="gallery-item__drag-layer">
+      <div className="gallery-item__drag-layer-preview">
+        {shadows}
+        <GalleryItem {...draggingItemProps} isDragging />
+        {selectionCount > 1 && <Badge
+          className="gallery-item__drag-layer-count"
+          status="info"
+          message={`${selectionCount}`}
+        />}
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 GalleryItemDragLayer.propTypes = {
-  item: PropTypes.object,
-  offset: PropTypes.shape({
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-  }),
-  isDragging: PropTypes.bool.isRequired,
+  draggingItems: PropTypes.arrayOf(PropTypes.number).isRequired,
+  draggingItemProps: PropTypes.object.isRequired,
 };
 
-const collect = (monitor) => ({
-  item: monitor.getItem(),
-  offset: monitor.getInitialClientOffset(),
-  dragged: monitor.getDifferenceFromInitialOffset(),
-  isDragging: monitor.isDragging(),
-});
-
-// eslint-disable-next-line new-cap
-export default DragLayer(collect)(GalleryItemDragLayer);
+export default GalleryItemDragLayer;

client/src/components/GalleryItem/README.md

@@ -4,7 +4,8 @@ Displays a file/folder as a thumbnail with relevant actions.
 
 ## Example
 ```js
-<GalleryItem item={{id: 2}} selectable={true} />
+<GalleryItem item={{id: 2, exists: true, type: 'file', category: 'document'}} selectable={true} />
+<GalleryItem item={{id: 2, exists: true, type: 'folder', category: 'folder'}} selectable={true} />
 ```
 
 ## Properties
@@ -24,38 +25,36 @@ Displays a file/folder as a thumbnail with relevant actions.
 
 # draggable HOC
 
-Helps apply react-dnd to Files, so that the file can interact with dragging.
+Helps apply drag-and-drop functionality to Files, so that the file can interact with dragging.
 
 ## Example
 
 ```js
-const draggableComponent = draggable('Item')(Component);
+const draggableComponent = draggable(Component);
 ```
 
 ## Properties
-* `item` (object) (required): File details to display for.
-* `onDrag` (function): Callback for when the item is starting or ending being dragged.
-* `selectedFiles` (array): A list of ids that have been selected.
+
+* `item` (object) (required): File details to display for. Minimally needs a unique `id` property.
+* `canDrag` (bool): Whether this item can be dragged right now. Assumed `true` if missing.
 
 # droppable HOC
 
-Helps apply react-dnd to Folders, so that a file could be dragged on it with the proper interactive response.
+Helps apply drag-and-drop functionality to Folders, so that a file could be dragged on it with the proper interactive response.
 
 ## Example
 
 ```js
-const droppableComponent = droppable('Item')(Component);
+const droppableComponent = droppable(Component);
 ```
 
 ## Properties
 
-* `item` (object) (required): File details to display for.
+* `item` (object) (required): File details to display for. Minimally needs a unique `id` property.
 
 # GalleryItemDragLayer Component
 
-The custom preview item to show instead of the HTML5 default preview.
-
-__NOTE__: This does lose some nice functionality, like the "slingshot back" to place effect when dropping onto nothing droppable.
+The custom preview item to show instead of just dragging the existing file/folder presentation
 
 ## Example
 
@@ -64,6 +63,6 @@ __NOTE__: This does lose some nice functionality, like the "slingshot back" to p
 ```
 
 ## Properties
-* `item` (object): File details to display for.
-* `offset` (object): Co-ordinates for the item's offset.
-* `isDragging` (boolean): Is an item currently being dragged.
+
+* `draggingItemProps` (object) (required): Props for the item being dragged.
+* `draggingItems` (array) (required): Array of IDs of all items being dragged (includes selected items).