feat: tab navigation drag n drop

package.json

@@ -63,10 +63,12 @@
     "i18next-browser-languagedetector": "^6.1.2",
     "i18next-electron-fs-backend": "^2.0.0",
     "i18next-fs-backend": "^1.1.4",
+    "immutability-helper": "^3.1.1",
     "polished": "^4.1.3",
     "react": "^17.0.2",
+    "react-dnd": "^14.0.4",
+    "react-dnd-html5-backend": "^14.0.2",
     "react-dom": "^17.0.2",
-    "react-draggable": "^4.4.4",
     "react-i18next": "^11.14.2",
     "react-icons": "^4.3.1",
     "react-spring": "^9.3.2",

src/app/components/Tabs/TabHeader/index.tsx

@@ -1,40 +1,119 @@
-import React from 'react';
-import Draggable from 'react-draggable';
+import React, { useRef } from 'react';
 import { Tab } from '../Tab';
 import { FiX, FiBook, FiUser, FiSettings } from 'react-icons/fi';
 import { FaHandshake } from 'react-icons/fa';
 import { Container } from './styles';
 import Translator from '../../I18n/Translator';
+import { DropTargetMonitor, useDrag, useDrop, XYCoord } from 'react-dnd';
 
 interface TabHeaderProps {
   tab: Tab;
   title: string;
   onClick: (...args: any[]) => any;
   close: (tab: Tab) => void;
+  moveTab: (dragIndex: number, hoverIndex: number) => void
   isActive: boolean;
+
+  index: number;
+  id: string;
+}
+
+interface DragItem {
+  index: number
+  id: string
+  type: string
 }
 
-const TabHeader: React.FC<TabHeaderProps> = ({ title, onClick, close, isActive, tab }) => {
+const TabHeader: React.FC<TabHeaderProps> = ({ moveTab, index, title, id, onClick, close, isActive, tab }) => {
+  const ref = useRef<HTMLLIElement>(null)
+  const [{ handlerId }, drop] = useDrop({
+    accept: 'TabHeader',
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+      }
+    },
+    hover(item: DragItem, monitor: DropTargetMonitor) {
+      if (!ref.current) {
+        return
+      }
+      const dragIndex = item.index
+      const hoverIndex = index
+
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return
+      }
+
+      // Determine rectangle on screen
+      const hoverBoundingRect = ref.current?.getBoundingClientRect()
+
+      // Get vertical middle
+      const hoverMiddleY =
+        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset()
+
+      // Get pixels to the top
+      const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top
+
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return
+      }
+
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return
+      }
+
+      // Time to actually perform the action
+      moveTab(dragIndex, hoverIndex)
+
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      item.index = hoverIndex
+    },
+  })
+
+  const [{ isDragging }, drag] = useDrag({
+    type: 'TabHeader',
+    item: () => {
+      return { id, index }
+    },
+    collect: (monitor: any) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  })
+
+  const opacity = isDragging ? 0 : 1
+  drag(drop(ref))
+
   return (
-    <Draggable axis="x" bounds='parent' grid={[10, 10]}>
-      <Container isActive={isActive} onClick={onClick}>
-        <div>
-          {tab.type === 'title' && (<FiBook size={14} color="#4ad0ff" />)}
-          {tab.type === 'person' && (<FiUser size={14} color="#ff78f7" />)}
-          {tab.type === 'borrow' && (<FaHandshake size={14} color="#50fa7b" />)}
-          {tab.type === 'settings' && (<FiSettings size={14} color="#e3bb06" />)}
-        </div>
-        <span><Translator path={title} /></span>
-        <div>
-          <span>
-            <FiX
-              size={15}
-              onClick={(e) => { e.stopPropagation(); close(tab); }}
-            />
-          </span>
-        </div>
-      </Container>
-    </Draggable>
+    <Container ref={ref} style={{ opacity }} isActive={isActive} onClick={onClick} data-handler-id={handlerId}>
+      <div>
+        {tab.type === 'title' && (<FiBook size={14} color="#4ad0ff" />)}
+        {tab.type === 'person' && (<FiUser size={14} color="#ff78f7" />)}
+        {tab.type === 'borrow' && (<FaHandshake size={14} color="#50fa7b" />)}
+        {tab.type === 'settings' && (<FiSettings size={14} color="#e3bb06" />)}
+      </div>
+      <span><Translator path={title} /></span>
+      <div>
+        <span>
+          <FiX
+            size={15}
+            onClick={(e) => { e.stopPropagation(); close(tab); }}
+          />
+        </span>
+      </div>
+    </Container>
   );
 };
 

src/app/components/Tabs/TabHeader/styles.ts

@@ -22,7 +22,6 @@ export const Container = styled.li<ContainerProps>`
 
   > span {
     text-overflow: clip;
-    padding-right: 28px;
     overflow: hidden;
     white-space: nowrap;
   }
@@ -37,7 +36,6 @@ export const Container = styled.li<ContainerProps>`
 
   div:last-child {
     display: flex;
-    position: absolute;
     right: 0;
     align-items: center;
     justify-content: center;
@@ -48,8 +46,6 @@ export const Container = styled.li<ContainerProps>`
 
     span {
       min-width: 24px;
-
-      position: absolute;
       right: 0;
       display: flex;
       align-items: center;

src/app/components/Tabs/index.tsx

@@ -11,6 +11,9 @@ import Borrow from '../Borrow';
 import Title from '../Title';
 import Person from '../Person';
 import Settings from '../Settings';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import update from 'immutability-helper'
 
 interface Event {
   event: string;
@@ -133,20 +136,46 @@ const Tabs: React.FC = () => {
     }
   }, [registerEvents]);
 
+  const moveTab = useCallback(
+    (dragIndex: number, hoverIndex: number) => {
+      const dragCard = tabItems[dragIndex]
+      setTabItems(
+        update(tabItems, {
+          $splice: [
+            [dragIndex, 1],
+            [hoverIndex, 0, dragCard],
+          ],
+        }),
+      )
+    },
+    [tabItems],
+  )
+
+  const rendererTabs = (tab: Tab, index: number, isActive: boolean) => {
+    return (
+      <TabHeader
+        isActive={isActive}
+        key={`tab-header-${tab.id}`}
+        title={tab.title}
+        tab={tab}
+        index={index}
+        moveTab={moveTab}
+        onClick={() => handleClick(tab)}
+        close={close}
+        id={tab.id}
+      />
+    )
+  }
+
   return (
     <>
-      <Container>
-        {tabItems && tabItems.map(tab => (
-          <TabHeader
-            isActive={activeTab === tab}
-            key={`tab-header-${tab.id}`}
-            title={tab.title}
-            tab={tab}
-            onClick={() => handleClick(tab)}
-            close={close}
-          />
-        ))}
-      </Container>
+      <DndProvider backend={HTML5Backend}>
+        <Container>
+          {tabItems && tabItems.map((tab, i) => (
+            rendererTabs(tab, i, activeTab === tab)
+          ))}
+        </Container>
+      </DndProvider>
       <TabContents>
         {tabItems.length === 0 && (<Shortcuts />)}
         {tabItems && tabItems.map(tab =>