@heycar-uikit/core
Version:
The React UI library from HeyCar
139 lines (135 loc) • 11.6 kB
JavaScript
import { _ as __assign } from './tslib.es6-4ac54363.js';
import React, { useState } from 'react';
import Grid from '../../grid';
import { Close, Search, HeartDefault, Dealer, Call, Hamburger } from '../../icons';
import Logo from '../../logo';
import Typography from '../../typography';
import LanguageList from './components/LanguageList.js';
import NavigationBurgerMenu from './components/NavigationBurgerMenu.js';
import NavigationDropdown from './components/NavigationDropdown.js';
import { MAX_FAVES_DISPLAY_NO, DEFAULT_LOCALE } from './constants/Header.constants.js';
import { useLangList } from './hooks/useLangList.js';
import { useNavigationItem } from './hooks/useNavigationItem.js';
import { hasHeaderItems, getCurrentLang } from './utils/headerItemHelpers.js';
import '../../collapse';
import './components/SubNav.js';
import './utils/navigationHelpers.js';
var styles = {"header":"header__header_idaml","isBurgerOpen":"header__isBurgerOpen_idaml","headerInner":"header__headerInner_idaml","colLeft":"header__colLeft_idaml","colRight":"header__colRight_idaml","logo":"header__logo_idaml","searchWrapper":"header__searchWrapper_idaml","closeSearch":"header__closeSearch_idaml","active":"header__active_idaml","faves":"header__faves_idaml","counter":"header__counter_idaml","item":"header__item_idaml","horizontalNavOnly":"header__horizontalNavOnly_idaml","desktopOnly":"header__desktopOnly_idaml","focused":"header__focused_idaml","notHorizontalNav":"header__notHorizontalNav_idaml","asideItem":"header__asideItem_idaml","langWrapper":"header__langWrapper_idaml","navWrapper":"header__navWrapper_idaml"};
var DefaultLinkComponent = function (props) { return React.createElement("a", __assign({}, props)); };
var Header = React.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 ? DEFAULT_LOCALE : _b, logoHref = _a.logoHref, navigation = _a.navigation, onToggleBurgerMenu = _a.onToggleBurgerMenu, searchItemConfig = _a.searchItemConfig, trackingFn = _a.trackingFn;
// State items
var _c = useState(false), isNavTrayOpen = _c[0], setIsNavTrayOpen = _c[1];
var _d = useState(undefined), activeNavItem = _d[0], setActiveNavItem = _d[1];
var _e = 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 = useNavigationItem(activeNavItem, setActiveNavItem, resetMenuState).itemOnClick;
// Link component
var Link = (LinkComponent || DefaultLinkComponent);
// Header items
var _f = 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
? getCurrentLang(langItemConfig.currentLang, langItemConfig.options)
: undefined;
var LangIco = currentLang === null || currentLang === void 0 ? void 0 : currentLang.icon;
var _g = 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.createElement("header", { className: styles.header + " " + (isNavTrayOpen ? styles.isBurgerOpen : ''), "data-test-id": dataTestId, ref: ref },
React.createElement(Grid.Container, { className: styles.headerInner },
React.createElement(Grid.Row, { gutter: { mobile: 8, tablet: 12, desktop: 24 } },
React.createElement(Grid.Col, { className: styles.colLeft },
React.createElement(Link, { "aria-label": locale.logoLabel, className: styles.logo, href: logoHref, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: { label: 'Logo', href: logoHref },
});
} },
React.createElement(Logo, null)),
hasSearch && (React.createElement("div", { className: styles.searchWrapper + " " + (isSearchOpen ? styles.active : '') },
React.createElement("button", { "aria-label": locale.closeSearchLabel, className: styles.closeSearch, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: 'Mobile Search Toggle',
action: 'close',
},
}, function () { return handleSearchToggle(false); });
} },
React.createElement(Close, null)),
searchItemConfig.Component))),
React.createElement(Grid.Col, { className: styles.colRight },
hasSearch && (React.createElement("button", { "aria-label": searchItemConfig.label, className: styles.notHorizontalNav + " " + styles.item, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: { label: 'Mobile Search Toggle', action: 'open' },
}, function () { return handleSearchToggle(true); });
} },
React.createElement(Search, null))),
hasFaves && (React.createElement(Link, { "aria-label": favoritesItemConfig.label, className: styles.item + " " + styles.faves, href: favoritesItemConfig.href, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: favoritesItemConfig.label,
href: favoritesItemConfig.href,
},
}, favoritesItemConfig.onClick);
} },
React.createElement(HeartDefault, null),
React.createElement("span", { "aria-label": locale.favoritesCountLabel, className: styles.counter + " " + (favesCount > 0 ? styles.active : '') }, favesCount > MAX_FAVES_DISPLAY_NO
? MAX_FAVES_DISPLAY_NO
: favesCount),
React.createElement(Typography, { variant: "subheading3" }, favoritesItemConfig.label))),
hasLang && currentLang && (React.createElement("div", { className: styles.langWrapper },
React.createElement("button", { "aria-haspopup": "menu", "aria-label": locale.langListHeading + " - " + locale.spaceBarNotification, className: styles.horizontalNavOnly + " " + styles.item + " " + (isLangListOpen ? styles.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.createElement(Typography, { variant: "subheading3" }, currentLang.shortName)),
isLangListOpen && (React.createElement(LanguageList, { dataTestId: "header-language-list", heading: locale.langListHeading, itemOnClick: itemOnClick, onFocusEvents: setIsFocused, onHoverEvents: setIsHovering, options: langItemConfig.options, trackingFn: trackingFn })))),
hasAccount && (React.createElement("button", { "aria-label": accountItemConfig.label, className: styles.horizontalNavOnly + " " + styles.item, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: { label: accountItemConfig.label },
}, accountItemConfig.onClick);
} },
React.createElement(Dealer, null),
React.createElement(Typography, { variant: "subheading3" }, accountItemConfig.label))),
hasCall && (React.createElement(Link, { "aria-label": callItemConfig.label, className: styles.horizontalNavOnly + " " + styles.item + " " + styles.asideItem, href: callItemConfig.href, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: callItemConfig.label,
href: callItemConfig.href,
},
}, callItemConfig.onClick);
} },
React.createElement(Call, null),
React.createElement(Typography, { variant: "subheading3" }, callItemConfig.label))),
React.createElement("button", { "aria-label": DEFAULT_LOCALE.burgerMenuButtonLabel, className: styles.notHorizontalNav + " " + styles.item, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: 'Burger Menu Toggle',
action: isNavTrayOpen ? 'close' : 'open',
},
}, function () { return toggleBurgerMenu(!isNavTrayOpen); }, false);
} }, isNavTrayOpen ? React.createElement(Close, null) : React.createElement(Hamburger, null))))),
React.createElement("div", { className: styles.navWrapper + " " + (isNavTrayOpen ? 'navOpen' : '') },
React.createElement(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.createElement(NavigationDropdown, { Link: Link, activeNavItem: activeNavItem, currentRoute: currentRoute, dataTestId: dataTestId + "-navigation", itemOnClick: itemOnClick, locale: locale, navigation: navigation, setActiveNavItem: setActiveNavItem, trackingFn: trackingFn }))));
});
Header.displayName = 'Header';
export { Header as default };