arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-08 23:21:00 +00:00
Code Issues Releases Wiki Activity

replace native select with ReactSelect

Browse Source
This commit is contained in:
slowbackspace 2019-02-28 13:56:22 +01:00
parent c77ad9f78f
commit dcd897deb5
2 changed files with 75 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/Header/components/LanguagePicker/index.js
View File

@ -3,7 +3,8 @@
import * as React from 'react'; import * as React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors'; import colors from 'config/colors';
import { LANGUAGE } from 'config/variables'; import ReactSelect from 'react-select';
import { LANGUAGE, SCREEN_SIZE } from 'config/variables';
import type { Props } from './Container'; import type { Props } from './Container';
@ -11,6 +12,11 @@ const SelectWrapper = styled.div`
display: flex; display: flex;
color: ${colors.WHITE}; color: ${colors.WHITE};
align-items: center; align-items: center;
width: 140px;
@media screen and (max-width: ${SCREEN_SIZE.XS}) {
width: 100px;
}
`; `;
const SelectIcon = styled.span` const SelectIcon = styled.span`
@ -18,34 +24,80 @@ const SelectIcon = styled.span`
padding-left: 6px; padding-left: 6px;
`; `;
const StyledSelect = styled.select` const styles = {
height: 100%; singleValue: base => ({
padding-left: 30px; ...base,
border: 0; color: colors.WHITE,
background: transparent; paddingLeft: '25px', // flag
cursor: pointer; }),
appearance: none; control: base => ({
border-radius: 0; ...base,
overflow: visible; height: '40px',
color: ${colors.WHITE}; border: 'none',
`; background: 'transparent',
boxShadow: 'none',
cursor: 'pointer',
}),
indicatorSeparator: () => ({
display: 'none',
}),
container: base => ({
...base,
width: '100%',
}),
dropdownIndicator: () => ({
display: 'none',
}),
menu: base => ({
...base,
color: colors.WHITE,
marginTop: '6px',
boxShadow: 'none',
}),
menuList: base => ({
...base,
padding: 0,
boxShadow: 'none',
background: colors.WHITE,
borderLeft: `1px solid ${colors.DIVIDER}`,
borderRight: `1px solid ${colors.DIVIDER}`,
borderBottom: `1px solid ${colors.DIVIDER}`,
}),
option: (base, { isFocused }) => ({
...base,
color: colors.TEXT_SECONDARY,
background: isFocused ? colors.LANDING : colors.WHITE,
borderRadius: 0,
'&:hover': {
cursor: 'pointer',
background: colors.LANDING,
},
}),
};
const buildOption = (langCode) => {
const lang = LANGUAGE.find(l => l.code === langCode);
return { value: lang.code, label: lang.name };
};
const LanguagePicker = ({ language, fetchLocale }: Props) => ( const LanguagePicker = ({ language, fetchLocale }: Props) => (
<SelectWrapper> <SelectWrapper>
<SelectIcon role="img" aria-label="Select language"> <SelectIcon role="img" aria-label="Select language">
<svg width="24" height="18"> <svg width="21" height="15">
<image xlinkHref={`l10n/flags/${language}.svg`} width="24" height="18" /> <image xlinkHref={`l10n/flags/${language}.svg`} width="21" height="15" />
</svg> </svg>
</SelectIcon> </SelectIcon>
<StyledSelect <ReactSelect
onChange={e => fetchLocale(e.target.value)} styles={styles}
value={language} isSearchable={false}
> isClearable={false}
{LANGUAGE.map(lang => ( onChange={option => fetchLocale(option.value)}
<option key={lang.code} label={lang.name} value={lang.code}>{lang.name}</option> value={buildOption(language)}
))} options={
</StyledSelect> LANGUAGE.map(lang => buildOption(lang.code))
}
/>
</SelectWrapper> </SelectWrapper>
); );

1
src/components/Select/index.js
View File

@ -61,6 +61,7 @@ const styles = isSearchable => ({
}), }),
}); });
const propTypes = { const propTypes = {
isAsync: PropTypes.bool, isAsync: PropTypes.bool,
isSearchable: PropTypes.bool, isSearchable: PropTypes.bool,