@redocly/theme/lib/components/Menu/MenuMobile.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuMobile = MenuMobile;
const react_1 = __importStar(require("react"));
const react_router_dom_1 = require("react-router-dom");
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const constants_1 = require("../../core/constants");
const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIcon");
const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
const Menu_1 = require("../../components/Menu/Menu");
const Button_1 = require("../../components/Button/Button");
const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
const UserMenuMobile_1 = require("../../components/UserMenu/UserMenuMobile");
const Product_1 = require("../../components/Product/Product");
function MenuMobile({ className, hideUserProfile }) {
    var _a, _b, _c;
    const location = (0, react_router_dom_1.useLocation)();
    const { useCurrentProduct } = (0, hooks_1.useThemeHooks)();
    const product = useCurrentProduct();
    const menuLevels = (0, hooks_1.useMobileMenuLevels)();
    const [menuLevel, setMenuLevel] = (0, react_1.useState)(menuLevels.length - 1);
    (0, react_1.useEffect)(() => {
        setMenuLevel(menuLevels.length - 1);
    }, [menuLevels, location]);
    const menuType = ((_a = menuLevels[menuLevel]) === null || _a === void 0 ? void 0 : _a.type) || constants_1.MobileMenuType.MAIN_MENU;
    const { items: menuItems, pushDrilldownState, popDrilldownState, backLink, } = (0, hooks_1.useMobileMenuItems)(menuType);
    const prevLevelName = (_b = menuLevels[menuLevel - 1]) === null || _b === void 0 ? void 0 : _b.label;
    const nextLevelName = (_c = menuLevels[menuLevel + 1]) === null || _c === void 0 ? void 0 : _c.label;
    const isButtonsSectionVisible = nextLevelName || prevLevelName;
    return (react_1.default.createElement(MobileMenuWrapper, { "data-component-name": "Menu/MenuMobile", className: className },
        react_1.default.createElement(ScrollableArea, { isButtonsSectionVisible: !!isButtonsSectionVisible },
            isButtonsSectionVisible && (react_1.default.createElement(ButtonsSection, { alignRight: !prevLevelName && !!nextLevelName },
                prevLevelName && (react_1.default.createElement(ControlButton, { "data-testid": "control-button", onClick: () => {
                        setMenuLevel(menuLevel - 1);
                        popDrilldownState();
                    } },
                    react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, { size: "12px", color: "--tree-content-color-default" }),
                    react_1.default.createElement(ControlButtonLabel, { paddingDirection: "left" }, prevLevelName))),
                nextLevelName && (react_1.default.createElement(ControlButton, { "data-testid": "control-button", onClick: () => setMenuLevel(menuLevel + 1) },
                    react_1.default.createElement(ControlButtonLabel, { paddingDirection: "right" }, nextLevelName),
                    react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "12px", color: "--tree-content-color-default" }))))),
            menuType === constants_1.MobileMenuType.PRODUCT && product ? (react_1.default.createElement(ProductNameWrapper, null,
                react_1.default.createElement(Product_1.Product, { product: product }))) : null,
            backLink ? (react_1.default.createElement(DrilldownBackButton, { icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), iconPosition: "left", variant: "ghost", size: "medium", to: backLink.slug, onClick: popDrilldownState }, `Back ${backLink.label ? 'to ' + backLink.label : ''}`)) : null,
            react_1.default.createElement(MenuWrapper, null,
                react_1.default.createElement(Menu_1.Menu, { onDrilldownOpen: pushDrilldownState, items: menuItems, isMobile: true }))),
        hideUserProfile ? null : react_1.default.createElement(UserMenuMobile_1.UserMenuMobile, null)));
}
const MobileMenuWrapper = styled_components_1.default.div `
  height: var(--menu-mobile-height);
  width: var(--menu-mobile-width);
  position: fixed;
  z-index: var(--menu-mobile-z-index);
  left: var(--menu-mobile-left);
  top: var(--menu-mobile-top);
  overflow-x: hidden;
  transition: var(--menu-mobile-transition);
  display: flex;
  flex-direction: column;
  background: var(--menu-mobile-bg);

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    display: none;
  }
`;
const ScrollableArea = styled_components_1.default.div `
  padding-top: ${({ isButtonsSectionVisible }) => isButtonsSectionVisible ? '0px' : 'var(--menu-mobile-padding-top)'};
  overflow-y: scroll;
  flex-grow: 1;
`;
const ButtonsSection = styled_components_1.default.div `
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs);
  margin: 0 0 var(--spacing-sm) 0;
  background: var(--layer-color);
  gap: var(--spacing-xs);
  ${({ alignRight }) => alignRight && 'justify-content: flex-end'};
`;
const MenuWrapper = styled_components_1.default.div `
  margin: var(--menu-mobile-margin);
  line-height: var(--menu-mobile-line-height);
  background: var(--menu-mobile-bg);
`;
const ControlButton = styled_components_1.default.li `
  display: inline-flex;
  align-items: center;
  padding: var(--menu-mobile-control-button-padding);
  margin: var(--menu-mobile-control-button-margin);
  text-align: var(--menu-mobile-control-button-text-align);
  font-size: var(--menu-mobile-control-button-font-size);
  line-height: var(--menu-mobile-control-button-line-height);
  font-weight: var(--menu-mobile-control-button-weight);
  color: var(--menu-mobile-control-button-color);
  cursor: pointer;

  svg {
    fill: var(--menu-mobile-control-button-color);
  }

  &:hover {
    color: var(--menu-mobile-control-button-color-hover);

    svg {
      fill: var(--menu-mobile-control-button-color-hover);
    }
  }
`;
const ControlButtonLabel = styled_components_1.default.span `
  vertical-align: middle;
  ${({ paddingDirection }) => paddingDirection === 'left' && 'padding-left: 8px'};
  ${({ paddingDirection }) => paddingDirection === 'right' && 'padding-right: 8px'};
`;
const ProductNameWrapper = styled_components_1.default.div `
  font-size: var(--menu-mobile-product-name-font-size);
  font-weight: var(--menu-mobile-product-name-font-weight);
  line-height: var(--menu-mobile-product-name-line-height);
  color: var(--menu-mobile-product-name-text-color);
  border-radius: var(--menu-mobile-product-name-border-radius);
  border: var(--menu-mobile-product-name-border);
  padding: var(--menu-mobile-product-name-padding);
  margin: var(--menu-mobile-product-name-margin);
`;
const DrilldownBackButton = (0, styled_components_1.default)(Button_1.Button) `
  margin: var(--menu-item-label-margin);
`;
//# sourceMappingURL=MenuMobile.js.map