import addClass from 'dom-helpers/addClass'; import removeClass from 'dom-helpers/removeClass'; import css from 'dom-helpers/css'; import getScrollbarSize from 'dom-helpers/scrollbarSize'; import isOverflowing from './isOverflowing'; import { ariaHidden, hideSiblings, showSiblings } from './manageAriaHidden'; function findIndexOf(arr, cb) { var idx = -1; arr.some(function (d, i) { if (cb(d, i)) { idx = i; return true; } return false; }); return idx; } /** * Proper state management for containers and the modals in those containers. * * @internal Used by the Modal to ensure proper styling of containers. */ var ModalManager = /*#__PURE__*/function () { function ModalManager(_temp) { var _ref = _temp === void 0 ? {} : _temp, _ref$hideSiblingNodes = _ref.hideSiblingNodes, hideSiblingNodes = _ref$hideSiblingNodes === void 0 ? true : _ref$hideSiblingNodes, _ref$handleContainerO = _ref.handleContainerOverflow, handleContainerOverflow = _ref$handleContainerO === void 0 ? true : _ref$handleContainerO; this.hideSiblingNodes = void 0; this.handleContainerOverflow = void 0; this.modals = void 0; this.containers = void 0; this.data = void 0; this.scrollbarSize = void 0; this.hideSiblingNodes = hideSiblingNodes; this.handleContainerOverflow = handleContainerOverflow; this.modals = []; this.containers = []; this.data = []; this.scrollbarSize = getScrollbarSize(); } var _proto = ModalManager.prototype; _proto.isContainerOverflowing = function isContainerOverflowing(modal) { var data = this.data[this.containerIndexFromModal(modal)]; return data && data.overflowing; }; _proto.containerIndexFromModal = function containerIndexFromModal(modal) { return findIndexOf(this.data, function (d) { return d.modals.indexOf(modal) !== -1; }); }; _proto.setContainerStyle = function setContainerStyle(containerState, container) { var style = { overflow: 'hidden' }; // we are only interested in the actual `style` here // because we will override it containerState.style = { overflow: container.style.overflow, paddingRight: container.style.paddingRight }; if (containerState.overflowing) { // use computed style, here to get the real padding // to add our scrollbar width style.paddingRight = parseInt(css(container, 'paddingRight') || '0', 10) + this.scrollbarSize + "px"; } css(container, style); }; _proto.removeContainerStyle = function removeContainerStyle(containerState, container) { Object.assign(container.style, containerState.style); }; _proto.add = function add(modal, container, className) { var modalIdx = this.modals.indexOf(modal); var containerIdx = this.containers.indexOf(container); if (modalIdx !== -1) { return modalIdx; } modalIdx = this.modals.length; this.modals.push(modal); if (this.hideSiblingNodes) { hideSiblings(container, modal); } if (containerIdx !== -1) { this.data[containerIdx].modals.push(modal); return modalIdx; } var data = { modals: [modal], // right now only the first modal of a container will have its classes applied classes: className ? className.split(/\s+/) : [], overflowing: isOverflowing(container) }; if (this.handleContainerOverflow) { this.setContainerStyle(data, container); } data.classes.forEach(addClass.bind(null, container)); this.containers.push(container); this.data.push(data); return modalIdx; }; _proto.remove = function remove(modal) { var modalIdx = this.modals.indexOf(modal); if (modalIdx === -1) { return; } var containerIdx = this.containerIndexFromModal(modal); var data = this.data[containerIdx]; var container = this.containers[containerIdx]; data.modals.splice(data.modals.indexOf(modal), 1); this.modals.splice(modalIdx, 1); // if that was the last modal in a container, // clean up the container if (data.modals.length === 0) { data.classes.forEach(removeClass.bind(null, container)); if (this.handleContainerOverflow) { this.removeContainerStyle(data, container); } if (this.hideSiblingNodes) { showSiblings(container, modal); } this.containers.splice(containerIdx, 1); this.data.splice(containerIdx, 1); } else if (this.hideSiblingNodes) { // otherwise make sure the next top modal is visible to a SR var _data$modals = data.modals[data.modals.length - 1], backdrop = _data$modals.backdrop, dialog = _data$modals.dialog; ariaHidden(false, dialog); ariaHidden(false, backdrop); } }; _proto.isTopModal = function isTopModal(modal) { return !!this.modals.length && this.modals[this.modals.length - 1] === modal; }; return ModalManager; }(); export default ModalManager;