feat: add contextMenu for activityBar

Author: wewoor

src/components/contextMenu/index.tsx

@@ -15,7 +15,9 @@ export function useContextMenu(props: IContextMenu) {
         return;
     }
 
-    const contextView = useContextView();
+    const contextView = useContextView({
+        render
+    });
 
     const onContextMenu = (e: MouseEvent) => {
         e.preventDefault();
@@ -35,5 +37,5 @@ export function useContextMenu(props: IContextMenu) {
         anchor.removeEventListener('contextmenu', onContextMenu);
     };
 
-    return { contextView, dispose };
+    return { ...contextView, dispose };
 }

src/components/contextview/style.scss

@@ -8,6 +8,11 @@ $name: 'context-view';
     width: initial;
     z-index: 2500;
 
+    .context-view-content {
+        box-shadow: rgb(0, 0, 0) 0 2px 4px;
+        overflow: hidden;
+    }
+
     .#{$name}-block {
         bottom: 0;
         height: 100%;

src/model/workbench/activityBar.ts

@@ -3,6 +3,7 @@ import 'reflect-metadata';
 import { EventBus } from 'mo/common/event';
 import { observable } from 'mo/common/observable';
 import { container, inject, injectable } from 'tsyringe';
+import { IMenuItem } from 'mo/components/menu';
 
 /**
  * The activity bar event definition
@@ -21,12 +22,13 @@ export enum ActivityBarEvent {
 }
 
 export interface IActivityBarItem {
-    id?: string;
+    id: string;
     name?: string;
     data?: any;
     iconName?: string;
     checked?: boolean;
     type?: 'normal' | 'global';
+    contextMenu?: IMenuItem[];
     render?: () => React.ReactNode | JSX.Element;
     onClick?: (event: React.MouseEvent, item: IActivityBarItem) => void;
 }

src/services/workbench/activityBarService.ts

@@ -15,8 +15,8 @@ export interface IActivityBarService extends Component<IActivityBar> {
      * Add click event listener
      * @param callback
      */
-    onClick(callback: Function);
-    onSelect(callback: Function);
+    onClick(callback: (key: React.MouseEvent) => void);
+    onSelect(callback: (key: React.MouseEvent, item: IActivityBarItem) => void);
 }
 
 @singleton()
@@ -60,7 +60,7 @@ export class ActivityBarService
         this.subscribe(ActivityBarEvent.OnClick, callback);
     }
 
-    public onSelect(callback: Function) {
+    public onSelect(callback: (key: React.MouseEvent, item: IActivityBarItem) => void) {
         this.subscribe(ActivityBarEvent.Selected, (args) => {
             const key = args[0];
             const item: IActivityBarItem = args[1];

src/workbench/activityBar/activityBar.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { prefixClaName } from 'mo/common/className';
 import { ID_ACTIVITY_BAR } from 'mo/common/id';
 import { IActivityBar, IActivityBarItem } from 'mo/model/workbench/activityBar';
-
 import ActivityBarItem from './activityBarItem';
 
 export function ActivityBar(props: IActivityBar) {
@@ -14,7 +13,6 @@ export function ActivityBar(props: IActivityBar) {
     }
 
     const onClickBar = (e: React.MouseEvent, item: IActivityBarItem) => {
-        console.log('ActivityBar onClick:', e);
         if (onClick) onClick(e, item);
         if (onSelect) {
             onSelect(item.id || '', item);
@@ -31,6 +29,7 @@ export function ActivityBar(props: IActivityBar) {
         ) || [];
 
     const renderItems = (item: IActivityBarItem, index: number) => {
+       
         return (
             <ActivityBarItem
                 key={item.id}

src/workbench/activityBar/activityBarItem.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 
 import { prefixClaName, classNames } from 'mo/common/className';
 import { ID_ACTIVITY_BAR } from 'mo/common/id';
 import { IActivityBarItem } from 'mo/model/workbench/activityBar';
+import { useContextMenu } from 'mo/components/contextMenu';
+import { select } from 'mo/common/dom';
+import { Menu } from 'mo/components/menu';
 
 function ActivityBarItem(props: IActivityBarItem) {
     const {
@@ -12,21 +15,45 @@ function ActivityBarItem(props: IActivityBarItem) {
         data = {},
         render,
         iconName = '',
+        id,
         onClick,
+        contextMenu = [],
     } = props;
     let content: React.ReactNode = '';
     if (render) {
         content = render();
     }
 
+    const renderContextMenu = () => <Menu data={contextMenu}/>;
+    let contextViewMenu;
+
+    useEffect(() => {
+        if (contextMenu.length > 0) {
+            contextViewMenu = useContextMenu({
+                anchor: select(`#${id}`),
+                render: renderContextMenu
+            });
+        }
+        return function cleanup() {
+            contextViewMenu?.dispose();
+        };
+    });
+
     const onClickItem = function (event) {
         if (onClick) {
             onClick(event, props);
         }
+        if (contextMenu.length > 0 && contextViewMenu) {
+            contextViewMenu.show({
+                x: event.clientX,
+                y: event.clientY,
+            });
+        }
     };
 
     return (
         <li
+            id={id}
             onClick={onClickItem}
             className={classNames(
                 prefixClaName('item', ID_ACTIVITY_BAR),