Abstract out HotbarEntityIcon from HotbarIcon

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

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -0,0 +1,115 @@
+import "./hotbar-icon.scss";
+
+import React, { DOMAttributes } from "react";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import randomColor from "randomcolor";
+
+import { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../../common/catalog";
+import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
+import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
+import { navigate } from "../../navigation";
+import { cssNames, IClassName } from "../../utils";
+import { ConfirmDialog } from "../confirm-dialog";
+import { Icon } from "../icon";
+import { HotbarIcon } from "./hotbar-icon";
+
+interface Props extends DOMAttributes<HTMLElement> {
+  entity: CatalogEntity;
+  className?: IClassName;
+  errorClass?: IClassName;
+  remove: (uid: string) => void;
+}
+
+@observer
+export class HotbarEntityIcon extends React.Component<Props> {
+  @observable.deep private contextMenu: CatalogEntityContextMenuContext;
+
+  componentDidMount() {
+    this.contextMenu = {
+      menuItems: [],
+      navigate: (url: string) => navigate(url)
+    };
+  }
+
+  get kindIcon() {
+    const className = "badge";
+    const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
+
+    if (!category) {
+      return <Icon material="bug_report" className={className} />;
+    }
+
+    if (category.metadata.icon.includes("<svg")) {
+      return <Icon svg={category.metadata.icon} className={className} />;
+    } else {
+      return <Icon material={category.metadata.icon} className={className} />;
+    }
+  }
+
+  get ledIcon() {
+    const className = cssNames("led", { online: this.props.entity.status.phase == "connected"}); // TODO: make it more generic
+
+    return <div className={className} />;
+  }
+
+  isActive(item: CatalogEntity) {
+    return catalogEntityRegistry.activeEntity?.metadata?.uid == item.getId();
+  }
+
+  onMenuItemClick(menuItem: CatalogEntityContextMenu) {
+    if (menuItem.confirm) {
+      ConfirmDialog.open({
+        okButtonProps: {
+          primary: false,
+          accent: true,
+        },
+        ok: () => {
+          menuItem.onClick();
+        },
+        message: menuItem.confirm.message
+      });
+    } else {
+      menuItem.onClick();
+    }
+  }
+
+  generateAvatarStyle(entity: CatalogEntity): React.CSSProperties {
+    return {
+      "backgroundColor": randomColor({ seed: `${entity.metadata.name}-${entity.metadata.source}`, luminosity: "dark" })
+    };
+  }
+
+  render() {
+    const {
+      entity, errorClass, remove,
+      children, ...elemProps
+    } = this.props;
+    const className = cssNames("HotbarEntityIcon", this.props.className, {
+      interactive: true,
+      active: this.isActive(entity),
+      disabled: !entity
+    });
+    const onOpen = async () => {
+      await entity.onContextMenuOpen(this.contextMenu);
+    };
+    const menuItems = this.contextMenu?.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === entity.metadata.source);
+
+    return (
+      <HotbarIcon
+        uid={entity.getId()}
+        title={entity.getName()}
+        source={`${entity.metadata.source || "local"}`}
+        className={className}
+        active={this.isActive(entity)}
+        remove={remove}
+        onMenuOpen={onOpen}
+        menuItems={menuItems}
+        {...elemProps}
+      >
+        { this.ledIcon }
+        { this.kindIcon }
+      </HotbarIcon>
+    );
+  }
+}

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

@@ -1,27 +1,50 @@
 import "./hotbar-icon.scss";
 
-import React, { DOMAttributes } from "react";
+import React, { DOMAttributes, useState } from "react";
-import { observer } from "mobx-react";
-import { cssNames, IClassName, iter } from "../../utils";
-import { Tooltip } from "../tooltip";
 import { Avatar } from "@material-ui/core";
-import { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../../common/catalog";
-import { Menu, MenuItem } from "../menu";
-import { Icon } from "../icon";
-import { computed, observable } from "mobx";
-import { navigate } from "../../navigation";
-import { HotbarStore } from "../../../common/hotbar-store";
-import { ConfirmDialog } from "../confirm-dialog";
 import randomColor from "randomcolor";
-import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
 import GraphemeSplitter from "grapheme-splitter";
 
+import { CatalogEntityContextMenu } from "../../../common/catalog";
+import { cssNames, IClassName, iter } from "../../utils";
+import { ConfirmDialog } from "../confirm-dialog";
+import { Icon } from "../icon";
+import { Menu, MenuItem } from "../menu";
+import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip";
+
 interface Props extends DOMAttributes<HTMLElement> {
-  entity: CatalogEntity;
+  uid: string;
-  index: number;
+  title: string;
+  source: string;
+  remove: (uid: string) => void;
+  onMenuOpen?: () => void;
   className?: IClassName;
-  errorClass?: IClassName;
+  active?: boolean;
-  isActive?: boolean;
+  menuItems?: CatalogEntityContextMenu[];
+  disabled?: boolean;
+}
+
+function generateAvatarStyle(seed: string): React.CSSProperties {
+  return {
+    "backgroundColor": randomColor({ seed, luminosity: "dark" })
+  };
+}
+
+function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
+  if (menuItem.confirm) {
+    ConfirmDialog.open({
+      okButtonProps: {
+        primary: false,
+        accent: true,
+      },
+      ok: () => {
+        menuItem.onClick();
+      },
+      message: menuItem.confirm.message
+    });
+  } else {
+    menuItem.onClick();
+  }
 }
 
 function getNameParts(name: string): string[] {
@@ -40,20 +63,17 @@ function getNameParts(name: string): string[] {
   return name.split(/@+/);
 }
 
-@observer
+export function HotbarIcon(props: Props) {
-export class HotbarIcon extends React.Component<Props> {
+  const { uid, title, className, source, active, remove, disabled, menuItems, onMenuOpen, children, ...rest } = props;
-  @observable.deep private contextMenu: CatalogEntityContextMenuContext;
+  const id = `hotbarIcon-${uid}`;
-  @observable menuOpen = false;
+  const [menuOpen, setMenuOpen] = useState(false);
 
-  componentDidMount() {
+  const toggleMenu = () => {
-    this.contextMenu = {
+    setMenuOpen(!menuOpen);
-      menuItems: [],
+  };
-      navigate: (url: string) => navigate(url)
-    };
-  }
 
-  @computed get iconString() {
+  const getIconString = () => {
-    const [rawFirst, rawSecond, rawThird] = getNameParts(this.props.entity.metadata.name);
+    const [rawFirst, rawSecond, rawThird] = getNameParts(title);
     const splitter = new GraphemeSplitter();
     const first = splitter.iterateGraphemes(rawFirst);
     const second = rawSecond ? splitter.iterateGraphemes(rawSecond): first;
@@ -64,114 +84,50 @@ export class HotbarIcon extends React.Component<Props> {
       ...iter.take(second, 1),
       ...iter.take(third, 1),
     ].filter(Boolean).join("");
-  }
+  };
 
-  get kindIcon() {
+  return (
-    const className = "badge";
+    <div className={cssNames("HotbarIcon flex inline", className, { disabled })}>
-    const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
+      <MaterialTooltip title={`${title} (${source})`} placement="right">
-
+        <div id={id}>
-    if (!category) {
+          <Avatar
-      return <Icon material="bug_report" className={className} />;
+            {...rest}
-    }
+            variant="square"
-
+            className={active ? "active" : "default"}
-    if (category.metadata.icon.includes("<svg")) {
+            style={generateAvatarStyle(`${title}-${source}`)}
-      return <Icon svg={category.metadata.icon} className={className} />;
+          >
-    } else {
+            {getIconString()}
-      return <Icon material={category.metadata.icon} className={className} />;
+          </Avatar>
-    }
+          {children}
-  }
+        </div>
-
+      </MaterialTooltip>
-  get ledIcon() {
+      <Menu
-    const className = cssNames("led", { online: this.props.entity.status.phase == "connected"}); // TODO: make it more generic
+        usePortal
-
+        htmlFor={id}
-    return <div className={className} />;
+        className="HotbarIconMenu"
-  }
+        isOpen={menuOpen}
-
+        toggleEvent="contextmenu"
-  toggleMenu() {
+        position={{right: true, bottom: true }} // FIXME: position does not work
-    this.menuOpen = !this.menuOpen;
+        open={() => {
-  }
+          onMenuOpen?.();
-
+          toggleMenu();
-  remove(item: CatalogEntity) {
+        }}
-    const hotbar = HotbarStore.getInstance();
+        close={() => toggleMenu()}>
-
+        <MenuItem key="remove-from-hotbar" onClick={() => remove(uid) }>
-    hotbar.removeFromHotbar(item.getId());
+          <Icon material="clear" small interactive={true} title="Remove from hotbar"/> Remove from Hotbar
-  }
+        </MenuItem>
-
+        { menuItems.map((menuItem) => {
-  onMenuItemClick(menuItem: CatalogEntityContextMenu) {
+          return (
-    if (menuItem.confirm) {
+            <MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem) }>
-      ConfirmDialog.open({
+              <Icon material={menuItem.icon} small interactive={true} title={menuItem.title}/> {menuItem.title}
-        okButtonProps: {
+            </MenuItem>
-          primary: false,
+          );
-          accent: true,
+        })}
-        },
+      </Menu>
-        ok: () => {
+    </div>
-          menuItem.onClick();
+  );
-        },
-        message: menuItem.confirm.message
-      });
-    } else {
-      menuItem.onClick();
-    }
-  }
-
-  generateAvatarStyle(entity: CatalogEntity): React.CSSProperties {
-    return {
-      "backgroundColor": randomColor({ seed: `${entity.metadata.name}-${entity.metadata.source}`, luminosity: "dark" })
-    };
-  }
-
-  render() {
-    const {
-      entity, errorClass, isActive,
-      children, ...elemProps
-    } = this.props;
-    const entityIconId = `hotbar-icon-${this.props.index}`;
-    const className = cssNames("HotbarIcon flex inline", this.props.className, {
-      interactive: true,
-      active: isActive,
-    });
-    const onOpen = async () => {
-      await entity.onContextMenuOpen(this.contextMenu);
-      this.toggleMenu();
-    };
-    const menuItems = this.contextMenu?.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === entity.metadata.source);
-
-    return (
-      <div className={className}>
-        <Tooltip targetId={entityIconId}>{entity.metadata.name} ({entity.metadata.source || "local"})</Tooltip>
-        <Avatar
-          {...elemProps}
-          id={entityIconId}
-          variant="square"
-          className={isActive ? "active" : "default"}
-          style={this.generateAvatarStyle(entity)}
-        >
-          {this.iconString}
-        </Avatar>
-        { this.ledIcon }
-        { this.kindIcon }
-        <Menu
-          usePortal
-          htmlFor={entityIconId}
-          className="HotbarIconMenu"
-          isOpen={this.menuOpen}
-          toggleEvent="contextmenu"
-          position={{right: true, bottom: true }} // FIXME: position does not work
-          open={() => onOpen()}
-          close={() => this.toggleMenu()}>
-          <MenuItem key="remove-from-hotbar" onClick={() => this.remove(entity) }>
-            <Icon material="clear" small interactive={true} title="Remove from hotbar"/> Remove from Hotbar
-          </MenuItem>
-          { this.contextMenu && menuItems.map((menuItem) => {
-            return (
-              <MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem) }>
-                <Icon material={menuItem.icon} small interactive={true} title={menuItem.title}/> {menuItem.title}
-              </MenuItem>
-            );
-          })}
-        </Menu>
-        {children}
-      </div>
-    );
-  }
 }
+
+HotbarIcon.defaultProps = {
+  menuItems: []
+};

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

@@ -1,15 +1,17 @@
 import "./hotbar-menu.scss";
 import "./hotbar.commands";
 
-import React, { HTMLAttributes, ReactNode, useState } from "react";
+import React from "react";
 import { observer } from "mobx-react";
-import { HotbarIcon } from "./hotbar-icon";
+import { HotbarEntityIcon } from "./hotbar-entity-icon";
 import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store";
-import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
+import { catalogEntityRunContext } from "../../api/catalog-entity";
 import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
 import { HotbarSelector } from "./hotbar-selector";
+import { HotbarCell } from "./hotbar-cell";
+import { HotbarIcon } from "./hotbar-icon";
 
 interface Props {
   className?: IClassName;
@@ -21,10 +23,6 @@ export class HotbarMenu extends React.Component<Props> {
     return HotbarStore.getInstance().getActive();
   }
 
-  isActive(item: CatalogEntity) {
-    return catalogEntityRegistry.activeEntity?.metadata?.uid == item.getId();
-  }
-
   getEntity(item: HotbarItem) {
     const hotbar = HotbarStore.getInstance().getActive();
 
@@ -48,6 +46,12 @@ export class HotbarMenu extends React.Component<Props> {
     HotbarStore.getInstance().restackItems(from, to);
   }
 
+  removeItem(uid: string) {
+    const hotbar = HotbarStore.getInstance();
+
+    hotbar.removeFromHotbar(uid);
+  }
+
   renderGrid() {
     return this.hotbar.items.map((item, index) => {
       const entity = this.getEntity(item);
@@ -62,8 +66,8 @@ export class HotbarMenu extends React.Component<Props> {
               className={cssNames({ isDraggingOver: snapshot.isDraggingOver })}
               {...provided.droppableProps}
             >
-              {entity && (
+              {item && (
-                <Draggable draggableId={item.entity.uid} key={item.entity.uid} index={0}>
+                <Draggable draggableId={item.entity.uid} key={item.entity.uid} index={0} >
                   {(provided, snapshot) => {
                     const style = {
                       zIndex: defaultHotbarCells - index,
@@ -79,14 +83,22 @@ export class HotbarMenu extends React.Component<Props> {
                         {...provided.dragHandleProps}
                         style={style}
                       >
-                        <HotbarIcon
+                        {entity ? (
-                          key={index}
+                          <HotbarEntityIcon
-                          index={index}
+                            key={index}
-                          entity={entity}
+                            entity={entity}
-                          isActive={this.isActive(entity)}
+                            onClick={() => entity?.onRun(catalogEntityRunContext)}
-                          onClick={() => entity.onRun(catalogEntityRunContext)}
+                            className={cssNames({ isDragging: snapshot.isDragging })}
-                          className={cssNames({ isDragging: snapshot.isDragging })}
+                            remove={this.removeItem}
-                        />
+                          />
+                        ) : (
+                          <HotbarIcon
+                            uid={item.entity.uid}
+                            title={item.entity.name}
+                            source={item.entity.source}
+                            remove={this.removeItem}
+                          />
+                        )}
                       </div>
                     );
                   }}
@@ -117,33 +129,3 @@ export class HotbarMenu extends React.Component<Props> {
     );
   }
 }
-
-interface HotbarCellProps extends HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode;
-  index: number;
-  innerRef?: React.LegacyRef<HTMLDivElement>;
-}
-
-function HotbarCell({ innerRef, children, className, ...rest }: HotbarCellProps) {
-  const [animating, setAnimating] = useState(false);
-  const onAnimationEnd = () => { setAnimating(false); };
-  const onClick = () => {
-    if (className.includes("isDraggingOver")) {
-      return;
-    }
-
-    setAnimating(true);
-  };
-
-  return (
-    <div
-      className={cssNames("HotbarCell", { animating }, className)}
-      onAnimationEnd={onAnimationEnd}
-      onClick={onClick}
-      ref={innerRef}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}