accounts-frontend/src/components/languageSwitcher/LanguageSwitcher.js

169 lines
5.4 KiB
JavaScript
Raw Normal View History

// @flow
2019-11-11 14:10:05 +05:30
import type { IntlShape } from 'react-intl';
import React, { Component } from 'react';
2019-11-11 14:10:05 +05:30
import { FormattedMessage as Message, injectIntl } from 'react-intl';
import classNames from 'classnames';
import { connect } from 'react-redux';
import { changeLang } from 'components/user/actions';
import LANGS from 'i18n/index.json';
import formStyles from 'components/ui/form/form.scss';
import popupStyles from 'components/ui/popup/popup.scss';
import icons from 'components/ui/icons.scss';
import styles from './languageSwitcher.scss';
import messages from './languageSwitcher.intl.json';
import LanguageList from './LanguageList';
const translateUrl = 'http://ely.by/translate';
export type LocaleData = {
code: string,
name: string,
englishName: string,
progress: number,
isReleased: bool,
};
export type LocalesMap = {[code: string]: LocaleData};
type OwnProps = {|
onClose: () => void,
langs: LocalesMap,
emptyCaptions: Array<{
src: string,
caption: string,
}>,
|};
type Props = {
...OwnProps,
2019-11-11 14:10:05 +05:30
intl: IntlShape,
selectedLocale: string,
changeLang: (lang: string) => void,
};
class LanguageSwitcher extends Component<Props, {
filter: string,
filteredLangs: LocalesMap,
}> {
state = {
filter: '',
filteredLangs: this.props.langs,
};
static defaultProps = {
langs: LANGS,
onClose() {},
};
render() {
2019-11-11 14:10:05 +05:30
const { selectedLocale, onClose, intl } = this.props;
const { filteredLangs } = this.state;
return (
<div className={styles.languageSwitcher}>
<div className={popupStyles.popup}>
<div className={popupStyles.header}>
<h2 className={popupStyles.headerTitle}>
<Message {...messages.siteLanguage} />
</h2>
<span className={classNames(icons.close, popupStyles.close)} onClick={onClose} />
</div>
<div className={styles.languageSwitcherBody}>
<div className={styles.searchBox}>
<input
className={classNames(
formStyles.lightTextField,
formStyles.greenTextField,
)}
2019-11-11 14:10:05 +05:30
placeholder={intl.formatMessage(messages.startTyping)}
onChange={this.onFilterUpdate}
onKeyPress={this.onFilterKeyPress()}
autoFocus
/>
<span className={styles.searchIcon} />
</div>
<LanguageList
selectedLocale={selectedLocale}
langs={filteredLangs}
onChangeLang={this.onChangeLang}
/>
<div className={styles.improveTranslates}>
<div className={styles.improveTranslatesIcon} />
<div className={styles.improveTranslatesContent}>
<div className={styles.improveTranslatesTitle}>
<Message {...messages.improveTranslates} />
</div>
<div className={styles.improveTranslatesText}>
2019-03-09 06:00:06 +05:30
<Message {...messages.improveTranslatesDescription} />
{' '}
<a href={translateUrl} target="_blank">
<Message {...messages.improveTranslatesParticipate} />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
onChangeLang = this.changeLang.bind(this);
changeLang(lang: string) {
this.props.changeLang(lang);
setTimeout(this.props.onClose, 300);
}
onFilterUpdate = (event: SyntheticInputEvent<HTMLInputElement>) => {
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() {
2018-05-03 10:45:09 +05:30
return (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
if (event.key !== 'Enter' || this.state.filter === '') {
return;
}
const locales = Object.keys(this.state.filteredLangs);
if (locales.length === 0) {
return;
}
this.changeLang(locales[0]);
};
}
}
2019-11-11 14:10:05 +05:30
export default injectIntl(
connect<Props, OwnProps, _, _, _, _>((state) => ({
selectedLocale: state.i18n.locale,
}), {
changeLang,
})(LanguageSwitcher)
);