Igor Octaviano
f65639c2b0
* Add dialog provider boilerplate and improve provider imports * Add react-draggable dependency * Add dialog service boilerplate * Refactor modal to use react-modal and remove dependency on modal themed styles * Update cinedialog to use new dialog provider * Add multiple dialogs and refactor provider (dialogs) * Set app root (modal) * Add modal zindex bigger than tooltip * Block drag on buttons/svgs/paths/input and improve jsdoc * Use guid util to generate dialog ids * Explicit props in dialog provider * Improve jsdocs * Fix tests broken * Fix boundaries calculation * Remember last dialog position * Update providers location * Add scroll to modal * Add toggable button toolbar and fix css modal
67 lines
1.4 KiB
JavaScript
67 lines
1.4 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import i18n from '@ohif/i18n';
|
|
|
|
import './LanguageSwitcher.styl';
|
|
import { withTranslation } from '../../contextProviders';
|
|
|
|
const LanguageSwitcher = () => {
|
|
const getCurrentLanguage = (language = i18n.language) =>
|
|
language.split('-')[0];
|
|
|
|
const [currentLanguage, setCurrentLanguage] = useState(getCurrentLanguage());
|
|
const languages = [
|
|
// TODO: list of available languages should come from i18n.options.resources
|
|
{
|
|
value: 'en',
|
|
label: 'English',
|
|
},
|
|
{
|
|
value: 'es',
|
|
label: 'Spanish',
|
|
},
|
|
];
|
|
|
|
const onChange = () => {
|
|
const { value } = event.target;
|
|
const language = getCurrentLanguage(value);
|
|
setCurrentLanguage(language);
|
|
|
|
i18n.init({
|
|
fallbackLng: language,
|
|
lng: language,
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
|
|
i18n.on('languageChanged', () => {
|
|
if (mounted) {
|
|
setCurrentLanguage(getCurrentLanguage());
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
mounted = false;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<select
|
|
name="language-select"
|
|
id="language-select"
|
|
className="language-select"
|
|
value={currentLanguage}
|
|
onChange={onChange}
|
|
>
|
|
{languages.map(language => (
|
|
<option key={language.value} value={language.value}>
|
|
{language.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
);
|
|
};
|
|
|
|
export default withTranslation('UserPreferencesModal')(LanguageSwitcher);
|