fix: improve global contextMenu in activity bar (#200)

* fix: improve global contextMenu in activity bar

* fix: fix ci problem

* fix: remove useless code

Author: mortalYoung

src/common/dom.ts

@@ -1,6 +1,9 @@
 export type HTMLElementType = HTMLElement | null;
 export type TriggerEvent = 'click' | 'contextmenu' | 'hover';
-export type PlacementType = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * specify `rightBottom` means align to the bottom and keep in right
+ */
+export type PlacementType = 'top' | 'right' | 'bottom' | 'left' | 'rightBottom';
 export const select = document.querySelector.bind(document);
 export const selectAll = document.querySelectorAll.bind(document);
 
@@ -122,8 +125,10 @@ export function getPositionByPlacement(
         y = domRect.y + domRect.height;
     } else if (placement === 'left') {
         x = domRect.x - domRect.width;
+    } else if (placement === 'rightBottom') {
+        x = domRect.x + domRect.width;
+        y = domRect.y + domRect.height;
     }
-    console.log('getPositionByPlacement', x, y);
     return { x, y };
 }
 

src/components/dropdown/index.tsx

@@ -12,13 +12,16 @@ export interface IDropDownProps extends React.ComponentProps<'div'> {
     overlay: ReactNode;
     trigger?: TriggerEvent;
     placement?: PlacementType;
-    ref?: React.RefObject<any>;
 }
 
+export type DropDownRef = {
+    dispose: () => void;
+};
+
 const defaultDropDownClassName = prefixClaName('drop-down');
 
-export const DropDown = React.forwardRef(
-    (props: React.PropsWithChildren<IDropDownProps>, ref) => {
+export const DropDown = React.forwardRef<DropDownRef, IDropDownProps>(
+    (props, ref) => {
         const {
             className,
             overlay,

src/workbench/activityBar/activityBarItem.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { useCallback, useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { classNames } from 'mo/common/className';
 import { IActivityBarItem } from 'mo/model/workbench/activityBar';
-import { useContextMenu } from 'mo/components/contextMenu';
 import { IMenuItemProps, Menu } from 'mo/components/menu';
 import { IActivityBarController } from 'mo/controller/activityBar';
 
@@ -13,6 +12,8 @@ import {
     itemCheckedClassName,
     itemDisabledClassName,
 } from './base';
+import { DropDown } from 'mo/components';
+import { DropDownRef } from 'mo/components/dropdown';
 
 export function ActivityBarItem(
     props: IActivityBarItem & IActivityBarController
@@ -30,53 +31,38 @@ export function ActivityBarItem(
         className,
         onContextMenuClick,
     } = props;
-    let content: React.ReactNode = '';
-    if (render) {
-        content = render();
-    }
 
-    let contextViewMenu;
-    const currentElem = useRef<HTMLLIElement>(null);
+    const contextMenuRef = useRef<DropDownRef>(null);
 
-    const onClickMenuItem = useCallback(
-        (e: React.MouseEvent, item: IMenuItemProps | undefined) => {
-            onContextMenuClick?.(e, item);
-            contextViewMenu?.dispose();
-        },
-        [contextMenu]
-    );
-    const renderContextMenu = () => (
-        <Menu onClick={onClickMenuItem} data={contextMenu} />
-    );
-
-    useEffect(() => {
-        if (contextMenu.length > 0) {
-            contextViewMenu = useContextMenu({
-                anchor: currentElem.current,
-                render: renderContextMenu,
-            });
-        }
-        return function cleanup() {
-            contextViewMenu?.dispose();
-        };
-    });
+    const onClickMenuItem = (
+        e: React.MouseEvent,
+        item: IMenuItemProps | undefined
+    ) => {
+        onContextMenuClick?.(e, item);
+        contextMenuRef.current?.dispose();
+    };
 
     const onClickItem = function (event) {
         if (onClick) {
             onClick(props.id, props);
         }
-        if (contextMenu.length > 0 && contextViewMenu) {
-            contextViewMenu.show({
-                x: event.clientX,
-                y: event.clientY,
-            });
-        }
     };
 
+    const content = (
+        <a
+            title={title}
+            className={classNames(labelClassName, 'codicon', iconName)}
+        >
+            {render?.() || null}
+        </a>
+    );
+    const overlay = <Menu onClick={onClickMenuItem} data={contextMenu} />;
+
+    const hasContextMenu = contextMenu.length > 0;
+
     return (
         <li
             id={id}
-            ref={currentElem}
             onClick={onClickItem}
             className={classNames(
                 className,
@@ -86,12 +72,18 @@ export function ActivityBarItem(
             )}
             data-id={data.id}
         >
-            <a
-                title={title}
-                className={classNames(labelClassName, 'codicon', iconName)}
-            >
-                {content}
-            </a>
+            {hasContextMenu ? (
+                <DropDown
+                    ref={contextMenuRef}
+                    trigger="click"
+                    placement="rightBottom"
+                    overlay={overlay}
+                >
+                    {content}
+                </DropDown>
+            ) : (
+                content
+            )}
             {checked ? <div className={indicatorClassName}></div> : null}
         </li>
     );

src/workbench/editor/action.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { memo, useCallback } from 'react';
 import { Icon } from 'mo/components/icon';
 import { Menu } from 'mo/components/menu';
-import { DropDown } from 'mo/components/dropdown';
+import { DropDown, DropDownRef } from 'mo/components/dropdown';
 import { IEditorAction } from 'mo/model';
 import { groupActionsClassName, groupActionsItemClassName } from './base';
 import { IEditorController } from 'mo/controller/editor';
@@ -19,7 +19,7 @@ function EditorAction(props: IEditorActionProps & IEditorController) {
         onSplitEditorRight,
     } = props;
 
-    const childRef = React.useRef();
+    const childRef = React.useRef<DropDownRef>(null);
 
     const handleOnMenuClick = (e: React.MouseEvent, item) => {
         onClickContextMenu?.(e, item);

src/workbench/menuBar/menuBar.tsx

@@ -4,15 +4,15 @@ import { IMenuBar } from 'mo/model/workbench/menuBar';
 import { IMenuBarController } from 'mo/controller/menuBar';
 
 import { Menu } from 'mo/components/menu';
-import { DropDown } from 'mo/components/dropdown';
+import { DropDown, DropDownRef } from 'mo/components/dropdown';
 import { Icon } from 'mo/components/icon';
 
 const defaultClassName = prefixClaName('menuBar');
 const actionClassName = getBEMElement(defaultClassName, 'action');
 
 export function MenuBar(props: IMenuBar & IMenuBarController) {
     const { data, onClick } = props;
-    const childRef = React.useRef();
+    const childRef = React.useRef<DropDownRef>(null);
     const handleClick = (e: React.MouseEvent, item) => {
         onClick?.(e, item);
         (childRef.current as any)!.dispose();