75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import qs from 'qs'
|
|
import React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { Chevron } from '../..'
|
|
import { useConfig } from '../../utilities/Config'
|
|
import { useLocale } from '../../utilities/Locale'
|
|
import { useSearchParams } from '../../utilities/SearchParams'
|
|
import Popup from '../Popup'
|
|
import * as PopupList from '../Popup/PopupButtonList'
|
|
import './index.scss'
|
|
|
|
const baseClass = 'localizer'
|
|
|
|
const Localizer: React.FC<{
|
|
className?: string
|
|
}> = (props) => {
|
|
const { className } = props
|
|
const config = useConfig()
|
|
const { localization } = config
|
|
|
|
const locale = useLocale()
|
|
const searchParams = useSearchParams()
|
|
const { t } = useTranslation('general')
|
|
|
|
if (localization) {
|
|
const { locales } = localization
|
|
|
|
return (
|
|
<div className={[baseClass, className].filter(Boolean).join(' ')}>
|
|
<div className={`${baseClass}__label`}>{`${t('locale')}:`}</div>
|
|
|
|
<Popup
|
|
button={
|
|
<div className={`${baseClass}__button`}>
|
|
{`${locale.label}`}
|
|
<Chevron className={`${baseClass}__chevron`} />
|
|
</div>
|
|
}
|
|
horizontalAlign="right"
|
|
render={({ close }) => (
|
|
<PopupList.ButtonGroup>
|
|
{locales.map((localeOption) => {
|
|
const newParams = {
|
|
...searchParams,
|
|
locale: localeOption.code,
|
|
}
|
|
|
|
const search = qs.stringify(newParams)
|
|
|
|
if (localeOption.code !== locale.code) {
|
|
return (
|
|
<PopupList.Button key={localeOption.code} onClick={close} to={{ search }}>
|
|
{localeOption.label}
|
|
{localeOption.label !== localeOption.code && ` (${localeOption.code})`}
|
|
</PopupList.Button>
|
|
)
|
|
}
|
|
|
|
return null
|
|
})}
|
|
</PopupList.ButtonGroup>
|
|
)}
|
|
showScrollbar
|
|
size="large"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
export default Localizer
|