MyCrypto/common/components/ElectronNav/LanguageSelect.tsx

59 lines
1.4 KiB
TypeScript

import React from 'react';
import classnames from 'classnames';
import { connect } from 'react-redux';
import { languages } from 'config';
import { TChangeLanguage, changeLanguage } from 'actions/config';
import { getLanguageSelection } from 'selectors/config';
import { AppState } from 'reducers';
import './LanguageSelect.scss';
interface OwnProps {
closePanel(): void;
}
interface StateProps {
languageSelection: string;
}
interface DispatchProps {
changeLanguage: TChangeLanguage;
}
type Props = OwnProps & StateProps & DispatchProps;
class LanguageSelect extends React.Component<Props> {
public render() {
const { languageSelection } = this.props;
return (
<div className="LanguageSelect">
{Object.entries(languages).map(lang => (
<button
key={lang[0]}
className={classnames({
'LanguageSelect-language': true,
'is-selected': languageSelection === lang[0]
})}
onClick={() => this.handleLanguageSelect(lang[0])}
>
{lang[1]}
</button>
))}
</div>
);
}
private handleLanguageSelect = (lang: string) => {
this.props.changeLanguage(lang);
this.props.closePanel();
};
}
export default connect(
(state: AppState): StateProps => ({
languageSelection: getLanguageSelection(state)
}),
{
changeLanguage
}
)(LanguageSelect);