diff --git a/src/components/Explorer/FileExplorer.tsx b/src/components/Explorer/FileExplorer.tsx index acfdd530e..5b063d4a1 100644 --- a/src/components/Explorer/FileExplorer.tsx +++ b/src/components/Explorer/FileExplorer.tsx @@ -1,10 +1,14 @@ import { CustomIcon } from '@src/components/CustomIcon' import { uuidv4 } from '@src/lib/utils' -import { +import type { FileExplorerEntry, FileExplorerRow, FileExplorerRender, + FileExplorerRowContextMenuProps, } from '@src/components/Explorer/utils' +import { ContextMenu, ContextMenuItem } from '@src/components/ContextMenu' +import { useRef } from 'react' +import usePlatform from '@src/hooks/usePlatform' export const StatusDot = () => { return @@ -98,8 +102,11 @@ export const FileExplorerRowElement = ({ const outlineCSS = isIndexActive ? 'outline outline-1 outline-sky-500 ' : 'outline-0 outline-none' + + const rowElementRef = useRef(null) return (
{row.status}
+ {}} + onDelete={() => {}} + onClone={() => {}} + onOpenInNewWindow={() => {}} + />
) } + +function FileExplorerRowContextMenu({ + itemRef, + onRename, + onDelete, + onClone, + onOpenInNewWindow, +}: FileExplorerRowContextMenuProps) { + const platform = usePlatform() + const metaKey = platform === 'macos' ? '⌘' : 'Ctrl' + return ( + + Rename + , + + Delete + , + + Clone + , + + Open in new window + , + ]} + /> + ) +} diff --git a/src/components/Explorer/ProjectExplorer.tsx b/src/components/Explorer/ProjectExplorer.tsx index 12512a28b..fa30b1d1e 100644 --- a/src/components/Explorer/ProjectExplorer.tsx +++ b/src/components/Explorer/ProjectExplorer.tsx @@ -3,14 +3,14 @@ import type { CustomIconName } from '@src/components/CustomIcon' import { FILE_EXT } from '@src/lib/constants' import { FileExplorer, StatusDot } from '@src/components/Explorer/FileExplorer' import { - FileExplorerRow, constructPath, flattenProject, NOTHING_IS_SELECTED, CONTAINER_IS_SELECTED, STARTING_INDEX_TO_SELECT, } from '@src/components/Explorer/utils' -import type { FileExplorerEntry } from '@src/components/Explorer/utils' +import type { FileExplorerEntry , + FileExplorerRow} from '@src/components/Explorer/utils' import { FileExplorerHeaderActions } from '@src/components/Explorer/FileExplorerHeaderActions' import { useState, useRef, useEffect } from 'react' import { systemIOActor } from '@src/lib/singletons' @@ -99,6 +99,7 @@ export const ProjectExplorer = ({ if (project && project.children) { // moves all folders up and files down, files are sorted within folders + // gotcha: this only sorts the current level, not recursive for all children! const sortedData = sortFilesAndDirectories(project.children) flattenedData = flattenProject(sortedData, project.name) // insert fake row if one is present diff --git a/src/components/Explorer/utils.ts b/src/components/Explorer/utils.ts index 4f5128b80..723bd89d8 100644 --- a/src/components/Explorer/utils.ts +++ b/src/components/Explorer/utils.ts @@ -30,6 +30,14 @@ export interface FileExplorerRender extends FileExplorerRow { domLength: number } +export interface FileExplorerRowContextMenuProps { + itemRef: React.RefObject + onRename: () => void + onDelete: () => void + onClone: () => void + onOpenInNewWindow: () => void +} + export const constructPath = ({ parentPath, name, @@ -92,6 +100,7 @@ export const flattenProject = ( projectName: string ): FileExplorerEntry[] => { const flattenTreeInOrder: FileExplorerEntry[] = [] + // For all children of the project, start the recursion to flatten the tree data structure for (let index = 0; index < projectChildren.length; index++) { flattenProjectHelper(