@massds/mayflower-react/dist/UtilityNav/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _nanoid = _interopRequireDefault(require("nanoid"));

var _index = _interopRequireDefault(require("../UtilityPanel/index.js"));

var _IconBuilding = _interopRequireDefault(require("../Icon/IconBuilding.js"));

var _IconLogin = _interopRequireDefault(require("../Icon/IconLogin.js"));

var _IconLatlonglobe = _interopRequireDefault(require("../Icon/IconLatlonglobe.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var UtilityNav = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(UtilityNav, _React$Component);

  function UtilityNav(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.state = {
      navSelected: -1,
      isOpen: _this.props.isOpen
    };
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    _this.ident = (0, _nanoid["default"])();
    return _this;
  } // eslint-disable-next-line camelcase


  var _proto = UtilityNav.prototype;

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    var isOpen = nextProps.isOpen;
    this.setState({
      isOpen: isOpen,
      navSelected: -1
    });
  };

  _proto.onClick = function onClick(divId, e) {
    e.preventDefault();
    this.setState(function (state) {
      return {
        navSelected: state.navSelected === -1 ? divId : -1,
        isOpen: true
      };
    });
  };

  _proto.render = function render() {
    var _this2 = this;

    var navSelected = this.state.navSelected;
    var _this$props = this.props,
        googleLanguages = _this$props.googleLanguages,
        items = _this$props.items;
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__utility-nav js-util-nav"
    }, /*#__PURE__*/_react["default"].createElement("ul", {
      className: "ma__utility-nav__items"
    }, googleLanguages && /*#__PURE__*/_react["default"].createElement(GoogleLanguages, null), items.map(function (item, itemIndex) {
      var newItem = _extends({}, item);

      newItem.navSelected = navSelected; // Use utility nav ident to make unique item ids.

      newItem.navIdent = _this2.ident;
      var isOpen = _this2.state.isOpen;
      return item.panel ?
      /*#__PURE__*/

      /* eslint-disable react/no-array-index-key */
      _react["default"].createElement(NavItem, {
        handleClick: _this2.onClick,
        data: newItem,
        key: "navItem." + itemIndex,
        index: itemIndex,
        isOpen: isOpen
      }) : /*#__PURE__*/_react["default"].createElement(NavItemLink, {
        key: "navItem." + itemIndex,
        data: item
      });
    })));
  };

  return UtilityNav;
}(_react["default"].Component);

var GoogleLanguages = function GoogleLanguages() {
  return /*#__PURE__*/_react["default"].createElement("li", {
    key: "li.googleLanguage",
    className: "ma__utility-nav__item"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-nav__translate"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    id: "google_translate_element"
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-nav__translate-icon"
  }, /*#__PURE__*/_react["default"].createElement(_IconLatlonglobe["default"], null))));
};

var NavItem = function NavItem(obj) {
  var item = obj.data;
  var divId = "nav-content-" + item.navIdent + "-" + obj.index;
  var oneIsOpen = obj.isOpen;
  var thisIsOpen = item.navSelected === divId;
  var isExpanded = oneIsOpen && thisIsOpen ? 'is-open' : 'is-closed';
  var divProps = {
    className: "ma__utility-nav__content js-util-nav-content " + isExpanded,
    'aria-hidden': isExpanded ? 'false' : 'true',
    id: divId
  };
  var iconProps = {
    ariaHidden: true
  };
  var IconComponent = item.icon === 'building' ? _IconBuilding["default"] : _IconLogin["default"];
  return /*#__PURE__*/_react["default"].createElement("li", {
    className: "ma__utility-nav__item js-util-nav-toggle"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    onClick: function onClick(e) {
      return obj.handleClick(divId, e);
    },
    className: "ma__utility-nav__link " + isExpanded,
    href: "#",
    "aria-label": item.ariaLabelText || item.text
  }, /*#__PURE__*/_react["default"].createElement(IconComponent, iconProps), /*#__PURE__*/_react["default"].createElement("span", null, item.text)), /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-nav__container"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-nav__content-title"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    onClick: function onClick(e) {
      return obj.handleClick(divId, e);
    },
    className: "ma__utility-nav__close js-close-util-nav"
  }, /*#__PURE__*/_react["default"].createElement("span", null, item.closeText), /*#__PURE__*/_react["default"].createElement("span", {
    className: "ma__utility-nav__close-icon",
    "aria-hidden": "true"
  }, "+")), /*#__PURE__*/_react["default"].createElement(IconComponent, iconProps), /*#__PURE__*/_react["default"].createElement("span", null, item.text)), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-nav__content-body"
  }, /*#__PURE__*/_react["default"].createElement(_index["default"], item.panel)))));
};

var NavItemLink = function NavItemLink(obj) {
  var item = obj.data;
  var iconProps = {
    ariaHidden: true
  };
  var IconComponent = item.icon === 'building' ? _IconBuilding["default"] : _IconLogin["default"];
  return /*#__PURE__*/_react["default"].createElement("li", {
    className: "ma__utility-nav__item js-util-nav-toggle"
  }, /*#__PURE__*/_react["default"].createElement("a", {
    className: "ma__utility-nav__link",
    href: item.href,
    "aria-label": item.ariaLabelText || item.text
  }, /*#__PURE__*/_react["default"].createElement(IconComponent, iconProps), /*#__PURE__*/_react["default"].createElement("span", null, item.text)));
};

UtilityNav.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Boolean that controls when to show the google language dom. */
  googleLanguages: _propTypes["default"].bool,

  /** An array of navigation items to display to the user: <ul>
   * `text:` The text to display for the main navigation item.<br />
   * `ariaLabelText:` Defines the label to use with aria-label.<br />
   * `icon:` The icon to display to the left of text.<br />
   * `href:` The href for the link if not a button.<br />
   * `closeText:` The text to use on the close link.<br />
   * `panel:` Displays an utility panel when text is clicked.
   * </ul>
   */
  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    text: _propTypes["default"].string.isRequired,
    ariaLabelText: _propTypes["default"].string,
    icon: _propTypes["default"].oneOf(['building', 'login']),
    href: _propTypes["default"].string,
    closeText: _propTypes["default"].string,
    panel: _propTypes["default"].shape(_index["default"].propTypes)
  })),

  /** Boolean that controls if any UtilityNav div should be should be open on mobile. */
  isOpen: _propTypes["default"].bool
} : {};
var _default = UtilityNav;
exports["default"] = _default;
module.exports = exports.default;