From 2355ff7dfc3778972cc5a8d3214d2d3455bf8e37 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Mon, 31 Oct 2022 16:17:21 +1100
Subject: [PATCH] add context menu for rows

---
 src/components/Table/Table.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 2f04d79c..4f2f51c3 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -51,6 +51,7 @@ import {
   updateColumnAtom,
   updateFieldAtom,
   selectedCellAtom,
+  contextMenuTargetAtom,
 } from "@src/atoms/tableScope";
 import { COLLECTION_PAGE_SIZE } from "@src/config/db";
 
@@ -89,6 +90,7 @@ export default function TableComponent() {
   const [tableNextPage] = useAtom(tableNextPageAtom, tableScope);
   const [tablePage, setTablePage] = useAtom(tablePageAtom, tableScope);
   const [selectedCell, setSelectedCell] = useAtom(selectedCellAtom, tableScope);
+  const setContextMenuTarget = useSetAtom(contextMenuTargetAtom, tableScope);
 
   const updateColumn = useSetAtom(updateColumnAtom, tableScope);
   const updateField = useSetAtom(updateFieldAtom, tableScope);
@@ -460,6 +462,15 @@ export default function TableComponent() {
                         });
                         (e.target as HTMLDivElement).focus();
                       }}
+                      onContextMenu={(e) => {
+                        e.preventDefault();
+                        setSelectedCell({
+                          path: row.original._rowy_ref.path,
+                          columnKey: cell.column.id,
+                        });
+                        (e.target as HTMLDivElement).focus();
+                        setContextMenuTarget(e.target as HTMLElement);
+                      }}
                     >
                       <div
                         className="cell-contents"
@@ -500,6 +511,8 @@ export default function TableComponent() {
           Press Enter to edit.
         </div>
       </Portal>
+
+      <ContextMenu />
     </div>
   );
 }