swapProgress: create computed class for active step; cleanup

common/containers/Tabs/Swap/components/swapProgress.js

@@ -1,6 +1,6 @@
+//flow
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-// import { toFixedIfLarger } from 'utils/formatters';
 import translate from 'translations';
 
 export default class SwapProgress extends Component {
@@ -9,34 +9,48 @@ export default class SwapProgress extends Component {
   }
 
   static propTypes = {
-    numberOfConfirmations: PropTypes.number,
-    destinationKind: PropTypes.string,
-    originKind: PropTypes.string,
-    activeStep: PropTypes.number
+    numberOfConfirmations: PropTypes.number.isRequired,
+    destinationKind: PropTypes.string.isRequired,
+    originKind: PropTypes.string.isRequired,
+    activeStep: PropTypes.number.isRequired
   };
 
+  computedClass(i: number) {
+    const { activeStep } = this.props;
+    let cssClass = 'progress-item';
+    if (activeStep > i) {
+      cssClass += ' progress-true';
+    } else if (i === activeStep) {
+      cssClass += ' progress-active';
+    } else {
+      cssClass += '';
+    }
+    return cssClass;
+  }
+
   render() {
     const { numberOfConfirmations, destinationKind, originKind } = this.props;
     return (
       <section className="row swap-progress">
         <div className="sep" />
-        <div className="progress-item  progress-true">
+
+        <div className={this.computedClass(1)}>
           <div className="progress-circle"><i>1</i></div>
           <p>{translate('SWAP_progress_1')}</p>
         </div>
-        <div className="progress-item progress-true">
+        <div className={this.computedClass(2)}>
           <div className="progress-circle"><i>2</i></div>
           <p>
             <span>{translate('SWAP_progress_2')}</span>{originKind}...
           </p>
         </div>
-        <div className="progress-item progress-active">
+        <div className={this.computedClass(3)}>
           <div className="progress-circle"><i>3</i></div>
           <p>
             {originKind} <span>{translate('SWAP_progress_3')}</span>
           </p>
         </div>
-        <div className="progress-item">
+        <div className={this.computedClass(4)}>
           <div className="progress-circle"><i>4</i></div>
           <p>
             <span>Sending your </span>{destinationKind}
@@ -46,7 +60,7 @@ export default class SwapProgress extends Component {
             </small>
           </p>
         </div>
-        <div className="progress-item">
+        <div className={this.computedClass(5)}>
           <div className="progress-circle"><i>5</i></div>
           <p>Order Complete</p>
         </div>