Refactor ContextMenu to use styled components

Author: devklick

src/components/ContextMenu/ContextMenu.tsx

@@ -2,7 +2,7 @@ import { useRef } from "react";
 import MenuItems, { MenuItemProps } from "../MenuItems";
 import useDetectMouseDownOutside from "../../hooks/useDetectMouseDownOutside";
 
-import "./ContextMenu.scss";
+import { StyledContextMenu } from "./styles";
 
 interface ContextMenuProps {
   items: Array<MenuItemProps>;
@@ -16,20 +16,13 @@ function ContextMenu({ items, position, close }: ContextMenuProps) {
   useDetectMouseDownOutside({ elementRef, onMouseDown: close });
 
   return (
-    <div
-      className="context-menu"
-      ref={elementRef}
-      style={{
-        left: position.x,
-        top: position.y,
-      }}
-    >
+    <StyledContextMenu position={position} ref={elementRef}>
       <MenuItems
         items={items}
         position={{ x: 0, y: 0 }}
         positionType="relative"
       />
-    </div>
+    </StyledContextMenu>
   );
 }
 

src/components/ContextMenu/indext.ts src/components/ContextMenu/index.tssrc/components/ContextMenu/indext.ts renamed to src/components/ContextMenu/index.ts

@@ -1,9 +1,14 @@
-.context-menu {
+import styled from "@emotion/styled";
+import { Position } from "../../hooks/useDragToResize";
+
+export const StyledContextMenu = styled.div<{ position: Position }>`
   position: fixed;
   // Kind of hacky - we need the context menu to always
   // display on top of everything else. We could use the zIndex that's
   // stored in global state, but this is fine for now.
   // It will hit an issue in a very rare case, when window zindexes have
   // been switched enough and the bordered app hits or exceeds this number.
   z-index: 9999;
-}
+  left: ${(props) => props.position.x}px;
+  top: ${(props) => props.position.y}px;
+`;