@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
83 lines • 3.64 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2007-2018 GoodData Corporation
var React = require("react");
var positioningCalculations_1 = require("./positioningCalculations");
var PositionedMenuContent = /** @class */ (function (_super) {
__extends(PositionedMenuContent, _super);
function PositionedMenuContent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
left: 0,
top: 0,
};
_this.menuEl = null;
_this.setElMenu = function (el) {
_this.menuEl = el;
};
_this.positionMenu = function () {
if (!_this.props.togglerEl || !_this.menuEl) {
return;
}
var _a = positioningCalculations_1.calculateMenuPosition({
toggler: positioningCalculations_1.getElementDimensionsAndCoords(_this.props.togglerEl),
menu: positioningCalculations_1.getElementDimensions(_this.menuEl),
viewport: positioningCalculations_1.getViewportDimensionsAndCoords(),
alignment: _this.props.alignment,
spacing: _this.props.spacing,
offset: _this.props.offset,
topLevelMenu: _this.props.topLevelMenu,
}), left = _a.left, top = _a.top;
_this.setState({ left: left, top: top });
};
return _this;
}
PositionedMenuContent.prototype.componentDidUpdate = function (prevProps) {
if (prevProps.alignment !== this.props.alignment ||
prevProps.spacing !== this.props.spacing ||
prevProps.offset !== this.props.offset ||
prevProps.topLevelMenu !== this.props.topLevelMenu ||
prevProps.togglerEl !== this.props.togglerEl ||
prevProps.children !== this.props.children) {
this.positionMenu();
}
};
PositionedMenuContent.prototype.componentDidMount = function () {
this.positionMenu();
this.addEventListeners();
};
PositionedMenuContent.prototype.componentWillUnmount = function () {
this.removeEventListeners();
};
PositionedMenuContent.prototype.render = function () {
return (React.createElement("div", { style: {
position: "absolute",
left: this.state.left,
top: this.state.top,
}, ref: this.setElMenu }, this.props.children));
};
PositionedMenuContent.prototype.addEventListeners = function () {
window.addEventListener("resize", this.positionMenu);
window.addEventListener("scroll", this.positionMenu, true);
};
PositionedMenuContent.prototype.removeEventListeners = function () {
window.removeEventListener("resize", this.positionMenu);
window.removeEventListener("scroll", this.positionMenu, true);
};
return PositionedMenuContent;
}(React.Component));
exports.default = PositionedMenuContent;
//# sourceMappingURL=PositionedMenuContent.js.map