From 8e992104ceb66cdae347cb2ae0a306ba25937a23 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 2 Feb 2022 16:41:44 +1100
Subject: [PATCH] TableRow: remove unnecessary wrapping component ContextMenu
 (#630)

---
 src/components/Table/TableRow.tsx | 30 ++++++++++--------------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 631886b6..c4161fc9 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -5,31 +5,21 @@ import { Row, RowRendererProps } from "react-data-grid";
 import OutOfOrderIndicator from "./OutOfOrderIndicator";
 
 export default function TableRow(props: RowRendererProps<any>) {
+  const { contextMenuRef }: any = useProjectContext();
+  const handleContextMenu = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    e.preventDefault();
+    if (contextMenuRef?.current) contextMenuRef?.current?.setAnchorEl(e.target);
+  };
+
   if (props.row._rowy_outOfOrder)
     return (
       <Fragment key={props.row.id}>
         <OutOfOrderIndicator top={props.top} height={props.height} />
-        <ContextMenu>
-          <Row {...props} />
-        </ContextMenu>
+        <Row {...props} onContextMenu={handleContextMenu} />
       </Fragment>
     );
 
-  return (
-    <ContextMenu>
-      <Row {...props} />
-    </ContextMenu>
-  );
+  return <Row {...props} onContextMenu={handleContextMenu} />;
 }
-
-const ContextMenu = (props: any) => {
-  const { contextMenuRef }: any = useProjectContext();
-  function handleClick(e: any) {
-    e.preventDefault();
-    const input = e?.target as HTMLElement;
-    if (contextMenuRef?.current) {
-      contextMenuRef?.current?.setAnchorEl(input);
-    }
-  }
-  return <span onContextMenu={(e) => handleClick(e)}>{props.children}</span>;
-};