47 lines
1.2 KiB
JavaScript
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>
|
|
)
|
|
}
|
|
}
|