zangai-react
Version:
106 lines (105 loc) • 4.13 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { OverlayContainer } from './overlay-container';
var ConnectedOverlay = /** @class */ (function (_super) {
tslib_1.__extends(ConnectedOverlay, _super);
function ConnectedOverlay(props) {
var _this = _super.call(this, props) || this;
_this.handleBackDropClick = function () {
if (_this.props.clickBackDrop)
_this.props.clickBackDrop();
};
_this.state = {
overlayPosition: {
pointerEvents: 'auto', top: 0, left: 0,
},
};
return _this;
}
ConnectedOverlay.prototype.componentDidMount = function () {
var _this = this;
window.document.addEventListener('scroll', function () {
_this.calculateOriginPosition(_this.props.origin);
});
};
ConnectedOverlay.prototype.componentWillUnmount = function () {
};
ConnectedOverlay.prototype.componentDidUpdate = function () {
};
ConnectedOverlay.prototype.componentWillReceiveProps = function (props) {
this.calculateOriginPosition(props.origin);
};
ConnectedOverlay.prototype.renderOverlayPanel = function () {
var boundingBoxStyle = { top: '0px', left: '0px', height: '100%', width: '100%' };
return this.props.open ? [
(this.props.hasBackDrop ? React.createElement("div", { onClick: this.handleBackDropClick, key: 'A', className: "cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing" }) : null),
React.createElement("div", { key: 'B', className: "cdk-overlay-connected-position-bounding-box", style: boundingBoxStyle },
React.createElement("div", { className: "cdk-overlay-pane", style: this.state.overlayPosition }, this.props.children)),
] :
null;
};
ConnectedOverlay.prototype.calculateOriginPosition = function (origin) {
if (origin) {
var dom = origin;
var rect = dom.getBoundingClientRect();
var width = dom.offsetWidth;
var height = dom.offsetHeight;
var state = {};
switch (this.props.position) {
case 'bottom':
state = {
pointerEvents: 'auto',
left: rect.left,
top: rect.top + height,
minWidth: width,
};
break;
case 'left':
state = {
pointerEvents: 'auto',
left: rect.left,
top: rect.top + height,
minWidth: width,
};
break;
case 'right':
state = {
pointerEvents: 'auto',
left: rect.left + width,
top: rect.top,
minWidth: width,
};
break;
case 'top':
state = {
pointerEvents: 'auto',
left: rect.left,
top: rect.top - height,
minWidth: width,
};
break;
default:
state = {
pointerEvents: 'auto',
left: rect.left,
top: rect.top + height,
minWidth: width,
};
}
this.setState({
overlayPosition: state,
});
}
};
ConnectedOverlay.prototype.render = function () {
return ReactDOM.createPortal(this.renderOverlayPanel(), OverlayContainer.getInstance().containerDom);
};
ConnectedOverlay.defaultProps = {
open: false,
hasBackDrop: false,
position: 'bottom',
};
return ConnectedOverlay;
}(React.Component));
export { ConnectedOverlay };