@redocly/theme/lib/components/UserMenu/UserMenu.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.UserMenu = UserMenu;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
const hooks_1 = require("../../core/hooks");
const LoginButton_1 = require("../../components/UserMenu/LoginButton");
const UserAvatar_1 = require("../../components/UserMenu/UserAvatar");
const UserInfoMenuItem_1 = require("../../components/UserMenu/UserInfoMenuItem");
const Dropdown_1 = require("../../components/Dropdown/Dropdown");
const LogoutMenuItem_1 = require("../../components/UserMenu/LogoutMenuItem");
const utils_1 = require("../../core/utils");
function UserMenu({ className }) {
    const { userMenu } = (0, hooks_1.useThemeConfig)();
    const { useTranslate, useUserMenu } = (0, hooks_1.useThemeHooks)();
    const { userData, loginUrl } = useUserMenu();
    const { translate } = useTranslate();
    if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated)) {
        if (loginUrl && !(userMenu === null || userMenu === void 0 ? void 0 : userMenu.hideLoginButton)) {
            return (react_1.default.createElement(UserMenuWrapper, { "data-component-name": "UserMenu/UserMenu" },
                react_1.default.createElement(LoginButton_1.LoginButton, { href: loginUrl, "data-testid": "login-btn" })));
        }
        else {
            return null;
        }
    }
    const menuItems = (userMenu === null || userMenu === void 0 ? void 0 : userMenu['menu']) || [];
    const customItems = menuItems.map((item) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.label, external: item.external, to: item.link || '' }, item.labelTranslationKey ? translate(item.labelTranslationKey) : item.label)));
    const items = [
        react_1.default.createElement(UserInfoMenuItem_1.UserInfoMenuItem, { name: userData.name, picture: userData.picture, email: userData.email, key: "userinfo" }),
        react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { separatorLine: true, separator: true, key: "separator" }),
        ...customItems,
        react_1.default.createElement(LogoutMenuItem_1.LogoutMenuItem, { key: "logout" }),
    ];
    return (react_1.default.createElement(UserMenuWrapper, { "data-component-name": "UserMenu/UserMenu" },
        react_1.default.createElement(StyledDropdown, { className: className, alignment: "end", trigger: react_1.default.createElement(UserMenuTrigger, { role: "button", tabIndex: 0 },
                react_1.default.createElement(UserAvatar_1.UserAvatar, { picture: userData.picture })) },
            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items))));
}
const UserMenuWrapper = styled_components_1.default.div `
  display: none;

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    display: block;
  }
`;
const UserMenuTrigger = styled_components_1.default.div.attrs(() => ({
    'data-testid': 'user-menu-button',
})) `
  display: flex;
  align-items: center;
  cursor: pointer;
  width: auto;
  padding: 0;
`;
const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).attrs(() => ({
    dataAttributes: {
        'data-testid': 'user-menu-dropdown',
    },
})) `
  --dropdown-menu-font-size: var(--user-menu-dropdown-font-size);
  --dropdown-menu-font-weight: var(--user-menu-dropdown-font-weight);
  --dropdown-menu-line-height: var(--user-menu-dropdown-line-height);
  --dropdown-menu-text-color: var(--user-menu-dropdown-text-color);
  --dropdown-menu-min-width: var(--user-menu-dropdown-min-width);
  --dropdown-menu-max-width: var(--user-menu-dropdown-max-width);
  --dropdown-menu-max-height: var(--user-menu-dropdown-max-height);
  --dropdown-menu-padding: var(--user-menu-dropdown-padding);
  --dropdown-menu-border-radius: var(--user-menu-dropdown-border-radius);
  --dropdown-menu-box-shadow: var(--user-menu-dropdown-box-shadow);
  --dropdown-menu-border-color: var(--user-menu-dropdown-border-color);
  --dropdown-menu-bg-color: var(--user-menu-dropdown-bg-color);
  --dropdown-menu-item-padding-horizontal: var(--user-menu-dropdown-item-padding-horizontal);
  --dropdown-menu-item-padding-vertical: var(--user-menu-dropdown-item-padding-vertical);
  --dropdown-menu-item-separator-padding-top: var(--user-menu-dropdown-item-separator-padding-top);
  --dropdown-menu-item-separator-padding-bottom: var(
    --user-menu-dropdown-item-separator-padding-bottom
  );
  --dropdown-menu-item-border-radius: var(--user-menu-dropdown-item-border-radius);
  --dropdown-menu-item-bg-color-active: var(--user-menu-dropdown-item-bg-color-active);
  --dropdown-menu-item-bg-color-hover: var(--user-menu-dropdown-item-bg-color-hover);
  --dropdown-menu-item-bg-color-disabled: var(--user-menu-dropdown-item-bg-color-disabled);
  --dropdown-menu-item-separator-border-color: var(
    --user-menu-dropdown-item-separator-border-color
  );
  --dropdown-menu-item-color-dangerous: var(--user-menu-dropdown-item-color-dangerous);
  --dropdown-menu-item-color-disabled: var(--user-menu-dropdown-item-color-disabled);
  --dropdown-menu-item-color-active: var(--user-menu-dropdown-item-color-active);
  --dropdown-menu-item-color-hover: var(--user-menu-dropdown-item-color-hover);
`;
//# sourceMappingURL=UserMenu.js.map