blowfish/src/app/components/Ticker.jsx

47 lines
1.2 KiB
JavaScript

import React, { PureComponent } from 'react'
import posed, { PoseGroup } from 'react-pose'
import { AppContext } from '../store/createContext'
import { cryptoFormatter } from '../../utils'
import './Ticker.css'
import { fadeIn } from './Animations'
const Item = posed.div(fadeIn)
export default class Ticker extends PureComponent {
static contextType = AppContext
items = activeStyle =>
Object.keys(this.context.prices).map((key, i) => (
<Item key={i} className="number-unit">
<button
className="label label--price"
onClick={() => this.context.toggleCurrencies(key)}
disabled={this.context.needsConfig}
style={
key === this.context.currency && !this.context.needsConfig
? activeStyle
: {}
}
>
{cryptoFormatter(this.context.prices[key], key)}
</button>
</Item>
))
render() {
const { accentColor } = this.context
const activeStyle = {
backgroundColor: accentColor,
color: '#fff',
borderColor: accentColor
}
return (
<footer className="number-unit-wrap ticker" {...this.props}>
<PoseGroup animateOnMount>{this.items(activeStyle)}</PoseGroup>
</footer>
)
}
}