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
DTStack · Feb 25, 2021 · d035929 · d035929
1 parent 551bc74
commit d035929
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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<IPanel> {
     clearOutput(): void;
     updateProblems(data: IPanelItem): IPanelItem | undefined;
     clearProblems(): void;
+    showHide(): void;
+    maximizeRestore(): void;
 }
 
 @singleton()
@@ -30,6 +33,35 @@ export class PanelService extends Component<IPanel> 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<any>): void {
         let current = this.getById(data.id);
         if (!current) {

diff --git 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
@@ -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 (
         <div id={ID_APP} className={appClassName}>
             <div className={workbenchClassName}>
@@ -42,12 +46,20 @@ export function WorkbenchView(props: IWorkbench) {
                             split="horizontal"
                             allowResize={true}
                         >
-                            <Pane initialSize="70%" maxSize="99%" minSize="10%">
-                                <EditorView />
-                            </Pane>
-                            <Pane>
-                                <PanelView />
-                            </Pane>
+                            {!panel.maximize ? (
+                                <Pane
+                                    initialSize="70%"
+                                    maxSize="99%"
+                                    minSize="10%"
+                                >
+                                    <EditorView />
+                                </Pane>
+                            ) : null}
+                            {!panel.hidden ? (
+                                <Pane>
+                                    <PanelView />
+                                </Pane>
+                            ) : null}
                         </SplitPane>
                     </SplitPane>
                 </div>

diff --git 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 {
                 <div style={{ margin: '50px 20px' }}>
                     <h2>Add a new Panel:</h2>
                     <Button onClick={addPanel}>Add Panel</Button>
+                    <Button onClick={showHidePanel}>Show/Hide Panel</Button>
                 </div>
             </div>
         );