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}