From d1159e40dfff35e1945e1bb8c5b1cc8b79c9e341 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Thu, 22 Apr 2021 01:53:21 +0100
Subject: [PATCH] Update context menu component

---
 src/components/ContextMenu/index.tsx | 68 +++++++++++++++++++++++++++-
 src/components/ContextMenu/styles.ts | 26 ++++++++++-
 2 files changed, 90 insertions(+), 4 deletions(-)

diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx
index d1b7093..02b75f0 100644
--- a/src/components/ContextMenu/index.tsx
+++ b/src/components/ContextMenu/index.tsx
@@ -1,7 +1,71 @@
+import { useEffect, useRef, useState } from 'react';
 import { Wrapper } from './styles';
+import { Text } from '..';
 
-const ContextMenu = () => {
-  return <Wrapper></Wrapper>;
+type ContextMenuProps = {
+  className?: string;
+  items: Array<{ label: string; action: () => void }>;
+  component: string;
+};
+
+const ContextMenu = ({ items, component, className }: ContextMenuProps) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const openMenu = () => setOpen(true);
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    (document.querySelector(`#${component}`) as HTMLElement)?.addEventListener(
+      'mouseenter',
+      openMenu
+    );
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      (document.querySelector(
+        `#${component}`
+      ) as HTMLElement)?.removeEventListener('mouseenter', openMenu);
+    };
+
+    // eslint-disable-next-line
+  }, [ref]);
+
+  return (
+    <Wrapper
+      ref={ref}
+      className={className}
+      top={
+        (document.querySelector(`#${component}`) as HTMLElement)?.offsetTop + 30
+      }
+      left={
+        (document.querySelector(`#${component}`) as HTMLElement)?.offsetLeft +
+        10
+      }
+    >
+      {open && (
+        <ul>
+          {items.map(({ label, action }) => (
+            // eslint-disable-next-line
+            <li
+              onClick={() => {
+                setOpen(false);
+                action();
+              }}
+              key={label}
+            >
+              <Text variant='caption'>{label}</Text>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Wrapper>
+  );
 };
 
 export default ContextMenu;
diff --git a/src/components/ContextMenu/styles.ts b/src/components/ContextMenu/styles.ts
index 81d027f..429052d 100644
--- a/src/components/ContextMenu/styles.ts
+++ b/src/components/ContextMenu/styles.ts
@@ -1,3 +1,25 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
-export const Wrapper = styled.div``;
+type WrapperProps = {
+  top: number;
+  left: number;
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  ul {
+    position: fixed;
+    top: ${({ top }) => top}px;
+    left: ${({ left }) => left}px;
+    background: #1f1b1b;
+    display: grid;
+    grid-template-columns: auto;
+    row-gap: 0.5rem;
+    color: ${({ theme }) => theme.colors.white.main};
+    border-radius: 3px;
+    padding: 5px 20px 5px 10px;
+
+    li {
+      cursor: pointer;
+    }
+  }
+`;