From 76701f71df49e174dd054b4146368454fafb8eaa Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 8 Dec 2020 13:06:24 +0100 Subject: [PATCH] Create new folder --- apps/remix-ide/src/app/panels/file-panel.js | 2 +- .../src/lib/file-explorer-context-menu.tsx | 5 +- .../src/lib/file-explorer-menu.tsx | 11 +++- .../file-explorer/src/lib/file-explorer.tsx | 59 ++++++++++++++++++- .../file-explorer/src/lib/types/index.ts | 6 +- 5 files changed, 76 insertions(+), 7 deletions(-) diff --git a/apps/remix-ide/src/app/panels/file-panel.js b/apps/remix-ide/src/app/panels/file-panel.js index 7ec0d7042b..24450ce050 100644 --- a/apps/remix-ide/src/app/panels/file-panel.js +++ b/apps/remix-ide/src/app/panels/file-panel.js @@ -96,7 +96,7 @@ module.exports = class Filepanel extends ViewPlugin { name='browser' registry={this._components.registry} files={this._deps.fileProviders.browser} - menuItems={['createNewFile', 'publishToGist', canUpload ? 'uploadFile' : '']} + menuItems={['createNewFile', 'createNewFolder', 'publishToGist', canUpload ? 'uploadFile' : '']} plugin={this} /> diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx index aacfc140f0..76fc221fc9 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx @@ -4,7 +4,8 @@ import { FileExplorerContextMenuProps } from './types' import './css/file-explorer-context-menu.css' export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => { - const { actions, createNewFile, hideContextMenu, pageX, pageY, folder, ...otherProps } = props + const { actions, createNewFile, createNewFolder, hideContextMenu, pageX, pageY, folder, ...otherProps } = props + console.log('folder: ', folder) const contextMenuRef = useRef(null) useEffect(() => { @@ -31,6 +32,8 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => onClick={() => { if (item.name === 'New File') { createNewFile(folder) + } else if (item.name === 'New Folder') { + createNewFolder(folder) } hideContextMenu() }}>{item.name} diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer-menu.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer-menu.tsx index 8d290ab8e8..44ad137d02 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer-menu.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer-menu.tsx @@ -40,6 +40,11 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => { title: 'Create New File', icon: 'far fa-file' }, + { + action: 'createNewFolder', + title: 'Create New Folder', + icon: 'far fa-folder' + }, { action: 'publishToGist', title: 'Publish all [browser] explorer files to a github gist', @@ -47,8 +52,8 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => { }, { action: 'uploadFile', - title: 'Add Local file to the Browser Storage Explorer', - icon: 'far fa-folder-open' + title: 'Upload Local files to the Browser Storage Explorer', + icon: 'fa fa-upload' }, { action: 'updateGist', @@ -245,6 +250,8 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => { e.stopPropagation() if (action === 'createNewFile') { props.createNewFile() + } else if (action === 'createNewFolder') { + props.createNewFolder() } else if (action === 'publishToGist') { publishToGist() } else { diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx index 62270ecb2c..6b0c71caf0 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -127,7 +127,9 @@ export const FileExplorer = (props: FileExplorerProps) => { } const createNewFile = (parentFolder?: string) => { + console.log('parentFolderBefore: ', parentFolder) if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key : extractParentFromKey(state.focusElement[0].key) : name + console.log('parentFolderAfter: ', parentFolder) // const self = this // modalDialogCustom.prompt('Create new file', 'File Name (e.g Untitled.sol)', 'Untitled.sol', (input) => { // if (!input) input = 'New file' @@ -149,6 +151,33 @@ export const FileExplorer = (props: FileExplorerProps) => { // }, null, true) } + const createNewFolder = async (parentFolder?: string) => { + console.log('parentFolderBefore: ', parentFolder) + if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key : extractParentFromKey(state.focusElement[0].key) : name + else if (parentFolder.indexOf('.sol') !== -1) parentFolder = extractParentFromKey(parentFolder) + console.log('parentFolderAfter: ', parentFolder) + // const self = this + // modalDialogCustom.prompt('Create new folder', '', 'New folder', (input) => { + // if (!input) { + // return tooltip('Failed to create folder. The name can not be empty') + // } + + const fileManager = state.fileManager + const newFolderName = parentFolder + '/' + 'unnamed' + Math.floor(Math.random() * 101) // get filename from state (state.newFileName) + const dirName = newFolderName + '/' + // if (error) return tooltip('Unexpected error while creating folder: ' + error) + const exists = fileManager.exists(dirName) + + if (exists) return + try { + await fileManager.mkdir(dirName) + addFolder(parentFolder, newFolderName) + } catch (e) { + // tooltip('Failed to create file ' + newName) + } + // }, null, true) + } + const addFile = async (parentFolder: string, newFileName: string) => { if (parentFolder === name) { setState(prevState => { @@ -166,7 +195,7 @@ export const FileExplorer = (props: FileExplorerProps) => { const updatedFiles = await resolveDirectory(parentFolder, state.files) setState(prevState => { - return { ...prevState, files: [...updatedFiles], focusElement: [{ key: newFileName, type: 'file' }] } + return { ...prevState, files: updatedFiles, focusElement: [{ key: newFileName, type: 'file' }] } }) } if (newFileName.includes('_test.sol')) { @@ -174,6 +203,28 @@ export const FileExplorer = (props: FileExplorerProps) => { } } + const addFolder = async (parentFolder: string, newFolderName: string) => { + if (parentFolder === name) { + setState(prevState => { + return { + ...prevState, + files: [{ + path: newFolderName, + name: extractNameFromKey(newFolderName), + isDirectory: true + }, ...prevState.files], + focusElement: [{ key: newFolderName, type: 'folder' }] + } + }) + } else { + const updatedFiles = await resolveDirectory(parentFolder, state.files) + + setState(prevState => { + return { ...prevState, files: updatedFiles, focusElement: [{ key: newFolderName, type: 'folder' }] } + }) + } + } + // self._components = {} // self._components.registry = localRegistry || globalRegistry // self._deps = { @@ -293,6 +344,7 @@ export const FileExplorer = (props: FileExplorerProps) => { } const handleContextMenuFolder = (pageX: number, pageY: number, path: string) => { + console.log('path: ', path) setState(prevState => { return { ...prevState, focusContext: { element: path, x: pageX, y: pageY } } }) @@ -324,6 +376,7 @@ export const FileExplorer = (props: FileExplorerProps) => { }} onContextMenu={(e) => { e.preventDefault() + e.stopPropagation() handleContextMenuFolder(e.pageX, e.pageY, file.path) }} labelClass={ state.focusElement.findIndex(item => item.key === file.path) !== -1 ? 'bg-secondary' : '' } @@ -344,6 +397,7 @@ export const FileExplorer = (props: FileExplorerProps) => { actions={ state.actions.filter(item => item.type.findIndex(name => name === 'folder') !== -1) } hideContextMenu={hideContextMenu} createNewFile={createNewFile} + createNewFolder={createNewFolder} pageX={state.focusContext.x} pageY={state.focusContext.y} folder={file.path} @@ -371,6 +425,7 @@ export const FileExplorer = (props: FileExplorerProps) => { }} onContextMenu={(e) => { e.preventDefault() + e.stopPropagation() handleContextMenuFile(e.pageX, e.pageY, file.path) }} icon='fa fa-file' @@ -381,6 +436,7 @@ export const FileExplorer = (props: FileExplorerProps) => { actions={ state.actions.filter(item => item.type.findIndex(name => name === 'file') !== -1) } hideContextMenu={hideContextMenu} createNewFile={createNewFile} + createNewFolder={createNewFolder} pageX={state.focusContext.x} pageY={state.focusContext.y} /> @@ -417,6 +473,7 @@ export const FileExplorer = (props: FileExplorerProps) => { menuItems={props.menuItems} addFile={addFile} createNewFile={createNewFile} + createNewFolder={createNewFolder} files={props.files} fileManager={state.fileManager} accessToken={state.accessToken} diff --git a/libs/remix-ui/file-explorer/src/lib/types/index.ts b/libs/remix-ui/file-explorer/src/lib/types/index.ts index c752ab7ee1..0c8b1d8ca3 100644 --- a/libs/remix-ui/file-explorer/src/lib/types/index.ts +++ b/libs/remix-ui/file-explorer/src/lib/types/index.ts @@ -18,15 +18,17 @@ export interface FileExplorerMenuProps { title: string, menuItems: string[], fileManager: any, - addFile: (parentFolder: string, fileName: string) => void, + addFile: (folder: string, fileName: string) => void, createNewFile: (folder?: string) => void, + createNewFolder: (parentFolder?: string) => void, files: any, accessToken: string } export interface FileExplorerContextMenuProps { actions: { name: string, type: string[] }[], - createNewFile: (folder?: string) => void + createNewFile: (folder?: string) => void, + createNewFolder: (parentFolder?: string) => void, hideContextMenu: () => void, pageX: number, pageY: number,