-
${fileExplorer.init()}
-
${fileSystemExplorer.init()}
+ this.el = yo`
+
`
- function template () {
- return yo`
-
- `
- }
+ this.remixdHandle = new RemixdHandle({}, this._deps.fileProviders.localhost, appManager)
- var event = new EventManager()
- self.event = event
- var element = template()
- fileExplorer.ensureRoot()
- self._deps.fileProviders.localhost.event.register('connecting', (event) => {
+ this.event = new EventManager()
+ // fileExplorer.ensureRoot()
+ this._deps.fileProviders.localhost.event.register('connecting', (event) => {
})
- self._deps.fileProviders.localhost.event.register('connected', (event) => {
+ this._deps.fileProviders.localhost.event.register('connected', (event) => {
fileSystemExplorer.show()
})
- self._deps.fileProviders.localhost.event.register('errored', (event) => {
+ this._deps.fileProviders.localhost.event.register('errored', (event) => {
fileSystemExplorer.hide()
})
- self._deps.fileProviders.localhost.event.register('closed', (event) => {
+ this._deps.fileProviders.localhost.event.register('closed', (event) => {
fileSystemExplorer.hide()
})
- self.render = function render () { return element }
+ this.renderComponent()
+ }
+
+ render () {
+ return this.el
+ }
+
+ renderComponent () {
+ ReactDOM.render(
+
+ , this.el)
}
}
diff --git a/apps/remix-ide/src/app/panels/styles/file-panel-styles.css b/apps/remix-ide/src/app/panels/styles/file-panel-styles.css
new file mode 100644
index 0000000000..087c59e8e3
--- /dev/null
+++ b/apps/remix-ide/src/app/panels/styles/file-panel-styles.css
@@ -0,0 +1,56 @@
+.remixui_container {
+ display : flex;
+ flex-direction : row;
+ width : 100%;
+ height : 100%;
+ box-sizing : border-box;
+}
+.remixui_fileexplorer {
+ display : flex;
+ flex-direction : column;
+ position : relative;
+ width : 100%;
+ padding-left : 6px;
+ padding-top : 6px;
+}
+.remixui_fileExplorerTree {
+ cursor : default;
+}
+.remixui_gist {
+ padding : 10px;
+}
+.remixui_gist i {
+ cursor : pointer;
+}
+.remixui_gist i:hover {
+ color : orange;
+}
+.remixui_connectToLocalhost {
+ padding : 10px;
+}
+.remixui_connectToLocalhost i {
+ cursor : pointer;
+}
+.remixui_connectToLocalhost i:hover {
+ color : var(--secondary)
+}
+.remixui_uploadFile {
+ padding : 10px;
+}
+.remixui_uploadFile label:hover {
+ color : var(--secondary)
+}
+.remixui_uploadFile label {
+ cursor : pointer;
+}
+.remixui_treeview {
+ overflow-y : auto;
+}
+.remixui_dialog {
+ display: flex;
+ flex-direction: column;
+}
+.remixui_dialogParagraph {
+ margin-bottom: 2em;
+ word-break: break-word;
+}
diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.css b/libs/remix-ui/file-explorer/src/lib/css/file-explorer.css
similarity index 100%
rename from libs/remix-ui/file-explorer/src/lib/file-explorer.css
rename to libs/remix-ui/file-explorer/src/lib/css/file-explorer.css
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 5d5e31b9fa..9ce6041200 100644
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
+++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
@@ -1,9 +1,9 @@
-import React, { useReducer, useState } from 'react' // eslint-disable-line
-import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
+import React, { useEffect, useState } from 'react' // eslint-disable-line
+import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-line
import * as helper from '../../../../../apps/remix-ide/src/lib/helper'
import { FileExplorerProps } from './types'
-import './file-explorer.css'
+import './css/file-explorer.css'
function extractData (value, tree, key) {
const newValue = {}
@@ -54,34 +54,100 @@ export const FileExplorer = (props: FileExplorerProps) => {
].filter(item => props.menuItems && props.menuItems.find((name) => { return name === item.action }))
})
+ useEffect(() => {
+ if (props.files) {
+ console.log('props.files.type: ', props.files.type)
+ props.files.event.register('fileAdded', fileAdded)
+ }
+ }, [props.files])
+
const formatSelf = (key, data, li) => {
- const isRoot = data.path === state.files.type
const isFolder = !!data.children
return (
{key.split('/').pop()}
- {isRoot ? renderMenuItems() : ''}
)
}
- const remixdDialog = () => {
- return
This file has been changed outside of Remix IDE.
- }
-
- const fileRenamedError = (error) => {
- console.log(error)
- // modalDialogCustom.alert(error)
+ // self._components = {}
+ // self._components.registry = localRegistry || globalRegistry
+ // self._deps = {
+ // config: self._components.registry.get('config').api,
+ // editor: self._components.registry.get('editor').api,
+ // fileManager: self._components.registry.get('filemanager').api
+ // }
+
+ // self.events.register('focus', function (path) {
+ // self._deps.fileManager.open(path)
+ // })
+
+ // self._components.registry.put({ api: self, name: `fileexplorer/${self.files.type}` })
+
+ // warn if file changed outside of Remix
+ // function remixdDialog () {
+ // return yo`
This file has been changed outside of Remix IDE.
`
+ // }
+
+ // props.files.event.register('fileExternallyChanged', (path, file) => {
+ // if (self._deps.config.get('currentFile') === path && self._deps.editor.currentContent() && self._deps.editor.currentContent() !== file.content) {
+ // if (this.files.isReadOnly(path)) return self._deps.editor.setText(file.content)
+
+ // modalDialog(path + ' changed', remixdDialog(),
+ // {
+ // label: 'Replace by the new content',
+ // fn: () => {
+ // self._deps.editor.setText(file.content)
+ // }
+ // },
+ // {
+ // label: 'Keep the content displayed in Remix',
+ // fn: () => {}
+ // }
+ // )
+ // }
+ // })
+
+ // register to event of the file provider
+ // files.event.register('fileRemoved', fileRemoved)
+ // files.event.register('fileRenamed', fileRenamed)
+ // files.event.register('fileRenamedError', fileRenamedError)
+ // files.event.register('fileAdded', fileAdded)
+ // files.event.register('folderAdded', folderAdded)
+
+ // function fileRenamedError (error) {
+ // modalDialogCustom.alert(error)
+ // }
+
+ const fileAdded = (filepath) => {
+ const folderpath = filepath.split('/').slice(0, -1).join('/')
+ console.log('filePath: ', folderpath)
+ console.log('folderPath: ', folderpath)
+ // const currentTree = self.treeView.nodeAt(folderpath)
+ // if (!self.treeView.isExpanded(folderpath)) self.treeView.expand(folderpath)
+ // if (currentTree) {
+ // props.files.resolveDirectory(folderpath, (error, fileTree) => {
+ // if (error) console.error(error)
+ // if (!fileTree) return
+ // fileTree = normalize(folderpath, fileTree)
+ // self.treeView.updateNodeFromJSON(folderpath, fileTree, true)
+ // self.focusElement = self.treeView.labelAt(self.focusPath)
+ // // TODO: here we update the selected file (it applicable)
+ // // cause we are refreshing the interface of the whole directory when there's a new file.
+ // if (self.focusElement && !self.focusElement.classList.contains('bg-secondary')) {
+ // self.focusElement.classList.add('bg-secondary')
+ // }
+ // })
+ // }
}
const extractNameFromKey = (key) => {
@@ -93,7 +159,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
const renderMenuItems = () => {
let items
if (state.menuItems) {
- items = state.menuItems.map(({ action, title, icon }) => {
+ items = state.menuItems.map(({ action, title, icon }, index) => {
if (action === 'uploadFile') {
return (