@massds/mayflower-react/dist/HeaderHamburger/index.mjs

React versions of Mayflower design system UI components

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;
  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
  }), /*#__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,

  /** 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
    }))
  })),

  /** An array of uninstantiated components to render within the utility navigation.  */
  utilityItems: propTypes.arrayOf(propTypes.elementType)
} : {};
export default HeaderHamburger;