66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import { translate, Trans } from 'react-i18next';
|
|
import i18n from 'i18next';
|
|
|
|
import style from './style.css';
|
|
|
|
import locales from 'locales';
|
|
|
|
const localeToAvailable = (locale, available, defaultLocale) => {
|
|
if (available.includes(locale)) {
|
|
return locale;
|
|
}
|
|
|
|
const parts = locale.split('-');
|
|
|
|
if (parts.length > 0 && available.includes(parts[0])) {
|
|
return parts[0];
|
|
}
|
|
|
|
return defaultLocale;
|
|
};
|
|
|
|
class LocaleSwitcher extends React.PureComponent {
|
|
constructor() {
|
|
super();
|
|
|
|
this.state = {
|
|
current: localeToAvailable(i18n.language || '', Object.keys(locales), 'en')
|
|
};
|
|
}
|
|
|
|
localeSelector = React.createRef()
|
|
|
|
componentDidMount() {
|
|
i18n.on('languageChanged', this.handleLanguageChange);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
i18n.off('languageChanged', this.handleLanguageChange);
|
|
}
|
|
|
|
handleSelectChange = () => {
|
|
i18n.changeLanguage(this.localeSelector.current.value);
|
|
}
|
|
|
|
handleLanguageChange = lang => {
|
|
this.setState({ current: lang });
|
|
}
|
|
|
|
render() {
|
|
const { current } = this.state;
|
|
|
|
return <label>
|
|
<Trans>Language</Trans>
|
|
<select className={ style.switcher } value={ current } ref={ this.localeSelector } onChange={ this.handleSelectChange }>
|
|
{ Object.keys(locales).map(locale => (
|
|
<option value={ locale } key={ locale }>{ i18n.getFixedT(locale)('/displayName') }</option>
|
|
)) }
|
|
</select>
|
|
</label>;
|
|
}
|
|
}
|
|
|
|
export default translate()(LocaleSwitcher);
|
|
export { LocaleSwitcher };
|