diff --git a/src/renderer/components/dock/dock-tab.tsx b/src/renderer/components/dock/dock-tab.tsx index bcee911757..64e2ef3511 100644 --- a/src/renderer/components/dock/dock-tab.tsx +++ b/src/renderer/components/dock/dock-tab.tsx @@ -7,7 +7,7 @@ import { dockStore, IDockTab } from "./dock.store"; import { Tab, TabProps } from "../tabs"; import { Icon } from "../icon"; import { Menu, MenuItem } from "../menu"; -import { observable, makeObservable } from "mobx"; +import { makeObservable, observable } from "mobx"; export interface DockTabProps extends TabProps { moreActions?: React.ReactNode; @@ -32,7 +32,7 @@ export class DockTab extends React.Component { } renderMenu() { - const { closeTab, closeAllTabs, closeOtherTabs, closeTabsToTheRight, tabs, getTabIndex } = dockStore; + const { closeAllTabs, closeOtherTabs, closeTabsToTheRight, tabs, getTabIndex } = dockStore; const closeAllDisabled = tabs.length === 1; const closeOtherDisabled = tabs.length === 1; const closeRightDisabled = getTabIndex(this.tabId) === tabs.length - 1; @@ -47,7 +47,7 @@ export class DockTab extends React.Component { close={() => this.menuVisible = false} toggleEvent="contextmenu" > - closeTab(this.tabId)}> + dockStore.closeTab(this.tabId)}> Close closeAllTabs()} disabled={closeAllDisabled}> diff --git a/src/renderer/components/dock/dock.store.ts b/src/renderer/components/dock/dock.store.ts index 630f1172c5..21f1125518 100644 --- a/src/renderer/components/dock/dock.store.ts +++ b/src/renderer/components/dock/dock.store.ts @@ -1,6 +1,6 @@ import MD5 from "crypto-js/md5"; import { action, computed, IReactionOptions, makeObservable, observable, reaction } from "mobx"; -import { autobind, createStorage, StorageHelper } from "../../utils"; +import { createStorage, StorageHelper } from "../../utils"; import throttle from "lodash/throttle"; export type TabId = string; @@ -30,6 +30,8 @@ export interface DockStorageState { export class DockStore implements DockStorageState { constructor() { + makeObservable(this); + this.storage = createStorage("dock", { height: 300, tabs: [ @@ -37,8 +39,7 @@ export class DockStore implements DockStorageState { ], }); - makeObservable(this); - this.init(); + this.bindEvents(); } private storage: StorageHelper; @@ -85,7 +86,7 @@ export class DockStore implements DockStorageState { return this.tabs.find(tab => tab.id === this.selectedTabId); } - private init() { + private bindEvents() { // adjust terminal height if window size changes window.addEventListener("resize", throttle(this.adjustHeight, 250)); } @@ -113,8 +114,7 @@ export class DockStore implements DockStorageState { return reaction(() => this.selectedTabId, callback, options); } - @autobind() - hasTabs() { + @computed get hasTabs(): boolean { return this.tabs.length > 0; } @@ -127,18 +127,16 @@ export class DockStore implements DockStorageState { } } - @action.bound close() { this.isOpen = false; } - @action.bound toggle() { if (this.isOpen) this.close(); else this.open(); } - @action.bound + @action toggleFillSize() { if (!this.isOpen) this.open(); this.fullSize = !this.fullSize; @@ -148,7 +146,7 @@ export class DockStore implements DockStorageState { return this.tabs.find(tab => tab.id === tabId); } - getTabIndex(tabId: TabId) { + getTabIndex(tabId: TabId): number { return this.tabs.findIndex(tab => tab.id === tabId); } @@ -166,7 +164,7 @@ export class DockStore implements DockStorageState { } } - @action.bound + @action createTab(anonTab: IDockTab, addNumber = true): IDockTab { const tabId = MD5(Math.random().toString() + Date.now()).toString(); const tab: IDockTab = { id: tabId, ...anonTab }; @@ -183,7 +181,7 @@ export class DockStore implements DockStorageState { return tab; } - @action.bound + @action async closeTab(tabId: TabId) { const tab = this.getTabById(tabId); diff --git a/src/renderer/components/dock/dock.tsx b/src/renderer/components/dock/dock.tsx index 13f9d9f914..7593a4f216 100644 --- a/src/renderer/components/dock/dock.tsx +++ b/src/renderer/components/dock/dock.tsx @@ -31,18 +31,18 @@ interface Props { @observer export class Dock extends React.Component { onKeydown = (evt: React.KeyboardEvent) => { - const { close, closeTab, selectedTab } = dockStore; + const { selectedTab } = dockStore; if (!selectedTab) return; const { code, ctrlKey, shiftKey } = evt.nativeEvent; if (shiftKey && code === "Escape") { - close(); + dockStore.close(); } if (ctrlKey && code === "KeyW") { - if (selectedTab.pinned) close(); - else closeTab(selectedTab.id); + if (selectedTab.pinned) dockStore.close(); + else dockStore.closeTab(selectedTab.id); } }; @@ -60,19 +60,20 @@ export class Dock extends React.Component { return (
- {isCreateResourceTab(tab) && } - {isEditResourceTab(tab) && } - {isInstallChartTab(tab) && } - {isUpgradeChartTab(tab) && } - {isTerminalTab(tab) && } - {isLogsTab(tab) && } + {isCreateResourceTab(tab) && } + {isEditResourceTab(tab) && } + {isInstallChartTab(tab) && } + {isUpgradeChartTab(tab) && } + {isTerminalTab(tab) && } + {isLogsTab(tab) && }
); } render() { const { className } = this.props; - const { isOpen, toggle, tabs, toggleFillSize, selectedTab, hasTabs, fullSize } = dockStore; + const { isOpen, tabs, selectedTab, hasTabs, fullSize } = dockStore; + const toggleDock = () => dockStore.toggle(); return (
{ tabIndex={-1} > dockStore.height} minExtent={dockStore.minHeight} maxExtent={dockStore.maxHeight} direction={ResizeDirection.VERTICAL} onStart={dockStore.open} - onMinExtentSubceed={dockStore.close} - onMinExtentExceed={dockStore.open} + onMinExtentSubceed={() => dockStore.close()} + onMinExtentExceed={() => dockStore.open()} onDrag={extent => dockStore.height = extent} /> -
+
{
- {hasTabs() && ( + {hasTabs && ( <> dockStore.toggleFillSize()} /> )}