gdq-archive/frontend/components/LocaleSwitcher.tsx

/**
 * 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,
};