forked from Gitlink/forgeplus-react
195 lines
5.9 KiB
JavaScript
195 lines
5.9 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
|
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
|
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
|
|
var _keys = _interopRequireDefault(require("@babel/runtime/core-js/object/keys"));
|
|
|
|
var _style = _interopRequireDefault(require("dom-helpers/style"));
|
|
|
|
var _ownerDocument = _interopRequireDefault(require("dom-helpers/ownerDocument"));
|
|
|
|
var _scrollbarSize = _interopRequireDefault(require("dom-helpers/util/scrollbarSize"));
|
|
|
|
var _isOverflowing = _interopRequireDefault(require("./isOverflowing"));
|
|
|
|
var _manageAriaHidden = require("./manageAriaHidden");
|
|
|
|
function findIndexOf(data, callback) {
|
|
var idx = -1;
|
|
data.some(function (item, index) {
|
|
if (callback(item)) {
|
|
idx = index;
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
return idx;
|
|
}
|
|
|
|
function getPaddingRight(node) {
|
|
return parseInt((0, _style.default)(node, 'paddingRight') || 0, 10);
|
|
}
|
|
|
|
function setContainerStyle(data, container) {
|
|
var style = {
|
|
overflow: 'hidden'
|
|
}; // We are only interested in the actual `style` here because we will override it.
|
|
|
|
data.style = {
|
|
overflow: container.style.overflow,
|
|
paddingRight: container.style.paddingRight
|
|
};
|
|
|
|
if (data.overflowing) {
|
|
var scrollbarSize = (0, _scrollbarSize.default)(); // Use computed style, here to get the real padding to add our scrollbar width.
|
|
|
|
style.paddingRight = "".concat(getPaddingRight(container) + scrollbarSize, "px"); // .mui-fixed is a global helper.
|
|
|
|
var fixedNodes = (0, _ownerDocument.default)(container).querySelectorAll('.mui-fixed');
|
|
|
|
for (var i = 0; i < fixedNodes.length; i += 1) {
|
|
var paddingRight = getPaddingRight(fixedNodes[i]);
|
|
data.prevPaddings.push(paddingRight);
|
|
fixedNodes[i].style.paddingRight = "".concat(paddingRight + scrollbarSize, "px");
|
|
}
|
|
}
|
|
|
|
(0, _keys.default)(style).forEach(function (key) {
|
|
container.style[key] = style[key];
|
|
});
|
|
}
|
|
|
|
function removeContainerStyle(data, container) {
|
|
(0, _keys.default)(data.style).forEach(function (key) {
|
|
container.style[key] = data.style[key];
|
|
});
|
|
var fixedNodes = (0, _ownerDocument.default)(container).querySelectorAll('.mui-fixed');
|
|
|
|
for (var i = 0; i < fixedNodes.length; i += 1) {
|
|
fixedNodes[i].style.paddingRight = "".concat(data.prevPaddings[i], "px");
|
|
}
|
|
}
|
|
/**
|
|
* @ignore - do not document.
|
|
*
|
|
* Proper state managment for containers and the modals in those containers.
|
|
* Simplified, but inspired by react-overlay's ModalManager class
|
|
* Used by the Modal to ensure proper styling of containers.
|
|
*/
|
|
|
|
|
|
var ModalManager =
|
|
/*#__PURE__*/
|
|
function () {
|
|
function ModalManager() {
|
|
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
(0, _classCallCheck2.default)(this, ModalManager);
|
|
var _options$hideSiblingN = options.hideSiblingNodes,
|
|
hideSiblingNodes = _options$hideSiblingN === void 0 ? true : _options$hideSiblingN,
|
|
_options$handleContai = options.handleContainerOverflow,
|
|
handleContainerOverflow = _options$handleContai === void 0 ? true : _options$handleContai;
|
|
this.hideSiblingNodes = hideSiblingNodes;
|
|
this.handleContainerOverflow = handleContainerOverflow; // this.modals[modalIdx] = modal
|
|
|
|
this.modals = []; // this.containers[containerIdx] = container
|
|
|
|
this.containers = []; // this.data[containerIdx] = {
|
|
// modals: [],
|
|
// }
|
|
|
|
this.data = [];
|
|
}
|
|
|
|
(0, _createClass2.default)(ModalManager, [{
|
|
key: "add",
|
|
value: function add(modal, container) {
|
|
var modalIdx = this.modals.indexOf(modal);
|
|
|
|
if (modalIdx !== -1) {
|
|
return modalIdx;
|
|
}
|
|
|
|
modalIdx = this.modals.length;
|
|
this.modals.push(modal);
|
|
|
|
if (this.hideSiblingNodes) {
|
|
(0, _manageAriaHidden.hideSiblings)(container, modal.mountNode);
|
|
}
|
|
|
|
var containerIdx = this.containers.indexOf(container);
|
|
|
|
if (containerIdx !== -1) {
|
|
this.data[containerIdx].modals.push(modal);
|
|
return modalIdx;
|
|
}
|
|
|
|
var data = {
|
|
modals: [modal],
|
|
overflowing: (0, _isOverflowing.default)(container),
|
|
prevPaddings: []
|
|
};
|
|
|
|
if (this.handleContainerOverflow) {
|
|
setContainerStyle(data, container);
|
|
}
|
|
|
|
this.containers.push(container);
|
|
this.data.push(data);
|
|
return modalIdx;
|
|
}
|
|
}, {
|
|
key: "remove",
|
|
value: function remove(modal) {
|
|
var modalIdx = this.modals.indexOf(modal);
|
|
|
|
if (modalIdx === -1) {
|
|
return modalIdx;
|
|
}
|
|
|
|
var containerIdx = findIndexOf(this.data, function (item) {
|
|
return item.modals.indexOf(modal) !== -1;
|
|
});
|
|
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) {
|
|
if (this.handleContainerOverflow) {
|
|
removeContainerStyle(data, container);
|
|
}
|
|
|
|
if (this.hideSiblingNodes) {
|
|
(0, _manageAriaHidden.showSiblings)(container, modal.mountNode);
|
|
}
|
|
|
|
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 screan reader.
|
|
(0, _manageAriaHidden.ariaHidden)(false, data.modals[data.modals.length - 1].mountNode);
|
|
}
|
|
|
|
return modalIdx;
|
|
}
|
|
}, {
|
|
key: "isTopModal",
|
|
value: function isTopModal(modal) {
|
|
return !!this.modals.length && this.modals[this.modals.length - 1] === modal;
|
|
}
|
|
}]);
|
|
return ModalManager;
|
|
}();
|
|
|
|
var _default = ModalManager;
|
|
exports.default = _default; |