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, 'back-button');

client/src/components/GalleryItem/GalleryItem.js

@@ -603,10 +603,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

@@ -434,11 +434,12 @@ $gallery-item-label-height: 40px;
 }
 
 .gallery-item__drag-layer-preview {
-  transform: scale(0.4) translate(-100%, -160%);
+  transform: scale(0.4);
   border: 1px solid $component-active-border-color;
 
-  .gallery-item__thumbnail {
-    transform: scale(2.5) translate(22px, 16px);
+  .gallery-item__thumbnail,
+  .gallery-item__drag-layer-count {
+    transform: scale(2.5);
   }
 }
 
@@ -462,8 +463,8 @@ $gallery-item-label-height: 40px;
   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,50 @@
-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,
-    ];
+  // Depending on whether the dragging item is a folder, the badge showing how many
+  // items are currently being dragged needs to be in a different spot in the DOM
+  // so it correctly renders in the corner of the drag preview
+  const isFolder = draggingItemProps.item.type === 'folder';
+  let badge = null;
+  if (selectionCount > 1) {
+    badge = <Badge
+      className="gallery-item__drag-layer-count"
+      status="info"
+      message={`${selectionCount}`}
+    />;
+  }
 
-    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
-          }
+  return (
+    <div className="gallery-item__drag-layer">
+      <div className="gallery-item__drag-layer-item">
+        <div className="gallery-item__drag-layer-preview">
+          {shadows}
+          <GalleryItem {...draggingItemProps} isDragging />
+          {isFolder && badge}
         </div>
+        {!isFolder && badge}
       </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),
+  draggingItemProps: PropTypes.object,
 };
 
-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

@@ -29,7 +29,7 @@ Helps apply react-dnd to Files, so that the file can interact with dragging.
 ## Example
 
 ```js
-const draggableComponent = draggable('Item')(Component);
+const draggableComponent = draggable(Component);
 ```
 
 ## Properties
@@ -44,7 +44,7 @@ Helps apply react-dnd to Folders, so that a file could be dragged on it with the
 ## Example
 
 ```js
-const droppableComponent = droppable('Item')(Component);
+const droppableComponent = droppable(Component);
 ```
 
 ## Properties

client/src/components/GalleryItem/draggable.js

@@ -1,75 +1,35 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { DragSource } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useDraggable } from '@dnd-kit/core';
 
-export default function draggable(type) {
-  const spec = {
-    canDrag(props) {
-      return props.canDrag;
-    },
-    beginDrag(props) {
-      const { id } = props.item;
-      if (typeof props.onDrag === 'function') {
-        props.onDrag(true, id);
-      }
-      const selected = props.selectedFiles.concat([]);
-      if (!selected.includes(id)) {
-        selected.push(id);
-      }
-
-      return { selected, props };
-    },
-    endDrag(props) {
-      const { id } = props.item;
-      if (typeof props.onDrag === 'function') {
-        props.onDrag(false, id);
-      }
-    },
-  };
-
-  const collect = (connect, monitor) => ({
-    connectDragPreview: connect.dragPreview(),
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  });
-
-  // eslint-disable-next-line new-cap
-  const dragItem = DragSource(type, spec, collect);
-
-  return (Item) => {
-    class DraggableItem extends Component {
-      componentDidMount() {
-        // Use empty image as a drag preview so browsers don't draw it
-        // and we can draw whatever we want on the custom drag layer instead.
-        this.props.connectDragPreview(getEmptyImage(), {
-          // IE fallback: specify that we'd rather screenshot the node
-          // when it already knows it's being dragged so we can hide it with CSS.
-          captureDraggingState: true,
-        });
-      }
-
-      render() {
-        const { connectDragSource } = this.props;
-        const item = <Item {...this.props} />;
-
-        if (typeof item.type === 'string') {
-          return connectDragSource(item);
-        }
-        return connectDragSource(<div className="gallery-item__draggable">{ item }</div>);
-      }
+export default function draggable(Item, uniqueID = null) {
+  function DraggableItem(props) {
+    let id = uniqueID;
+    if (id === null) {
+      id = props.item.id;
     }
 
-    DraggableItem.propTypes = {
-      connectDragSource: PropTypes.func.isRequired,
-      connectDragPreview: PropTypes.func.isRequired,
-      item: PropTypes.shape({
-        id: PropTypes.number.isRequired,
-      }).isRequired,
-      onDrag: PropTypes.func,
-      selectedFiles: PropTypes.arrayOf(PropTypes.number),
-    };
-
-    return dragItem(DraggableItem);
+    const canDrag = typeof props.canDrag === 'boolean' ? props.canDrag : true;
+    const { attributes, listeners, setNodeRef } = useDraggable({ disabled: !canDrag, id, data: { props } });
+    const item = <Item {...props} />;
+
+    return <div
+      className="gallery-item__draggable"
+      draggable
+      ref={setNodeRef}
+      {...listeners}
+      {...attributes}
+    >{ item }</div>;
+  }
+
+  DraggableItem.propTypes = {
+    item: PropTypes.shape({
+      id: PropTypes.number.isRequired,
+    }).isRequired,
+    onDrag: PropTypes.func,
+    canDrag: PropTypes.bool,
+    selectedFiles: PropTypes.arrayOf(PropTypes.number),
   };
+
+  return DraggableItem;
 }

client/src/components/GalleryItem/droppable.js

@@ -1,55 +1,26 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
+import { useDroppable } from '@dnd-kit/core';
 
-export default function droppable(types) {
-  const spec = {
-    drop(props, monitor) {
-      if (monitor.canDrop()) {
-        const item = monitor.getItem();
-        props.onDropFiles(props.item.id, item.selected);
-      }
-    },
-    canDrop(props, monitor) {
-      const item = monitor.getItem();
-
-      // check that it is not a folder by itself dragged onto itself
-      return !item.selected.includes(props.item.id);
-    },
-  };
-
-  const collect = (connect, monitor) => {
-    const over = monitor.isOver();
-    return {
-      isDropping: over && monitor.canDrop(),
-      connectDropTarget: connect.dropTarget(),
-      isOver: over,
-    };
-  };
-
-  // eslint-disable-next-line new-cap
-  const dropItem = DropTarget(types, spec, collect);
-
-  return (Item) => {
-    class DroppableItem extends Component {
-      render() {
-        const { connectDropTarget } = this.props;
-        const item = <Item {...this.props} />;
-
-        if (typeof item.type === 'string') {
-          return connectDropTarget(item);
-        }
-        return connectDropTarget(<div className="gallery-item__droppable">{ item }</div>);
-      }
+export default function droppable(Item, uniqueID = null) {
+  function DroppableItem(props) {
+    let id = uniqueID;
+    if (id === null) {
+      id = props.item.id;
     }
 
-    DroppableItem.propTypes = {
-      connectDropTarget: PropTypes.func.isRequired,
-      item: PropTypes.shape({
-        id: PropTypes.number.isRequired,
-      }).isRequired,
-    };
+    const { setNodeRef, isOver } = useDroppable({ id });
+    const item = <Item isDropping={isOver} {...props} />;
 
-    return dropItem(DroppableItem);
+    return <div ref={setNodeRef} className="gallery-item__droppable">{ item }</div>;
+  }
+
+  DroppableItem.propTypes = {
+    connectDropTarget: PropTypes.func.isRequired,
+    item: PropTypes.shape({
+      id: PropTypes.number.isRequired,
+    }).isRequired,
   };
+
+  return DroppableItem;
 }

client/src/containers/Gallery/Gallery.js

@@ -952,7 +952,7 @@ class Gallery extends Component {
         ref={gallery => { this.gallery = gallery; }}
       >
         {this.renderTransitionBulkActions()}
-        <GalleryDND className={galleryClasses.join(' ')}>
+        <GalleryDND selectedFiles={this.props.selectedFiles} className={galleryClasses.join(' ')}>
           {this.renderToolbar()}
           <SelectableGroup
             enabled={this.props.view === 'tile' && this.props.type === ACTION_TYPES.ADMIN}