mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-31 07:08:40 -04:00
b3899cd1a5
* Extract language codes into object * Restructure language search so it would find more specific language codes first. Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import moment from 'moment'
|
||
import React, { useCallback } from 'react'
|
||
import { Form } from 'react-bootstrap'
|
||
import { useTranslation } from 'react-i18next'
|
||
|
||
const languages = {
|
||
en: 'English',
|
||
'zh-CN': '简体中文',
|
||
'zh-TW': '繁體中文',
|
||
fr: 'Français',
|
||
de: 'Deutsch',
|
||
ja: '日本語',
|
||
es: 'Español',
|
||
ca: 'Català',
|
||
el: 'Ελληνικά',
|
||
pt: 'Português',
|
||
it: 'Italiano',
|
||
tr: 'Türkçe',
|
||
ru: 'Русский',
|
||
nl: 'Nederlands',
|
||
hr: 'Hrvatski',
|
||
pl: 'Polski',
|
||
uk: 'Українська',
|
||
hi: 'हिन्दी',
|
||
sv: 'Svenska',
|
||
eo: 'Esperanto',
|
||
da: 'Dansk',
|
||
ko: '한국어',
|
||
id: 'Bahasa Indonesia',
|
||
sr: 'Cрпски',
|
||
vi: 'Tiếng Việt',
|
||
ar: 'العربية',
|
||
cs: 'Česky',
|
||
sk: 'Slovensky'
|
||
}
|
||
|
||
const findLanguageCode = (wantedLanguage: string): string => {
|
||
let foundLanguage = Object.keys(languages).find((supportedLanguage) => wantedLanguage === supportedLanguage)
|
||
if (!foundLanguage) {
|
||
foundLanguage = Object.keys(languages).find((supportedLanguage) => wantedLanguage.substr(0, 2) === supportedLanguage)
|
||
}
|
||
return foundLanguage || ''
|
||
}
|
||
|
||
const LanguagePicker: React.FC = () => {
|
||
const { i18n } = useTranslation()
|
||
|
||
const onChangeLang = useCallback(() => async (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||
const language = event.currentTarget.value
|
||
moment.locale(language)
|
||
await i18n.changeLanguage(language)
|
||
}, [i18n])
|
||
|
||
return (
|
||
<Form.Control
|
||
as="select"
|
||
size="sm"
|
||
className="mb-2 mx-auto w-auto"
|
||
value={findLanguageCode(i18n.language)}
|
||
onChange={onChangeLang()}
|
||
>
|
||
{
|
||
Object.entries(languages).map(([language, languageName]) => {
|
||
return <option key={language} value={language}>{languageName}</option>
|
||
})
|
||
}
|
||
</Form.Control>
|
||
)
|
||
}
|
||
|
||
export { LanguagePicker }
|