77 lines
2.1 KiB
React
77 lines
2.1 KiB
React
import React, { useCallback, useMemo, useEffect } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import MenuItem from '@material-ui/core/MenuItem';
|
|
import Select from '@material-ui/core/Select';
|
|
|
|
import allLocales from '../locales';
|
|
|
|
function LocaleSelect({ locales: localesProp, ...other } = {}) {
|
|
const { i18n, ready } = useTranslation();
|
|
|
|
const handleChange = useCallback((event) => {
|
|
i18n.changeLanguage(event.target.value);
|
|
}, [ i18n ])
|
|
|
|
const locales = useMemo(() => {
|
|
if (!localesProp) {
|
|
return allLocales;
|
|
}
|
|
const supported = allLocales.filter(locale => {
|
|
return localesProp.includes(locale.locale);
|
|
});
|
|
return supported;
|
|
}, [localesProp]);
|
|
|
|
useEffect(() => {
|
|
if (locales) {
|
|
const found = locales.find((locale) => {
|
|
return locale.locale === i18n.language;
|
|
});
|
|
if (found) {
|
|
// Have language -> is supported all good.
|
|
return;
|
|
}
|
|
const wanted = i18n.modules.languageDetector.detectors.navigator.lookup();
|
|
i18n.modules.languageDetector.services.languageUtils.options.supportedLngs = locales.map(locale => locale.locale);
|
|
i18n.modules.languageDetector.services.languageUtils.options.fallbackLng = null;
|
|
|
|
let best = i18n.modules.languageDetector.services.languageUtils.getBestMatchFromCodes(wanted);
|
|
if (!best) {
|
|
best = locales[0].locale;
|
|
}
|
|
|
|
// Auto change language to best one found if the current selected one is not enabled.
|
|
if (i18n.language !== best) {
|
|
i18n.changeLanguage(best);
|
|
}
|
|
}
|
|
}, [i18n, locales]);
|
|
|
|
if (!ready || !locales || locales.length < 2) {
|
|
return null;
|
|
}
|
|
|
|
return <Select
|
|
value={i18n.language}
|
|
onChange={handleChange}
|
|
{...other}
|
|
>
|
|
{locales.map(language => {
|
|
return <MenuItem
|
|
key={language.locale}
|
|
value={language.locale}>
|
|
{language.nativeName}
|
|
</MenuItem>;
|
|
})}
|
|
</Select>;
|
|
}
|
|
|
|
LocaleSelect.propTypes = {
|
|
locales: PropTypes.arrayOf(PropTypes.string),
|
|
};
|
|
|
|
export default LocaleSelect;
|