@redocly/theme
Version:
Shared UI components lib
156 lines (152 loc) • 8.18 kB
JavaScript
"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 (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__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