feat: support show or hide statusBar when rightClik statusBar panel (#…

…154) * feat: support show or hide statusBar when rightClik statusBar panel * feat: support show or hide barPanel based on setting.json * ci: fix ci error
DTStack · May 20, 2021 · b26c532 · b26c532
1 parent b9899f0
commit b26c532
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 13 deletions.
diff --git a/src/common/id.ts b/src/common/id.ts
@@ -3,3 +3,4 @@ export const ID_ACTIVITY_BAR = 'activityBar';
 export const ID_MENU_BAR = 'menuBar';
 export const ID_SIDE_BAR = 'sidebar';
 export const ID_EXPLORER = 'explorer';
+export const ID_STATUS_BAR = 'statusBar';
diff --git a/src/controller/index.ts b/src/controller/index.ts
@@ -5,9 +5,11 @@ import { SearchController } from './search/search';
 import { NotificationController } from './notification';
 import { SettingsController } from './settings';
 import { ProblemsController } from './problems';
+import { MenuBarController } from './menuBar';
 export const explorerController = container.resolve(ExplorerController);
 export const searchController = container.resolve(SearchController);
 export const folderTreeController = container.resolve(FolderTreeController);
 export const notificationController = container.resolve(NotificationController);
 export const settingController = container.resolve(SettingsController);
 export const problemsController = container.resolve(ProblemsController);
+export const menuBarController = container.resolve(MenuBarController);
diff --git a/src/controller/statusBar.tsx b/src/controller/statusBar.tsx
@@ -2,9 +2,16 @@ import 'reflect-metadata';
 import * as React from 'react';
 import { IStatusBarItem, StatusBarEvent } from 'mo/model';
 import { Controller } from 'mo/react/controller';
+import { menuBarController } from 'mo/controller';
+import { IMenuItem } from 'mo/components/menu';
+import { CONTEXT_MENU_HIDE_STATUS_BAR } from 'mo/model/workbench/statusBar';
 import { singleton } from 'tsyringe';
 export interface IStatusBarController {
     onClick?: (e: React.MouseEvent, item: IStatusBarItem) => void;
+    onContextMenuClick?: (
+        e: React.MouseEvent,
+        item: IMenuItem | undefined
+    ) => void;
 }
 @singleton()
 export class StatusBarController
@@ -17,4 +24,16 @@ export class StatusBarController
     public onClick = (e: React.MouseEvent, item: IStatusBarItem) => {
         this.emit(StatusBarEvent.onClick, e, item);
     };
+
+    public readonly onContextMenuClick = (
+        e: React.MouseEvent,
+        item: IMenuItem | undefined
+    ) => {
+        const menuId = item?.id;
+        switch (menuId) {
+            case CONTEXT_MENU_HIDE_STATUS_BAR.id:
+                menuBarController.updateStatusBar();
+                break;
+        }
+    };
 }
diff --git a/src/model/workbench/statusBar.tsx b/src/model/workbench/statusBar.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import EditorStatusBarView from 'mo/workbench/editor/statusBarView';
+import { IMenuItem } from 'mo/components/menu';
 export interface IStatusBarItem<T = any> extends HTMLElementProps {
     id: string;
     sortIndex: number;
@@ -12,6 +13,7 @@ export interface IStatusBarItem<T = any> extends HTMLElementProps {
 export interface IStatusBar {
     rightItems: IStatusBarItem[];
     leftItems: IStatusBarItem[];
+    contextMenu?: IMenuItem[];
     hidden?: boolean;
 }
 
@@ -39,18 +41,26 @@ export enum StatusBarEvent {
      */
     DataChanged = 'statusBar.data',
 }
+
+export const CONTEXT_MENU_HIDE_STATUS_BAR = {
+    id: 'hide',
+    name: 'Hide Status Bar',
+};
 export class StatusBarModel implements IStatusBar {
     public leftItems: IStatusBarItem[] = [];
     public rightItems: IStatusBarItem[] = [];
+    public contextMenu: IMenuItem[];
     public hidden = false;
 
     constructor(
         leftItems: IStatusBarItem[] = [],
         rightItems: IStatusBarItem[] = [STATUS_EDITOR_INFO],
+        contextMenu: IMenuItem[] = [CONTEXT_MENU_HIDE_STATUS_BAR],
         hidden = false
     ) {
         this.leftItems = leftItems;
         this.rightItems = rightItems;
+        this.contextMenu = contextMenu;
         this.hidden = hidden;
     }
 }
diff --git a/src/services/settingsService.ts b/src/services/settingsService.ts
@@ -123,7 +123,6 @@ export class SettingsService extends GlobalEvent implements ISettingsService {
         if (workbench.colorTheme) {
             this.colorThemeService.applyTheme(workbench.colorTheme);
         }
-
         this.editorService.editorInstance?.updateOptions({
             ...editor,
         });

diff --git a/src/workbench/statusBar/index.tsx b/src/workbench/statusBar/index.tsx
@@ -1,8 +1,8 @@
 import 'reflect-metadata';
+import { container } from 'tsyringe';
 import { connect } from 'mo/react';
 import StatusBar from './statusBar';
 import { StatusBarService } from 'mo/services';
-import { container } from 'tsyringe';
 import { StatusBarController } from 'mo/controller/statusBar';
 
 export * from './statusBar';

diff --git a/src/workbench/statusBar/item.tsx b/src/workbench/statusBar/item.tsx
@@ -1,11 +1,12 @@
-import { classNames } from 'mo/common/className';
-import { IStatusBarItem } from 'mo/model/workbench/statusBar';
 import * as React from 'react';
 import { memo } from 'react';
+import { classNames } from 'mo/common/className';
+import { IStatusBarItem } from 'mo/model/workbench/statusBar';
+import { IStatusBarController } from 'mo/controller/statusBar';
 import { itemClassName } from './base';
 
-function StatusItem(props: IStatusBarItem) {
-    const { className, onClick, name, data, render, ...extra } = props;
+function StatusItem(props: IStatusBarItem & IStatusBarController) {
+    const { className, onClick, id, name, data, render, ...extra } = props;
     const clsName = classNames(itemClassName, className);
     const events = {
         onClick: function (e: React.MouseEvent) {
@@ -14,7 +15,7 @@ function StatusItem(props: IStatusBarItem) {
     };
 
     return (
-        <div className={clsName} {...extra}>
+        <div className={clsName} id={id} {...extra}>
             <a tabIndex={-1} title={name} {...events}>
                 {render ? render(props) : name}
             </a>

diff --git a/src/workbench/statusBar/statusBar.tsx b/src/workbench/statusBar/statusBar.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { memo } from 'react';
-
+import { memo, useEffect, useCallback } from 'react';
 import { IStatusBar, IStatusBarItem } from 'mo/model/workbench/statusBar';
 import StatusItem from './item';
 import { mergeFunctions } from 'mo/common/utils';
@@ -11,9 +10,42 @@ import {
     sortByIndex,
     statusBarClassName,
 } from './base';
+import { useContextMenu } from 'mo/components/contextMenu';
+import { IMenuItem, Menu } from 'mo/components/menu';
+import { ID_STATUS_BAR } from 'mo/common/id';
+import { select } from 'mo/common/dom';
 
 function StatusBar(props: IStatusBar & IStatusBarController) {
-    const { leftItems = [], onClick, rightItems = [] } = props;
+    const {
+        leftItems = [],
+        contextMenu = [],
+        onContextMenuClick,
+        onClick,
+        rightItems = [],
+    } = props;
+
+    let contextViewMenu;
+    const onClickMenuItem = useCallback(
+        (e: React.MouseEvent, item: IMenuItem | undefined) => {
+            onContextMenuClick?.(e, item);
+            contextViewMenu?.dispose();
+        },
+        [contextMenu]
+    );
+    const renderContextMenu = () => (
+        <Menu onClick={onClickMenuItem} data={contextMenu} />
+    );
+    useEffect(() => {
+        if (contextMenu.length > 0) {
+            contextViewMenu = useContextMenu({
+                anchor: select(`#${ID_STATUS_BAR}`),
+                render: renderContextMenu,
+            });
+        }
+        return function cleanup() {
+            contextViewMenu?.dispose();
+        };
+    });
 
     const renderItems = (data: IStatusBarItem[]) => {
         return data
@@ -28,7 +60,7 @@ function StatusBar(props: IStatusBar & IStatusBarController) {
     };
 
     return (
-        <div className={statusBarClassName}>
+        <div className={statusBarClassName} id={ID_STATUS_BAR}>
             <div className={leftItemsClassName}>{renderItems(leftItems)}</div>
             <div className={rightItemsClassName}>{renderItems(rightItems)}</div>
         </div>

diff --git a/stories/extensions/test/index.tsx b/stories/extensions/test/index.tsx
@@ -2,9 +2,17 @@ import * as React from 'react';
 import {
     activityBarService,
     IActivityBarItem,
+    menuBarService,
     sidebarService,
+    statusBarService,
     settingsService,
 } from 'mo';
+import {
+    MENU_VIEW_ACTIVITYBAR,
+    MENU_VIEW_MENUBAR,
+    MENU_VIEW_SIDEBAR,
+    MENU_VIEW_STATUSBAR,
+} from 'mo/model/workbench/menuBar';
 import { IExtension } from 'mo/model/extension';
 
 import TestPane from './testPane';
@@ -35,8 +43,50 @@ export const ExtendTestPane: IExtension = {
             }
         });
 
-        settingsService.onChangeConfiguration((value) => {
-            console.log('onChangeConfiguration:', value);
+        settingsService.onChangeConfiguration(async (value) => {
+            settingsService.update(value);
+            const config = await settingsService.getConfiguration();
+            let workbench: any = config.workbench;
+            if (workbench?.activityBar) {
+                let hidden = workbench?.activityBar.hidden;
+                activityBarService.setState({
+                    ...activityBarService.getState(),
+                    hidden,
+                });
+                menuBarService.update(MENU_VIEW_ACTIVITYBAR, {
+                    icon: hidden ? '' : 'check',
+                });
+            }
+            if (workbench?.menuBar) {
+                let hidden = workbench?.menuBar.hidden;
+                menuBarService.setState({
+                    ...menuBarService.getState(),
+                    hidden,
+                });
+                menuBarService.update(MENU_VIEW_MENUBAR, {
+                    icon: hidden ? '' : 'check',
+                });
+            }
+            if (workbench?.sidebar) {
+                let hidden = workbench?.sidebar.hidden;
+                sidebarService.setState({
+                    ...sidebarService.getState(),
+                    hidden,
+                });
+                menuBarService.update(MENU_VIEW_SIDEBAR, {
+                    icon: hidden ? '' : 'check',
+                });
+            }
+            if (workbench?.statusBar) {
+                let hidden = workbench?.statusBar.hidden;
+                statusBarService.setState({
+                    ...statusBarService.getState(),
+                    hidden,
+                });
+                menuBarService.update(MENU_VIEW_STATUSBAR, {
+                    icon: hidden ? '' : 'check',
+                });
+            }
         });
     },
 };