context menu position fix

Icon-Shelf · Sep 26, 2021 · 14f3973 · 14f3973
1 parent c5e66f2
commit 14f3973
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/components/modules/IconsHome/IconCardsSection/IconContextMenu/hooks/useContextMenu.ts b/src/components/modules/IconsHome/IconCardsSection/IconContextMenu/hooks/useContextMenu.ts
@@ -15,7 +15,10 @@ export const useContextMenu = () => {
       if (clickedIconCard) {
         event.preventDefault();
 
-        setAnchorPoint({ x: event.pageX, y: event.pageY });
+        setAnchorPoint({
+          x: event.pageX,
+          y: event.pageY,
+        });
         setClickedIconId(clickedIconCard.getAttribute('data-icon-card-id'));
       }
     },

diff --git a/src/components/modules/IconsHome/IconCardsSection/IconContextMenu/index.tsx b/src/components/modules/IconsHome/IconCardsSection/IconContextMenu/index.tsx
@@ -11,7 +11,9 @@ import { ipcRenderer } from 'electron';
 import { useContextMenu } from './hooks/useContextMenu';
 import { deleteIcon } from './utils';
 
-export const IconContextMenu: FC = () => {
+export const IconContextMenu: FC<{
+  parentDom: HTMLDivElement;
+}> = ({ parentDom }) => {
   const queryClient = useQueryClient();
   const { anchorPoint, clickedIconId } = useContextMenu();
 
@@ -63,7 +65,12 @@ export const IconContextMenu: FC = () => {
   }
 
   return (
-    <ContextMenu style={{ top: anchorPoint.y - 65, left: anchorPoint.x - 260 }}>
+    <ContextMenu
+      style={{
+        top: anchorPoint.y + parentDom.scrollTop - parentDom.clientTop - 60,
+        left: anchorPoint.x + parentDom.scrollLeft - parentDom.clientLeft - 260,
+      }}
+    >
       <ContextMenu.Item onClick={onCopy}>
         <CopyIcon className="mr-2" />
         <div>Copy as React</div>

diff --git a/src/components/modules/IconsHome/IconCardsSection/index.tsx b/src/components/modules/IconsHome/IconCardsSection/index.tsx
@@ -45,7 +45,7 @@ export const IconCardsSection: FC<Props> = ({
         ))}
       </div>
 
-      <IconContextMenu />
+      <IconContextMenu parentDom={wrapperDivRef.current} />
     </div>
   );
 };