Web: Components: Section: fixed closing the context menu when uploading files

packages/shared/components/section/Section.types.ts

@@ -145,3 +145,7 @@ export interface SectionProps {
   isDesktop?: boolean;
   getContextModel?: () => ContextMenuModel[];
 }
+
+export interface SectionContextMenuProps {
+  getContextModel: () => ContextMenuModel[];
+}

packages/shared/components/section/sub-components/SectionBody.tsx

@@ -29,14 +29,13 @@ import { useLocation } from "react-router-dom";
 
 // import { inject, observer } from "mobx-react";
 
-import { ContextMenu } from "@docspace/shared/components/context-menu";
-
 import {
   StyledDropZoneBody,
   StyledSpacer,
   StyledSectionBody,
 } from "../Section.styled";
 import { SectionBodyProps } from "../Section.types";
+import SectionContextMenu from "./SectionContextMenu";
 
 const SectionBody = React.memo(
   ({
@@ -53,49 +52,9 @@ const SectionBody = React.memo(
     getContextModel,
   }: SectionBodyProps) => {
     const focusRef = React.useRef<HTMLDivElement | null>(null);
-    const cmRef = React.useRef<null | {
+
-      show: (e: React.MouseEvent | MouseEvent) => void;
-      hide: (e: React.MouseEvent | MouseEvent) => void;
-      toggle: (e: React.MouseEvent | MouseEvent) => boolean;
-      getVisible: () => boolean;
-    }>(null);
     const location = useLocation();
 
-    const [isOpen, setIsOpen] = React.useState(false);
-
-    const onContextMenu = React.useCallback(
-      (e: MouseEvent | React.MouseEvent<Element, MouseEvent>) => {
-        const bodyElem = document.getElementsByClassName(
-          "section-body",
-        )[0] as HTMLDivElement;
-
-        const target = e.target as Node;
-
-        if (
-          !getContextModel ||
-          !getContextModel() ||
-          !bodyElem ||
-          !bodyElem.contains(target)
-        )
-          return;
-
-        e.stopPropagation();
-        e.preventDefault();
-
-        // if (cmRef.current) cmRef.current.toggle(e);
-        if (cmRef.current) {
-          if (!isOpen) cmRef?.current?.show(e);
-          else cmRef?.current?.hide(e);
-          setIsOpen(!isOpen);
-        }
-      },
-      [getContextModel, isOpen],
-    );
-
-    const onHide = () => {
-      setIsOpen(false);
-    };
-
     const focusSectionBody = React.useCallback(() => {
       if (focusRef.current) focusRef.current.focus({ preventScroll: true });
     }, []);
@@ -108,14 +67,6 @@ const SectionBody = React.memo(
       [focusSectionBody],
     );
 
-    React.useEffect(() => {
-      document.addEventListener("contextmenu", onContextMenu);
-
-      return () => {
-        document.removeEventListener("contextmenu", onContextMenu);
-      };
-    }, [onContextMenu]);
-
     React.useEffect(() => {
       if (!autoFocus) return;
 
@@ -145,16 +96,6 @@ const SectionBody = React.memo(
         }
       : {};
 
-    const contextBlock = (
-      <ContextMenu
-        ref={cmRef}
-        onHide={onHide}
-        getContextModel={getContextModel}
-        withBackdrop
-        model={[]}
-      />
-    );
-
     return uploadFiles ? (
       <StyledDropZoneBody
         isDropZone
@@ -179,7 +120,7 @@ const SectionBody = React.memo(
           </div>
         )}
 
-        {contextBlock}
+        <SectionContextMenu getContextModel={getContextModel} />
       </StyledDropZoneBody>
     ) : (
       <StyledSectionBody
@@ -200,7 +141,7 @@ const SectionBody = React.memo(
         ) : (
           <div className="section-wrapper">{children}</div>
         )}
-        {contextBlock}
+        <SectionContextMenu getContextModel={getContextModel} />
       </StyledSectionBody>
     );
   },

packages/shared/components/section/sub-components/SectionContextMenu.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { ContextMenu } from "@docspace/shared/components/context-menu";
+import isEqual from "lodash/isEqual";
+import { SectionContextMenuProps } from "../Section.types";
+
+const areEqual = (
+  prevProps: SectionContextMenuProps,
+  nextProps: SectionContextMenuProps,
+) => {
+  if (!isEqual(prevProps, nextProps)) return true;
+  return false;
+};
+
+const SectionContextMenu = React.memo(
+  ({ getContextModel }: SectionContextMenuProps) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    const cmRef = React.useRef<null | {
+      show: (e: React.MouseEvent | MouseEvent) => void;
+      hide: (e: React.MouseEvent | MouseEvent) => void;
+      toggle: (e: React.MouseEvent | MouseEvent) => boolean;
+      getVisible: () => boolean;
+    }>(null);
+
+    const onHide = () => {
+      setIsOpen(false);
+    };
+
+    const onContextMenu = React.useCallback(
+      (e: MouseEvent | React.MouseEvent<Element, MouseEvent>) => {
+        const bodyElem = document.getElementsByClassName(
+          "section-body",
+        )[0] as HTMLDivElement;
+
+        const target = e.target as Node;
+
+        if (
+          !getContextModel ||
+          !getContextModel() ||
+          !bodyElem ||
+          !bodyElem.contains(target)
+        )
+          return;
+
+        e.stopPropagation();
+        e.preventDefault();
+
+        // if (cmRef.current) cmRef.current.toggle(e);
+        if (cmRef.current) {
+          if (!isOpen) cmRef?.current?.show(e);
+          else cmRef?.current?.hide(e);
+          setIsOpen(!isOpen);
+        }
+      },
+      [getContextModel, isOpen],
+    );
+
+    React.useEffect(() => {
+      document.addEventListener("contextmenu", onContextMenu);
+
+      return () => {
+        document.removeEventListener("contextmenu", onContextMenu);
+      };
+    }, [onContextMenu]);
+
+    return (
+      <ContextMenu
+        ref={cmRef}
+        onHide={onHide}
+        getContextModel={getContextModel}
+        withBackdrop
+        model={[]}
+      />
+    );
+  },
+  areEqual,
+);
+SectionContextMenu.displayName = "SectionContextMenu";
+
+export default SectionContextMenu;