Moving HotbarSelector to separate component

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

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

@@ -105,43 +105,6 @@
     }
   }
 
-  .HotbarSelector {
-    height: 26px;
-    background-color: var(--layoutBackground);
-    position: relative;
-
-    &:before {
-      content: " ";
-      position: absolute;
-      width: 100%;
-      height: 20px;
-      background: linear-gradient(0deg, var(--clusterMenuBackground), transparent);
-      top: -20px;
-    }
-
-    .Badge {
-      cursor: pointer;
-      background: var(--secondaryBackground);
-      width: 100%;
-      color: var(--settingsColor);
-      padding-top: 3px;
-    }
-
-    .Icon {
-      --size: 16px;
-      padding: 0 4px;
-
-      &:hover {
-        box-shadow: none;
-        background-color: transparent;
-      }
-
-      &.previous {
-        transform: rotateY(180deg);
-      }
-    }
-  }
-
   .AddCellButton {
     width: 40px;
     height: 40px;

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

@@ -9,10 +9,8 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store";
 import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
 import { Icon } from "../icon";
-import { Badge } from "../badge";
+import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
-import { CommandOverlay } from "../command-palette";
+import { HotbarSelector } from "./hotbar-selector";
-import { HotbarSwitchCommand } from "./hotbar-switch-command";
-import { Tooltip, TooltipPosition } from "../tooltip";
 
 interface Props {
   className?: IClassName;
@@ -38,18 +36,6 @@ export class HotbarMenu extends React.Component<Props> {
     return item ? catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid) : null;
   }
 
-  previous() {
-    HotbarStore.getInstance().switchToPrevious();
-  }
-
-  next() {
-    HotbarStore.getInstance().switchToNext();
-  }
-
-  openSelector() {
-    CommandOverlay.open(<HotbarSwitchCommand />);
-  }
-
   renderGrid() {
     if (!this.hotbar.items.length) return;
 
@@ -84,7 +70,6 @@ export class HotbarMenu extends React.Component<Props> {
     const { className } = this.props;
     const hotbarStore = HotbarStore.getInstance();
     const hotbar = hotbarStore.getActive();
-    const activeIndexDisplay = hotbarStore.activeHotbarIndex + 1;
 
     return (
       <div className={cssNames("HotbarMenu flex column", className)}>
@@ -92,19 +77,7 @@ export class HotbarMenu extends React.Component<Props> {
           {this.renderGrid()}
           {this.hotbar.items.length != defaultHotbarCells && this.renderAddCellButton()}
         </div>
-        <div className="HotbarSelector flex align-center">
+        <HotbarSelector hotbar={hotbar}/>
-          <Icon material="play_arrow" className="previous box" onClick={() => this.previous()} />
-          <div className="box grow flex align-center">
-            <Badge id="hotbarIndex" small label={activeIndexDisplay} onClick={() => this.openSelector()} />
-            <Tooltip
-              targetId="hotbarIndex"
-              preferredPositions={TooltipPosition.TOP}
-            >
-              {hotbar.name}
-            </Tooltip>
-          </div>
-          <Icon material="play_arrow" className="next box" onClick={() => this.next()} />
-        </div>
       </div>
     );
   }

src/renderer/components/hotbar/hotbar-selector.scss

@@ -0,0 +1,36 @@
+.HotbarSelector {
+  height: 26px;
+  background-color: var(--layoutBackground);
+  position: relative;
+
+  &:before {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    background: linear-gradient(0deg, var(--clusterMenuBackground), transparent);
+    top: -20px;
+  }
+
+  .Badge {
+    cursor: pointer;
+    background: var(--secondaryBackground);
+    width: 100%;
+    color: var(--settingsColor);
+    padding-top: 3px;
+  }
+
+  .Icon {
+    --size: 16px;
+    padding: 0 4px;
+
+    &:hover {
+      box-shadow: none;
+      background-color: transparent;
+    }
+
+    &.previous {
+      transform: rotateY(180deg);
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import "./hotbar-selector.scss";
+import { Icon } from "../icon";
+import { Badge } from "../badge";
+import { Tooltip } from "@material-ui/core";
+import { Hotbar, HotbarStore } from "../../../common/hotbar-store";
+import { CommandOverlay } from "../command-palette";
+import { HotbarSwitchCommand } from "./hotbar-switch-command";
+
+interface Props {
+  hotbar: Hotbar;
+}
+
+const store = HotbarStore.getInstance();
+
+export function HotbarSelector({ hotbar }: Props) {
+  const activeIndexDisplay = store.activeHotbarIndex + 1;
+
+  return (
+    <div className="HotbarSelector flex align-center">
+      <Icon material="play_arrow" className="previous box" onClick={() => store.switchToPrevious()} />
+      <div className="box grow flex align-center">
+        <Tooltip arrow title={hotbar.name}>
+          <Badge
+            id="hotbarIndex"
+            small
+            label={activeIndexDisplay}
+            onClick={() => CommandOverlay.open(<HotbarSwitchCommand />)}
+          />
+        </Tooltip>
+      </div>
+      <Icon material="play_arrow" className="next box" onClick={() => store.switchToNext()} />
+    </div>
+  );
+}