Merge pull request #3 from fergarrui/add-evm-state-tabs

add new tabs for evm state

Author: fergarrui

package-lock.json

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import AccordionSection from './AccordionSection/main.js';
-
 import styles from '../../styles/Accordion/Accordion.scss';
 
 const Accordion = ({ children }) => (

src/client/components/Accordion/main.js

@@ -3,11 +3,11 @@ import { connect } from 'react-redux';
 
 import styles from '../../styles/EVMState.scss';
 
-const mapStateToProps = state => {
-  return {
-    evm: state.selectEVMState,
-  }
-}
+// const mapStateToProps = state => {
+//   return {
+//     evm: state.selectEVMState,
+//   }
+// }
 
 const ConnectedEVMState = ({ evm }) => {
 
@@ -90,7 +90,7 @@ const ConnectedEVMState = ({ evm }) => {
 }
 
 
-const EVMState = connect(mapStateToProps)(ConnectedEVMState);
+const EVMState = connect()(ConnectedEVMState);
 
 EVMState.displayName = 'EVMState';
 

src/client/components/EVMState/main.js

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import TabMenuItem from '../Tab/TabMenuItem/main';
+import EVMTabPanel from './EVMTabPanel';
+
+import styles from '../../styles/Tab/Tab.scss';
+
+class EVMTab extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentTabIndex: 0,
+    }
+  }
+
+  setActiveTab(index) {
+    this.setState({
+      currentTabIndex: index,
+    });
+  }
+
+  handleIconClick(event, index) {
+    event.stopPropagation();
+
+    const { data } = this.props;
+
+    this.setState({
+      currentTabIndex:
+      index === data.length - 1  && index === this.state.currentTabIndex ? 0 
+      : index === this.state.currentTabIndex ? index  
+      : this.state.currentTabIndex,
+    });
+
+    this.props.onMenuItemIconClick(index);
+  }
+
+  render() {
+    const { data } = this.props;
+    const { currentTabIndex } = this.state;
+
+    console.log(data)
+
+    return (
+      <div className={styles['tab']}>
+        <div className={styles['tab__navigation']}>
+        {data.map((item, i) => {
+            return (
+              <TabMenuItem
+                key={`id--${item.gas}`}
+                name={i + 1}
+                active={currentTabIndex === i}
+                onClick={() => this.setActiveTab(i)}
+              />
+            )
+          })}        
+        </div>
+        { data.map((item, i) => {
+          return (
+            <EVMTabPanel 
+              key={`id--${item.gas}`}
+              active={currentTabIndex === i}
+              evmData={item} />
+          )
+        }) 
+      }
+      </div>
+    );
+  }
+}
+
+export default EVMTab;

src/client/components/EVMTab/EVMTab.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import EVMState from '../EVMState/main';
+
+import classnames from 'classnames/bind';
+
+import styles from '../../styles/Tab/InnerTabPanel.scss';
+
+const cx = classnames.bind(styles);
+
+const EVMTabPanel = ({ active, evmData }) => {
+
+  const tabPanelClasses = cx({
+    'inner-tab-panel': true,
+    'inner-tab-panel--active': !!active,
+  });
+
+  return (
+    <div className={tabPanelClasses}>
+      <EVMState evm={evmData} />
+    </div>
+  )
+} 
+
+export default EVMTabPanel;

src/client/components/EVMTab/EVMTabPanel.js

@@ -7,8 +7,8 @@ import Editor from '../../Editor/main.js';
 import SideBar from '../../SideBar/main.js';
 import InnerTab from '../../InnerTab/main.js';
 import Modal from '../../Modal/main.js';
-import EVMState from '../../EVMState/main.js';
 import Hamburger from '../../Hamburger/main.js';
+import EVMTab from '../../EVMTab/EVMTab';
 
 import styles from '../../../styles/Tab/TabPanel.scss';
 
@@ -268,7 +268,8 @@ class ConnectedTabPanel extends React.Component {
           <div className={styles['tab-panel__left__data']}>
               <Editor code={code} index={index} />
               {
-                evm && <EVMState />
+                evm && 
+                <EVMTab data={evm} />
               }
           </div>
         </div>

src/client/components/Tab/TabPanel/main.js

@@ -1,8 +1,7 @@
 $parent: '.evm-state__item';
 
 .evm-state {
-  padding-top: 10px;
-  padding-left: 10px; 
+  padding: 10px;
 
   &__item {
     padding: 10px 0;

src/client/styles/EVMState.scss

@@ -10,6 +10,7 @@
     width: 40%;
     position: relative;
     padding-top: 30px;
+    padding-left: 10px;
 
     &__control {
       position: absolute;