status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

swapProgress: create computed class for active step; cleanup

This commit is contained in:
Daniel Ternyak 2017-07-03 19:09:33 -05:00
parent 513b4c67b9
commit 8f77aedc70
1 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
common/containers/Tabs/Swap/components/swapProgress.js
View File

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