@heycar-uikit/core
Version:
The React UI library from HeyCar
150 lines (145 loc) • 13.3 kB
JavaScript
var tslib_es6 = require('./tslib.es6-0efb545c.js');
var React = require('react');
var Grid = require('../../grid/cssm');
var icons = require('../../icons/cssm');
var Logo = require('../../logo/cssm');
var Typography = require('../../typography/cssm');
var components_LanguageList = require('./components/LanguageList.js');
var components_NavigationBurgerMenu = require('./components/NavigationBurgerMenu.js');
var components_NavigationDropdown = require('./components/NavigationDropdown.js');
var constants_Header_constants = require('./constants/Header.constants.js');
var hooks_useLangList = require('./hooks/useLangList.js');
var hooks_useNavigationItem = require('./hooks/useNavigationItem.js');
var utils_headerItemHelpers = require('./utils/headerItemHelpers.js');
var styles = require('./styles/default.module.css');
require('./styles/languageList.module.css');
require('../../collapse/cssm');
require('./utils/navigationHelpers.js');
require('./components/SubNav.js');
require('./styles/subNav.module.css');
require('./styles/navigationBurgerMenu.module.css');
require('./styles/navigationDropdown.module.css');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
var Logo__default = /*#__PURE__*/_interopDefaultLegacy(Logo);
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
var DefaultLinkComponent = function (props) { return React__default["default"].createElement("a", tslib_es6.__assign({}, props)); };
var Header = React__default["default"].forwardRef(function (_a, ref) {
var accountItemConfig = _a.accountItemConfig, auxiliaryDetails = _a.auxiliaryDetails, callItemConfig = _a.callItemConfig, currentRoute = _a.currentRoute, dataTestId = _a.dataTestId, favoritesItemConfig = _a.favoritesItemConfig, langItemConfig = _a.langItemConfig, LinkComponent = _a.LinkComponent, _b = _a.locale, locale = _b === void 0 ? constants_Header_constants.DEFAULT_LOCALE : _b, logoHref = _a.logoHref, navigation = _a.navigation, onToggleBurgerMenu = _a.onToggleBurgerMenu, searchItemConfig = _a.searchItemConfig, trackingFn = _a.trackingFn;
// State items
var _c = React.useState(false), isNavTrayOpen = _c[0], setIsNavTrayOpen = _c[1];
var _d = React.useState(undefined), activeNavItem = _d[0], setActiveNavItem = _d[1];
var _e = React.useState(false), isSearchOpen = _e[0], setIsSearchOpen = _e[1];
var toggleBurgerMenu = function (isOpen) {
setIsNavTrayOpen(isOpen);
if (typeof onToggleBurgerMenu === 'function')
onToggleBurgerMenu(isOpen);
};
var resetMenuState = function () {
setActiveNavItem(undefined);
toggleBurgerMenu(false);
};
var itemOnClick = hooks_useNavigationItem.useNavigationItem(activeNavItem, setActiveNavItem, resetMenuState).itemOnClick;
// Link component
var Link = (LinkComponent || DefaultLinkComponent);
// Header items
var _f = utils_headerItemHelpers.hasHeaderItems(searchItemConfig, favoritesItemConfig, langItemConfig, accountItemConfig, callItemConfig), hasSearch = _f.hasSearch, hasFaves = _f.hasFaves, hasLang = _f.hasLang, hasAccount = _f.hasAccount, hasCall = _f.hasCall;
var favesCount = (favoritesItemConfig === null || favoritesItemConfig === void 0 ? void 0 : favoritesItemConfig.favoritesNumber) || 0;
// Lang
var currentLang = hasLang
? utils_headerItemHelpers.getCurrentLang(langItemConfig.currentLang, langItemConfig.options)
: undefined;
var LangIco = currentLang === null || currentLang === void 0 ? void 0 : currentLang.icon;
var _g = hooks_useLangList.useLangList(), isLangListOpen = _g.isLangListOpen, keyboardOpen = _g.keyboardOpen, setIsFocused = _g.setIsFocused, setIsHovering = _g.setIsHovering;
// Event handlers
var handleSearchToggle = function (newState) {
setIsSearchOpen(newState);
if (searchItemConfig === null || searchItemConfig === void 0 ? void 0 : searchItemConfig.onClick)
searchItemConfig.onClick(newState);
};
return (React__default["default"].createElement("header", { className: styles__default["default"].header + " " + (isNavTrayOpen ? styles__default["default"].isBurgerOpen : ''), "data-test-id": dataTestId, ref: ref },
React__default["default"].createElement(Grid__default["default"].Container, { className: styles__default["default"].headerInner },
React__default["default"].createElement(Grid__default["default"].Row, { gutter: { mobile: 8, tablet: 12, desktop: 24 } },
React__default["default"].createElement(Grid__default["default"].Col, { className: styles__default["default"].colLeft },
React__default["default"].createElement(Link, { "aria-label": locale.logoLabel, className: styles__default["default"].logo, href: logoHref, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: { label: 'Logo', href: logoHref },
});
} },
React__default["default"].createElement(Logo__default["default"], null)),
hasSearch && (React__default["default"].createElement("div", { className: styles__default["default"].searchWrapper + " " + (isSearchOpen ? styles__default["default"].active : '') },
React__default["default"].createElement("button", { "aria-label": locale.closeSearchLabel, className: styles__default["default"].closeSearch, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: 'Mobile Search Toggle',
action: 'close',
},
}, function () { return handleSearchToggle(false); });
} },
React__default["default"].createElement(icons.Close, null)),
searchItemConfig.Component))),
React__default["default"].createElement(Grid__default["default"].Col, { className: styles__default["default"].colRight },
hasSearch && (React__default["default"].createElement("button", { "aria-label": searchItemConfig.label, className: styles__default["default"].notHorizontalNav + " " + styles__default["default"].item, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: { label: 'Mobile Search Toggle', action: 'open' },
}, function () { return handleSearchToggle(true); });
} },
React__default["default"].createElement(icons.Search, null))),
hasFaves && (React__default["default"].createElement(Link, { "aria-label": favoritesItemConfig.label, className: styles__default["default"].item + " " + styles__default["default"].faves, href: favoritesItemConfig.href, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: favoritesItemConfig.label,
href: favoritesItemConfig.href,
},
}, favoritesItemConfig.onClick);
} },
React__default["default"].createElement(icons.HeartDefault, null),
React__default["default"].createElement("span", { "aria-label": locale.favoritesCountLabel, className: styles__default["default"].counter + " " + (favesCount > 0 ? styles__default["default"].active : '') }, favesCount > constants_Header_constants.MAX_FAVES_DISPLAY_NO
? constants_Header_constants.MAX_FAVES_DISPLAY_NO
: favesCount),
React__default["default"].createElement(Typography__default["default"], { variant: "subheading3" }, favoritesItemConfig.label))),
hasLang && currentLang && (React__default["default"].createElement("div", { className: styles__default["default"].langWrapper },
React__default["default"].createElement("button", { "aria-haspopup": "menu", "aria-label": locale.langListHeading + " - " + locale.spaceBarNotification, className: styles__default["default"].horizontalNavOnly + " " + styles__default["default"].item + " " + (isLangListOpen ? styles__default["default"].focused : ''), onBlur: function () { return setIsFocused(false); }, onFocus: function () { return setIsFocused(true); }, onKeyDown: function (e) { return keyboardOpen(e); }, onMouseOut: function () { return setIsHovering(false); }, onMouseOver: function () { return setIsHovering(true); } },
LangIco,
React__default["default"].createElement(Typography__default["default"], { variant: "subheading3" }, currentLang.shortName)),
isLangListOpen && (React__default["default"].createElement(components_LanguageList, { dataTestId: "header-language-list", heading: locale.langListHeading, itemOnClick: itemOnClick, onFocusEvents: setIsFocused, onHoverEvents: setIsHovering, options: langItemConfig.options, trackingFn: trackingFn })))),
hasAccount && (React__default["default"].createElement("button", { "aria-label": accountItemConfig.label, className: styles__default["default"].horizontalNavOnly + " " + styles__default["default"].item, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: { label: accountItemConfig.label },
}, accountItemConfig.onClick);
} },
React__default["default"].createElement(icons.Dealer, null),
React__default["default"].createElement(Typography__default["default"], { variant: "subheading3" }, accountItemConfig.label))),
hasCall && (React__default["default"].createElement(Link, { "aria-label": callItemConfig.label, className: styles__default["default"].horizontalNavOnly + " " + styles__default["default"].item + " " + styles__default["default"].asideItem, href: callItemConfig.href, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: callItemConfig.label,
href: callItemConfig.href,
},
}, callItemConfig.onClick);
} },
React__default["default"].createElement(icons.Call, null),
React__default["default"].createElement(Typography__default["default"], { variant: "subheading3" }, callItemConfig.label))),
React__default["default"].createElement("button", { "aria-label": constants_Header_constants.DEFAULT_LOCALE.burgerMenuButtonLabel, className: styles__default["default"].notHorizontalNav + " " + styles__default["default"].item, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: 'Burger Menu Toggle',
action: isNavTrayOpen ? 'close' : 'open',
},
}, function () { return toggleBurgerMenu(!isNavTrayOpen); }, false);
} }, isNavTrayOpen ? React__default["default"].createElement(icons.Close, null) : React__default["default"].createElement(icons.Hamburger, null))))),
React__default["default"].createElement("div", { className: styles__default["default"].navWrapper + " " + (isNavTrayOpen ? 'navOpen' : '') },
React__default["default"].createElement(components_NavigationBurgerMenu, { Link: Link, accountItemConfig: accountItemConfig, activeNavItem: activeNavItem, auxiliaryDetails: auxiliaryDetails, currentLang: currentLang === null || currentLang === void 0 ? void 0 : currentLang.langCode, dataTestId: dataTestId + "-navigation", itemOnClick: itemOnClick, langItemConfig: langItemConfig, locale: locale, navigation: navigation, setActiveNavItem: setActiveNavItem, trackingFn: trackingFn }),
React__default["default"].createElement(components_NavigationDropdown, { Link: Link, activeNavItem: activeNavItem, currentRoute: currentRoute, dataTestId: dataTestId + "-navigation", itemOnClick: itemOnClick, locale: locale, navigation: navigation, setActiveNavItem: setActiveNavItem, trackingFn: trackingFn }))));
});
Header.displayName = 'Header';
module.exports = Header;