lukechilds
/
ledger-live-desktop
mirror of https://github.com/lukechilds/ledger-live-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Polish Select usages and migrate SelectExchange

master
meriadec 7 years ago
parent
dd8421af2e
commit
7654fab3d2
No known key found for this signature in database GPG Key ID: 1D2FC2305E2CB399
5 changed files with 33 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/SelectCurrency/index.js
  2. 32
      src/components/SelectExchange.js
  3. 1
      src/components/SettingsPage/sections/Currencies.js
  4. 15
      src/components/base/Select/createStyles.js
  5. 14
      src/components/base/Select/index.js

2
src/components/SelectCurrency/index.js
View File

@ -33,13 +33,13 @@ const SelectCurrency = ({ onChange, value, t, placeholder, currencies, ...props
const options = currencies ? currencies.map(c => ({ ...c, value: c.id, label: c.name })) : [] const options = currencies ? currencies.map(c => ({ ...c, value: c.id, label: c.name })) : []
return ( return (
<Select <Select
{...props}
value={value} value={value}
renderOption={renderOption} renderOption={renderOption}
renderValue={renderOption} renderValue={renderOption}
options={options} options={options}
placeholder={placeholder || t('common:selectCurrency')} placeholder={placeholder || t('common:selectCurrency')}
onChange={onChange} onChange={onChange}
{...props}
/> />
) )
} }

32
src/components/SelectExchange.js
View File

@ -2,19 +2,12 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import type { Currency } from '@ledgerhq/live-common/lib/types' import type { Currency } from '@ledgerhq/live-common/lib/types'
import type { Exchange } from '@ledgerhq/live-common/lib/countervalues/types' import type { Exchange } from '@ledgerhq/live-common/lib/countervalues/types'
import Select from 'components/base/LegacySelect'
import Box from 'components/base/Box' import Select from 'components/base/Select'
import Spinner from 'components/base/Spinner'
import Text from 'components/base/Text' import Text from 'components/base/Text'
import CounterValues from 'helpers/countervalues' import CounterValues from 'helpers/countervalues'
const renderItem = ex => (
<Box grow horizontal alignItems="center" flow={2}>
<Text ff="Open Sans|SemiBold" color="dark" fontSize={4}>
{ex.name}
</Text>
</Box>
)
class ExchangeSelect extends Component< class ExchangeSelect extends Component<
{ {
from: Currency, from: Currency,
@ -82,27 +75,24 @@ class ExchangeSelect extends Component<
} }
render() { render() {
const { onChange, exchangeId, style } = this.props const { onChange, exchangeId, style, ...props } = this.props
const { exchanges, error } = this.state const { exchanges, error } = this.state
const options = exchanges ? exchanges.map(e => ({ value: e.id, label: e.name, ...e })) : []
return exchanges && exchanges.length > 0 ? ( return exchanges && exchanges.length > 0 ? (
<Select <Select
style={style} value={options.find(e => e.id === exchangeId)}
value={exchanges.find(e => e.id === exchangeId)} options={options}
renderSelected={renderItem}
renderItem={renderItem}
keyProp="id"
items={exchanges}
fontSize={4}
onChange={onChange} onChange={onChange}
{...props}
/> />
) : error ? ( ) : error ? (
<Text ff="Open Sans|SemiBold" color="dark" fontSize={4}> <Text ff="Open Sans|SemiBold" color="dark" fontSize={4}>
Failed to load. Failed to load.
</Text> </Text>
) : ( ) : (
<Text ff="Open Sans|SemiBold" color="dark" fontSize={4}> <Spinner color="grey" size={24} />
Loading...
</Text>
) )
} }
} }

1
src/components/SettingsPage/sections/Currencies.js
View File

@ -114,6 +114,7 @@ class TabCurrencies extends PureComponent<Props, State> {
<Body> <Body>
<Row title="Exchange" desc="The exchange to use"> <Row title="Exchange" desc="The exchange to use">
<ExchangeSelect <ExchangeSelect
small
from={currency} from={currency}
to={counterValueCurrency} to={counterValueCurrency}
exchangeId={exchange} exchangeId={exchange}

15
src/components/base/Select/createStyles.js
View File

@ -3,13 +3,22 @@
import { colors } from 'styles/theme' import { colors } from 'styles/theme'
import { ff } from 'styles/helpers' import { ff } from 'styles/helpers'
export default ({ width, minWidth }: { width: number, minWidth: number }) => ({ export default ({
width,
minWidth,
small,
}: {
width: number,
minWidth: number,
small: boolean,
}) => ({
control: (styles: Object, { isFocused }: Object) => ({ control: (styles: Object, { isFocused }: Object) => ({
...styles, ...styles,
width, width,
minWidth, minWidth,
...ff('Open Sans|SemiBold'), ...ff('Open Sans|SemiBold'),
height: 40, height: small ? 34 : 40,
minHeight: 'unset',
backgroundColor: 'white', backgroundColor: 'white',
cursor: 'pointer', cursor: 'pointer',
...(isFocused ...(isFocused
@ -60,6 +69,6 @@ export default ({ width, minWidth }: { width: number, minWidth: number }) => ({
}), }),
container: (styles: Object) => ({ container: (styles: Object) => ({
...styles, ...styles,
fontSize: 13, fontSize: small ? 12 : 13,
}), }),
}) })

14
src/components/base/Select/index.js
View File

@ -18,11 +18,12 @@ type Props = {
renderValue: Option => Node, renderValue: Option => Node,
// optional // optional
placeholder?: string, placeholder: string,
isClearable?: boolean, isClearable: boolean,
isDisabled?: boolean, isDisabled: boolean,
isLoading?: boolean, isLoading: boolean,
isSearchable?: boolean, isSearchable: boolean,
small: boolean,
width: number, width: number,
minWidth: number, minWidth: number,
} }
@ -54,6 +55,7 @@ class Select extends Component<Props> {
renderValue, renderValue,
width, width,
minWidth, minWidth,
small,
...props ...props
} = this.props } = this.props
@ -64,7 +66,7 @@ class Select extends Component<Props> {
classNamePrefix="select" classNamePrefix="select"
options={options} options={options}
components={createRenderers({ renderOption, renderValue })} components={createRenderers({ renderOption, renderValue })}
styles={createStyles({ width, minWidth })} styles={createStyles({ width, minWidth, small })}
placeholder={placeholder} placeholder={placeholder}
isDisabled={isDisabled} isDisabled={isDisabled}
isLoading={isLoading} isLoading={isLoading}

Write Preview
Loading…
Cancel
Save