@guardian/threads
Version:
61 lines • 2.46 kB
JavaScript
import { __extends } from "tslib";
import React, { Component, createRef } from 'react';
import { createPortal } from 'react-dom';
import styles from './PopOver.module.css';
var padding = 20;
var getMaxHeight = function (top) {
return window.innerHeight - top - padding;
};
var PopOver = /** @class */ (function (_super) {
__extends(PopOver, _super);
function PopOver() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.popoverRef = createRef();
_this.overlaysNode = document.querySelector('#overlays');
_this.state = {
top: 0,
left: 0,
maxHeight: 99999,
};
return _this;
}
PopOver.prototype.componentDidMount = function () {
var current = this.popoverRef.current;
if (current) {
var clientHeight = current.clientHeight;
var _a = this.props, top_1 = _a.top, left = _a.left;
var maxHeight = getMaxHeight(top_1);
if (maxHeight < clientHeight) {
top_1 = top_1 - (clientHeight - maxHeight);
if (top_1 < padding)
top_1 = padding;
maxHeight = getMaxHeight(top_1);
}
this.setState({
top: top_1,
left: left,
maxHeight: maxHeight,
});
}
};
PopOver.prototype.render = function () {
var _a = this.props, children = _a.children, origin = _a.origin, persistent = _a.persistent;
var _b = this.state, top = _b.top, left = _b.left, maxHeight = _b.maxHeight;
if (this.overlaysNode) {
return createPortal(React.createElement("div", { className: styles.closer, onClick: this.props.onClose },
React.createElement("div", { className: styles.holder, style: { top: top, left: left }, "data-origin": origin },
React.createElement("div", { ref: this.popoverRef, style: { maxHeight: maxHeight }, className: styles.popover, onClick: function (e) {
if (persistent) {
e.stopPropagation();
}
} }, children))), this.overlaysNode);
}
else {
console.error('Missing overlays node in DOM!');
return null;
}
};
return PopOver;
}(Component));
export { PopOver };
//# sourceMappingURL=PopOver.js.map