@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
173 lines (151 loc) • 7.83 kB
JavaScript
/**
* Header module.
* @module @massds/mayflower-react/Header
* @requires module:@massds/mayflower-assets/scss/01-atoms/decorative-link
* @requires module:@massds/mayflower-assets/scss/01-atoms/button-with-icon
* @requires module:@massds/mayflower-assets/scss/01-atoms/button-search
* @requires module:@massds/mayflower-assets/scss/01-atoms/input-typeahead
* @requires module:@massds/mayflower-assets/scss/01-atoms/site-logo
* @requires module:@massds/mayflower-assets/scss/02-molecules/main-nav
* @requires module:@massds/mayflower-assets/scss/03-organisms/utility-nav
* @requires module:@massds/mayflower-assets/scss/03-organisms/utility-panel
* @requires module:@massds/mayflower-assets/scss/03-organisms/header
* @requires module:@massds/mayflower-assets/scss/03-organisms/header-hamburger
* @requires module:@massds/mayflower-assets/scss/02-molecules/main-nav-hamburger
* @requires module:@massds/mayflower-assets/scss/03-organisms/header-mixed
*/
import React from "react";
import propTypes from "prop-types";
import HeaderNav, { HeaderNavSearch, HeaderContainer, HeaderMobileNavSearch } from "../HeaderNav/index.mjs";
import { HeaderMainNav, HeaderNavItem } from "../HeaderNav/main-nav.mjs";
import HamburgerNav, { HamburgerNavItem, HamburgerUtilityItem, HamburgerMainNav, HamburgerUtilityNav, HamburgerSkipNav, HamburgerSiteLogo, HamburgerMobileLogoWrapper } from "../HamburgerNav/index.mjs";
import { LoginItem, TranslateItem, StateItem } from "../Header/utility-items.mjs";
import getFallbackComponent from "../utilities/getFallbackComponent.mjs";
import useWindowWidth from "../hooks/use-window-width.mjs";
const DefaultMobileLogo = /*#__PURE__*/React.memo(() => /*#__PURE__*/React.createElement(HamburgerSiteLogo, {
Wrapper: HamburgerMobileLogoWrapper
}));
const Header = (_ref) => {
let Logo = _ref.Logo,
MobileLogo = _ref.MobileLogo,
NavSearch = _ref.NavSearch,
MobileNavSearch = _ref.MobileNavSearch,
SkipNav = _ref.SkipNav,
UtilityNav = _ref.UtilityNav,
MobileUtilityNav = _ref.MobileUtilityNav,
UtilityItem = _ref.UtilityItem,
MobileUtilityItem = _ref.MobileUtilityItem,
MainNav = _ref.MainNav,
MobileMainNav = _ref.MobileMainNav,
NavItem = _ref.NavItem,
MobileNavItem = _ref.MobileNavItem,
Container = _ref.Container,
_ref$mainItems = _ref.mainItems,
mainItems = _ref$mainItems === void 0 ? [] : _ref$mainItems,
_ref$utilityItems = _ref.utilityItems,
utilityItems = _ref$utilityItems === void 0 ? [] : _ref$utilityItems;
const windowWidth = useWindowWidth();
const isMobileWindow = windowWidth !== null && windowWidth < 840;
const fallbackUtilityItems = React.useMemo(() => {
if (utilityItems.length < 1) {
const tempItems = []; // Only display google translate item on desktop.
if (!isMobileWindow) {
tempItems.push(TranslateItem);
}
tempItems.push(StateItem);
tempItems.push(LoginItem);
return tempItems;
}
return utilityItems;
}, [utilityItems, isMobileWindow]);
let RenderedUtilityNav;
let RenderedUtilityItem;
const RenderedContainer = getFallbackComponent(Container, HeaderContainer);
const DesktopLogo = getFallbackComponent(Logo, HamburgerSiteLogo);
const RenderedSkipNav = getFallbackComponent(SkipNav, HamburgerSkipNav);
const DesktopNavSearch = getFallbackComponent(NavSearch, HeaderNavSearch);
const RenderedMobileNavSearch = getFallbackComponent(MobileNavSearch, HeaderMobileNavSearch);
const RenderedMobileMainNav = getFallbackComponent(MobileMainNav, HamburgerMainNav);
const DesktopMainNav = getFallbackComponent(MainNav, HeaderMainNav);
const DesktopNavItem = getFallbackComponent(NavItem, HeaderNavItem);
const RenderedMobileNavItem = getFallbackComponent(MobileNavItem, HamburgerNavItem);
if (!isMobileWindow) {
RenderedUtilityNav = getFallbackComponent(UtilityNav, HamburgerUtilityNav);
RenderedUtilityItem = getFallbackComponent(UtilityItem, HamburgerUtilityItem);
} else {
RenderedUtilityNav = getFallbackComponent(MobileUtilityNav, HamburgerUtilityNav);
RenderedUtilityItem = getFallbackComponent(MobileUtilityItem, HamburgerUtilityItem);
}
const RenderedMobileLogo = getFallbackComponent(MobileLogo, DefaultMobileLogo);
return /*#__PURE__*/React.createElement("header", {
className: "ma__header__mixed ma__header__hamburger",
id: "header"
}, RenderedSkipNav !== null ? /*#__PURE__*/React.createElement(RenderedSkipNav, null) : null, /*#__PURE__*/React.createElement(HamburgerNav, {
headerType: "mixed",
Logo: RenderedMobileLogo,
UtilityNav: RenderedUtilityNav,
UtiltyItem: RenderedUtilityItem,
MainNav: RenderedMobileMainNav,
NavItem: RenderedMobileNavItem,
NavSearch: RenderedMobileNavSearch,
mainItems: mainItems,
utilityItems: fallbackUtilityItems
}), /*#__PURE__*/React.createElement(RenderedContainer, {
Logo: DesktopLogo,
NavSearch: DesktopNavSearch
}), /*#__PURE__*/React.createElement(HeaderNav, {
ButtonContainer: null,
Logo: null,
MainNav: DesktopMainNav,
NavItem: DesktopNavItem,
NavSearch: null,
UtilityNav: null,
UtiltyItem: null,
utilityItems: fallbackUtilityItems,
mainItems: mainItems
}));
};
Header.propTypes = process.env.NODE_ENV !== "production" ? {
/** An uninstantiated component which handles displaying the site logo. */
Logo: propTypes.elementType,
/** An uninstantiated component which handles displaying the site logo on mobile. */
MobileLogo: propTypes.elementType,
/** An uninstantiated component which handles search functionality. */
NavSearch: propTypes.elementType,
/** An uninstantiated component that displays the site logo and search on desktop. */
Container: propTypes.elementType,
/** An uninstantiated component which handles search functionality on mobile. */
MobileNavSearch: propTypes.elementType,
/** An uninstantiated component which handles the display of a skip navigation link. */
SkipNav: propTypes.elementType,
/** An uninstantiated component which handles displaying the utility navigation at the top of the header. */
UtilityNav: propTypes.elementType,
/** An uninstantiated component which handles displaying the utility navigation at the top of the header on mobile. */
MobileUtilityNav: propTypes.elementType,
/** An uninstantiated component which handles the display of individual utility items. */
UtilityItem: propTypes.elementType,
/** An uninstantiated component which handles the display of individual utility items on mobile. */
MobileUtilityItem: propTypes.elementType,
/** An uninstantiated component which handles the display of the main navigation and its links. */
MainNav: propTypes.elementType,
/** An uninstantiated component which handles the display of the main navigation and its links on mobile. */
MobileMainNav: propTypes.elementType,
/** An uninstantiated component which handles display of individual navigation items inside of the main navigation. */
NavItem: propTypes.elementType,
/** An uninstantiated component which handles display of individual navigation items inside of the main navigation on mobile. */
MobileNavItem: propTypes.elementType,
/** An array of items used to create the menu. */
mainItems: propTypes.arrayOf(propTypes.shape({
href: propTypes.string,
text: propTypes.string,
// Active main nav item eccentuated with an styled underline
active: propTypes.bool,
subNav: propTypes.arrayOf(propTypes.shape({
href: propTypes.string,
text: propTypes.string
}))
})),
/** An array of uninstantiated components to render within the utility navigation. */
utilityItems: propTypes.arrayOf(propTypes.elementType)
} : {};
export default Header;