@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
184 lines (182 loc) • 8.69 kB
JavaScript
"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 _IconGlobe = _interopRequireDefault(require("../Icon/IconGlobe.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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
*/ // eslint-disable-next-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
var 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 = (0, _nanoid["default"])();
return _this;
}
// eslint-disable-next-line camelcase
_inheritsLoose(UtilityNav, _React$Component);
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(_IconGlobe["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 = {
height: 20,
width: 18
};
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 = exports["default"] = UtilityNav;
module.exports = exports.default;