1  import PropTypes from "prop-types";
 2  import React from 'react';
 3  import { TabContent, TabPane, Nav, NavItem, NavLink, Card, CardBody, CardTitle } from 'reactstrap';
 4  import classnames from 'classnames';
 5  
 6  import ContractDetail from '../components/ContractDetail';
 7  import ContractTransactionsContainer from '../containers/ContractTransactionsContainer';
 8  import ContractOverviewContainer from '../containers/ContractOverviewContainer';
 9  import ContractDebuggerContainer from '../containers/ContractDebuggerContainer';
10  
11  class ContractLayout extends React.Component {
12    constructor(props) {
13      super(props);
14  
15      this.state = {
16        activeTab: '1'
17      };
18    }
19  
20    toggle(tab) {
21      if (this.state.activeTab !== tab) {
22        this.setState({
23          activeTab: tab
24        });
25      }
26    }
27  
28    render() {
29      return (
30        <React.Fragment>
31          <Card>
32            <CardBody>
33              <CardTitle>{this.props.contract.className}</CardTitle>
34              <Nav tabs>
35                <NavItem>
36                  <NavLink
37                    className={classnames({ active: this.state.activeTab === '1' })}
38                    onClick={() => { this.toggle('1'); }}
39                  >
40                    Overview
41                  </NavLink>
42                </NavItem>
43                <NavItem>
44                  <NavLink
45                    className={classnames({ active: this.state.activeTab === '2' })}
46                    onClick={() => { this.toggle('2'); }}
47                  >
48                    Detail
49                  </NavLink>
50                </NavItem>
51                <NavItem>
52                  <NavLink
53                    className={classnames({ active: this.state.activeTab === '3' })}
54                    onClick={() => { this.toggle('3'); }}
55                  >
56                    Transactions
57                  </NavLink>
58                </NavItem>
59                <NavItem>
60                  <NavLink
61                    className={classnames({ active: this.state.activeTab === '4' })}
62                    onClick={() => { this.toggle('4'); }}
63                  >
64                    Debugger
65                  </NavLink>
66                </NavItem>
67              </Nav>
68              <TabContent activeTab={this.state.activeTab}>
69                <TabPane tabId="1">
70                  <ContractOverviewContainer contract={this.props.contract} />
71                </TabPane>
72                <TabPane tabId="2">
73                  <ContractDetail contract={this.props.contract} />
74                </TabPane>
75                <TabPane tabId="3">
76                  <ContractTransactionsContainer contract={this.props.contract} />
77                </TabPane>
78                <TabPane tabId="4">
79                  <ContractDebuggerContainer contract={this.props.contract} />
80                </TabPane>
81              </TabContent>
82            </CardBody>
83          </Card>
84        </React.Fragment>
85      )
86    }
87  }
88  
89  ContractLayout.propTypes = {
90    contract: PropTypes.object
91  };
92  
93  export default ContractLayout;