WIP
This commit is contained in:
Anthony Laibe
parent
5c19dcf672
commit
2e5dd6455e
|
|
@ -0,0 +1,5 @@
|
||||||
|
.file-explorer__action {
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
@ -5,6 +5,9 @@ import PropTypes from 'prop-types';
|
||||||
import {Treebeard, decorators} from 'react-treebeard';
|
import {Treebeard, decorators} from 'react-treebeard';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import {DARK_THEME} from '../constants';
|
import {DARK_THEME} from '../constants';
|
||||||
|
import FontAwesome from 'react-fontawesome';
|
||||||
|
|
||||||
|
import './FileExplorer.css';
|
||||||
|
|
||||||
const isDarkTheme= (theme) => theme === DARK_THEME;
|
const isDarkTheme= (theme) => theme === DARK_THEME;
|
||||||
|
|
||||||
|
|
@ -77,66 +80,104 @@ const style = (theme) => ({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const Container = (props) => (
|
||||||
|
<div className="w-100" onClick={props.onClick}>
|
||||||
|
<props.decorators.Toggle style={props.style.toggle}/>
|
||||||
|
<props.decorators.Header node={props.node} style={props.style.header}/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
const Header = ({style, node}) => {
|
class Header extends React.Component {
|
||||||
let icon;
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
if (!node.children) {
|
this.state = {active: null};
|
||||||
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 icon appstore-icon';
|
|
||||||
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 (
|
resolveIcon() {
|
||||||
<div className="mb-1" style={style.base}>
|
let icon;
|
||||||
<div style={style.title}>
|
|
||||||
<i className={classNames('mr-1', icon)} />
|
if (!this.props.node.children) {
|
||||||
{node.name}
|
const extension = this.props.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(this.props.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 icon appstore-icon';
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
activateNode() {
|
||||||
|
this.setState({active : true});
|
||||||
|
}
|
||||||
|
|
||||||
|
deactivateNode() {
|
||||||
|
this.setState({active : true});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderAction() {
|
||||||
|
return (
|
||||||
|
<div className="file-explorer__action">
|
||||||
|
{this.props.node.children &&
|
||||||
|
<React.Fragment>
|
||||||
|
<FontAwesome name="plus" className="text-success mr-2" />
|
||||||
|
<FontAwesome name="folder-open" className="text-success mr-2" />
|
||||||
|
</React.Fragment>
|
||||||
|
}
|
||||||
|
<FontAwesome name="trash" className="text-danger" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
);
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="mb-1 d-inline-block" style={style.base}
|
||||||
|
onMouseEnter={() => this.activateNode()}
|
||||||
|
onMouseLeave={() => this.deactivateNode()}>
|
||||||
|
<i className={classNames('mr-1', this.resolveIcon())} />
|
||||||
|
<span className="">{this.props.node.name}</span>
|
||||||
|
{this.state.active && this.renderAction()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
Header.propTypes = {
|
Header.propTypes = {
|
||||||
|
|
@ -145,6 +186,7 @@ Header.propTypes = {
|
||||||
};
|
};
|
||||||
|
|
||||||
decorators.Header = Header;
|
decorators.Header = Header;
|
||||||
|
decorators.Container = Container;
|
||||||
|
|
||||||
class FileExplorer extends React.Component {
|
class FileExplorer extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue