@up-group-ui/react-controls
Version:
Up shared react controls
121 lines • 5.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpContextMenu = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var helpers_1 = require("../../../Common/utils/helpers");
var eventListener_1 = (0, tslib_1.__importDefault)(require("../../../Common/utils/eventListener"));
var object_assign_1 = (0, tslib_1.__importDefault)(require("object-assign"));
var actions_1 = require("./actions");
var withTheme_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/withTheme"));
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var styles_1 = require("./styles");
var UpContextMenu = (function (_super) {
(0, tslib_1.__extends)(UpContextMenu, _super);
function UpContextMenu(props) {
var _this = _super.call(this, props) || this;
_this.setMenu = function (element) {
_this.menu = element;
};
_this.getMenuPosition = function (x, y) {
var _a = document.documentElement, scrollX = _a.scrollTop, scrollY = _a.scrollLeft;
var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
var rect = _this.menu.getBoundingClientRect();
var menuStyles = {
top: y + scrollY,
left: x + scrollX,
};
if (y + rect.height > innerHeight) {
menuStyles.top -= rect.height;
}
if (x + rect.width > innerWidth) {
menuStyles.left -= rect.width;
}
if (menuStyles.top < 0) {
menuStyles.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
}
if (menuStyles.left < 0) {
menuStyles.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
}
return menuStyles;
};
_this.handleShow = function (e) {
if (e.detail.id !== _this.props.id)
return;
var _a = e.detail.position, x = _a.x, y = _a.y;
_this.setState({ isVisible: true, x: x, y: y });
document.addEventListener('mousedown', _this.handleOutsideClick);
document.addEventListener('ontouchstart', _this.handleOutsideClick);
document.addEventListener('scroll', _this.handleHide);
document.addEventListener('contextmenu', _this.handleHide);
window.addEventListener('resize', _this.handleHide);
(0, helpers_1.callIfExists)(_this.props.onShow, e);
};
_this.handleHide = function (e) {
document.removeEventListener('mousedown', _this.handleOutsideClick);
document.removeEventListener('ontouchstart', _this.handleOutsideClick);
document.removeEventListener('scroll', _this.handleHide);
document.removeEventListener('contextmenu', _this.handleHide);
window.removeEventListener('resize', _this.handleHide);
_this.setState({ isVisible: false });
(0, helpers_1.callIfExists)(_this.props.onHide, e);
};
_this.handleOutsideClick = function (e) {
if (_this.state.isVisible && !_this.menu.contains(e.target)) {
_this.setState(function (prevState) { return ({
isVisible: !prevState.isVisible,
}); });
_this.hideMenu({}, e.target);
}
};
_this.hideMenu = function (opts, target) {
if (opts === void 0) { opts = {}; }
eventListener_1.default.dispatchGlobalEvent(actions_1.MENU_HIDE, (0, object_assign_1.default)({}, opts, { type: actions_1.MENU_HIDE }), target);
};
_this.state = {
x: 0,
y: 0,
top: 0,
left: 0,
isVisible: false,
};
return _this;
}
UpContextMenu.prototype.componentDidMount = function () {
var callbacks = {};
callbacks[actions_1.MENU_SHOW] = this.handleShow;
callbacks[actions_1.MENU_HIDE] = this.handleHide;
this.listenerId = eventListener_1.default.register(callbacks);
};
UpContextMenu.prototype.componentDidUpdate = function () {
var _this = this;
if (this.state.isVisible) {
var wrapper_1 = window.requestAnimationFrame || setTimeout;
wrapper_1(function () {
var _a = _this.state, x = _a.x, y = _a.y;
var _b = _this.getMenuPosition(x, y), top = _b.top, left = _b.left;
wrapper_1(function () {
_this.menu.style.top = top + "px";
_this.menu.style.left = left + "px";
});
});
}
};
UpContextMenu.prototype.componentWillUnmount = function () {
if (this.listenerId) {
eventListener_1.default.unregister(this.listenerId);
}
};
UpContextMenu.prototype.render = function () {
var _a = this.props, children = _a.children, theme = _a.theme;
return ((0, jsx_runtime_1.jsx)("nav", (0, tslib_1.__assign)({ ref: this.setMenu, onContextMenu: this.handleHide, className: (0, styles_1.MenuStyle)(theme, this.state) }, { children: this.state.isVisible && children }), void 0));
};
UpContextMenu.defaultProps = {
theme: theming_1.default,
};
return UpContextMenu;
}(react_1.default.PureComponent));
exports.UpContextMenu = UpContextMenu;
exports.default = (0, withTheme_1.default)(UpContextMenu);
//# sourceMappingURL=UpContextMenu.js.map