fix: the style of the context menu of ActivityBarItem (#613)

* fix: fix the style of the context menu of ActivityBarItem

* test: add unit test

Co-authored-by: jiming <jiming@dtstack.com>

Author: kiwiwong

src/common/__tests__/dom.test.ts

@@ -0,0 +1,37 @@
+import { getPositionByPlacement } from '../dom';
+
+describe('Test functions in dom.ts', () => {
+    test('The getPositionByPlacement function', () => {
+        const domRect = {
+            x: 10,
+            y: 10,
+            width: 10,
+            height: 10,
+            top: 10,
+            right: 10,
+            bottom: 10,
+            left: 10,
+        } as DOMRect;
+        let position;
+
+        position = getPositionByPlacement('top', domRect);
+        expect(typeof position.x).toBe('number');
+        expect(typeof position.y).toBe('number');
+
+        position = getPositionByPlacement('right', domRect);
+        expect(typeof position.x).toBe('number');
+        expect(typeof position.y).toBe('number');
+
+        position = getPositionByPlacement('bottom', domRect);
+        expect(typeof position.x).toBe('number');
+        expect(typeof position.y).toBe('number');
+
+        position = getPositionByPlacement('left', domRect);
+        expect(typeof position.x).toBe('number');
+        expect(typeof position.y).toBe('number');
+
+        position = getPositionByPlacement('rightBottom', domRect);
+        expect(typeof position.x).toBe('number');
+        expect(typeof position.y).toBe('number');
+    });
+});

src/provider/__tests__/__snapshots__/molecule.test.tsx.snap

@@ -734,15 +734,10 @@ dmlldzJfOV8xNjM4ODQ4MDI1NDI2MTE4Ml8zOF9bMF0TNSl1AAAAAElFTkSuQmCC"
                   id="global.menu.settings"
                   onClick={[Function]}
                 >
-                  <div
-                    className="mo-drop-down mo-drop-down--rightBottom"
-                    onClick={[Function]}
-                  >
-                    <span
-                      className="mo-activityBar__label codicon codicon-settings-gear"
-                      title="Settings"
-                    />
-                  </div>
+                  <span
+                    className="mo-activityBar__label codicon codicon-settings-gear"
+                    title="Settings"
+                  />
                 </li>
               </ul>
             </div>

src/workbench/activityBar/__tests__/activityBarItem.test.tsx

@@ -8,8 +8,8 @@ import {
     itemCheckedClassName,
     itemDisabledClassName,
     labelClassName,
+    itemClassName,
 } from '../base';
-import { defaultDropDownClassName } from 'mo/components/dropdown';
 import { keybindingClassName } from 'mo/components/menu/base';
 import { KeybindingHelper } from 'mo/services/keybinding';
 import { KeyCode } from 'mo/monaco';
@@ -105,9 +105,7 @@ describe('The ActivityBar Item Component', () => {
             <ActivityBarItem id="test" contextMenu={contexts} icon="type" />
         );
 
-        fireEvent.click(
-            container.querySelector(`.${defaultDropDownClassName}`)!
-        );
+        fireEvent.click(container.querySelector(`.${itemClassName}`)!);
 
         const menus = getByRole('menu');
         expect(menus).toBeInTheDocument();
@@ -144,9 +142,7 @@ describe('The ActivityBar Item Component', () => {
         const { container, getByRole } = render(
             <ActivityBarItem id="test" contextMenu={contexts} icon="type" />
         );
-        fireEvent.click(
-            container.querySelector(`.${defaultDropDownClassName}`)!
-        );
+        fireEvent.click(container.querySelector(`.${itemClassName}`)!);
 
         const menus = getByRole('menu');
         // the first menu have keybinding
@@ -187,9 +183,7 @@ describe('The ActivityBar Item Component', () => {
                 onContextMenuClick={mockFn}
             />
         );
-        fireEvent.click(
-            container.querySelector(`.${defaultDropDownClassName}`)!
-        );
+        fireEvent.click(container.querySelector(`.${itemClassName}`)!);
 
         const menus = getByRole('menu');
         fireEvent.click(menus.firstElementChild!);

src/workbench/activityBar/activityBarItem.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useRef } from 'react';
 import { classNames } from 'mo/common/className';
 import { IActivityBarItem } from 'mo/model/workbench/activityBar';
 import { IMenuItemProps, Menu } from 'mo/components/menu';
@@ -12,8 +11,7 @@ import {
     itemCheckedClassName,
     itemDisabledClassName,
 } from './base';
-import { DropDown, Icon } from 'mo/components';
-import { DropDownRef } from 'mo/components/dropdown';
+import { Icon, useContextView } from 'mo/components';
 import { KeybindingHelper } from 'mo/services/keybinding';
 
 export function ActivityBarItem(
@@ -33,29 +31,7 @@ export function ActivityBarItem(
         onContextMenuClick,
     } = props;
 
-    const contextMenuRef = useRef<DropDownRef>(null);
-
-    const onClickMenuItem = (
-        e: React.MouseEvent,
-        item: IMenuItemProps | undefined
-    ) => {
-        onContextMenuClick?.(e, item);
-        contextMenuRef.current?.dispose();
-    };
-
-    const onClickItem = function (event) {
-        if (onClick) {
-            onClick(props.id, props);
-        }
-    };
-
-    const content = (
-        <Icon type={icon} className={labelClassName} title={title}>
-            {render?.() || null}
-        </Icon>
-    );
-
-    const overlay = (
+    const renderContextMenu = () => (
         <Menu
             onClick={onClickMenuItem}
             role="menu"
@@ -75,7 +51,32 @@ export function ActivityBarItem(
         />
     );
 
-    const hasContextMenu = contextMenu.length > 0;
+    const contextView = useContextView({
+        render: renderContextMenu,
+    });
+
+    const onClickMenuItem = (
+        e: React.MouseEvent,
+        item: IMenuItemProps | undefined
+    ) => {
+        onContextMenuClick?.(e, item);
+        contextView?.hide();
+    };
+
+    const onClickItem = function (event) {
+        if (onClick) {
+            onClick(props.id, props);
+        }
+        if (contextMenu.length > 0) {
+            contextView.show({ x: event.pageX, y: event.pageY });
+        }
+    };
+
+    const content = (
+        <Icon type={icon} className={labelClassName} title={title}>
+            {render?.() || null}
+        </Icon>
+    );
 
     return (
         <li
@@ -89,18 +90,7 @@ export function ActivityBarItem(
             )}
             data-id={data.id}
         >
-            {hasContextMenu ? (
-                <DropDown
-                    ref={contextMenuRef}
-                    trigger="click"
-                    placement="rightBottom"
-                    overlay={overlay}
-                >
-                    {content}
-                </DropDown>
-            ) : (
-                content
-            )}
+            {content}
             {checked ? <div className={indicatorClassName}></div> : null}
         </li>
     );