Added context menu

Author: devklick

src/ContextMenu/ContextMenu.scss

@@ -0,0 +1,3 @@
+.context-menu {
+  position: fixed;
+}

src/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,35 @@
+import { useRef } from "react";
+import MenuItems, { MenuItemProps } from "../components/MenuItems";
+import "./ContextMenu.scss";
+import useDetectClickOutside from "../hooks/useDetectClickOutside";
+
+interface ContextMenuProps {
+  items: Array<MenuItemProps>;
+  position: { x: number; y: number };
+  close: () => void;
+}
+
+function ContextMenu({ items, position, close }: ContextMenuProps) {
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  useDetectClickOutside({ elementRef, onClick: close });
+
+  return (
+    <div
+      className="context-menu"
+      ref={elementRef}
+      style={{
+        left: position.x,
+        top: position.y,
+      }}
+    >
+      <MenuItems
+        items={items}
+        position={{ x: 0, y: 0 }}
+        positionType="relative"
+      />
+    </div>
+  );
+}
+
+export default ContextMenu;

src/ContextMenu/indext.ts

@@ -0,0 +1,3 @@
+import ContextMenu from "./ContextMenu";
+
+export default ContextMenu;

src/components/BorderedApp/BorderedApp.tsx

@@ -3,21 +3,20 @@ import useWindowManagerStore, {
   BaseProps,
 } from "../../stores/windowManagerStore";
 import { Dimensions } from "../../hooks/useDragToResize";
-import BorderedAppMenu, {
-  BorderedAppMenuItemProps,
-} from "./BorderedAppMenu/BorderedAppMenu";
+import BorderedAppMenu from "./BorderedAppMenu/BorderedAppMenu";
 import usePositionableElement from "../../hooks/usePositionableElement";
 
 import "./BorderedApp.scss";
 import useSystemSettings from "../../stores/systemSettingsStore";
+import { MenuItemProps } from "../MenuItems";
 interface BorderedAppProps extends BaseProps {
   title: string;
   type: string;
   id: string;
   initialDimensions: Dimensions;
   maxDimensions?: Dimensions;
   minDimensions?: Dimensions;
-  menus?: Array<BorderedAppMenuItemProps>;
+  menus?: Array<MenuItemProps>;
 }
 
 function BorderedApp({

src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.tsx

@@ -29,7 +29,13 @@ function BorderedAppMenu({ title, items }: BorderedAppMenuProps) {
       onClick={() => setOpen(!open)}
     >
       <span className="bordered-app-menu__title">{title}</span>
-      {open && <MenuItems items={items} position={{ ...position.current }} />}
+      {open && (
+        <MenuItems
+          items={items}
+          position={{ ...position.current }}
+          positionType="absolute"
+        />
+      )}
     </div>
   );
 }

src/components/MenuItems/MenuItems.scss

@@ -1,7 +1,6 @@
 .menu {
   &-items {
     width: auto;
-    position: absolute;
     white-space: nowrap;
     box-sizing: border-box;
     box-shadow: 0 0 2px rgb(0, 0, 0, 0.5);

src/components/MenuItems/MenuItems.tsx

@@ -5,6 +5,7 @@ import "./MenuItems.scss";
 export interface MenuItemsProps {
   items: Array<MenuItemProps>;
   position: { x: number; y: number };
+  positionType: "relative" | "absolute";
 }
 
 export interface MenuItemProps {
@@ -13,7 +14,7 @@ export interface MenuItemProps {
   items?: Array<MenuItemProps>;
 }
 
-function MenuItems({ items, position }: MenuItemsProps) {
+function MenuItems({ items, position, positionType }: MenuItemsProps) {
   const settings = useSystemSettings();
   return (
     <div
@@ -22,6 +23,7 @@ function MenuItems({ items, position }: MenuItemsProps) {
         left: position.x,
         top: position.y,
         backgroundColor: settings.mainColor,
+        position: positionType,
       }}
     >
       <div className="menu-items__content">
@@ -129,7 +131,11 @@ function MenuItem({
         {title}
       </span>
       {items && open && (
-        <MenuItems items={items} position={{ ...elementPosition.current }} />
+        <MenuItems
+          items={items}
+          position={{ ...elementPosition.current }}
+          positionType="absolute"
+        />
       )}
     </div>
   );

src/programs/FileBrowser/FileBrowser.tsx

@@ -1,16 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ReactComponent as FolderIcon } from "../../assets/icons/folder-icon.svg";
 
-import useLocalFS, {
-  FSDirectory,
-  FSObject,
-  isFSDirectory,
-} from "../../stores/localFS";
+import { FSDirectory, FSObject, isFSDirectory } from "../../stores/localFS";
 import useLocalFSWithHistory from "../../hooks/useLocalFSWithHistory";
 
 import "./FileBrowser.scss";
 import AppSideBar from "../../components/AppSideBar";
-import useCompression from "../../hooks/useCompression";
+import ContextMenu from "../../ContextMenu/ContextMenu";
+import { getMainContentContextItems } from "./contextMenus";
 const defaultPath = "/home/user";
 
 interface FileBrowserProps {
@@ -64,20 +61,28 @@ interface MainContentProps {
 
 function MainContent({ currentDirectory, openFSObject }: MainContentProps) {
   const [selected, setSelected] = useState<string>("");
-  const fs = useLocalFS();
-  const { compress } = useCompression();
+  const clickPosition = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const [open, setOpen] = useState(false);
 
   function handleRightClick(e: React.MouseEvent) {
+    clickPosition.current = { x: e.clientX, y: e.clientY };
     e.stopPropagation();
     e.preventDefault();
-    //fs.createFile("test-create-file.txt", currentDirectory, compress("Hello world!"));
+    setOpen(true);
   }
 
   return (
     <div
       className="file-browser__main-content"
       onContextMenu={handleRightClick}
     >
+      {open && (
+        <ContextMenu
+          position={clickPosition.current}
+          items={getMainContentContextItems()}
+          close={() => setOpen(!open)}
+        />
+      )}
       {Object.values<FSObject>(currentDirectory.contents).map((fsObject) => (
         <DirectoryOrFile
           fsObject={fsObject}

src/programs/FileBrowser/contextMenus.ts

@@ -0,0 +1,15 @@
+import { MenuItemProps } from "../../components/MenuItems";
+
+export function getMainContentContextItems(): Array<MenuItemProps> {
+  return [
+    {
+      title: "Create Directory",
+    },
+    {
+      title: "Create File",
+    },
+    {
+      title: "Open in Terminal",
+    },
+  ];
+}