fix: prevent the contextmenu event of Notification (#670)

Author: kiwiwong

src/controller/notification.tsx

@@ -27,6 +27,7 @@ export interface INotificationController extends Partial<Controller> {
      * Toggle the Notifications visibility
      */
     toggleNotifications(): void;
+    onContextMenu?: (e: MouseEvent) => void;
 }
 
 @singleton()

src/workbench/notification/__tests__/notificationPane.test.tsx

@@ -101,4 +101,23 @@ describe('Test NotificationPane Component', () => {
             fireEvent.click(testDom!);
         });
     });
+
+    test('Listen to the contextmenu event', () => {
+        expectFnCalled((fn) => {
+            const { getByText } = render(
+                <NotificationPane
+                    id="test"
+                    onContextMenu={fn}
+                    data={[
+                        {
+                            id: 'test',
+                            value: 'Test Notification',
+                        },
+                    ]}
+                />
+            );
+            const testDom = getByText('Test Notification');
+            fireEvent.contextMenu(testDom);
+        });
+    });
 });

src/workbench/notification/notificationPane/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useRef, useEffect } from 'react';
 import { INotification } from 'mo/model/notification';
 import { INotificationController } from 'mo/controller/notification';
 import {
@@ -35,19 +35,37 @@ export function NotificationPane(
         showNotifications,
         onActionBarClick,
         onCloseNotification,
+        onContextMenu,
     } = props;
     const hasNotifications = data.length > 0;
     const title = hasNotifications
         ? localize('notification.title', 'notifications')
         : localize('notification.title.no', 'no new notifications');
     const display = showNotifications ? 'block' : 'none';
+    const wrapper = useRef<HTMLDivElement>(null);
+
+    // Prevent the contextmenu event of the upper element from being triggered by mistake.
+    useEffect(() => {
+        const handleRightClick = function (e: MouseEvent) {
+            e.stopPropagation();
+            onContextMenu?.(e);
+        };
+        wrapper.current?.addEventListener('contextmenu', handleRightClick);
+        return () => {
+            wrapper.current?.removeEventListener(
+                'contextmenu',
+                handleRightClick
+            );
+        };
+    }, [onContextMenu]);
 
     return (
         <div
             className={classNames(
                 defaultNotificationClassName,
                 shadowClassName
             )}
+            ref={wrapper}
             style={{ display }}
         >
             <header className={notificationHeaderClassName}>