1  import React, { Component } from 'react';
 2  import PropTypes from 'prop-types';
 3  import {Button, Nav, NavLink} from 'reactstrap';
 4  import classnames from 'classnames';
 5  import FontAwesomeIcon from 'react-fontawesome';
 6  
 7  const TextEditorToolbarTabs = {
 8    Overview: 'overview',
 9    Detail: 'detail',
10    Transactions: 'transactions',
11    Debugger: 'debugger',
12    Browser: 'browser'
13  };
14  
15  class TextEditorToolbar extends Component {
16  
17    isActiveTab(tab) {
18      return this.props.activeTab === tab;
19    }
20  
21    render() {
22      return (
23        <ol className="breadcrumb mb-0">
24          <li className="breadcrumb-item">
25            <Button color="success" size="sm" className="mr-1" onClick={this.props.save}>
26              <FontAwesomeIcon className="mr-2" name="save"/>
27              Save
28            </Button>
29            <Button color="danger" size="sm" onClick={this.props.remove}>
30              <FontAwesomeIcon className="mr-2" name="trash"/>
31              Delete
32            </Button>
33          </li>
34          <li className="breadcrumb-menu">
35            <Nav className="btn-group">
36              {this.props.isContract &&
37                <React.Fragment>
38                  <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Overview)})} onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Overview)}>
39                    <FontAwesomeIcon className="mr-2" name="bolt" /> Interact
40                  </NavLink>
41                  <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Detail)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Detail)}>
42                    <FontAwesomeIcon className="mr-2" name="info-circle" /> Details
43                  </NavLink>
44                  <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Transactions)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Transactions)}>
45                    <FontAwesomeIcon className="mr-2" name="list-alt" /> Transactions
46                  </NavLink>
47                  <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Debugger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Debugger)}>
48                    <FontAwesomeIcon className="mr-2" name="bug" /> Debugger
49                  </NavLink>
50                </React.Fragment>
51              }
52              <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Browser)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Browser)}>
53                <FontAwesomeIcon className="mr-2" name="internet-explorer" /> Preview
54              </NavLink>
55            </Nav>
56  
57          </li>
58        </ol>
59      );
60    }
61  }
62  
63  TextEditorToolbar.propTypes = {
64    isContract: PropTypes.bool,
65    save: PropTypes.func,
66    remove: PropTypes.func,
67    toggleShowHiddenFiles: PropTypes.func,
68    openAsideTab: PropTypes.func,
69    activeTab: PropTypes.string
70  };
71  
72  export default TextEditorToolbar;