Browse Source

Use the new Select in some places

master
meriadec 7 years ago
parent
commit
3bc6446c2f
No known key found for this signature in database GPG Key ID: 1D2FC2305E2CB399
  1. 53
      src/components/SelectAccount/index.js
  2. 64
      src/components/SelectCurrency/index.js
  3. 33
      src/components/SettingsPage/sections/Display.js

53
src/components/SelectAccount/index.js

@ -5,14 +5,13 @@ import { connect } from 'react-redux'
import { translate } from 'react-i18next'
import { getCryptoCurrencyIcon } from '@ledgerhq/live-common/lib/react'
import noop from 'lodash/noop'
import type { Account } from '@ledgerhq/live-common/lib/types'
import type { T } from 'types/common'
import type { Option } from 'components/base/Select'
import { getVisibleAccounts } from 'reducers/accounts'
import Select from 'components/base/LegacySelect'
import Select from 'components/base/Select'
import FormattedVal from 'components/base/FormattedVal'
import Box from 'components/base/Box'
import Text from 'components/base/Text'
@ -21,9 +20,10 @@ const mapStateToProps = state => ({
accounts: getVisibleAccounts(state),
})
const renderItem = a => {
const Icon = getCryptoCurrencyIcon(a.currency)
const { color } = a.currency
const renderOption = a => {
const { data: account } = a
const Icon = getCryptoCurrencyIcon(account.currency)
const { color } = account.currency
// FIXME: we need a non-hacky way to handle text ellipsis
const nameOuterStyle = { width: 0 }
@ -38,11 +38,11 @@ const renderItem = a => {
)}
<Box grow style={nameOuterStyle} ff="Open Sans|SemiBold" color="dark" fontSize={4}>
<Text style={nameInnerStyle} ff="Open Sans|SemiBold" color="dark" fontSize={4}>
{a.name}
{account.name}
</Text>
</Box>
<Box>
<FormattedVal color="grey" val={a.balance} unit={a.unit} showCode />
<FormattedVal color="grey" val={account.balance} unit={account.unit} showCode />
</Box>
</Box>
)
@ -50,28 +50,27 @@ const renderItem = a => {
type Props = {
accounts: Account[],
onChange?: () => Account | void,
value?: Account | null,
onChange: Option => void,
value: ?Account,
t: T,
}
const RawSelectAccount = ({ accounts, onChange, value, t, ...props }: Props) => (
<Select
{...props}
value={value && accounts.find(a => value && a.id === value.id)}
renderSelected={renderItem}
renderItem={renderItem}
keyProp="id"
items={accounts.sort((a, b) => (a.name < b.name ? -1 : 1))}
placeholder={t('common:selectAccount')}
fontSize={4}
onChange={onChange}
/>
)
RawSelectAccount.defaultProps = {
onChange: noop,
value: undefined,
const RawSelectAccount = ({ accounts, onChange, value, t, ...props }: Props) => {
const options = accounts
.sort((a, b) => (a.name < b.name ? -1 : 1))
.map(a => ({ ...a, value: a.id, label: a.name }))
const selectedOption = value ? options.find(o => o.value === value.id) : null
return (
<Select
{...props}
value={selectedOption}
options={options}
renderValue={renderOption}
renderOption={renderOption}
placeholder={t('common:selectAccount')}
onChange={onChange}
/>
)
}
export const SelectAccount = translate()(RawSelectAccount)

64
src/components/SelectCurrency/index.js

@ -4,32 +4,17 @@ import React from 'react'
import { translate } from 'react-i18next'
import { connect } from 'react-redux'
import noop from 'lodash/noop'
import type { CryptoCurrency } from '@ledgerhq/live-common/lib/types'
import type { T } from 'types/common'
import { availableCurrencies } from 'reducers/settings'
import type { Option } from 'components/base/Select'
import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon'
import Select from 'components/base/LegacySelect'
import Select from 'components/base/Select'
import Box from 'components/base/Box'
const renderItem = (currency: CryptoCurrency) => {
const { color, name } = currency
return (
<Box grow horizontal alignItems="center" flow={2}>
<Box style={{ width: 16, height: 16, color }}>
<CryptoCurrencyIcon currency={currency} size={16} />
</Box>
<Box grow ff="Open Sans|SemiBold" color="dark" fontSize={4}>
{name}
</Box>
</Box>
)
}
type OwnProps = {
onChange: Function,
onChange: Option => void,
currencies?: CryptoCurrency[],
value?: CryptoCurrency,
placeholder: string,
@ -44,23 +29,34 @@ const mapStateToProps = (state, props: OwnProps) => ({
currencies: props.currencies || availableCurrencies(state),
})
const SelectCurrency = ({ onChange, value, t, placeholder, currencies, ...props }: Props) => (
<Select
{...props}
value={value}
renderSelected={renderItem}
renderItem={renderItem}
keyProp="id"
items={currencies}
placeholder={placeholder || t('common:selectCurrency')}
fontSize={4}
onChange={onChange}
/>
)
const SelectCurrency = ({ onChange, value, t, placeholder, currencies, ...props }: Props) => {
const options = currencies ? currencies.map(c => ({ ...c, value: c.id, label: c.name })) : []
return (
<Select
{...props}
value={value}
renderOption={renderOption}
renderValue={renderOption}
options={options}
placeholder={placeholder || t('common:selectCurrency')}
onChange={onChange}
/>
)
}
SelectCurrency.defaultProps = {
onChange: noop,
value: undefined,
const renderOption = (option: Option) => {
const { data: currency } = option
const { color, name } = currency
return (
<Box grow horizontal alignItems="center" flow={2}>
<Box style={{ width: 16, height: 16, color }}>
<CryptoCurrencyIcon currency={currency} size={16} />
</Box>
<Box grow ff="Open Sans|SemiBold" color="dark" fontSize={4}>
{name}
</Box>
</Box>
)
}
export default translate()(connect(mapStateToProps)(SelectCurrency))

33
src/components/SettingsPage/sections/Display.js

@ -7,7 +7,7 @@ import { listFiatCurrencies } from '@ledgerhq/live-common/lib/helpers/currencies
import type { SettingsState as Settings } from 'reducers/settings'
import type { T } from 'types/common'
import Select from 'components/base/LegacySelect'
import Select from 'components/base/Select'
import RadioGroup from 'components/base/RadioGroup'
import IconDisplay from 'icons/Display'
import languageKeys from 'config/languages'
@ -23,16 +23,16 @@ import {
const regions = Object.keys(regionsByKey).map(key => {
const [language, region] = key.split('-')
return { key, language, region, name: regionsByKey[key] }
return { value: key, language, region, label: regionsByKey[key] }
})
const fiats = listFiatCurrencies()
.map(f => f.units[0])
// For now we take first unit, in the future we'll need to figure out something else
.map(fiat => ({
key: fiat.code,
value: fiat.code,
label: `${fiat.name} - ${fiat.code}${fiat.symbol ? ` (${fiat.symbol})` : ''}`,
fiat,
name: `${fiat.name} - ${fiat.code}${fiat.symbol ? ` (${fiat.symbol})` : ''}`,
}))
type Props = {
@ -79,7 +79,7 @@ class TabProfile extends PureComponent<Props, State> {
})
}
handleChangeLanguage = ({ key: languageKey }: *) => {
handleChangeLanguage = ({ value: languageKey }: *) => {
const { i18n, saveSettings } = this.props
this.setState({ cachedLanguageKey: languageKey })
window.requestIdleCallback(() => {
@ -117,12 +117,16 @@ class TabProfile extends PureComponent<Props, State> {
cachedRegion,
} = this.state
const languages = languageKeys.map(key => ({ key, name: t(`language:${key}`) }))
const currentLanguage = languages.find(l => l.key === cachedLanguageKey)
const languages = languageKeys.map(key => ({ value: key, label: t(`language:${key}`) }))
const currentLanguage = languages.find(l => l.value === cachedLanguageKey)
const regionsFiltered = regions.filter(({ language }) => cachedLanguageKey === language)
const currentRegion =
regionsFiltered.find(({ region }) => cachedRegion === region) || regionsFiltered[0]
const cvOption = cachedCounterValue
? fiats.find(f => f.value === cachedCounterValue.value)
: null
return (
<Section>
<Header
@ -136,33 +140,34 @@ class TabProfile extends PureComponent<Props, State> {
desc={t('settings:display.counterValueDesc')}
>
<Select
style={{ minWidth: 250 }}
small
minWidth={250}
onChange={this.handleChangeCounterValue}
itemToString={item => (item ? item.name : '')}
renderSelected={item => item && item.name}
items={fiats}
value={cachedCounterValue}
options={fiats}
value={cvOption}
/>
</Row>
<Row title={t('settings:display.language')} desc={t('settings:display.languageDesc')}>
<Select
style={{ minWidth: 250 }}
small
minWidth={250}
isSearchable={false}
onChange={this.handleChangeLanguage}
renderSelected={item => item && item.name}
value={currentLanguage}
items={languages}
options={languages}
/>
</Row>
<Row title={t('settings:display.region')} desc={t('settings:display.regionDesc')}>
<Select
style={{ minWidth: 250 }}
small
minWidth={250}
onChange={this.handleChangeRegion}
renderSelected={item => item && item.name}
value={currentRegion}
items={regionsFiltered}
options={regionsFiltered}
/>
</Row>
<Row title={t('settings:display.stock')} desc={t('settings:display.stockDesc')}>

Loading…
Cancel
Save