gdq-archive/frontend/components/LocaleSwitcher.tsx

86 lines
2.5 KiB
TypeScript

/**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import {
ButtonGroup, Dropdown, DropdownButton,
} from 'react-bootstrap';
import { FormattedMessage } from './localization';
import { availableLocales, defaultLocale, localeDescriptions } from '../util/localization';
export default function LocaleSwitcher({
locale,
onChangeLocale,
disabled,
showLoading,
}: {
locale?: string,
onChangeLocale?: (value: string) => void,
disabled?: boolean,
showLoading?: boolean,
} = {}) {
return (
<DropdownButton
disabled={showLoading || disabled}
as={ButtonGroup}
variant="outline-secondary"
align="end"
id="dropdown-locale"
title={(
<>
<FontAwesomeIcon icon="language" />
<span className="sr-only">
<FormattedMessage
id="LocaleSwitcher.screenReaderText"
defaultMessage="Switch language"
description="Screen reader description of the locale switcher button"
/>
</span>
</>
)}
>
{
availableLocales.map((thisLocale) => (
<Dropdown.Item
key={thisLocale}
onClick={
onChangeLocale
? () => { onChangeLocale(thisLocale); }
: null
}
active={locale === thisLocale}
data-lang={thisLocale}
>
<FormattedMessage
id={`LocaleSwitcher.language.${thisLocale}`}
defaultMessage={localeDescriptions[thisLocale]}
/>
</Dropdown.Item>
))
}
</DropdownButton>
);
}
LocaleSwitcher.defaultProps = {
locale: defaultLocale,
onChangeLocale: null,
disabled: false,
showLoading: false,
};