DTStack · wewoor · Jun 28, 2021 · Jun 28, 2021
diff --git a/src/controller/activityBar.ts b/src/controller/activityBar.ts
@@ -95,14 +95,17 @@ export class ActivityBarController
             // activityBar contextMenu
             case CONTEXT_MENU_MENU: {
                 this.menuBarController.updateMenuBar!();
+                this.activityBarService.toggleContextMenuCheckStatus(
+                    contextMenuId
+                );
                 break;
             }
-            case CONTEXT_MENU_EXPLORER: {
-                this.activityBarService.toggleBar(contextMenuId);
-                break;
-            }
+            case CONTEXT_MENU_EXPLORER:
             case CONTEXT_MENU_SEARCH: {
                 this.activityBarService.toggleBar(contextMenuId);
+                this.activityBarService.toggleContextMenuCheckStatus(
+                    contextMenuId
+                );
                 break;
             }
             case CONTEXT_MENU_HIDE: {

diff --git a/src/model/workbench/activityBar.ts b/src/model/workbench/activityBar.ts
@@ -24,6 +24,7 @@ export interface IActivityBarItem {
     id: string;
     name?: ReactNode;
     title?: string;
+    hidden?: boolean;
     data?: any;
     iconName?: string;
     checked?: boolean;

diff --git a/src/services/workbench/activityBarService.ts b/src/services/workbench/activityBarService.ts
@@ -7,10 +7,10 @@ import {
     IActivityBar,
     IActivityBarItem,
 } from 'mo/model/workbench/activityBar';
-import { builtInExplorerActivityItem } from 'mo/model/workbench/explorer/explorer';
-import { builtInSearchActivityItem } from 'mo/model/workbench/search';
 import { searchById } from '../helper';
 import { IMenuItemProps } from 'mo/components/menu';
+import logger from 'mo/common/logger';
+import { ISidebarService, SidebarService } from './sidebarService';
 
 export interface IActivityBarService extends Component<IActivityBar> {
     reset(): void;
@@ -27,8 +27,8 @@ export interface IActivityBarService extends Component<IActivityBar> {
      */
     setActive(id?: string): void;
     remove(id: string): void;
-    toggleBar(id?: string): void;
-    updateContextMenuCheckStatus(id?: string): void;
+    toggleBar(id: string): void;
+    toggleContextMenuCheckStatus(id: string): void;
     addContextMenu(contextMenu: IMenuItemProps | IMenuItemProps[]): void;
     removeContextMenu(id: string): void;
     /**
@@ -49,10 +49,12 @@ export class ActivityBarService
     extends Component<IActivityBar>
     implements IActivityBarService {
     protected state: IActivityBar;
+    private sidebarService: ISidebarService;
 
     constructor() {
         super();
         this.state = container.resolve(ActivityBarModel);
+        this.sidebarService = container.resolve(SidebarService);
     }
     public setActive(id?: string) {
         this.setState({
@@ -98,40 +100,37 @@ export class ActivityBarService
     }
 
     public toggleBar(id: string) {
-        const { data } = this.state;
-        const next = [...data!];
+        const { data = [], selected } = this.state;
+        const next = data.concat();
         const index = next.findIndex(searchById(id));
-        if (index > -1) {
-            this.remove(id);
+        const target = next[index];
+        if (target) {
+            target.hidden = !target.hidden;
+            if (id === selected) {
+                const nextIndex = (index + 1) % next.length;
+                this.setActive(next[nextIndex].id);
+                this.sidebarService.setActive(next[nextIndex].id);
+            }
+            this.setState({
+                data: next,
+            });
         } else {
-            // TODO 这个existBar 逻辑应该有问题
-            const existBar = [
-                builtInExplorerActivityItem(),
-                builtInSearchActivityItem(),
-            ].find(searchById(id));
-            if (!existBar) return;
-            this.addBar(existBar);
+            logger.error('Toggle activity bar failed, please check your id');
         }
-        this.updateContextMenuCheckStatus(id);
     }
 
-    public updateContextMenuCheckStatus(id: string) {
-        const { contextMenu, data } = this.state;
-        const existBar = data?.find(searchById(id));
-        const newActions = contextMenu?.map((item) => {
-            return {
-                ...item,
-                icon:
-                    item.id === id
-                        ? Boolean(existBar)
-                            ? 'check'
-                            : ''
-                        : item.icon,
-            };
-        });
-        this.setState({
-            contextMenu: newActions,
-        });
+    public toggleContextMenuCheckStatus(id: string) {
+        const { contextMenu = [] } = this.state;
+        const newActions = contextMenu.concat();
+        const target = newActions.find(searchById(id));
+        if (target) {
+            target.icon = target.icon === 'check' ? '' : 'check';
+            this.setState({
+                contextMenu: newActions,
+            });
+        } else {
+            logger.error('toggle context menu failed, please check your id');
+        }
     }
 
     public addContextMenu(contextMenu: IMenuItemProps | IMenuItemProps[]) {

diff --git a/src/workbench/activityBar/activityBar.tsx b/src/workbench/activityBar/activityBar.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { useCallback, useEffect } from 'react';
-import { useContextMenu } from 'mo/components/contextMenu';
-import { select } from 'mo/common/dom';
+import { useCallback } from 'react';
 import { IMenuItemProps, Menu } from 'mo/components/menu';
 import { ID_ACTIVITY_BAR } from 'mo/common/id';
 import { IActivityBar, IActivityBarItem } from 'mo/model/workbench/activityBar';
@@ -14,8 +12,10 @@ import {
     containerClassName,
     defaultClassName,
     globalItemsClassName,
+    itemClassName,
     normalItemsClassName,
 } from './base';
+import { useContextView } from 'mo/components';
 
 export function ActivityBar(props: IActivityBar & IActivityBarController) {
     const {
@@ -37,14 +37,12 @@ export function ActivityBar(props: IActivityBar & IActivityBarController) {
         }
     };
 
-    const normalBarItems =
-        data?.filter(
-            (item: IActivityBarItem) => !item.type || item.type === 'normal'
-        ) || [];
-    const globalBarItems =
-        data?.filter(
-            (item: IActivityBarItem) => item.type && item.type === 'global'
-        ) || [];
+    const normalBarItems = data.filter(
+        (item) => item.type !== 'global' && !item.hidden
+    );
+    const globalBarItems = data.filter(
+        (item) => item.type === 'global' && !item.hidden
+    );
 
     const renderItems = (item: IActivityBarItem, index: number) => {
         return (
@@ -59,32 +57,66 @@ export function ActivityBar(props: IActivityBar & IActivityBarController) {
         );
     };
 
-    let contextViewMenu;
+    const renderContextMenu = () => (
+        <Menu onClick={onClickMenuItem} data={contextMenu} />
+    );
+
+    const contextView = useContextView({
+        render: renderContextMenu,
+    });
+
     const onClickMenuItem = useCallback(
         (e: React.MouseEvent, item: IMenuItemProps | undefined) => {
             onContextMenuClick?.(e, item);
-            contextViewMenu?.dispose();
+            contextView?.hide();
         },
         [contextMenu]
     );
-    const renderContextMenu = () => (
-        <Menu onClick={onClickMenuItem} data={contextMenu} />
-    );
 
-    useEffect(() => {
-        if (contextMenu.length > 0) {
-            contextViewMenu = useContextMenu({
-                anchor: select(`#${ID_ACTIVITY_BAR}`),
-                render: renderContextMenu,
-            });
+    const handleRightClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const doms = document.elementsFromPoint(e.pageX, e.pageY);
+        const itemDom = doms.find((dom) =>
+            dom.classList.contains(itemClassName)
+        );
+        if (itemDom) {
+            const rect = itemDom.getBoundingClientRect();
+            const extraContextMenu = contextMenu.concat();
+            const targetContextMenu = contextMenu.find(
+                (menu) => menu.id === itemDom?.id
+            );
+            targetContextMenu &&
+                extraContextMenu.unshift(
+                    ...([
+                        {
+                            id: itemDom.id,
+                            icon: 'check',
+                            name: targetContextMenu.name,
+                        },
+                        {
+                            type: 'divider',
+                        },
+                    ] as IMenuItemProps[])
+                );
+            contextView.show(
+                {
+                    x: rect.x + rect.width / 2,
+                    y: rect.y + rect.height,
+                },
+                () => <Menu onClick={onClickMenuItem} data={extraContextMenu} />
+            );
+        } else {
+            contextView.show({ x: e.pageX, y: e.pageY });
         }
-        return function cleanup() {
-            contextViewMenu?.dispose();
-        };
-    });
+    };
 
     return (
-        <div className={defaultClassName} id={ID_ACTIVITY_BAR}>
+        <div
+            className={defaultClassName}
+            onContextMenu={handleRightClick}
+            id={ID_ACTIVITY_BAR}
+        >
             <div className={containerClassName}>
                 <Scrollable className={normalItemsClassName}>
                     <ul>{normalBarItems.map(renderItems)}</ul>