Merge pull request #966 from ethereum/context-menu

libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx

@@ -16,7 +16,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
     const boundary = menuItemsContainer.getBoundingClientRect()
 
     if (boundary.bottom > (window.innerHeight || document.documentElement.clientHeight)) {
-      menuItemsContainer.style.position = 'absolute'
+      menuItemsContainer.style.position = 'fixed'
       menuItemsContainer.style.bottom = '10px'
       menuItemsContainer.style.top = null
     }

libs/remix-ui/file-explorer/src/lib/file-explorer.tsx

@@ -32,7 +32,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
     focusContext: {
       element: null,
       x: null,
-      y: null
+      y: null,
+      type: ''
     },
     focusEdit: {
       element: null,
@@ -57,7 +58,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
     },
     modals: [],
     toasterMsg: '',
-    mouseOverElement: null
+    mouseOverElement: null,
+    showContextMenu: false
   })
   const editRef = useRef(null)
 
@@ -755,20 +757,20 @@ export const FileExplorer = (props: FileExplorerProps) => {
   const handleContextMenuFile = (pageX: number, pageY: number, path: string, content: string) => {
     if (!content) return
     setState(prevState => {
-      return { ...prevState, focusContext: { element: path, x: pageX, y: pageY }, focusEdit: { ...prevState.focusEdit, lastEdit: content } }
+      return { ...prevState, focusContext: { element: path, x: pageX, y: pageY, type: 'file' }, focusEdit: { ...prevState.focusEdit, lastEdit: content }, showContextMenu: prevState.focusEdit.element !== path }
     })
   }
 
   const handleContextMenuFolder = (pageX: number, pageY: number, path: string, content: string) => {
     if (!content) return
     setState(prevState => {
-      return { ...prevState, focusContext: { element: path, x: pageX, y: pageY }, focusEdit: { ...prevState.focusEdit, lastEdit: content } }
+      return { ...prevState, focusContext: { element: path, x: pageX, y: pageY, type: 'folder' }, focusEdit: { ...prevState.focusEdit, lastEdit: content }, showContextMenu: prevState.focusEdit.element !== path }
     })
   }
 
   const hideContextMenu = () => {
     setState(prevState => {
-      return { ...prevState, focusContext: { element: null, x: 0, y: 0 } }
+      return { ...prevState, focusContext: { element: null, x: 0, y: 0, type: '' }, showContextMenu: false }
     })
   }
 
@@ -907,7 +909,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
     if (file.isDirectory) {
       return (
-        <div key={index}>
         <TreeViewItem
           id={`treeViewItem${file.path}`}
           iconX='pr-3 fa fa-folder'
@@ -944,31 +945,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
             </TreeView> : <TreeView id={`treeView${file.path}`} key={index} />
           }
         </TreeViewItem>
-          { ((state.focusContext.element === file.path) && (state.focusEdit.element !== file.path)) &&
-            <FileExplorerContextMenu
-              actions={state.actions}
-              hideContextMenu={hideContextMenu}
-              createNewFile={handleNewFileInput}
-              createNewFolder={handleNewFolderInput}
-              deletePath={deletePath}
-              renamePath={editModeOn}
-              publishToGist={publishToGist}
-              emit={emitContextMenuEvent}
-              pageX={state.focusContext.x}
-              pageY={state.focusContext.y}
-              path={file.path}
-              type='folder'
-              onMouseOver={(e) => {
-                e.stopPropagation()
-                handleMouseOver(file.path)
-              }}
-            />
-          }
-        </div>
       )
     } else {
       return (
-        <div key={index}>
         <TreeViewItem
           id={`treeViewItem${file.path}`}
           key={index}
@@ -993,27 +972,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
             if (state.mouseOverElement === file.path) handleMouseOut()
           }}
         />
-          { ((state.focusContext.element === file.path) && (state.focusEdit.element !== file.path)) &&
-            <FileExplorerContextMenu
-              actions={state.actions}
-              hideContextMenu={hideContextMenu}
-              createNewFile={handleNewFileInput}
-              createNewFolder={handleNewFolderInput}
-              deletePath={deletePath}
-              renamePath={editModeOn}
-              runScript={runScript}
-              emit={emitContextMenuEvent}
-              pageX={state.focusContext.x}
-              pageY={state.focusContext.y}
-              path={file.path}
-              type='file'
-              onMouseOver={(e) => {
-                e.stopPropagation()
-                handleMouseOver(file.path)
-              }}
-            />
-          }
-        </div>
       )
     }
   }
@@ -1073,6 +1031,26 @@ export const FileExplorer = (props: FileExplorerProps) => {
         />
       }
       <Toaster message={state.toasterMsg} />
+      { state.showContextMenu &&
+        <FileExplorerContextMenu
+          actions={state.actions}
+          hideContextMenu={hideContextMenu}
+          createNewFile={handleNewFileInput}
+          createNewFolder={handleNewFolderInput}
+          deletePath={deletePath}
+          renamePath={editModeOn}
+          runScript={runScript}
+          emit={emitContextMenuEvent}
+          pageX={state.focusContext.x}
+          pageY={state.focusContext.y}
+          path={state.focusContext.element}
+          type={state.focusContext.type}
+          onMouseOver={(e) => {
+            e.stopPropagation()
+            handleMouseOver(state.focusContext.element)
+          }}
+        />
+      }
     </div>
   )
 }