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 ( +
+
+ + {node.name} +
-
- ); + ); + } }; 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 (
  1. + + + +