Merged PR 171: Refactor the multiple context menus into a single component + Fix eslint

Refactor the multiple context menus into a single component + Fix eslint

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -3,10 +3,6 @@ import { FixedSizeList as List } from 'react-window';
 import { Properties } from '../ContainerProperties/ContainerProperties';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { GetDepth, MakeIterator } from '../../utils/itertools';
-import { Menu } from '../Menu/Menu';
-import { MenuItem } from '../Menu/MenuItem';
-import { UseMouseEvents } from './MouseEventHandlers';
-import { IPoint } from '../../Interfaces/IPoint';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { PropertyType } from '../../Enums/PropertyType';
 
@@ -22,29 +18,9 @@ interface IElementsSidebarProps {
     type?: PropertyType
   ) => void
   selectContainer: (containerId: string) => void
-  deleteContainer: (containerid: string) => void
 }
 
 export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
-  // States
-  const [isContextMenuOpen, setIsContextMenuOpen] = React.useState<boolean>(false);
-  const [onClickContainerId, setOnClickContainerId] = React.useState<string>('');
-  const [contextMenuPosition, setContextMenuPosition] = React.useState<IPoint>({
-    x: 0,
-    y: 0
-  });
-
-  const elementRef = React.useRef<HTMLDivElement>(null);
-
-  // Event listeners
-  UseMouseEvents(
-    isContextMenuOpen,
-    elementRef,
-    setIsContextMenuOpen,
-    setOnClickContainerId,
-    setContextMenuPosition
-  );
-
   // Render
   let isOpenClasses = '-right-64';
   if (props.isOpen) {
@@ -90,7 +66,7 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
       className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}
     >
       <div className="bg-slate-100 font-bold sidebar-title">Elements</div>
-      <div ref={elementRef} className="h-96 text-gray-800">
+      <div className="h-96 text-gray-800">
         <List
           className="List divide-y divide-black"
           itemCount={containers.length}
@@ -101,20 +77,6 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
           {Row}
         </List>
       </div>
-      <Menu
-        className="transition-opacity rounded bg-slate-200 py-1 drop-shadow-xl"
-        x={contextMenuPosition.x}
-        y={contextMenuPosition.y}
-        isOpen={isContextMenuOpen}
-      >
-        <MenuItem
-          className="contextmenu-item"
-          text="Delete"
-          onClick={() => {
-            setIsContextMenuOpen(false);
-            props.deleteContainer(onClickContainerId);
-          } } />
-      </Menu>
       <Properties
         properties={props.selectedContainer?.properties}
         symbols={props.symbols}

src/Components/ElementsSidebar/MouseEventHandlers.ts

@@ -1,84 +0,0 @@
-import React, { RefObject, Dispatch, SetStateAction, useEffect } from 'react';
-import { IPoint } from '../../Interfaces/IPoint';
-
-export function UseMouseEvents(
-  isContextMenuOpen: boolean,
-  elementRef: RefObject<HTMLDivElement>,
-  setIsContextMenuOpen: Dispatch<SetStateAction<boolean>>,
-  setOnClickContainerId: Dispatch<SetStateAction<string>>,
-  setContextMenuPosition: Dispatch<SetStateAction<IPoint>>
-): void {
-  useEffect(() => {
-    function OnContextMenu(event: MouseEvent): void {
-      return HandleRightClick(
-        event,
-        setIsContextMenuOpen,
-        setOnClickContainerId,
-        setContextMenuPosition
-      );
-    }
-
-    function OnLeftClick(): void {
-      return HandleLeftClick(
-        isContextMenuOpen,
-        setIsContextMenuOpen,
-        setOnClickContainerId
-      );
-    }
-
-    elementRef.current?.addEventListener(
-      'contextmenu',
-      OnContextMenu
-    );
-
-    window.addEventListener(
-      'click',
-      OnLeftClick
-    );
-
-    return () => {
-      elementRef.current?.removeEventListener(
-        'contextmenu',
-        OnContextMenu
-      );
-
-      window.removeEventListener(
-        'click',
-        OnLeftClick
-      );
-    };
-  });
-}
-
-export function HandleRightClick(
-  event: MouseEvent,
-  setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,
-  setOnClickContainerId: React.Dispatch<React.SetStateAction<string>>,
-  setContextMenuPosition: React.Dispatch<React.SetStateAction<IPoint>>
-): void {
-  event.preventDefault();
-
-  if (!(event.target instanceof HTMLButtonElement)) {
-    setIsContextMenuOpen(false);
-    setOnClickContainerId('');
-    return;
-  }
-
-  const contextMenuPosition: IPoint = { x: event.pageX, y: event.pageY };
-  setIsContextMenuOpen(true);
-  setOnClickContainerId(event.target.id);
-  setContextMenuPosition(contextMenuPosition);
-}
-
-export function HandleLeftClick(
-  isContextMenuOpen: boolean,
-  setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,
-  setOnClickContainerId: React.Dispatch<React.SetStateAction<string>>
-): void {
-  if (!isContextMenuOpen) {
-    return;
-  }
-
-  setIsContextMenuOpen(false);
-  setOnClickContainerId('');
-}