From b17d817696ac360d4fb234be2911620cc8147877 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 29 Apr 2021 13:13:25 +0300
Subject: [PATCH] Initial drag-n-drop implementation

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/hotbar/hotbar-menu.tsx         | 52 ++++++++++++++-----
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/hotbar/hotbar-menu.tsx b/src/renderer/components/hotbar/hotbar-menu.tsx
index b53161039e..a7af60a6e8 100644
--- a/src/renderer/components/hotbar/hotbar-menu.tsx
+++ b/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,24 +36,45 @@ export class HotbarMenu extends React.Component<Props> {
     return item ? catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid) : null;
   }
 
-  renderGrid() {
-    if (!this.hotbar.items.length) return;
+  onDragEnd() {
+    console.log("drag end")
+  }
 
+  renderGrid() {
     return this.hotbar.items.map((item, index) => {
       const entity = this.getEntity(item);
 
       return (
-        <HotbarCell key={index} index={index}>
-          {entity && (
-            <HotbarIcon
-              key={index}
+        <Droppable droppableId={`droppable-${index}`} key={index} isCombineEnabled>
+          {(provided, snapshot) => (
+            <HotbarCell
               index={index}
-              entity={entity}
-              isActive={this.isActive(entity)}
-              onClick={() => entity.onRun(catalogEntityRunContext)}
-            />
+              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}
+                        entity={entity}
+                        isActive={this.isActive(entity)}
+                        onClick={() => entity.onRun(catalogEntityRunContext)}
+                      />
+                    </div>
+                  )}
+                </Draggable>
+              )}
+            </HotbarCell>
           )}
-        </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">
-          {this.renderGrid()}
+          <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) {