import React from 'react'; import { FormattedMessage as Message, injectIntl, IntlShape } from 'react-intl'; import classNames from 'classnames'; import { connect } from 'react-redux'; import { changeLang } from 'app/components/user/actions'; import LANGS from 'app/i18n'; import formStyles from 'app/components/ui/form/form.scss'; import popupStyles from 'app/components/ui/popup/popup.scss'; import icons from 'app/components/ui/icons.scss'; import styles from './languageSwitcher.scss'; import messages from './languageSwitcher.intl.json'; import LanguageList from './LanguageList'; import { RootState } from 'app/reducers'; const translateUrl = 'http://ely.by/translate'; export type LocaleData = { code: string; name: string; englishName: string; progress: number; isReleased: boolean; }; export type LocalesMap = { [code: string]: LocaleData }; type OwnProps = { onClose: () => void; langs: LocalesMap; emptyCaptions: Array<{ src: string; caption: string; }>; }; interface Props extends OwnProps { intl: IntlShape; selectedLocale: string; changeLang: (lang: string) => void; } class LanguageSwitcher extends React.Component< Props, { filter: string; filteredLangs: LocalesMap; } > { state = { filter: '', filteredLangs: this.props.langs, }; static defaultProps = { langs: LANGS, onClose() {}, }; render() { const { selectedLocale, onClose, intl } = this.props; const { filteredLangs } = this.state; return (

{' '}
); } onChangeLang = this.changeLang.bind(this); changeLang(lang: string) { this.props.changeLang(lang); setTimeout(this.props.onClose, 300); } onFilterUpdate = (event: React.ChangeEvent) => { const filter = event.currentTarget.value.trim().toLowerCase(); const { langs } = this.props; const result = Object.keys(langs).reduce((previous, key) => { if ( langs[key].englishName.toLowerCase().indexOf(filter) === -1 && langs[key].name.toLowerCase().indexOf(filter) === -1 ) { return previous; } previous[key] = langs[key]; return previous; }, {}); this.setState({ filter, filteredLangs: result, }); }; onFilterKeyPress() { return (event: React.KeyboardEvent) => { if (event.key !== 'Enter' || this.state.filter === '') { return; } const locales = Object.keys(this.state.filteredLangs); if (locales.length === 0) { return; } this.changeLang(locales[0]); }; } } export default injectIntl( connect( (state: RootState) => ({ selectedLocale: state.i18n.locale, }), { changeLang, }, )(LanguageSwitcher), );