From b6ba39c438c11b0bca90f89b18f5bb239719389f Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Wed, 4 Aug 2021 14:22:18 -0400 Subject: [PATCH] Remove circular imports around the command pallet (#3544) --- .../command-palette/command-container.tsx | 45 ++++-------------- .../command-palette/command-dialog.tsx | 2 +- .../command-palette/command-overlay.ts | 47 +++++++++++++++++++ .../components/command-palette/index.ts | 1 + 4 files changed, 58 insertions(+), 37 deletions(-) create mode 100644 src/renderer/components/command-palette/command-overlay.ts diff --git a/src/renderer/components/command-palette/command-container.tsx b/src/renderer/components/command-palette/command-container.tsx index f90586fd5a..cc67d27964 100644 --- a/src/renderer/components/command-palette/command-container.tsx +++ b/src/renderer/components/command-palette/command-container.tsx @@ -21,32 +21,15 @@ import "./command-container.scss"; -import { action, observable, makeObservable } from "mobx"; import { observer } from "mobx-react"; import React from "react"; import { Dialog } from "../dialog"; -import { EventEmitter } from "../../../common/event-emitter"; import { ipcRendererOn } from "../../../common/ipc"; import { CommandDialog } from "./command-dialog"; import type { ClusterId } from "../../../common/cluster-types"; import { catalogEntityRegistry } from "../../api/catalog-entity-registry"; import { CommandRegistration, CommandRegistry } from "../../../extensions/registries/command-registry"; - -export type CommandDialogEvent = { - component: React.ReactElement -}; - -const commandDialogBus = new EventEmitter<[CommandDialogEvent]>(); - -export class CommandOverlay { - static open(component: React.ReactElement) { - commandDialogBus.emit({ component }); - } - - static close() { - commandDialogBus.emit({ component: null }); - } -} +import { CommandOverlay } from "./command-overlay"; export interface CommandContainerProps { clusterId?: ClusterId; @@ -54,25 +37,13 @@ export interface CommandContainerProps { @observer export class CommandContainer extends React.Component { - @observable.ref commandComponent: React.ReactNode; - - constructor(props: CommandContainerProps) { - super(props); - makeObservable(this); - } - private escHandler(event: KeyboardEvent) { if (event.key === "Escape") { event.stopPropagation(); - this.closeDialog(); + CommandOverlay.close(); } } - @action - private closeDialog() { - this.commandComponent = null; - } - private findCommandById(commandId: string) { return CommandRegistry.getInstance().getItems().find((command) => command.id === commandId); } @@ -98,16 +69,18 @@ export class CommandContainer extends React.Component { }); } window.addEventListener("keyup", (e) => this.escHandler(e), true); - commandDialogBus.addListener((event) => { - this.commandComponent = event.component; - }); } render() { return ( - this.commandComponent = null} modal={false}> +
- {this.commandComponent} + {CommandOverlay.component}
); diff --git a/src/renderer/components/command-palette/command-dialog.tsx b/src/renderer/components/command-palette/command-dialog.tsx index 493d9bea70..b99a73ee9f 100644 --- a/src/renderer/components/command-palette/command-dialog.tsx +++ b/src/renderer/components/command-palette/command-dialog.tsx @@ -25,7 +25,7 @@ import { computed, makeObservable, observable } from "mobx"; import { observer } from "mobx-react"; import React from "react"; import { CommandRegistry } from "../../../extensions/registries/command-registry"; -import { CommandOverlay } from "./command-container"; +import { CommandOverlay } from "./command-overlay"; import { broadcastMessage } from "../../../common/ipc"; import { navigate } from "../../navigation"; import { catalogEntityRegistry } from "../../api/catalog-entity-registry"; diff --git a/src/renderer/components/command-palette/command-overlay.ts b/src/renderer/components/command-palette/command-overlay.ts new file mode 100644 index 0000000000..1058b2f9d3 --- /dev/null +++ b/src/renderer/components/command-palette/command-overlay.ts @@ -0,0 +1,47 @@ +/** + * 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 { observable } from "mobx"; +import React from "react"; + +export class CommandOverlay { + static #component = observable.box(null, { deep: false }); + + static get isOpen(): boolean { + return Boolean(CommandOverlay.#component.get()); + } + + static open(component: React.ReactElement) { + if (!React.isValidElement(component)) { + throw new TypeError("CommandOverlay.open must be passed a valid ReactElement"); + } + + CommandOverlay.#component.set(component); + } + + static close() { + CommandOverlay.#component.set(null); + } + + static get component(): React.ReactElement | null { + return CommandOverlay.#component.get(); + } +} diff --git a/src/renderer/components/command-palette/index.ts b/src/renderer/components/command-palette/index.ts index ea2e83ed31..27169ddae2 100644 --- a/src/renderer/components/command-palette/index.ts +++ b/src/renderer/components/command-palette/index.ts @@ -21,3 +21,4 @@ export * from "./command-container"; export * from "./command-dialog"; +export * from "./command-overlay";