@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
116 lines • 5.79 kB
JavaScript
import React from "react";
import propTypes from "prop-types";
import HamburgerNav, { HamburgerMobileNavSearch, HamburgerNavItem, HamburgerUtilityItem, HamburgerMainNav, HamburgerUtilityNav, HamburgerSkipNav, HamburgerNavSearch, HamburgerContainer, 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 HeaderHamburger = _ref => {
let Logo = _ref.Logo,
MobileLogo = _ref.MobileLogo,
NavSearch = _ref.NavSearch,
MobileNavSearch = _ref.MobileNavSearch,
SkipNav = _ref.SkipNav,
UtilityNav = _ref.UtilityNav,
UtilityItem = _ref.UtilityItem,
MainNav = _ref.MainNav,
NavItem = _ref.NavItem,
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,
_ref$siteName = _ref.siteName,
siteName = _ref$siteName === void 0 ? 'Mass.gov' : _ref$siteName,
_ref$homeLink = _ref.homeLink,
homeLink = _ref$homeLink === void 0 ? {} : _ref$homeLink;
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]);
const RenderedContainer = getFallbackComponent(Container, HamburgerContainer);
const RenderedSkipNav = getFallbackComponent(SkipNav, HamburgerSkipNav);
const RenderedNavSearch = getFallbackComponent(NavSearch, HamburgerNavSearch);
const RenderedMobileNavSearch = getFallbackComponent(MobileNavSearch, HamburgerMobileNavSearch);
const DesktopLogo = getFallbackComponent(Logo, HamburgerSiteLogo);
const RenderedMobileLogo = getFallbackComponent(MobileLogo, DefaultMobileLogo);
const RenderedUtilityNav = getFallbackComponent(UtilityNav, HamburgerUtilityNav);
const RenderedMainNav = getFallbackComponent(MainNav, HamburgerMainNav);
const RenderedUtilityItem = getFallbackComponent(UtilityItem, HamburgerUtilityItem);
const RenderedNavItem = getFallbackComponent(NavItem, HamburgerNavItem);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("header", {
className: "ma__header__hamburger",
id: "header"
}, RenderedSkipNav !== null ? /*#__PURE__*/React.createElement(RenderedSkipNav, null) : null, /*#__PURE__*/React.createElement(HamburgerNav, {
MainNav: RenderedMainNav,
NavItem: RenderedNavItem,
UtilityItem: RenderedUtilityItem,
UtilityNav: RenderedUtilityNav,
Logo: RenderedMobileLogo,
NavSearch: RenderedMobileNavSearch,
mainItems: mainItems,
utilityItems: fallbackUtilityItems,
siteName: siteName,
homeLink: homeLink
}), !isMobileWindow && /*#__PURE__*/React.createElement(RenderedContainer, {
Logo: DesktopLogo,
NavSearch: RenderedNavSearch
})), /*#__PURE__*/React.createElement("div", {
className: "menu-overlay"
}));
};
HeaderHamburger.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,
/** Override default siteName rendered as the hamburger menu toggle button text and aria-label on mobile */
siteName: propTypes.string,
/** An uninstantiated component which handles search functionality. */
NavSearch: 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 the display of individual utility items. */
UtilityItem: propTypes.elementType,
/** An uninstantiated component which handles the display of the main navigation and its links. */
MainNav: propTypes.elementType,
/** An uninstantiated component which handles display of individual navigation items inside of the main navigation. */
NavItem: propTypes.elementType,
/** An uninstantiated component that displays the site logo and search on desktop. */
Container: propTypes.elementType,
/** An array of items used to create the menu. */
mainItems: propTypes.arrayOf(propTypes.shape({
href: propTypes.string,
text: propTypes.string,
active: propTypes.bool,
subNav: propTypes.arrayOf(propTypes.shape({
href: propTypes.string,
text: propTypes.string
}))
})),
/** Render a link to home site in place of the hamburger menu. */
homeLink: propTypes.shape({
text: propTypes.string,
url: propTypes.string
}),
/** An array of uninstantiated components to render within the utility navigation. */
utilityItems: propTypes.arrayOf(propTypes.elementType)
} : {};
export default HeaderHamburger;