@redocly/theme/lib/components/LanguagePicker/LanguagePicker.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LanguagePicker = LanguagePicker;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const GlobalOutlinedIcon_1 = require("../../icons/GlobalOutlinedIcon/GlobalOutlinedIcon");
const Button_1 = require("../../components/Button/Button");
const Dropdown_1 = require("../../components/Dropdown/Dropdown");
const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
function LanguagePicker(props) {
    const { currentLocale, locales, setLocale } = (0, hooks_1.useLanguagePicker)();
    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
    const otelTelemetry = useOtelTelemetry();
    if (locales.length < 2 || !currentLocale) {
        return null;
    }
    const languagePickerButton = (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(GlobalOutlinedIcon_1.GlobalOutlinedIcon, { color: "--button-content-color" }), variant: "secondary", size: "medium" }));
    const languageItems = locales.map((locale) => ({
        content: locale.name || locale.code || '',
        onAction: () => {
            setLocale(locale.code);
            props.onChangeLanguage(locale.code);
            otelTelemetry.send({
                type: 'language_picker_locale.changed',
                payload: { locale: locale.code },
            });
        },
        active: locale.code === currentLocale.code,
        suffix: locale.code === currentLocale.code && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null),
    }));
    return (react_1.default.createElement(LanguageDropdown, { triggerEvent: "click", placement: props.placement, alignment: props.alignment, trigger: languagePickerButton },
        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: languageItems })));
}
const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).attrs(() => ({
    dataAttributes: {
        'data-component-name': 'LanguagePicker/LanguagePicker',
    },
})) `
  display: none;
  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    display: block;
  }

  --dropdown-menu-item-justify-content: space-between;
  --dropdown-menu-item-gap: var(--spacing-xxs);
  --dropdown-menu-font-size: var(--language-picker-dropdown-font-size);
  --dropdown-menu-font-weight: var(--language-picker-dropdown-font-weight);
  --dropdown-menu-line-height: var(--language-picker-dropdown-line-height);
  --dropdown-menu-text-color: var(--language-picker-dropdown-text-color);
  --dropdown-menu-min-width: var(--language-picker-dropdown-min-width);
  --dropdown-menu-max-width: var(--language-picker-dropdown-max-width);
  --dropdown-menu-max-height: var(--language-picker-dropdown-max-height);
  --dropdown-menu-padding: var(--language-picker-dropdown-padding);
  --dropdown-menu-border-radius: var(--language-picker-dropdown-border-radius);
  --dropdown-menu-box-shadow: var(--language-picker-dropdown-box-shadow);
  --dropdown-menu-border-color: var(--language-picker-dropdown-border-color);
  --dropdown-menu-bg-color: var(--language-picker-dropdown-bg-color);
  --dropdown-menu-item-padding-horizontal: var(--language-picker-dropdown-item-padding-horizontal);
  --dropdown-menu-item-padding-vertical: var(--language-picker-dropdown-item-padding-vertical);
  --dropdown-menu-item-separator-padding-top: var(
    --language-picker-dropdown-item-separator-padding-top
  );
  --dropdown-menu-item-separator-padding-bottom: var(
    --language-picker-dropdown-item-separator-padding-bottom
  );
  --dropdown-menu-item-border-radius: var(--language-picker-dropdown-item-border-radius);
  --dropdown-menu-item-bg-color-active: var(--language-picker-dropdown-item-bg-color-active);
  --dropdown-menu-item-bg-color-hover: var(--language-picker-dropdown-item-bg-color-hover);
  --dropdown-menu-item-bg-color-disabled: var(--language-picker-dropdown-item-bg-color-disabled);
  --dropdown-menu-item-separator-border-color: var(
    --language-picker-dropdown-item-separator-border-color
  );
  --dropdown-menu-item-color-dangerous: var(--language-picker-dropdown-item-color-dangerous);
  --dropdown-menu-item-color-disabled: var(--language-picker-dropdown-item-color-disabled);
  --dropdown-menu-item-color-active: var(--language-picker-dropdown-item-color-active);
  --dropdown-menu-item-color-hover: var(--language-picker-dropdown-item-color-hover);
`;
//# sourceMappingURL=LanguagePicker.js.map