Better TabBar #3240

js/src/views/Application/TabBar/tabBar.css

@@ -23,6 +23,11 @@
 .tabs {
   width: 100%;
   position: relative;
+  display: flex;
+
+  & > * {
+    flex: 1;
+  }
 }
 
 .tabs button,
@@ -38,6 +43,7 @@
 
 button.tabactive,
 button.tabactive:hover {
+  color: white !important;
   background: rgba(0, 0, 0, 0.25) !important;
   border-radius: 4px 4px 0 0;
 }

js/src/views/Application/TabBar/tabBar.js

@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
-import { Tabs, Tab } from 'material-ui/Tabs';
+import { Tab as MUITab } from 'material-ui/Tabs';
 
 import { Badge, Tooltip } from '../../../ui';
 
@@ -33,20 +33,138 @@ const TABMAP = {
   deploy: 'contract'
 };
 
+class Tab extends Component {
+  static propTypes = {
+    active: PropTypes.bool,
+    view: PropTypes.object,
+    children: PropTypes.node,
+    pendings: PropTypes.number,
+    onChange: PropTypes.func
+  };
+
+  shouldComponentUpdate (nextProps) {
+    return nextProps.active !== this.props.active ||
+      (nextProps.view.id === 'signer' && nextProps.pendings !== this.props.pendings);
+  }
+
+  render () {
+    const { active, view, children } = this.props;
+
+    const label = this.getLabel(view);
+
+    return (
+      <MUITab
+        className={ active ? styles.tabactive : '' }
+        selected={ active }
+        icon={ view.icon }
+        label={ label }
+        onClick={ this.handleClick }
+      >
+        { children }
+      </MUITab>
+    );
+  }
+
+  getLabel (view) {
+    const { label } = view;
+
+    if (view.id === 'signer') {
+      return this.renderSignerLabel(label);
+    }
+
+    if (view.id === 'status') {
+      return this.renderStatusLabel(label);
+    }
+
+    return this.renderLabel(label);
+  }
+
+  renderLabel (name, bubble) {
+    return (
+      <div className={ styles.label }>
+        { name }
+        { bubble }
+      </div>
+    );
+  }
+
+  renderSignerLabel (label) {
+    const { pendings } = this.props;
+
+    if (pendings) {
+      const bubble = (
+        <Badge
+          color='red'
+          className={ styles.labelBubble }
+          value={ pendings } />
+      );
+
+      return this.renderLabel(label, bubble);
+    }
+
+    return this.renderLabel(label);
+  }
+
+  renderStatusLabel (label) {
+    // const { isTest, netChain } = this.props;
+    // const bubble = (
+    //   <Badge
+    //     color={ isTest ? 'red' : 'default' }
+    //     className={ styles.labelBubble }
+    //     value={ isTest ? 'TEST' : netChain } />
+    //   );
+
+    return this.renderLabel(label, null);
+  }
+
+  handleClick = () => {
+    const { onChange, view } = this.props;
+    onChange(view);
+  }
+}
+
 class TabBar extends Component {
   static contextTypes = {
     router: PropTypes.object.isRequired
-  }
+  };
 
   static propTypes = {
+    views: PropTypes.array.isRequired,
+    hash: PropTypes.string.isRequired,
     pending: PropTypes.array,
     isTest: PropTypes.bool,
-    netChain: PropTypes.string,
-    settings: PropTypes.object.isRequired
-  }
+    netChain: PropTypes.string
+  };
+
+  static defaultProps = {
+    pending: []
+  };
 
   state = {
-    activeRoute: '/accounts'
+    activeViewId: ''
+  };
+
+  setActiveView (props = this.props) {
+    const { hash, views } = props;
+    const view = views.find((view) => view.value === hash);
+
+    this.setState({ activeViewId: view.id });
+  }
+
+  componentWillMount () {
+    this.setActiveView();
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.hash !== this.props.hash) {
+      this.setActiveView(nextProps);
+    }
+  }
+
+  shouldComponentUpdate (nextProps, nextState) {
+    return (nextProps.hash !== this.props.hash) ||
+      (nextProps.pending.length !== this.props.pending.length) ||
+      (nextState.activeViewId !== this.state.activeViewId);
   }
 
   render () {
@@ -81,100 +199,64 @@ class TabBar extends Component {
   }
 
   renderTabs () {
-    const { settings } = this.props;
-    const windowHash = (window.location.hash || '').split('?')[0].split('/')[1];
-    const hash = TABMAP[windowHash] || windowHash;
+    const { views, pending } = this.props;
+    const { activeViewId } = this.state;
 
-    const items = Object.keys(settings.views)
-      .filter((id) => settings.views[id].fixed || settings.views[id].active)
-      .map((id) => {
-        const view = settings.views[id];
-        let label = this.renderLabel(view.label);
-        let body = null;
-
-        if (id === 'accounts') {
-          body = (
+    const items = views
+      .map((view, index) => {
+        const body = (view.id === 'accounts')
+          ? (
           <Tooltip className={ styles.tabbarTooltip } text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view' />
-          );
-        } else if (id === 'signer') {
-          label = this.renderSignerLabel(label);
-        } else if (id === 'status') {
-          label = this.renderStatusLabel(label);
-        }
+          )
+          : null;
+
+        const active = activeViewId === view.id;
 
         return (
           <Tab
-            className={ hash === view.value ? styles.tabactive : '' }
-            value={ view.value }
-            icon={ view.icon }
-            key={ id }
-            label={ label }
-            onActive={ this.onActivate(view.route) }>
+            active={ active }
+            view={ view }
+            onChange={ this.onChange }
+            key={ index }
+            pendings={ pending.length }
+          >
             { body }
           </Tab>
         );
       });
 
     return (
-      <Tabs
+      <div
         className={ styles.tabs }
-        value={ hash }>
+        onChange={ this.onChange }>
         { items }
-      </Tabs>
-    );
-  }
-
-  renderLabel = (name, bubble) => {
-    return (
-      <div className={ styles.label }>
-        { name }
-        { bubble }
       </div>
     );
   }
 
-  renderSignerLabel = (label) => {
-    const { pending } = this.props;
-    let bubble = null;
-
-    if (pending && pending.length) {
-      bubble = (
-        <Badge
-          color='red'
-          className={ styles.labelBubble }
-          value={ pending.length } />
-      );
-    }
-
-    return this.renderLabel(label, bubble);
-  }
-
-  renderStatusLabel = (label) => {
-    // const { isTest, netChain } = this.props;
-    // const bubble = (
-    //   <Badge
-    //     color={ isTest ? 'red' : 'default' }
-    //     className={ styles.labelBubble }
-    //     value={ isTest ? 'TEST' : netChain } />
-    //   );
-
-    return this.renderLabel(label, null);
-  }
-
-  onActivate = (activeRoute) => {
+  onChange = (view) => {
     const { router } = this.context;
 
-    return (event) => {
-      router.push(activeRoute);
-      this.setState({ activeRoute });
-    };
+    router.push(view.route);
+    this.setState({ activeViewId: view.id });
   }
 }
 
 function mapStateToProps (state) {
-  const { settings } = state;
+  const { views } = state.settings;
 
-  return { settings };
+  const filteredViews = Object
+    .keys(views)
+    .filter((id) => views[id].fixed || views[id].active)
+    .map((id) => ({
+      ...views[id],
+      id
+    }));
+
+  const windowHash = (window.location.hash || '').split('?')[0].split('/')[1];
+  const hash = TABMAP[windowHash] || windowHash;
+
+  return { views: filteredViews, hash };
 }
 
 function mapDispatchToProps (dispatch) {