@heycar-uikit/core/header/components/NavigationBurgerMenu.js

The React UI library from HeyCar

var tslib_es6 = require('../tslib.es6-7299ae33.js');
var React = require('react');
var Collapse = require('../../collapse');
var icons = require('../../icons');
var Typography = require('../../typography');
var constants_Header_constants = require('../constants/Header.constants.js');
var hooks_useNavigationItem = require('../hooks/useNavigationItem.js');
var utils_navigationHelpers = require('../utils/navigationHelpers.js');
var components_SubNav = require('./SubNav.js');
require('../utils/headerItemHelpers.js');
require('../../grid');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);

var styles = {"navItem":"header__navItem_1nrt7","isActive":"header__isActive_1nrt7","nav":"header__nav_1nrt7","headerItems":"header__headerItems_1nrt7","auxDetails":"header__auxDetails_1nrt7","auxContact":"header__auxContact_1nrt7","appDetails":"header__appDetails_1nrt7"};
 require('./../styles/navigationburgermenu.css');

var NavigationBurgerMenu = React__default["default"].forwardRef(function (_a, ref) {
    var accountItemConfig = _a.accountItemConfig, activeNavItem = _a.activeNavItem, aux = _a.auxiliaryDetails, dataTestId = _a.dataTestId, itemOnClick = _a.itemOnClick, langItemConfig = _a.langItemConfig, Link = _a.Link, _b = _a.locale, locale = _b === void 0 ? constants_Header_constants.DEFAULT_LOCALE : _b, _c = _a.navigation, navigation = _c === void 0 ? [] : _c, setActiveNavItem = _a.setActiveNavItem, trackingFn = _a.trackingFn;
    var hasAuxData = (aux === null || aux === void 0 ? void 0 : aux.tel) || (aux === null || aux === void 0 ? void 0 : aux.email) || (aux === null || aux === void 0 ? void 0 : aux.app);
    var _d = hooks_useNavigationItem.useNavigationItem(activeNavItem, setActiveNavItem), toggleSubNav = _d.toggleSubNav, keyboardOpen = _d.keyboardOpen;
    var extendedNavArray = utils_navigationHelpers.extendNavigation(navigation, locale, langItemConfig, accountItemConfig);
    return (React__default["default"].createElement("nav", { className: styles.nav, "data-nav-type": "burger-menu", "data-test-id": dataTestId, ref: ref, role: "navigation" },
        React__default["default"].createElement("ul", { "aria-label": "Main navigation", role: "menubar", tabIndex: 0 }, extendedNavArray.map(function (navItem, i) {
            var label = navItem.label, subNavGroups = navItem.subNavGroups;
            var id = "burger-nav-item-" + label.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
            var hasSubNav = subNavGroups && (subNavGroups === null || subNavGroups === void 0 ? void 0 : subNavGroups.length) > 0;
            var isActive = activeNavItem === id;
            var isLastItem = i + 1 === navigation.length;
            var commonProps = {
                role: 'menuitem',
                className: styles.navItem + " " + (isActive ? styles.isActive : ''),
                id: id,
            };
            return (React__default["default"].createElement("li", { className: (isLastItem ? 'lastNavItem' : '') + " " + (navItem.isBurgerMenuOnly ? styles.headerItems : ''), key: "burger-" + label, role: "none" }, hasSubNav ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                React__default["default"].createElement("button", tslib_es6.__assign({}, commonProps, { "aria-expanded": isActive, "aria-haspopup": true, "aria-label": label + " - " + locale.spaceBarNotification, onClick: function () {
                        return itemOnClick({
                            fn: trackingFn,
                            obj: {
                                label: "" + label,
                                type: 'nav_item',
                                navType: 'burger_menu',
                            },
                        }, function () { return toggleSubNav(id, isActive); }, false);
                    }, onKeyDown: function (e) { return keyboardOpen(e, id, isActive); } }),
                    React__default["default"].createElement(Typography__default["default"], { variant: "subheading3" }, label),
                    React__default["default"].createElement(icons.ChevronDown, null)),
                React__default["default"].createElement(Collapse__default["default"], { "aria-hidden": !isActive, "aria-label": label + " " + locale.subMenuLabel, className: styles.collapse, open: isActive, role: "group" },
                    React__default["default"].createElement(components_SubNav, { Link: Link, isDropDownMenu: false, isOpen: isActive, itemOnClick: itemOnClick, locale: locale, navItemId: commonProps.id, navItemName: label, subNavGroups: subNavGroups, trackingFn: trackingFn })))) : (React__default["default"].createElement(Link, tslib_es6.__assign({}, commonProps, { href: navItem.href, onClick: function () {
                    return itemOnClick({
                        fn: trackingFn,
                        obj: {
                            label: "" + label,
                            type: 'nav_item',
                            href: navItem.href,
                            navType: 'burger_menu',
                        },
                    }, navItem.onClick);
                } }),
                React__default["default"].createElement(Typography__default["default"], { variant: "subheading3" }, label),
                label === (accountItemConfig === null || accountItemConfig === void 0 ? void 0 : accountItemConfig.label) ? (React__default["default"].createElement(icons.Dealer, null)) : undefined))));
        })),
        hasAuxData && (React__default["default"].createElement("aside", { className: styles.auxDetails },
            (aux === null || aux === void 0 ? void 0 : aux.tel) && (React__default["default"].createElement("p", { className: styles.auxContact },
                React__default["default"].createElement(Typography__default["default"], { Component: "span", variant: "caption2" }, aux.tel.label || locale.auxTelLabel),
                React__default["default"].createElement("a", { href: "tel:" + aux.tel.value, onClick: function () {
                        var _a;
                        return itemOnClick({
                            fn: trackingFn,
                            obj: {
                                label: 'aux telephone',
                                type: 'nav_item',
                                href: "tel:" + ((_a = aux.tel) === null || _a === void 0 ? void 0 : _a.value),
                                navType: 'burger_menu',
                            },
                        });
                    } }, aux.tel.value))),
            (aux === null || aux === void 0 ? void 0 : aux.email) && (React__default["default"].createElement("p", { className: styles.auxContact },
                React__default["default"].createElement(Typography__default["default"], { Component: "span", variant: "caption2" }, aux.email.label || locale.auxEmailLabel),
                React__default["default"].createElement("a", { href: "mailto:" + aux.email.value, onClick: function () {
                        var _a;
                        return itemOnClick({
                            fn: trackingFn,
                            obj: {
                                label: 'aux email',
                                type: 'nav_item',
                                href: "tel:" + ((_a = aux.email) === null || _a === void 0 ? void 0 : _a.value),
                                navType: 'burger_menu',
                            },
                        });
                    } }, aux.email.value)))))));
});

module.exports = NavigationBurgerMenu;