mirror of https://github.com/trezor/trezor-wallet
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.7 KiB
107 lines
2.7 KiB
/* @flow */
|
|
import * as React from 'react';
|
|
import styled from 'styled-components';
|
|
import colors from 'config/colors';
|
|
import ReactSelect from 'react-select';
|
|
import { LANGUAGE, SCREEN_SIZE } from 'config/variables';
|
|
|
|
import type { Props } from './Container';
|
|
|
|
const SelectWrapper = styled.div`
|
|
display: flex;
|
|
color: ${colors.WHITE};
|
|
align-items: center;
|
|
width: 180px;
|
|
|
|
@media screen and (max-width: ${SCREEN_SIZE.MD}) {
|
|
width: 140px;
|
|
}
|
|
|
|
@media screen and (max-width: ${SCREEN_SIZE.XS}) {
|
|
width: 100px;
|
|
}
|
|
`;
|
|
|
|
const SelectIcon = styled.span`
|
|
margin-right: -24px;
|
|
padding-left: 6px;
|
|
display: flex;
|
|
`;
|
|
|
|
const styles = {
|
|
singleValue: base => ({
|
|
...base,
|
|
color: colors.WHITE,
|
|
paddingLeft: '25px', // flag
|
|
}),
|
|
control: base => ({
|
|
...base,
|
|
height: '40px',
|
|
border: 'none',
|
|
background: 'transparent',
|
|
boxShadow: 'none',
|
|
cursor: 'pointer',
|
|
}),
|
|
indicatorSeparator: () => ({
|
|
display: 'none',
|
|
}),
|
|
container: base => ({
|
|
...base,
|
|
width: '100%',
|
|
}),
|
|
dropdownIndicator: () => ({
|
|
display: 'block',
|
|
marginTop: '3px',
|
|
}),
|
|
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) => (
|
|
<SelectWrapper>
|
|
<SelectIcon role="img" aria-label="Select language">
|
|
<svg width="21" height="15">
|
|
<image xlinkHref={`l10n/flags/${language}.svg`} width="21" height="15" />
|
|
</svg>
|
|
</SelectIcon>
|
|
<ReactSelect
|
|
styles={styles}
|
|
isSearchable={false}
|
|
isClearable={false}
|
|
onChange={option => fetchLocale(option.value)}
|
|
value={buildOption(language)}
|
|
options={LANGUAGE.map(lang => buildOption(lang.code))}
|
|
/>
|
|
</SelectWrapper>
|
|
);
|
|
|
|
export default LanguagePicker;
|