replace deprecated dependency react-beautiful-dnd

Author: CollinBeczak

package-lock.json

@@ -32,6 +32,9 @@
   "dependencies": {
     "@apollo/client": "^3.5.4",
     "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@mapbox/geo-viewport": "^0.4.0",
     "@nivo/bar": "^0.98.0",
     "@nivo/core": "^0.98.0",
@@ -78,7 +81,6 @@
     "prop-types": "^15.6.0",
     "query-string": "^6.13.1",
     "react": "^17.0.2",
-    "react-beautiful-dnd": "^13.0.0",
     "react-burger-menu": "^3.1.0",
     "react-calendar-heatmap": "^1.6.3",
     "react-copy-to-clipboard": "^5.0.1",

package.json

@@ -1,64 +1,131 @@
 import _map from "lodash/map";
 import PropTypes from "prop-types";
 import { Component } from "react";
-import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { FormattedMessage } from "react-intl";
 import External from "../External/External";
 import Modal from "../Modal/Modal";
 import messages from "./Messages";
 
+// SortableItem component for draggable columns
+const SortableItem = ({ column, columnKey, onRemove }) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: columnKey,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <div className="mr-flex">
+        <div className="mr-flex-grow mr-text-base mr-text-white mr-my-2">{column.message}</div>
+
+        {!column.permanent && (
+          <div className="mr-text-sm mr-text-green-lighter mr-my-2">
+            <button className="mr-text-current" onClick={() => onRemove(columnKey)}>
+              <FormattedMessage {...messages.removeLabel} />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
 /**
  * ConfigureColumnsModal renders a modal for configuring table columns
  *
  * @author [Kelli Rotstan](https://github.com/krotstan)
  */
 export default class ConfigureColumnsModal extends Component {
-  onDragEnd = (result) => {
-    // dropped outside the list or on itself
-    if (!result.destination || result.source.index === result.destination.index) {
+  handleDragEnd = (event) => {
+    const { active, over } = event;
+
+    if (!over || active.id === over.id) {
       return;
     }
 
-    this.props.reorderAddedColumn(result.source.index, result.destination.index);
+    // Find indexes for the source and destination
+    let sourceIndex = -1;
+    let destinationIndex = -1;
+
+    Object.keys(this.props.addedColumns).forEach((key, index) => {
+      if (key === active.id) sourceIndex = index;
+      if (key === over.id) destinationIndex = index;
+    });
+
+    if (sourceIndex !== -1 && destinationIndex !== -1) {
+      this.props.reorderAddedColumn(sourceIndex, destinationIndex);
+    }
   };
 
   close = () => {
     this.props.saveColumnSettings();
     this.props.onClose();
   };
 
-  buildDraggableColumnList() {
-    let index = -1;
-    return _map(this.props.addedColumns, (column, key) => {
-      index += 1;
-      return (
-        <Draggable key={`added-${key}`} draggableId={key} index={index}>
-          {(provided) => (
-            <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-              <div className="mr-flex">
-                <div className="mr-flex-grow mr-text-base mr-text-white mr-my-2">
-                  {column.message}
-                </div>
-
-                {!column.permanent && (
-                  <div className="mr-text-sm mr-text-green-lighter mr-my-2">
-                    <button
-                      className="mr-text-current"
-                      onClick={() => this.props.removeColumn(key)}
-                    >
-                      <FormattedMessage {...messages.removeLabel} />
-                    </button>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-        </Draggable>
+  buildSortableColumnList() {
+    const columnItems = [];
+    const columnIds = [];
+
+    Object.entries(this.props.addedColumns).forEach(([key, column]) => {
+      columnItems.push(
+        <SortableItem
+          key={`added-${key}`}
+          column={column}
+          columnKey={key}
+          onRemove={this.props.removeColumn}
+        />,
       );
+      columnIds.push(key);
     });
+
+    return { columnItems, columnIds };
   }
 
   render() {
+    // Wrap DndContext in a function component since hooks can't be used in class components
+    const DraggableColumnList = () => {
+      const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+          coordinateGetter: sortableKeyboardCoordinates,
+        }),
+      );
+
+      const { columnItems, columnIds } = this.buildSortableColumnList();
+
+      return (
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={this.handleDragEnd}
+        >
+          <SortableContext items={columnIds} strategy={verticalListSortingStrategy}>
+            {columnItems}
+          </SortableContext>
+        </DndContext>
+      );
+    };
+
     const availableColumns = _map(this.props.availableColumns, (column, key) => (
       <li key={`available-${key}`} className="mr-flex mr-my-4">
         <div className="mr-flex-grow mr-text-base mr-text-white">{column.message}</div>
@@ -103,16 +170,7 @@ export default class ConfigureColumnsModal extends Component {
                     </div>
                   </header>
                   <div className="mr-card-widget__content">
-                    <DragDropContext onDragEnd={this.onDragEnd}>
-                      <Droppable droppableId="added-column-droppable">
-                        {(provided) => (
-                          <div {...provided.droppableProps} ref={provided.innerRef}>
-                            {this.buildDraggableColumnList(provided)}
-                            {provided.placeholder}
-                          </div>
-                        )}
-                      </Droppable>
-                    </DragDropContext>
+                    <DraggableColumnList />
                   </div>
                 </section>
               </div>
@@ -135,4 +193,5 @@ ConfigureColumnsModal.propTypes = {
   addedColumns: PropTypes.object.isRequired,
   availableColumns: PropTypes.object.isRequired,
   reorderAddedColumn: PropTypes.func.isRequired,
+  removeColumn: PropTypes.func.isRequired,
 };