make touchbar work

This commit is contained in:
Matthias Kretschmann 2019-05-15 22:25:36 +02:00
parent a5d5022688
commit 8b3d0df203
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 36 additions and 21 deletions

View File

@ -1,34 +1,49 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { TouchBar, Button } from 'react-touchbar-electron'
import { locale } from '../util/moneyFormatter'
import { formatCurrency } from '@coingecko/cryptoformat'
import { AppContext } from '../store/createContext'
export default class Touchbar extends PureComponent {
items = (
<>
const TouchbarItems = ({ prices, currency, toggleCurrencies }) => (
<>
<Button
label={formatCurrency(1, 'OCEAN', locale).replace(/OCEAN/, 'Ọ')}
onClick={() => toggleCurrencies('ocean')}
backgroundColor={currency === 'ocean' ? '#f6388a' : '#141414'}
/>
{Object.keys(prices).map(key => (
<Button
label={formatCurrency(1, 'OCEAN', locale).replace(/OCEAN/, 'Ọ')}
onClick={() => this.context.toggleCurrencies('ocean')}
key={key}
label={formatCurrency(prices[key], key.toUpperCase(), locale)
.replace(/BTC/, 'Ƀ')
.replace(/ETH/, 'Ξ')}
onClick={() => toggleCurrencies(key)}
backgroundColor={
currency !== 'ocean' && currency === key ? '#f6388a' : '#141414'
}
/>
{Object.keys(this.context.prices).map(key => (
<Button
key={key}
label={formatCurrency(
this.context.prices[key],
key.toUpperCase(),
locale
)
.replace(/BTC/, 'Ƀ')
.replace(/ETH/, 'Ξ')}
onClick={() => this.context.toggleCurrencies(key)}
/>
))}
</>
)
))}
</>
)
TouchbarItems.propTypes = {
prices: PropTypes.object.isRequired,
currency: PropTypes.string.isRequired,
toggleCurrencies: PropTypes.func.isRequired
}
export default class Touchbar extends PureComponent {
render() {
return <TouchBar>{this.items}</TouchBar>
return (
<TouchBar>
<TouchbarItems
prices={this.context.prices}
currency={this.context.currency}
toggleCurrencies={this.context.toggleCurrencies}
/>
</TouchBar>
)
}
}