From 1997dbb80f463a8ac8426240d17a71e2fb7ed666 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 26 Jan 2021 13:02:23 +0100 Subject: [PATCH] Fix create and upload file in home tab --- apps/remix-ide/src/app/panels/file-panel.js | 26 ++++++++++++++++++- .../src/app/ui/landing-page/landing-page.js | 11 +++++--- .../src/lib/file-explorer-menu.tsx | 1 + .../file-explorer/src/lib/file-explorer.tsx | 24 ++++++++++++----- .../file-explorer/src/lib/types/index.ts | 4 ++- 5 files changed, 54 insertions(+), 12 deletions(-) diff --git a/apps/remix-ide/src/app/panels/file-panel.js b/apps/remix-ide/src/app/panels/file-panel.js index ca5e94417e..d51fc0d97f 100644 --- a/apps/remix-ide/src/app/panels/file-panel.js +++ b/apps/remix-ide/src/app/panels/file-panel.js @@ -34,7 +34,7 @@ var canUpload = window.File || window.FileReader || window.FileList || window.Bl const profile = { name: 'fileExplorers', displayName: 'File explorers', - methods: [], + methods: ['createNewFile', 'uploadFile'], events: [], icon: 'assets/img/fileManager.webp', description: ' - ', @@ -67,6 +67,8 @@ module.exports = class Filepanel extends ViewPlugin { } this.reset = false this.registeredMenuItems = [] + this.displayNewFile = false + this.uploadFileEvent = null this.el = yo`
@@ -99,6 +101,26 @@ module.exports = class Filepanel extends ViewPlugin { this.renderComponent() } + createNewFile () { + this.displayNewFile = true + this.renderComponent() + } + + resetNewFile () { + this.displayNewFile = false + this.renderComponent() + } + + uploadFile (target) { + this.uploadFileEvent = target + this.renderComponent() + } + + resetUploadFile () { + this.uploadFileEvent = null + this.renderComponent() + } + render () { return this.el } @@ -132,6 +154,8 @@ module.exports = class Filepanel extends ViewPlugin { plugin={this} focusRoot={this.reset} contextMenuItems={this.registeredMenuItems} + displayInput={this.displayNewFile} + externalUploads={this.uploadFileEvent} />
diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js index 3c4202f3fe..2553704a91 100644 --- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js +++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js @@ -281,9 +281,13 @@ export class LandingPage extends ViewPlugin { } const createNewFile = () => { - const fileExplorer = globalRegistry.get('fileexplorer/browser').api - fileExplorer.createNewFile() + this.call('fileExplorers', 'createNewFile') } + + const uploadFile = (target) => { + this.call('fileExplorers', 'uploadFile', target) + } + const connectToLocalhost = () => { this.appManager.activatePlugin('remixd') } @@ -382,8 +386,7 @@ export class LandingPage extends ViewPlugin { 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 c5b4e944fb..19bb68b89f 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 @@ -60,6 +60,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => { { e.stopPropagation() props.uploadFile(e.target) + e.target.value = null }} multiple /> 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 ba0b47ceb6..5a07fe5bde 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -16,7 +16,7 @@ import './css/file-explorer.css' const queryParams = new QueryParams() export const FileExplorer = (props: FileExplorerProps) => { - const { filesProvider, name, registry, plugin, focusRoot, contextMenuItems } = props + const { filesProvider, name, registry, plugin, focusRoot, contextMenuItems, displayInput, externalUploads } = props const [state, setState] = useState({ focusElement: [{ key: name, @@ -182,6 +182,20 @@ export const FileExplorer = (props: FileExplorerProps) => { } }, [contextMenuItems]) + useEffect(() => { + if (displayInput) { + handleNewFileInput() + plugin.resetNewFile() + } + }, [displayInput]) + + useEffect(() => { + if (externalUploads) { + uploadFile(externalUploads) + plugin.resetUploadFile() + } + }, [externalUploads]) + const resolveDirectory = async (folderPath, dir: File[], isChild = false): Promise => { if (!isChild && (state.focusEdit.element === 'browser/blank') && state.focusEdit.isNew && (dir.findIndex(({ path }) => path === 'browser/blank') === -1)) { dir = state.focusEdit.type === 'file' ? [...dir, { @@ -454,8 +468,6 @@ export const FileExplorer = (props: FileExplorerProps) => { // pick that up via the 'fileAdded' event from the files module. [...target.files].forEach((file) => { - const files = filesProvider - const loadFile = (name: string): void => { const fileReader = new FileReader() @@ -467,7 +479,7 @@ export const FileExplorer = (props: FileExplorerProps) => { }, null) return } - const success = await files.set(name, event.target.result) + const success = await filesProvider.set(name, event.target.result) if (!success) { modal('File Upload Failed', 'Failed to create file ' + name, { @@ -478,9 +490,9 @@ export const FileExplorer = (props: FileExplorerProps) => { } fileReader.readAsText(file) } - const name = files.type + '/' + file.name + const name = filesProvider.type + '/' + file.name - files.exists(name, (error, exist) => { + filesProvider.exists(name, (error, exist) => { if (error) console.log(error) if (!exist) { loadFile(name) 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 caa203ab7b..1396d1ec1e 100644 --- a/libs/remix-ui/file-explorer/src/lib/types/index.ts +++ b/libs/remix-ui/file-explorer/src/lib/types/index.ts @@ -6,7 +6,9 @@ export interface FileExplorerProps { menuItems?: string[], plugin: any, focusRoot: boolean, - contextMenuItems: { name: string, type: string[], path: string[], extension: string[], pattern: string[] }[] + contextMenuItems: { name: string, type: string[], path: string[], extension: string[], pattern: string[] }[], + displayInput?: boolean, + externalUploads?: EventTarget & HTMLInputElement } export interface File {