From e6c33804d918e01ae647706b59dbcdfa0ec66dc4 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 11 Feb 2021 16:21:14 +0100 Subject: [PATCH 1/7] Debug clashing names --- apps/remix-ide/src/app/files/fileManager.js | 9 +++++++-- apps/remix-ide/src/lib/helper.js | 1 + .../file-explorer/src/lib/file-explorer.tsx | 13 +++++++++---- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/apps/remix-ide/src/app/files/fileManager.js b/apps/remix-ide/src/app/files/fileManager.js index 8e46839fcf..c91803c5f2 100644 --- a/apps/remix-ide/src/app/files/fileManager.js +++ b/apps/remix-ide/src/app/files/fileManager.js @@ -100,13 +100,18 @@ class FileManager extends Plugin { * @param {string} path path of the directory or file * @returns {boolean} true if the path exists */ - exists (path) { + async exists (path, type) { const provider = this.fileProviderOf(path) - const result = provider.exists(path, (err, result) => { + const result = await provider.exists(path, (err, result) => { if (err) return false return result }) + if (type === 'file') { + return result && await this.isFile(path) + } else if (type === 'folder') { + return result && await this.isDirectory(path) + } return result } diff --git a/apps/remix-ide/src/lib/helper.js b/apps/remix-ide/src/lib/helper.js index ab7f8c743f..a518ef98a2 100644 --- a/apps/remix-ide/src/lib/helper.js +++ b/apps/remix-ide/src/lib/helper.js @@ -37,6 +37,7 @@ module.exports = { () => { return exist }, (callback) => { fileProvider.exists(name + counter + prefix + '.' + ext, (error, currentExist) => { + console.log('currentExists: ', currentExist) if (error) { callback(error) } 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 b1d1a46385..afa734110a 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -311,6 +311,8 @@ export const FileExplorer = (props: FileExplorerProps) => { const fileManager = state.fileManager helper.createNonClashingName(newFilePath, filesProvider, async (error, newName) => { + console.log('newFilePath: ', newFilePath) + console.log('newName: ', newName) if (error) { modal('Create File Failed', error, { label: 'Close', @@ -336,7 +338,8 @@ export const FileExplorer = (props: FileExplorerProps) => { const dirName = newFolderPath + '/' try { - const exists = await fileManager.exists(dirName) + const exists = await fileManager.exists(dirName, 'folder') + console.log('exists: ', exists) if (exists) return await fileManager.mkdir(dirName) @@ -372,10 +375,11 @@ export const FileExplorer = (props: FileExplorerProps) => { }) } - const renamePath = async (oldPath: string, newPath: string) => { + const renamePath = async (oldPath: string, newPath: string, type?: string) => { try { const fileManager = state.fileManager - const exists = await fileManager.exists(newPath) + const exists = await fileManager.exists(newPath, type) + console.log('exists: ', exists) if (exists) { modal('Rename File Failed', 'File name already exists', { @@ -814,9 +818,10 @@ export const FileExplorer = (props: FileExplorerProps) => { const oldPath: string = state.focusEdit.element const oldName = extractNameFromKey(oldPath) const newPath = oldPath.replace(oldName, content) + const type: string = state.focusEdit.type editRef.current.textContent = extractNameFromKey(oldPath) - renamePath(oldPath, newPath) + renamePath(oldPath, newPath, type) } setState(prevState => { return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } } From b4c54ff6baef31ae064c7268ec1b8cf29f50e5b8 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 16 Feb 2021 13:14:43 +0100 Subject: [PATCH 2/7] Highlight files on hover --- .../file-explorer/src/lib/file-explorer.tsx | 43 +++++++++++++++++-- .../file-explorer/src/lib/types/index.ts | 3 +- libs/remix-ui/tree-view/src/types/index.ts | 2 + 3 files changed, 44 insertions(+), 4 deletions(-) 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 afa734110a..51b1acb82b 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -55,7 +55,8 @@ export const FileExplorer = (props: FileExplorerProps) => { handleHide: null }, modals: [], - toasterMsg: '' + toasterMsg: '', + mouseOverElement: null }) const editRef = useRef(null) @@ -858,6 +859,18 @@ export const FileExplorer = (props: FileExplorerProps) => { } } + const handleMouseOver = (path: string) => { + setState(prevState => { + return { ...prevState, mouseOverElement: path } + }) + } + + const handleMouseOut = () => { + setState(prevState => { + return { ...prevState, mouseOverElement: null } + }) + } + const label = (file: File) => { return (
{ e.stopPropagation() handleContextMenuFolder(e.pageX, e.pageY, file.path, e.target.textContent) }} - labelClass={ state.focusEdit.element === file.path ? 'bg-light' : state.focusElement.findIndex(item => item.key === file.path) !== -1 ? 'bg-secondary' : '' } + labelClass={ state.focusEdit.element === file.path ? 'bg-light' : state.focusElement.findIndex(item => item.key === file.path) !== -1 ? 'bg-secondary' : state.mouseOverElement === file.path ? 'bg-secondary' : (state.focusContext.element === file.path) && (state.focusEdit.element !== file.path) ? 'bg-secondary' : '' } controlBehaviour={ state.ctrlKey } expand={state.expandPath.includes(file.path)} + onMouseOver={(e) => { + e.stopPropagation() + handleMouseOver(file.path) + }} + onMouseOut={(e) => { + e.stopPropagation() + if (state.mouseOverElement === file.path) handleMouseOut() + }} > { file.child ? { @@ -928,6 +949,10 @@ export const FileExplorer = (props: FileExplorerProps) => { pageY={state.focusContext.y} path={file.path} type='folder' + onMouseOver={(e) => { + e.stopPropagation() + handleMouseOver(file.path) + }} /> }
@@ -949,7 +974,15 @@ export const FileExplorer = (props: FileExplorerProps) => { handleContextMenuFile(e.pageX, e.pageY, file.path, e.target.textContent) }} icon='far fa-file' - labelClass={ state.focusEdit.element === file.path ? 'bg-light' : state.focusElement.findIndex(item => item.key === file.path) !== -1 ? 'bg-secondary' : '' } + labelClass={ state.focusEdit.element === file.path ? 'bg-light' : state.focusElement.findIndex(item => item.key === file.path) !== -1 ? 'bg-secondary' : state.mouseOverElement === file.path ? 'bg-secondary' : (state.focusContext.element === file.path) && (state.focusEdit.element !== file.path) ? 'bg-secondary' : '' } + onMouseOver={(e) => { + e.stopPropagation() + handleMouseOver(file.path) + }} + onMouseOut={(e) => { + e.stopPropagation() + if (state.mouseOverElement === file.path) handleMouseOut() + }} /> { ((state.focusContext.element === file.path) && (state.focusEdit.element !== file.path)) && { pageY={state.focusContext.y} path={file.path} type='file' + onMouseOver={(e) => { + e.stopPropagation() + handleMouseOver(file.path) + }} /> } 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 1396d1ec1e..61c554dc3a 100644 --- a/libs/remix-ui/file-explorer/src/lib/types/index.ts +++ b/libs/remix-ui/file-explorer/src/lib/types/index.ts @@ -41,5 +41,6 @@ export interface FileExplorerContextMenuProps { pageX: number, pageY: number, path: string, - type: string + type: string, + onMouseOver?: (...args) => void } diff --git a/libs/remix-ui/tree-view/src/types/index.ts b/libs/remix-ui/tree-view/src/types/index.ts index 1710b461dd..d602367257 100644 --- a/libs/remix-ui/tree-view/src/types/index.ts +++ b/libs/remix-ui/tree-view/src/types/index.ts @@ -10,6 +10,8 @@ export interface TreeViewItemProps { expand?: boolean, onClick?: (...args: any) => void, onInput?: (...args: any) => void, + onMouseOver?: (...args) => void, + onMouseOut?: (...args) => void, className?: string, iconX?: string, iconY?: string, From 8834e5fb3529bafe85a3ad10f95c353b866dc4af Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 16 Feb 2021 13:23:49 +0100 Subject: [PATCH 3/7] Revert unused changes --- apps/remix-ide/src/app/files/fileManager.js | 9 ++------- apps/remix-ide/src/lib/helper.js | 1 - 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/apps/remix-ide/src/app/files/fileManager.js b/apps/remix-ide/src/app/files/fileManager.js index c91803c5f2..8e46839fcf 100644 --- a/apps/remix-ide/src/app/files/fileManager.js +++ b/apps/remix-ide/src/app/files/fileManager.js @@ -100,18 +100,13 @@ class FileManager extends Plugin { * @param {string} path path of the directory or file * @returns {boolean} true if the path exists */ - async exists (path, type) { + exists (path) { const provider = this.fileProviderOf(path) - const result = await provider.exists(path, (err, result) => { + const result = provider.exists(path, (err, result) => { if (err) return false return result }) - if (type === 'file') { - return result && await this.isFile(path) - } else if (type === 'folder') { - return result && await this.isDirectory(path) - } return result } diff --git a/apps/remix-ide/src/lib/helper.js b/apps/remix-ide/src/lib/helper.js index a518ef98a2..ab7f8c743f 100644 --- a/apps/remix-ide/src/lib/helper.js +++ b/apps/remix-ide/src/lib/helper.js @@ -37,7 +37,6 @@ module.exports = { () => { return exist }, (callback) => { fileProvider.exists(name + counter + prefix + '.' + ext, (error, currentExist) => { - console.log('currentExists: ', currentExist) if (error) { callback(error) } else { From 9d5d0a2825ed679311977bf8484bfd4e93bf9445 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 16 Feb 2021 13:26:48 +0100 Subject: [PATCH 4/7] Remove console logs --- libs/remix-ui/file-explorer/src/lib/file-explorer.tsx | 5 ----- 1 file changed, 5 deletions(-) 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 51b1acb82b..b62b8f8431 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -312,8 +312,6 @@ export const FileExplorer = (props: FileExplorerProps) => { const fileManager = state.fileManager helper.createNonClashingName(newFilePath, filesProvider, async (error, newName) => { - console.log('newFilePath: ', newFilePath) - console.log('newName: ', newName) if (error) { modal('Create File Failed', error, { label: 'Close', @@ -340,7 +338,6 @@ export const FileExplorer = (props: FileExplorerProps) => { try { const exists = await fileManager.exists(dirName, 'folder') - console.log('exists: ', exists) if (exists) return await fileManager.mkdir(dirName) @@ -348,7 +345,6 @@ export const FileExplorer = (props: FileExplorerProps) => { return { ...prevState, focusElement: [{ key: newFolderPath, type: 'folder' }] } }) } catch (e) { - console.log('error: ', e) toast('Failed to create folder: ' + newFolderPath) } } @@ -380,7 +376,6 @@ export const FileExplorer = (props: FileExplorerProps) => { try { const fileManager = state.fileManager const exists = await fileManager.exists(newPath, type) - console.log('exists: ', exists) if (exists) { modal('Rename File Failed', 'File name already exists', { From b27a5c6b88e79bdb4ff008b9afb3af0e466c65eb Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 16 Feb 2021 13:33:13 +0100 Subject: [PATCH 5/7] Removed unnecessay changes --- libs/remix-ui/file-explorer/src/lib/file-explorer.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 b62b8f8431..880b08e258 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -337,7 +337,7 @@ export const FileExplorer = (props: FileExplorerProps) => { const dirName = newFolderPath + '/' try { - const exists = await fileManager.exists(dirName, 'folder') + const exists = await fileManager.exists(dirName) if (exists) return await fileManager.mkdir(dirName) @@ -345,6 +345,7 @@ export const FileExplorer = (props: FileExplorerProps) => { return { ...prevState, focusElement: [{ key: newFolderPath, type: 'folder' }] } }) } catch (e) { + console.log('error: ', e) toast('Failed to create folder: ' + newFolderPath) } } @@ -372,10 +373,10 @@ export const FileExplorer = (props: FileExplorerProps) => { }) } - const renamePath = async (oldPath: string, newPath: string, type?: string) => { + const renamePath = async (oldPath: string, newPath: string) => { try { const fileManager = state.fileManager - const exists = await fileManager.exists(newPath, type) + const exists = await fileManager.exists(newPath) if (exists) { modal('Rename File Failed', 'File name already exists', { @@ -814,10 +815,9 @@ export const FileExplorer = (props: FileExplorerProps) => { const oldPath: string = state.focusEdit.element const oldName = extractNameFromKey(oldPath) const newPath = oldPath.replace(oldName, content) - const type: string = state.focusEdit.type editRef.current.textContent = extractNameFromKey(oldPath) - renamePath(oldPath, newPath, type) + renamePath(oldPath, newPath) } setState(prevState => { return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } } From 4aa01513d17dcda1d1a610d22f1831a00e06cc38 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 16 Feb 2021 13:44:25 +0100 Subject: [PATCH 6/7] Break logic in single line --- libs/remix-ui/file-explorer/src/lib/file-explorer.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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 880b08e258..63ac44ea01 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -891,6 +891,12 @@ export const FileExplorer = (props: FileExplorerProps) => { } const renderFiles = (file: File, index: number) => { + const labelClass = state.focusEdit.element === file.path + ? 'bg-light' : state.focusElement.findIndex(item => item.key === file.path) !== -1 + ? 'bg-secondary' : state.mouseOverElement === file.path + ? 'bg-secondary' : (state.focusContext.element === file.path) && (state.focusEdit.element !== file.path) + ? 'bg-secondary' : '' + if (file.isDirectory) { return (
@@ -909,7 +915,7 @@ export const FileExplorer = (props: FileExplorerProps) => { e.stopPropagation() handleContextMenuFolder(e.pageX, e.pageY, file.path, e.target.textContent) }} - labelClass={ state.focusEdit.element === file.path ? 'bg-light' : state.focusElement.findIndex(item => item.key === file.path) !== -1 ? 'bg-secondary' : state.mouseOverElement === file.path ? 'bg-secondary' : (state.focusContext.element === file.path) && (state.focusEdit.element !== file.path) ? 'bg-secondary' : '' } + labelClass={labelClass} controlBehaviour={ state.ctrlKey } expand={state.expandPath.includes(file.path)} onMouseOver={(e) => { @@ -969,7 +975,7 @@ export const FileExplorer = (props: FileExplorerProps) => { handleContextMenuFile(e.pageX, e.pageY, file.path, e.target.textContent) }} icon='far fa-file' - labelClass={ state.focusEdit.element === file.path ? 'bg-light' : state.focusElement.findIndex(item => item.key === file.path) !== -1 ? 'bg-secondary' : state.mouseOverElement === file.path ? 'bg-secondary' : (state.focusContext.element === file.path) && (state.focusEdit.element !== file.path) ? 'bg-secondary' : '' } + labelClass={labelClass} onMouseOver={(e) => { e.stopPropagation() handleMouseOver(file.path) From fcbf6c73c7e61e0e5167f0edd6026b6ae0478045 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 16 Feb 2021 14:55:01 +0100 Subject: [PATCH 7/7] Set border and update message for same file/folder --- .../file-explorer/src/lib/file-explorer.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) 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 63ac44ea01..0282074d23 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -339,7 +339,12 @@ export const FileExplorer = (props: FileExplorerProps) => { try { const exists = await fileManager.exists(dirName) - if (exists) return + if (exists) { + return modal('Rename File Failed', `A file or folder ${extractNameFromKey(newFolderPath)} already exists at this location. Please choose a different name.`, { + label: 'Close', + fn: () => {} + }, null) + } await fileManager.mkdir(dirName) setState(prevState => { return { ...prevState, focusElement: [{ key: newFolderPath, type: 'folder' }] } @@ -379,7 +384,7 @@ export const FileExplorer = (props: FileExplorerProps) => { const exists = await fileManager.exists(newPath) if (exists) { - modal('Rename File Failed', 'File name already exists', { + modal('Rename File Failed', `A file or folder ${extractNameFromKey(newPath)} already exists at this location. Please choose a different name.`, { label: 'Close', fn: () => {} }, null) @@ -894,8 +899,8 @@ export const FileExplorer = (props: FileExplorerProps) => { const labelClass = state.focusEdit.element === file.path ? 'bg-light' : state.focusElement.findIndex(item => item.key === file.path) !== -1 ? 'bg-secondary' : state.mouseOverElement === file.path - ? 'bg-secondary' : (state.focusContext.element === file.path) && (state.focusEdit.element !== file.path) - ? 'bg-secondary' : '' + ? 'bg-light border' : (state.focusContext.element === file.path) && (state.focusEdit.element !== file.path) + ? 'bg-light border' : '' if (file.isDirectory) { return (