Merge pull request #422 from meriadec/master

Select polishes
7 years ago · 714aa1c72f
5 changed files with 35 additions and 33 deletions
--- a/src/components/SelectCurrency/index.js
+++ b/src/components/SelectCurrency/index.js
@ -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 })) : []
  return (
    <Select
-      {...props}
      value={value}
      renderOption={renderOption}
      renderValue={renderOption}
      options={options}
      placeholder={placeholder || t('common:selectCurrency')}
      onChange={onChange}
+      {...props}
    />
  )
 }
--- a/src/components/SelectExchange.js
+++ b/src/components/SelectExchange.js
@ -2,19 +2,12 @@
 import React, { Component } from 'react'
 import type { Currency } from '@ledgerhq/live-common/lib/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 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<
  {
    from: Currency,
@ -82,27 +75,24 @@ class ExchangeSelect extends Component<
  }

  render() {
-    const { onChange, exchangeId, style } = this.props
+    const { onChange, exchangeId, style, ...props } = this.props
    const { exchanges, error } = this.state
+
+    const options = exchanges ? exchanges.map(e => ({ value: e.id, label: e.name, ...e })) : []
+
    return exchanges && exchanges.length > 0 ? (
      <Select
-        style={style}
-        value={exchanges.find(e => e.id === exchangeId)}
-        renderSelected={renderItem}
-        renderItem={renderItem}
-        keyProp="id"
-        items={exchanges}
-        fontSize={4}
+        value={options.find(e => e.id === exchangeId)}
+        options={options}
        onChange={onChange}
+        {...props}
      />
    ) : error ? (
      <Text ff="Open Sans|SemiBold" color="dark" fontSize={4}>
        Failed to load.
      </Text>
    ) : (
-      <Text ff="Open Sans|SemiBold" color="dark" fontSize={4}>
-        Loading...
-      </Text>
+      <Spinner color="grey" size={24} />
    )
  }
 }
--- a/src/components/SettingsPage/sections/Currencies.js
+++ b/src/components/SettingsPage/sections/Currencies.js
@ -103,8 +103,8 @@ class TabCurrencies extends PureComponent<Props, State> {
          renderRight={
            // TODO this should only be the subset of currencies of the app
            <SelectCurrency
-              style={{ minWidth: 200 }}
              small
+              minWidth={200}
              value={currency}
              onChange={this.handleChangeCurrency}
              currencies={currencies}
@ -114,11 +114,12 @@ class TabCurrencies extends PureComponent<Props, State> {
        <Body>
          <Row title="Exchange" desc="The exchange to use">
            <ExchangeSelect
+              small
              from={currency}
              to={counterValueCurrency}
              exchangeId={exchange}
              onChange={this.handleChangeExchange}
-              style={{ minWidth: 200 }}
+              minWidth={200}
            />
          </Row>
          {defaults.confirmationsNb ? (
--- a/src/components/base/Select/createStyles.js
+++ b/src/components/base/Select/createStyles.js
@ -3,13 +3,22 @@
 import { colors } from 'styles/theme'
 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) => ({
    ...styles,
    width,
    minWidth,
    ...ff('Open Sans|SemiBold'),
-    height: 40,
+    height: small ? 34 : 40,
+    minHeight: 'unset',
    backgroundColor: 'white',
    cursor: 'pointer',
    ...(isFocused
@ -60,6 +69,6 @@ export default ({ width, minWidth }: { width: number, minWidth: number }) => ({
  }),
  container: (styles: Object) => ({
    ...styles,
-    fontSize: 13,
+    fontSize: small ? 12 : 13,
  }),
 })
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@ -18,11 +18,12 @@ type Props = {
  renderValue: Option => Node,

  // optional
-  placeholder?: string,
-  isClearable?: boolean,
-  isDisabled?: boolean,
-  isLoading?: boolean,
-  isSearchable?: boolean,
+  placeholder: string,
+  isClearable: boolean,
+  isDisabled: boolean,
+  isLoading: boolean,
+  isSearchable: boolean,
+  small: boolean,
  width: number,
  minWidth: number,
 }
@ -54,6 +55,7 @@ class Select extends Component<Props> {
      renderValue,
      width,
      minWidth,
+      small,
      ...props
    } = this.props

@ -64,7 +66,7 @@ class Select extends Component<Props> {
        classNamePrefix="select"
        options={options}
        components={createRenderers({ renderOption, renderValue })}
-        styles={createStyles({ width, minWidth })}
+        styles={createStyles({ width, minWidth, small })}
        placeholder={placeholder}
        isDisabled={isDisabled}
        isLoading={isLoading}