From d0359298fb9c36291f28c4b31a6b8ac886f49ae3 Mon Sep 17 00:00:00 2001 From: xiaowei Date: Thu, 25 Feb 2021 15:38:52 +0800 Subject: [PATCH] feat(panel): support show or hide, and maximize or restore the Panel Builtin supports show/hide, maximize/restore the Panel features, also you can invoke showHide(), maximizeRestore() method by panelServie re #19 --- src/controller/panel.tsx | 17 +++++++------- src/model/workbench/panel.tsx | 24 ++++++++----------- src/services/workbench/panelService.ts | 32 ++++++++++++++++++++++++++ src/workbench/panel/panel.tsx | 1 - src/workbench/workbench.tsx | 26 +++++++++++++++------ stories/extensions/test/testPane.tsx | 5 ++++ 6 files changed, 74 insertions(+), 31 deletions(-) diff --git a/src/controller/panel.tsx b/src/controller/panel.tsx index 52e60b310..2c9c2e2fd 100644 --- a/src/controller/panel.tsx +++ b/src/controller/panel.tsx @@ -1,9 +1,12 @@ import * as React from 'react'; import { IActionBarItem } from 'mo/components/actionBar'; -import { PanelStatus } from 'mo/model/workbench/panel'; import { Controller } from 'mo/react/controller'; import { panelService } from 'mo/services'; import { singleton } from 'tsyringe'; +import { + PANEL_TOOLBOX_CLOSE, + PANEL_TOOLBOX_RESIZE, +} from 'mo/model/workbench/panel'; export interface IPanelController { onTabChange(key: string | undefined): void; @@ -29,14 +32,10 @@ export class PanelController extends Controller implements IPanelController { e: React.MouseEvent, item: IActionBarItem ): void => { - if (item.id === 'Closeable') { - panelService.setState({ - status: PanelStatus.Close, - }); - } else if (item.id === 'Resize') { - panelService.setState({ - status: PanelStatus.Maximize, - }); + if (item.id === PANEL_TOOLBOX_CLOSE.id) { + panelService.showHide(); + } else if (item.id === PANEL_TOOLBOX_RESIZE.id) { + panelService.maximizeRestore(); } }; } diff --git a/src/model/workbench/panel.tsx b/src/model/workbench/panel.tsx index ee42ba45f..21594895b 100644 --- a/src/model/workbench/panel.tsx +++ b/src/model/workbench/panel.tsx @@ -17,19 +17,6 @@ export enum PanelEvent { onClick = 'panel.onClick', } -export enum PanelStatus { - Close = 'close', - Open = 'open', - Maximize = 'maximize', -} - -export interface IPanel { - current?: IPanelItem; - data?: IPanelItem[]; - toolbox?: IActionBarItem[]; - status?: PanelStatus; -} - export const PANEL_PROBLEMS: IPanelItem = { id: 'ProblemsPane', name: 'problems', @@ -58,11 +45,20 @@ export const PANEL_TOOLBOX_RESIZE = { iconName: 'codicon-chevron-up', }; +export interface IPanel { + current?: IPanelItem; + data?: IPanelItem[]; + toolbox?: IActionBarItem[]; + hidden?: boolean; + maximize?: boolean; +} + @injectable() export class PanelModel implements IPanel { public current: IPanelItem | undefined = PANEL_OUTPUT; public data: IPanelItem[] = ([] = [PANEL_PROBLEMS, PANEL_OUTPUT]); - public status = PanelStatus.Open; + public hidden = false; + public maximize = false; public toolbox: IActionBarItem[] = [ PANEL_TOOLBOX_RESIZE, PANEL_TOOLBOX_CLOSE, diff --git a/src/services/workbench/panelService.ts b/src/services/workbench/panelService.ts index 5486d8711..6014f3dd4 100644 --- a/src/services/workbench/panelService.ts +++ b/src/services/workbench/panelService.ts @@ -6,6 +6,7 @@ import { PanelModel, PANEL_OUTPUT, PANEL_PROBLEMS, + PANEL_TOOLBOX_RESIZE, } from 'mo/model/workbench/panel'; import { searchById } from '../helper'; @@ -20,6 +21,8 @@ export interface IPanelService extends Component { clearOutput(): void; updateProblems(data: IPanelItem): IPanelItem | undefined; clearProblems(): void; + showHide(): void; + maximizeRestore(): void; } @singleton() @@ -30,6 +33,35 @@ export class PanelService extends Component implements IPanelService { super(); this.state = container.resolve(PanelModel); } + + public showHide(): void { + this.setState({ + hidden: !this.state.hidden, + }); + } + + public maximizeRestore(): void { + const maximize = !this.state.maximize; + const { toolbox = [] } = this.state; + const resizeBtnIndex = toolbox?.findIndex( + searchById(PANEL_TOOLBOX_RESIZE.id) + ); + const resizeBtn = toolbox[resizeBtnIndex]; + if (resizeBtn) { + if (maximize) { + toolbox[resizeBtnIndex] = Object.assign({}, resizeBtn, { + title: 'Restore Panel Size', + iconName: 'codicon-chevron-down', + }); + } else { + toolbox[resizeBtnIndex] = PANEL_TOOLBOX_RESIZE; + } + this.setState({ + maximize: !this.state.maximize, + }); + } + } + public open(data: IPanelItem): void { let current = this.getById(data.id); if (!current) { diff --git a/src/workbench/panel/panel.tsx b/src/workbench/panel/panel.tsx index ad033e508..6b67607cc 100644 --- a/src/workbench/panel/panel.tsx +++ b/src/workbench/panel/panel.tsx @@ -14,7 +14,6 @@ const panelToolbarClassName = getBEMElement(defaultClassName, 'toolbar'); const panelContainerClassName = getBEMElement(defaultClassName, 'container'); function Panel(props: IPanel & IPanelController) { - console.log('Panel render:', props); const { data, current, toolbox = [], onTabChange, onToolbarClick } = props; let toolboxData = toolbox; if (current && current.toolbox) { diff --git a/src/workbench/workbench.tsx b/src/workbench/workbench.tsx index f020cc750..b2bb3272a 100644 --- a/src/workbench/workbench.tsx +++ b/src/workbench/workbench.tsx @@ -15,14 +15,18 @@ import { Utils } from '@dtinsight/dt-utils'; import { APP_PREFIX } from 'mo/common/const'; import { panelService } from 'mo/services'; import { connect } from 'mo/react'; +import { IPanel } from 'mo/model/workbench/panel'; -export interface IWorkbench {} +export interface IWorkbench { + panel: IPanel; +} const mainBenchClassName = prefixClaName('mainBench'); const workbenchClassName = prefixClaName('workbench'); const appClassName = classNames(APP_PREFIX, Utils.isMacOs() ? 'mac' : ''); export function WorkbenchView(props: IWorkbench) { + const { panel } = props; return (
@@ -42,12 +46,20 @@ export function WorkbenchView(props: IWorkbench) { split="horizontal" allowResize={true} > - - - - - - + {!panel.maximize ? ( + + + + ) : null} + {!panel.hidden ? ( + + + + ) : null}
diff --git a/stories/extensions/test/testPane.tsx b/stories/extensions/test/testPane.tsx index 202eac1c3..311d79b74 100644 --- a/stories/extensions/test/testPane.tsx +++ b/stories/extensions/test/testPane.tsx @@ -66,6 +66,10 @@ export default class TestPane extends React.Component { }); }; + const showHidePanel = function () { + panelService.showHide(); + }; + const newEditor = function () { const key = Math.random() * 10 + 1; const tabData: IEditorTab = { @@ -98,6 +102,7 @@ export default class TestPane extends React.Component {

Add a new Panel:

+
);