Initial drag-n-drop implementation

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -1,7 +1,7 @@
 import "./hotbar-menu.scss";
 import "./hotbar.commands";
 
-import React, { ReactNode, useState } from "react";
+import React, { HTMLAttributes, ReactNode, useState } from "react";
 import { observer } from "mobx-react";
 import { HotbarIcon } from "./hotbar-icon";
 import { cssNames, IClassName } from "../../utils";
@@ -36,15 +36,31 @@ export class HotbarMenu extends React.Component<Props> {
     return item ? catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid) : null;
   }
 
-  renderGrid() {
+  onDragEnd() {
-    if (!this.hotbar.items.length) return;
+    console.log("drag end")
+  }
 
+  renderGrid() {
     return this.hotbar.items.map((item, index) => {
       const entity = this.getEntity(item);
 
       return (
-        <HotbarCell key={index} index={index}>
+        <Droppable droppableId={`droppable-${index}`} key={index} isCombineEnabled>
+          {(provided, snapshot) => (
+            <HotbarCell
+              index={index}
+              ref={provided.innerRef}
+              style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
+              {...provided.droppableProps}
+            >
               {entity && (
+                <Draggable draggableId={`draggable-${index}`} index={0}>
+                  {(provided, snapshot) => (
+                    <div
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                    >
                       <HotbarIcon
                         key={index}
                         index={index}
@@ -52,8 +68,13 @@ export class HotbarMenu extends React.Component<Props> {
                         isActive={this.isActive(entity)}
                         onClick={() => entity.onRun(catalogEntityRunContext)}
                       />
+                    </div>
+                  )}
+                </Draggable>
               )}
             </HotbarCell>
+          )}
+        </Droppable>
       );
     });
   }
@@ -74,7 +95,9 @@ export class HotbarMenu extends React.Component<Props> {
     return (
       <div className={cssNames("HotbarMenu flex column", className)}>
         <div className="HotbarItems flex column gaps">
+          <DragDropContext onDragEnd={this.onDragEnd}>
             {this.renderGrid()}
+          </DragDropContext>
           {this.hotbar.items.length != defaultHotbarCells && this.renderAddCellButton()}
         </div>
         <HotbarSelector hotbar={hotbar}/>
@@ -83,9 +106,10 @@ export class HotbarMenu extends React.Component<Props> {
   }
 }
 
-interface HotbarCellProps {
+interface HotbarCellProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   index: number;
+  ref?: any;
 }
 
 function HotbarCell(props: HotbarCellProps) {