1  import React from 'react';
  2  import PropTypes from 'prop-types';
  3  import {connect} from 'react-redux';
  4  import {Row, Col} from 'reactstrap';
  5  import TextEditorAsideContainer from './TextEditorAsideContainer';
  6  import TextEditorContainer from './TextEditorContainer';
  7  import FileExplorerContainer from './FileExplorerContainer';
  8  import TextEditorToolbarContainer from './TextEditorToolbarContainer';
  9  import {fetchEditorTabs as fetchEditorTabsAction} from '../actions';
 10  import {getCurrentFile} from '../reducers/selectors';
 11  import classnames from 'classnames';
 12  
 13  import './EditorContainer.css';
 14  
 15  class EditorContainer extends React.Component {
 16    constructor(props) {
 17      super(props);
 18      this.state = {currentAsideTab: '', showHiddenFiles: false, currentFile: this.props.currentFile};
 19    }
 20  
 21    componentDidMount() {
 22      this.props.fetchEditorTabs();
 23    }
 24  
 25    componentDidUpdate(prevProps) {
 26      if(this.props.currentFile.path !== prevProps.currentFile.path) {
 27        this.setState({currentFile: this.props.currentFile});
 28      }
 29    }
 30  
 31    isContract() {
 32      return this.state.currentFile.name && this.state.currentFile.name.endsWith('.sol');
 33    }
 34  
 35    onFileContentChange(newContent) {
 36      const newCurrentFile = this.state.currentFile;
 37      newCurrentFile.content = newContent;
 38      this.setState({currentFile: newCurrentFile});
 39    }
 40  
 41    toggleShowHiddenFiles() {
 42      this.setState({showHiddenFiles: !this.state.showHiddenFiles});
 43    }
 44  
 45    openAsideTab(newTab) {
 46      if (newTab === this.state.currentAsideTab) {
 47        return this.setState({currentAsideTab: ''});
 48      }
 49      this.setState({currentAsideTab: newTab});
 50    }
 51  
 52    textEditorMdSize() {
 53      return this.state.currentAsideTab.length ? 7 : 10;
 54    }
 55  
 56    render() {
 57      return (
 58        <Row noGutters className={classnames('h-100', 'editor--grid', {'aside-opened': this.state.currentAsideTab.length})}>
 59          <Col xs={12}>
 60            <TextEditorToolbarContainer openAsideTab={(newTab) => this.openAsideTab(newTab)}
 61                                        isContract={this.isContract()}
 62                                        currentFile={this.props.currentFile}
 63                                        activeTab={this.state.currentAsideTab}/>
 64          </Col>
 65          <Col sm={4} md={2} xl={2} lg={2} className="border-right">
 66            <FileExplorerContainer showHiddenFiles={this.state.showHiddenFiles} toggleShowHiddenFiles={() => this.toggleShowHiddenFiles()} />
 67          </Col>
 68          <Col sm={8} md={this.textEditorMdSize()} className="text-editor-container">
 69            <TextEditorContainer currentFile={this.props.currentFile} onFileContentChange={(newContent) => this.onFileContentChange(newContent)} />
 70          </Col>
 71          {this.state.currentAsideTab &&
 72          <Col sm={12} md={3} className="border-left-0 relative">
 73            <div className="editor-aside">
 74              <TextEditorAsideContainer currentAsideTab={this.state.currentAsideTab}
 75                                        currentFile={this.props.currentFile}/>
 76            </div>
 77          </Col>}
 78        </Row>
 79      );
 80    }
 81  }
 82  
 83  function mapStateToProps(state, _props) {
 84    const currentFile = getCurrentFile(state);
 85  
 86    return {
 87      currentFile
 88    };
 89  }
 90  
 91  EditorContainer.propTypes = {
 92    currentFile: PropTypes.object,
 93    fetchEditorTabs: PropTypes.func
 94  };
 95  
 96  export default connect(
 97    mapStateToProps,
 98    {fetchEditorTabs: fetchEditorTabsAction.request},
 99  )(EditorContainer);
100