navidrome/ui/src/personal/SelectLanguage.js

40 lines
1.1 KiB
JavaScript

import { SelectInput, useLocale, useSetLocale, useTranslate } from 'react-admin'
import { useGetLanguageChoices } from '../i18n'
import { HelpMsg } from './HelpMsg'
import { docsUrl, openInNewTab } from '../utils'
const helpKey = '_help'
export const SelectLanguage = (props) => {
const translate = useTranslate()
const setLocale = useSetLocale()
const locale = useLocale()
const { choices } = useGetLanguageChoices()
choices.push({
id: helpKey,
name: <HelpMsg caption={'Help to translate'} />,
})
return (
<SelectInput
{...props}
source="language"
label={translate('menu.personal.options.language')}
defaultValue={locale}
choices={choices}
translateChoice={false}
onChange={(event) => {
if (event.target.value === helpKey) {
openInNewTab(docsUrl('/docs/developers/translations/'))
return
}
setLocale(event.target.value).then(() => {
localStorage.setItem('locale', event.target.value)
document.documentElement.lang = event.target.value
})
}}
/>
)
}