lbry-desktop/ui/component/settingLanguage/view.jsx

57 lines
1.5 KiB
React
Raw Normal View History

// @flow
import React, { useState } from 'react';
import { FormField } from 'component/common/form';
import Spinner from 'component/spinner';
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
import LANGUAGES from 'constants/languages';
import { getDefaultLanguage, sortLanguageMap } from 'util/default-languages';
type Props = {
language: string,
setLanguage: (string) => void,
};
function SettingLanguage(props: Props) {
const { language, setLanguage } = props;
2019-11-05 19:54:58 +01:00
const [previousLanguage, setPreviousLanguage] = useState(null);
2019-10-03 18:55:21 +02:00
2019-11-05 19:54:58 +01:00
if (previousLanguage && language !== previousLanguage) {
setPreviousLanguage(null);
}
function onLanguageChange(e) {
const { value } = e.target;
setPreviousLanguage(language || getDefaultLanguage());
2019-11-05 19:54:58 +01:00
setLanguage(value);
if (document && document.documentElement) {
if (LANGUAGES[value].length >= 3) {
document.documentElement.dir = LANGUAGES[value][2];
} else {
document.documentElement.dir = 'ltr';
}
}
}
return (
<React.Fragment>
{previousLanguage && <Spinner type="small" />}
<FormField
name="language_select"
type="select"
onChange={onLanguageChange}
value={language || getDefaultLanguage()}
>
{sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
<option key={langKey} value={langKey}>
{langName}
</option>
))}
</FormField>
</React.Fragment>
);
}
export default SettingLanguage;