diff --git a/src/common/hotbar-store.ts b/src/common/hotbar-store.ts index 1634bab5cb..0faa165bf7 100644 --- a/src/common/hotbar-store.ts +++ b/src/common/hotbar-store.ts @@ -153,6 +153,19 @@ export class HotbarStore extends BaseStore { } } + @action + setHotbarName(id: string, name: string) { + const index = this.hotbars.findIndex((hotbar) => hotbar.id === id); + + if(index < 0) { + console.warn(`[HOTBAR-STORE]: cannot setHotbarName: unknown id`, { id }); + + return; + } + + this.hotbars[index].name = name; + } + @action remove(hotbar: Hotbar) { this.hotbars = this.hotbars.filter((h) => h !== hotbar); diff --git a/src/renderer/components/hotbar/hotbar-add-command.tsx b/src/renderer/components/hotbar/hotbar-add-command.tsx index fde97ef561..20c532e252 100644 --- a/src/renderer/components/hotbar/hotbar-add-command.tsx +++ b/src/renderer/components/hotbar/hotbar-add-command.tsx @@ -25,7 +25,7 @@ import { HotbarStore } from "../../../common/hotbar-store"; import { CommandOverlay } from "../command-palette"; import { Input, InputValidator } from "../input"; -const uniqueHotbarName: InputValidator = { +export const uniqueHotbarName: InputValidator = { condition: ({ required }) => required, message: () => "Hotbar with this name already exists", validate: value => !HotbarStore.getInstance().getByName(value), diff --git a/src/renderer/components/hotbar/hotbar-rename-command.tsx b/src/renderer/components/hotbar/hotbar-rename-command.tsx new file mode 100644 index 0000000000..6d8784a941 --- /dev/null +++ b/src/renderer/components/hotbar/hotbar-rename-command.tsx @@ -0,0 +1,114 @@ +/** + * Copyright (c) 2021 OpenLens Authors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +import React from "react"; +import { observer } from "mobx-react"; +import { Select } from "../select"; +import { action, computed, makeObservable, observable } from "mobx"; +import { HotbarStore } from "../../../common/hotbar-store"; +import { hotbarDisplayLabel } from "./hotbar-display-label"; +import { Input } from "../input"; +import { uniqueHotbarName } from "./hotbar-add-command"; +import { CommandOverlay } from "../command-palette"; + +@observer +export class HotbarRenameCommand extends React.Component { + @observable hotbarId = ""; + @observable hotbarName = ""; + + constructor(props: {}) { + super(props); + makeObservable(this); + } + + @computed get options() { + return HotbarStore.getInstance().hotbars.map((hotbar) => { + return { value: hotbar.id, label: hotbarDisplayLabel(hotbar.id) }; + }); + } + + @action onSelect = (id: string) => { + this.hotbarId = id; + this.hotbarName = HotbarStore.getInstance().getById(this.hotbarId).name; + }; + + onSubmit = (name: string) => { + if (!name.trim()) { + return; + } + + const hotbarStore = HotbarStore.getInstance(); + const hotbar = HotbarStore.getInstance().getById(this.hotbarId); + + if (!hotbar) { + return; + } + + hotbarStore.setHotbarName(this.hotbarId, name); + CommandOverlay.close(); + }; + + renderHotbarList() { + return ( + <> + this.hotbarName = v} + placeholder="New hotbar name" + autoFocus={true} + theme="round-black" + validators={uniqueHotbarName} + onSubmit={this.onSubmit} + showValidationLine={true} + /> + + Please provide a new hotbar name (Press "Enter" to confirm or "Escape" to cancel) + + + ); + } + + render() { + + return ( + <> + {!this.hotbarId ? this.renderHotbarList() : this.renderNameInput()} + + ); + } +} diff --git a/src/renderer/components/hotbar/hotbar-selector.tsx b/src/renderer/components/hotbar/hotbar-selector.tsx index 3bac4475fe..cc9617aa47 100644 --- a/src/renderer/components/hotbar/hotbar-selector.tsx +++ b/src/renderer/components/hotbar/hotbar-selector.tsx @@ -28,12 +28,13 @@ import { CommandOverlay } from "../command-palette"; import { HotbarSwitchCommand } from "./hotbar-switch-command"; import { hotbarDisplayIndex } from "./hotbar-display-label"; import { TooltipPosition } from "../tooltip"; +import { observer } from "mobx-react"; interface Props { hotbar: Hotbar; } -export function HotbarSelector({ hotbar }: Props) { +export const HotbarSelector = observer(({ hotbar }: Props) => { const store = HotbarStore.getInstance(); return ( @@ -55,4 +56,4 @@ export function HotbarSelector({ hotbar }: Props) { store.switchToNext()} /> ); -} +}); diff --git a/src/renderer/components/hotbar/hotbar-switch-command.tsx b/src/renderer/components/hotbar/hotbar-switch-command.tsx index 142c1f6a9a..d79ccfba4b 100644 --- a/src/renderer/components/hotbar/hotbar-switch-command.tsx +++ b/src/renderer/components/hotbar/hotbar-switch-command.tsx @@ -28,11 +28,13 @@ import { CommandOverlay } from "../command-palette"; import { HotbarAddCommand } from "./hotbar-add-command"; import { HotbarRemoveCommand } from "./hotbar-remove-command"; import { hotbarDisplayLabel } from "./hotbar-display-label"; +import { HotbarRenameCommand } from "./hotbar-rename-command"; @observer export class HotbarSwitchCommand extends React.Component { private static addActionId = "__add__"; private static removeActionId = "__remove__"; + private static renameActionId = "__rename__"; constructor(props: {}) { super(props); @@ -51,11 +53,13 @@ export class HotbarSwitchCommand extends React.Component { options.push({ value: HotbarSwitchCommand.removeActionId, label: "Remove hotbar ..." }); } + options.push({ value: HotbarSwitchCommand.renameActionId, label: "Rename hotbar ..." }); + return options; } onChange(idOrAction: string): void { - switch(idOrAction) { + switch (idOrAction) { case HotbarSwitchCommand.addActionId: CommandOverlay.open(); @@ -63,6 +67,10 @@ export class HotbarSwitchCommand extends React.Component { case HotbarSwitchCommand.removeActionId: CommandOverlay.open(); + return; + case HotbarSwitchCommand.renameActionId: + CommandOverlay.open(); + return; default: HotbarStore.getInstance().activeHotbarId = idOrAction; diff --git a/src/renderer/initializers/command-registry.tsx b/src/renderer/initializers/command-registry.tsx index a747037a57..6e8fb504c7 100644 --- a/src/renderer/initializers/command-registry.tsx +++ b/src/renderer/initializers/command-registry.tsx @@ -29,6 +29,7 @@ import { HotbarAddCommand } from "../components/hotbar/hotbar-add-command"; import { HotbarRemoveCommand } from "../components/hotbar/hotbar-remove-command"; import { HotbarSwitchCommand } from "../components/hotbar/hotbar-switch-command"; import { navigate } from "../navigation"; +import { HotbarRenameCommand } from "../components/hotbar/hotbar-rename-command"; export function initCommandRegistry() { CommandRegistry.getInstance() @@ -189,5 +190,11 @@ export function initCommandRegistry() { scope: "global", action: () => CommandOverlay.open() }, + { + id: "hotbar.renameHotbar", + title: "Hotbar: Rename Hotbar ...", + scope: "global", + action: () => CommandOverlay.open() + }, ]); }