Hotbar command palette + switching (#2552)

* fix initial hotbar not showing Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * hotbar command palette + switching Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * lint fix Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * add clickable index to switcher Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fixes Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cleanup Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cleanup Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * refactor Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix typo Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fixes Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * remote notifications Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix add to hotbar Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * don't show remove-from-hotbar on catalog context menu Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix bad merge Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix bad merge Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix bad merge Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
2025-05-20 05:10:56 +00:00 · 2021-04-22 10:07:14 +03:00
1 parent b63fdfaff3
commit da8cc889c4
@@ -0,0 +1,58 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { Select } from "../select";
+import { computed } from "mobx";
+import { HotbarStore } from "../../../common/hotbar-store";
+import { CommandOverlay } from "../command-palette";
+import { HotbarAddCommand } from "./hotbar-add-command";
+import { HotbarRemoveCommand } from "./hotbar-remove-command";
+
+@observer
+export class HotbarSwitchCommand extends React.Component {
+  private static addActionId = "__add__";
+  private static removeActionId = "__remove__";
+
+  @computed get options() {
+    const hotbarStore = HotbarStore.getInstance();
+    const options = hotbarStore.hotbars.map((hotbar) => {
+      return { value: hotbar.id, label: hotbar.name };
+    });
+
+    options.push({ value: HotbarSwitchCommand.addActionId, label: "Add hotbar ..." });
+
+    if (hotbarStore.hotbars.length > 1) {
+      options.push({ value: HotbarSwitchCommand.removeActionId, label: "Remove hotbar ..." });
+    }
+
+    return options;
+  }
+
+  onChange(idOrAction: string): void {
+    switch(idOrAction) {
+      case HotbarSwitchCommand.addActionId:
+        CommandOverlay.open(<HotbarAddCommand />);
+
+        return;
+      case HotbarSwitchCommand.removeActionId:
+        CommandOverlay.open(<HotbarRemoveCommand />);
+
+        return;
+      default:
+        HotbarStore.getInstance().activeHotbarId = idOrAction;
+        CommandOverlay.close();
+    }
+  }
+
+  render() {
+    return (
+      <Select
+        onChange={(v) => this.onChange(v.value)}
+        components={{ DropdownIndicator: null, IndicatorSeparator: null }}
+        menuIsOpen={true}
+        options={this.options}
+        autoFocus={true}
+        escapeClearsValue={false}
+        placeholder="Switch to hotbar" />
+    );
+  }
+}