@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
297 lines (250 loc) • 12.4 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.TranslateItem = exports.StateItem = exports.LoginItem = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _index = _interopRequireDefault(require("../GoogleTranslateElement/index.js"));
var _index2 = _interopRequireDefault(require("../DecorativeLink/index.js"));
var _IconBuilding = _interopRequireDefault(require("../Icon/IconBuilding.js"));
var _IconLogin = _interopRequireDefault(require("../Icon/IconLogin.js"));
var _useWindowWidth = _interopRequireDefault(require("../hooks/use-window-width.js"));
var _UtilityNav = _interopRequireDefault(require("./UtilityNav.data"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var PanelItem = function PanelItem(_ref) {
var narrow = _ref.narrow,
_ref$title = _ref.title,
title = _ref$title === void 0 ? '' : _ref$title,
CustomIcon = _ref.CustomIcon,
_ref$description = _ref.description,
description = _ref$description === void 0 ? '' : _ref$description,
_ref$ariaLabel = _ref.ariaLabel,
ariaLabel = _ref$ariaLabel === void 0 ? '' : _ref$ariaLabel,
_ref$links = _ref.links,
links = _ref$links === void 0 ? [] : _ref$links;
var windowWidth = (0, _useWindowWidth["default"])();
var isMobileWindow = windowWidth !== null && windowWidth < 860;
var loginToggleRef = _react["default"].useRef();
var loginContentRef = _react["default"].useRef();
var loginCloseRef = _react["default"].useRef();
var loginContainerRef = _react["default"].useRef();
_react["default"].useEffect(function () {
var utilButton = loginToggleRef.current;
var utilCloseButton = loginCloseRef.current;
var utilContent = loginContentRef.current;
var utilContainer = utilContent ? loginContainerRef.current : null;
var closeUtilWideContent = function closeUtilWideContent() {
// Content state
utilContent.style.height = '0';
utilContent.style.opacity = '0';
utilContent.classList.add('is-closed');
utilContent.setAttribute('aria-hidden', 'true'); // Close button state
utilCloseButton.setAttribute('aria-expanded', 'false'); // Utility button state
utilButton.setAttribute('aria-expanded', 'false');
utilButton.setAttribute('aria-pressed', 'false');
var closestHamburgerNav = utilButton.closest('.ma__header__hamburger__nav');
if (closestHamburgerNav) {
closestHamburgerNav.classList.toggle('util-nav-content-open');
}
};
var closeNarrowUtilContent = function closeNarrowUtilContent() {
var thisNavContainer = utilButton.closest('.ma__utility-nav__item');
utilButton.setAttribute('aria-expanded', 'false');
utilContent.setAttribute('aria-hidden', 'true');
thisNavContainer.style.pointerEvents = 'none';
setTimeout(function () {
thisNavContainer.removeAttribute('style');
}, 700);
utilContent.style.maxHeight = '0';
utilContainer.style.opacity = '0';
setTimeout(function () {
utilContent.classList.add('is-closed');
}, 500);
};
var utilButtonNarrowClick = function utilButtonNarrowClick(e) {
var thisButton = e.target.closest('.js-util-nav-toggle');
var thisNavContainer = e.target.closest('.ma__utility-nav__item');
var utilNarrowContent = thisButton.nextElementSibling;
if (utilNarrowContent.classList.contains('is-closed')) {
// TO OPEN
closeSubMenu();
thisButton.setAttribute('aria-expanded', 'true');
utilNarrowContent.removeAttribute('aria-hidden');
thisNavContainer.style.pointerEvents = 'none';
/** Slide down. */
thisNavContainer.removeAttribute('style');
/** Show the content. */
utilNarrowContent.classList.remove('is-closed');
utilNarrowContent.style.maxHeight = 'auto';
/** Get the computed height of the content. */
var contentHeight = utilContent.querySelector('.ma__utility-nav__content-body').clientHeight + "px";
/** Set the height of the submenu as 0px, */
/** so we can trigger the slide down animation. */
utilContent.style.maxHeight = '0';
utilContent.style.Height = '0'; // These height settings display the bottom border of the parent li at the correct spot.
utilContent.style.height = contentHeight;
utilContainer.style.height = contentHeight;
utilContent.style.maxHeight = contentHeight;
utilContainer.style.opacity = '1';
} else {
closeNarrowUtilContent();
}
};
var utilButtonWideClick = function utilButtonWideClick(e) {
var thisWideButton = e.target.closest('.js-util-nav-toggle');
var thisWideContent = thisWideButton.nextElementSibling;
if (thisWideContent.classList.contains('is-closed')) {
var closestHamburgerNav = thisWideButton.closest('.ma__header__hamburger__nav');
if (closestHamburgerNav) {
closestHamburgerNav.classList.add('util-nav-content-open');
}
thisWideContent.classList.remove('is-closed');
thisWideContent.removeAttribute('aria-hidden');
thisWideContent.removeAttribute('style');
thisWideContent.style.height = 'auto';
thisWideContent.style.opacity = '1'; // Button State
thisWideButton.setAttribute('aria-expanded', 'true');
thisWideButton.setAttribute('aria-pressed', 'true');
}
thisWideButton.setAttribute('aria-expanded', 'true');
thisWideButton.setAttribute('aria-pressed', 'true');
};
function closeSubMenu() {
var openSubMenu = document.querySelector('.submenu-open');
if (openSubMenu) {
var openSubMenuButton = openSubMenu.querySelector('.js-main-nav-hamburger__top-link');
var openSubMenuContent = openSubMenu.querySelector('.js-main-nav-hamburger-content');
var openSubMenuContainer = openSubMenu.querySelector('.js-main-nav-hamburger__container');
openSubMenuButton.setAttribute('aria-expanded', 'false');
openSubMenuContent.style.height = '0';
openSubMenuContainer.style.opacity = '0';
openSubMenuContent.classList.add('is-closed');
openSubMenu.removeAttribute('style');
openSubMenu.classList.remove('submenu-open');
}
}
if (utilButton && utilCloseButton && utilContent && utilContainer) {
// Open
if (!isMobileWindow) {
utilContent.removeAttribute('style');
utilContainer.removeAttribute('style');
utilButton.addEventListener('click', utilButtonWideClick);
utilCloseButton.addEventListener('click', closeUtilWideContent);
} else {
utilContent.style.maxHeight = '0';
utilContainer.style.opacity = '0';
utilButton.addEventListener('click', utilButtonNarrowClick);
}
}
return function () {
utilButton.removeEventListener('click', utilButtonWideClick);
utilCloseButton.removeEventListener('click', closeUtilWideContent);
utilButton.removeEventListener('click', utilButtonNarrowClick);
};
}, [isMobileWindow, narrow, loginToggleRef, loginCloseRef, loginContentRef, loginContainerRef]);
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
ref: loginToggleRef,
type: "button",
className: "ma__utility-nav__link js-util-nav-toggle",
"aria-haspopup": "true",
"aria-label": ariaLabel,
"aria-expanded": "false"
}, CustomIcon && /*#__PURE__*/_react["default"].createElement(CustomIcon, null), title && title.length > 0 && /*#__PURE__*/_react["default"].createElement("span", null, title), /*#__PURE__*/_react["default"].createElement("span", {
className: "toggle-indicator",
"aria-hidden": "true"
})), /*#__PURE__*/_react["default"].createElement("div", {
ref: loginContentRef,
"aria-hidden": "true",
className: "ma__utility-nav__content js-util-nav-content is-closed"
}, /*#__PURE__*/_react["default"].createElement("div", {
ref: loginContainerRef,
className: "ma__utility-nav__container"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__utility-nav__content-title"
}, /*#__PURE__*/_react["default"].createElement("button", {
ref: loginCloseRef,
type: "button",
className: "ma__utility-nav__close js-close-util-nav"
}, /*#__PURE__*/_react["default"].createElement("span", null, "Close"), /*#__PURE__*/_react["default"].createElement("span", {
className: "ma__utility-nav__close-icon",
"aria-hidden": "true"
}, "+")), CustomIcon && /*#__PURE__*/_react["default"].createElement(CustomIcon, null), title && title.length > 0 && /*#__PURE__*/_react["default"].createElement("h2", null, title)), /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__utility-nav__content-body"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__utility-panel"
}, description && description.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__utility-panel__description ma__utility-panel__description--full"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__rich-text"
}, /*#__PURE__*/_react["default"].createElement("p", null, description))), /*#__PURE__*/_react["default"].createElement("ul", {
className: "ma__utility-panel__items"
}, links.length > 0 && links.map(function (link, i) {
return /*#__PURE__*/_react["default"].createElement("li", {
className: "ma__utility-panel__item js-clickable",
key: "util_panel_item_" + i
}, /*#__PURE__*/_react["default"].createElement(_index2["default"], link));
})))))));
};
PanelItem.propTypes = process.env.NODE_ENV !== "production" ? {
narrow: _propTypes["default"].bool,
title: _propTypes["default"].string,
CustomIcon: _propTypes["default"].elementType,
description: _propTypes["default"].string,
ariaLabel: _propTypes["default"].string,
links: _propTypes["default"].arrayOf(_propTypes["default"].object)
} : {};
var LoginItem = function LoginItem(_ref2) {
var _ref2$data = _ref2.data,
data = _ref2$data === void 0 ? _UtilityNav["default"].loginItem : _ref2$data;
var _data$panel = data.panel,
links = _data$panel.links,
description = _data$panel.description,
text = data.text,
ariaLabel = data.ariaLabel;
return /*#__PURE__*/_react["default"].createElement(PanelItem, {
links: links,
title: text,
CustomIcon: _IconLogin["default"],
description: description,
ariaLabel: ariaLabel
});
};
exports.LoginItem = LoginItem;
LoginItem.propTypes = process.env.NODE_ENV !== "production" ? {
data: _propTypes["default"].shape({
panel: _propTypes["default"].shape({
description: _propTypes["default"].string,
links: _propTypes["default"].arrayOf(_propTypes["default"].object)
}),
text: _propTypes["default"].string,
ariaLabel: _propTypes["default"].string
})
} : {};
var TranslateItem = function TranslateItem() {
var windowWidth = (0, _useWindowWidth["default"])();
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, windowWidth && windowWidth > 840 && /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__utility-nav__translate"
}, /*#__PURE__*/_react["default"].createElement(_index["default"], {
id: "google-translate-id"
})));
};
exports.TranslateItem = TranslateItem;
var StateItem = function StateItem(_ref3) {
var _ref3$data = _ref3.data,
data = _ref3$data === void 0 ? _UtilityNav["default"].stateItem : _ref3$data;
var link = data.link,
ariaLabel = data.ariaLabel,
text = data.text;
return /*#__PURE__*/_react["default"].createElement("a", {
className: "ma__utility-nav__link direct-link",
href: link,
"aria-label": ariaLabel
}, /*#__PURE__*/_react["default"].createElement(_IconBuilding["default"], null), /*#__PURE__*/_react["default"].createElement("span", null, text));
};
exports.StateItem = StateItem;
StateItem.propTypes = process.env.NODE_ENV !== "production" ? {
data: _propTypes["default"].shape({
link: _propTypes["default"].string,
text: _propTypes["default"].string,
ariaLabel: _propTypes["default"].string
})
} : {};