Merge pull request #4 from fergarrui/fix-evm-tab-rerender

fix evm tab

Author: Swolfeyes

src/client/components/EVMState/main.js

@@ -3,13 +3,7 @@ import { connect } from 'react-redux';
 
 import styles from '../../styles/EVMState.scss';
 
-// const mapStateToProps = state => {
-//   return {
-//     evm: state.selectEVMState,
-//   }
-// }
-
-const ConnectedEVMState = ({ evm }) => {
+const EVMState = ({ evm }) => {
 
   return (
     <div className={styles['evm-state']}>
@@ -89,9 +83,6 @@ const ConnectedEVMState = ({ evm }) => {
   )
 }
 
-
-const EVMState = connect()(ConnectedEVMState);
-
 EVMState.displayName = 'EVMState';
 
 export default EVMState;

src/client/components/EVMTab/EVMTab.js

@@ -14,39 +14,32 @@ class EVMTab extends React.Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if(prevProps.data != this.props.data) {
+      this.setState({
+        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 { data, children } = this.props;
     const { currentTabIndex } = this.state;
 
-    console.log(data)
+    const currentTab = React.Children.toArray(children).filter((child, i) => i === currentTabIndex);
 
     return (
       <div className={styles['tab']}>
         <div className={styles['tab__navigation']}>
         {data.map((item, i) => {
             return (
               <TabMenuItem
+                evm={true}
                 key={`id--${item.gas}`}
                 name={i + 1}
                 active={currentTabIndex === i}
@@ -55,15 +48,7 @@ class EVMTab extends React.Component {
             )
           })}        
         </div>
-        { data.map((item, i) => {
-          return (
-            <EVMTabPanel 
-              key={`id--${item.gas}`}
-              active={currentTabIndex === i}
-              evmData={item} />
-          )
-        }) 
-      }
+          {currentTab}
       </div>
     );
   }

src/client/components/EVMTab/EVMTabPanel.js

@@ -8,16 +8,16 @@ import styles from '../../styles/Tab/InnerTabPanel.scss';
 
 const cx = classnames.bind(styles);
 
-const EVMTabPanel = ({ active, evmData }) => {
+const EVMTabPanel = ({ children }) => {
 
   const tabPanelClasses = cx({
     'inner-tab-panel': true,
-    'inner-tab-panel--active': !!active,
+    'inner-tab-panel--active': true,
   });
 
   return (
     <div className={tabPanelClasses}>
-      <EVMState evm={evmData} />
+      {children}
     </div>
   )
 } 

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

@@ -8,7 +8,7 @@ import styles from '../../../styles/Tab/TabMenuItem.scss';
 
 const cx = classnames.bind(styles);
 
-const TabMenuItem = ({ name, title, onClick, active, onIconClick }) => {
+const TabMenuItem = ({ name, title, onClick, active, onIconClick, evm }) => {
 
   const classes = cx({
     'tab-menu-item': true,
@@ -18,7 +18,9 @@ const TabMenuItem = ({ name, title, onClick, active, onIconClick }) => {
   return (
     <div className={classes} onClick={onClick}>
       <div onClick={onIconClick} className={styles['tab-menu-item__icon']}>
-        <Icon iconName='Cross' />
+      {
+        !evm && <Icon iconName='Cross' />
+      }
       </div>
       <div className={'tab-menu-item__text'}>
         <span>{name ? name : title}</span>

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

@@ -9,6 +9,8 @@ import InnerTab from '../../InnerTab/main.js';
 import Modal from '../../Modal/main.js';
 import Hamburger from '../../Hamburger/main.js';
 import EVMTab from '../../EVMTab/EVMTab';
+import EVMTabPanel from '../../EVMTab/EVMTabPanel';
+import EVMState from '../../EVMState/main';
 
 import styles from '../../../styles/Tab/TabPanel.scss';
 
@@ -269,7 +271,17 @@ class ConnectedTabPanel extends React.Component {
               <Editor code={code} index={index} />
               {
                 evm && 
-                <EVMTab data={evm} />
+                <EVMTab data={evm}>
+                  {
+                    evm.map(item => {
+                      return (
+                        <EVMTabPanel key={`id--${item.gas}`}>
+                          <EVMState evm={item} />
+                        </EVMTabPanel>
+                      )
+                    })
+                  }
+                </EVMTab>
               }
           </div>
         </div>