mirror of https://github.com/trezor/trezor-wallet
parent
302f48facb
commit
567dccc6b2
@ -0,0 +1,36 @@
|
|||||||
|
/* @flow */
|
||||||
|
import { bindActionCreators } from 'redux';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { withRouter } from 'react-router-dom';
|
||||||
|
|
||||||
|
import * as WalletActions from 'actions/WalletActions';
|
||||||
|
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
|
||||||
|
import type { State, Dispatch } from 'flowtype';
|
||||||
|
|
||||||
|
import LanguagePicker from './index';
|
||||||
|
|
||||||
|
type StateProps = {
|
||||||
|
language: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
type DispatchProps = {
|
||||||
|
setLanguage: typeof WalletActions.setLanguage,
|
||||||
|
};
|
||||||
|
|
||||||
|
type OwnProps = {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Props = StateProps & DispatchProps;
|
||||||
|
|
||||||
|
const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
|
||||||
|
language: state.wallet.language,
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
|
||||||
|
setLanguage: bindActionCreators(WalletActions.setLanguage, dispatch),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default withRouter(
|
||||||
|
connect(mapStateToProps, mapDispatchToProps)(LanguagePicker),
|
||||||
|
);
|
@ -0,0 +1,45 @@
|
|||||||
|
/* eslint-disable jsx-a11y/accessible-emoji */
|
||||||
|
/* @flow */
|
||||||
|
import * as React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import colors from 'config/colors';
|
||||||
|
import { LANGUAGE } from 'config/variables';
|
||||||
|
|
||||||
|
import type { Props } from './Container';
|
||||||
|
|
||||||
|
const SelectWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
color: ${colors.WHITE};
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SelectIcon = styled.span`
|
||||||
|
padding: 0px 6px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledSelect = styled.select`
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 0;
|
||||||
|
overflow: visible;
|
||||||
|
color: ${colors.WHITE};
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
const LanguagePicker = ({ language, setLanguage }: Props) => (
|
||||||
|
<SelectWrapper>
|
||||||
|
<SelectIcon role="img" aria-label="Select language">🌎</SelectIcon>
|
||||||
|
<StyledSelect
|
||||||
|
onChange={e => setLanguage(e.target.value)}
|
||||||
|
value={language}
|
||||||
|
>
|
||||||
|
{LANGUAGE.map(lang => (
|
||||||
|
<option key={lang.code} label={lang.name} value={lang.code}>{lang.name}</option>
|
||||||
|
))}
|
||||||
|
</StyledSelect>
|
||||||
|
</SelectWrapper>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default LanguagePicker;
|
Loading…
Reference in new issue