@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
171 lines (170 loc) • 7.55 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
/**
* UtilityNav module.
* @module @massds/mayflower-react/UtilityNav
* @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/01-atoms/decorative-link
* @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
* @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
*/
import React from "react";
import PropTypes from "prop-types";
import nanoid from "nanoid";
import UtilityPanel from "../UtilityPanel/index.mjs";
// eslint-disable-next-line import/no-unresolved
import IconBuilding from "../Icon/IconBuilding.mjs";
// eslint-disable-next-line import/no-unresolved
import IconLogin from "../Icon/IconLogin.mjs";
// eslint-disable-next-line import/no-unresolved
import IconGlobe from "../Icon/IconGlobe.mjs";
let UtilityNav = /*#__PURE__*/function (_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(_this);
_this.ident = nanoid();
return _this;
}
// eslint-disable-next-line camelcase
_inheritsLoose(UtilityNav, _React$Component);
var _proto = UtilityNav.prototype;
_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
const isOpen = nextProps.isOpen;
this.setState({
isOpen: isOpen,
navSelected: -1
});
};
_proto.onClick = function onClick(divId, e) {
e.preventDefault();
this.setState(state => ({
navSelected: state.navSelected === -1 ? divId : -1,
isOpen: true
}));
};
_proto.render = function render() {
const navSelected = this.state.navSelected;
const _this$props = this.props,
googleLanguages = _this$props.googleLanguages,
items = _this$props.items;
return /*#__PURE__*/React.createElement("div", {
className: "ma__utility-nav js-util-nav"
}, /*#__PURE__*/React.createElement("ul", {
className: "ma__utility-nav__items"
}, googleLanguages && /*#__PURE__*/React.createElement(GoogleLanguages, null), items.map((item, itemIndex) => {
const newItem = _extends({}, item);
newItem.navSelected = navSelected;
// Use utility nav ident to make unique item ids.
newItem.navIdent = this.ident;
const isOpen = this.state.isOpen;
return item.panel ?
/*#__PURE__*/
/* eslint-disable react/no-array-index-key */
React.createElement(NavItem, {
handleClick: this.onClick,
data: newItem,
key: "navItem." + itemIndex,
index: itemIndex,
isOpen: isOpen
}) : /*#__PURE__*/React.createElement(NavItemLink, {
key: "navItem." + itemIndex,
data: item
});
})));
};
return UtilityNav;
}(React.Component);
const GoogleLanguages = () => /*#__PURE__*/React.createElement("li", {
key: "li.googleLanguage",
className: "ma__utility-nav__item"
}, /*#__PURE__*/React.createElement("div", {
className: "ma__utility-nav__translate"
}, /*#__PURE__*/React.createElement("div", {
id: "google_translate_element"
}), /*#__PURE__*/React.createElement("div", {
className: "ma__utility-nav__translate-icon"
}, /*#__PURE__*/React.createElement(IconGlobe, null))));
const NavItem = obj => {
const item = obj.data;
const divId = "nav-content-" + item.navIdent + "-" + obj.index;
const oneIsOpen = obj.isOpen;
const thisIsOpen = item.navSelected === divId;
const isExpanded = oneIsOpen && thisIsOpen ? 'is-open' : 'is-closed';
const divProps = {
className: "ma__utility-nav__content js-util-nav-content " + isExpanded,
'aria-hidden': isExpanded ? 'false' : 'true',
id: divId
};
const iconProps = {
height: 20,
width: 18
};
const IconComponent = item.icon === 'building' ? IconBuilding : IconLogin;
return /*#__PURE__*/React.createElement("li", {
className: "ma__utility-nav__item js-util-nav-toggle"
}, /*#__PURE__*/React.createElement("button", {
type: "button",
onClick: e => obj.handleClick(divId, e),
className: "ma__utility-nav__link " + isExpanded,
href: "#",
"aria-label": item.ariaLabelText || item.text
}, /*#__PURE__*/React.createElement(IconComponent, iconProps), /*#__PURE__*/React.createElement("span", null, item.text)), /*#__PURE__*/React.createElement("div", divProps, /*#__PURE__*/React.createElement("div", {
className: "ma__utility-nav__container"
}, /*#__PURE__*/React.createElement("div", {
className: "ma__utility-nav__content-title"
}, /*#__PURE__*/React.createElement("button", {
type: "button",
onClick: e => obj.handleClick(divId, e),
className: "ma__utility-nav__close js-close-util-nav"
}, /*#__PURE__*/React.createElement("span", null, item.closeText), /*#__PURE__*/React.createElement("span", {
className: "ma__utility-nav__close-icon",
"aria-hidden": "true"
}, "+")), /*#__PURE__*/React.createElement(IconComponent, iconProps), /*#__PURE__*/React.createElement("span", null, item.text)), /*#__PURE__*/React.createElement("div", {
className: "ma__utility-nav__content-body"
}, /*#__PURE__*/React.createElement(UtilityPanel, item.panel)))));
};
const NavItemLink = obj => {
const item = obj.data;
const iconProps = {
ariaHidden: true
};
const IconComponent = item.icon === 'building' ? IconBuilding : IconLogin;
return /*#__PURE__*/React.createElement("li", {
className: "ma__utility-nav__item js-util-nav-toggle"
}, /*#__PURE__*/React.createElement("a", {
className: "ma__utility-nav__link",
href: item.href,
"aria-label": item.ariaLabelText || item.text
}, /*#__PURE__*/React.createElement(IconComponent, iconProps), /*#__PURE__*/React.createElement("span", null, item.text)));
};
UtilityNav.propTypes = process.env.NODE_ENV !== "production" ? {
/** Boolean that controls when to show the google language dom. */
googleLanguages: PropTypes.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.arrayOf(PropTypes.shape({
text: PropTypes.string.isRequired,
ariaLabelText: PropTypes.string,
icon: PropTypes.oneOf(['building', 'login']),
href: PropTypes.string,
closeText: PropTypes.string,
panel: PropTypes.shape(UtilityPanel.propTypes)
})),
/** Boolean that controls if any UtilityNav div should be should be open on mobile. */
isOpen: PropTypes.bool
} : {};
export default UtilityNav;