diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js
index 1e11caaba..d59bd673c 100644
--- a/embark-ui/src/actions/index.js
+++ b/embark-ui/src/actions/index.js
@@ -293,10 +293,17 @@ export const saveFile = {
failure: (error) => action(SAVE_FILE[FAILURE], {error})
};
+export const SAVE_FOLDER = createRequestTypes('SAVE_FOLDER');
+export const saveFolder = {
+ request: ({path}) => action(SAVE_FOLDER[REQUEST], {path}),
+ success: () => action(SAVE_FOLDER[SUCCESS]),
+ failure: (error) => action(SAVE_FOLDER[FAILURE], {error})
+};
+
export const REMOVE_FILE = createRequestTypes('REMOVE_FILE');
export const removeFile = {
request: ({name, path, content}) => action(REMOVE_FILE[REQUEST], {name, path, content}),
- success: () => action(REMOVE_FILE[SUCCESS]),
+ success: (_, file) => action(REMOVE_FILE[SUCCESS], {file}),
failure: (error) => action(REMOVE_FILE[FAILURE], {error})
};
diff --git a/embark-ui/src/components/AddFileModal.js b/embark-ui/src/components/AddFileModal.js
new file mode 100644
index 000000000..d20a40cb9
--- /dev/null
+++ b/embark-ui/src/components/AddFileModal.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import {Button, Modal, ModalHeader, ModalBody, ModalFooter, Input} from 'reactstrap';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {isDarkTheme} from '../utils/utils';
+
+class AddFileModal extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {modal: false, filename: ''};
+ }
+
+ toggle() {
+ this.setState({modal: !this.state.modal});
+ }
+
+ handleChange(event) {
+ this.setState({filename: event.target.value});
+ }
+
+ addFile() {
+ this.props.saveFile({path: `${this.props.node.path}/${this.state.filename}`, content: ''});
+ this.toggle();
+ }
+
+ render() {
+ return (
+ this.toggle()}>
+ this.toggle()}>Please give the file a name
+
+ this.handleChange(e)} />
+
+
+ {' '}
+
+
+
+ )
+ }
+}
+
+AddFileModal.propTypes = {
+ saveFile: PropTypes.func,
+ node: PropTypes.object,
+ theme: PropTypes.string
+};
+
+export default AddFileModal;
\ No newline at end of file
diff --git a/embark-ui/src/components/AddFolderModal.js b/embark-ui/src/components/AddFolderModal.js
new file mode 100644
index 000000000..4f5d3abdd
--- /dev/null
+++ b/embark-ui/src/components/AddFolderModal.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import {Button, Modal, ModalHeader, ModalBody, ModalFooter, Input} from 'reactstrap';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {isDarkTheme} from '../utils/utils';
+
+class AddFolderModal extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {modal: false, folder: ''};
+ }
+
+ toggle() {
+ this.setState({modal: !this.state.modal});
+ }
+
+ handleChange(event) {
+ this.setState({folder: event.target.value});
+ }
+
+ addFolder() {
+ this.props.saveFolder({path: `${this.props.node.path}/${this.state.folder}`});
+ this.toggle();
+ }
+
+ render() {
+ return (
+ this.toggle()}>
+ this.toggle()}>Please give the folder a name
+
+ this.handleChange(e)} />
+
+
+ {' '}
+
+
+
+ )
+ }
+}
+
+AddFolderModal.propTypes = {
+ saveFolder: PropTypes.func,
+ node: PropTypes.object,
+ theme: PropTypes.string
+};
+
+export default AddFolderModal;
\ No newline at end of file
diff --git a/embark-ui/src/components/FileExplorer.js b/embark-ui/src/components/FileExplorer.js
index c47556793..e1cf7a070 100644
--- a/embark-ui/src/components/FileExplorer.js
+++ b/embark-ui/src/components/FileExplorer.js
@@ -1,12 +1,12 @@
+import React from 'react';
import {AppSwitch} from '@coreui/react';
import {Label} from 'reactstrap';
-import React from 'react';
import PropTypes from 'prop-types';
import {Treebeard, decorators} from 'react-treebeard';
import classNames from 'classnames';
-import {DARK_THEME} from '../constants';
-const isDarkTheme= (theme) => theme === DARK_THEME;
+import FileExplorerRowContainer from '../containers/FileExplorerRowContainer';
+import {isDarkTheme} from '../utils/utils';
const style = (theme) => ({
tree: {
@@ -77,67 +77,73 @@ const style = (theme) => ({
}
}
});
+class Header extends React.Component {
+ resolveIcon() {
+ let icon;
+ let {node} = this.props;
-
-const Header = ({style, node}) => {
- let icon;
-
- if (!node.children) {
- const extension = node.path.split('.').pop();
- switch(extension) {
- case 'html':
- icon = 'text-danger fa fa-html5';
- break;
- case 'css':
- icon = 'text-warning fa fa-css3';
- break;
- case 'js':
- case 'jsx':
- icon = 'text-primary icon js-icon';
- break;
- case 'json':
- icon = 'text-success icon hjson-icon';
- break;
- case 'sol':
- icon = 'text-warning icon solidity-icon';
- break;
- default:
- icon = 'fa fa-file-o';
- }
- } else {
- switch(node.name) {
- case 'dist':
- icon = 'text-danger icon easybuild-icon';
- break;
- case 'config':
- icon = 'text-warning fa fa-cogs';
- break;
- case 'contracts':
- icon = 'text-success fa fa-file-text';
- break;
- case 'app':
- icon = 'text-primary fa fa-code';
- break;
- case 'test':
- icon = 'icon test-dir-icon';
- break;
- case 'node_modules':
- icon = 'fa fa-folder-o';
- break;
- default:
- icon = 'fa fa-folder';
+ if (!node.children) {
+ const extension = node.path.split('.').pop();
+ switch(extension) {
+ case 'html':
+ icon = 'text-danger fa fa-html5';
+ break;
+ case 'css':
+ icon = 'text-warning fa fa-css3';
+ break;
+ case 'js':
+ case 'jsx':
+ icon = 'text-primary icon js-icon';
+ break;
+ case 'json':
+ icon = 'text-success icon hjson-icon';
+ break;
+ case 'sol':
+ icon = 'text-warning icon solidity-icon';
+ break;
+ default:
+ icon = 'fa fa-file-o';
+ }
+ } else {
+ switch(node.name) {
+ case 'dist':
+ icon = 'text-danger icon easybuild-icon';
+ break;
+ case 'config':
+ icon = 'text-warning fa fa-cogs';
+ break;
+ case 'contracts':
+ icon = 'text-success fa fa-file-text';
+ break;
+ case 'app':
+ icon = 'text-primary fa fa-code';
+ break;
+ case 'test':
+ icon = 'icon test-dir-icon';
+ break;
+ case 'node_modules':
+ icon = 'fa fa-folder-o';
+ break;
+ default:
+ icon = 'fa fa-folder';
+ }
}
+ return icon;
}
- return (
-
-
-
- {node.name}
+ render() {
+ let {node, style} = this.props;
+ return (
+
-
- );
+ );
+ }
};
Header.propTypes = {
@@ -146,6 +152,7 @@ Header.propTypes = {
};
decorators.Header = Header;
+decorators.Container = FileExplorerRowContainer;
class FileExplorer extends React.Component {
constructor(props) {
diff --git a/embark-ui/src/components/TextEditorToolbar.js b/embark-ui/src/components/TextEditorToolbar.js
index 3a3331f8e..9437a1aec 100644
--- a/embark-ui/src/components/TextEditorToolbar.js
+++ b/embark-ui/src/components/TextEditorToolbar.js
@@ -4,6 +4,9 @@ import {Button, Nav, NavLink} from 'reactstrap';
import classnames from 'classnames';
import FontAwesomeIcon from 'react-fontawesome';
+import AddFileModal from '../components/AddFileModal';
+import AddFolderModal from '../components/AddFolderModal';
+
export const TextEditorToolbarTabs = {
Interact: { label: 'Interact', icon: 'bolt' },
Details: { label: 'Details', icon: 'info-circle' },
@@ -13,6 +16,11 @@ export const TextEditorToolbarTabs = {
};
class TextEditorToolbar extends Component {
+ constructor(props) {
+ super(props);
+ this.addFileModal = React.createRef();
+ this.addFolderModal = React.createRef();
+ }
isActiveTab(tab) {
return this.props.activeTab === tab;
@@ -38,6 +46,16 @@ class TextEditorToolbar extends Component {
return (
-
+
+
+
+