@up-group/react-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
132 lines • 7.02 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var 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 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 });
var React = require("react");
var helpers_1 = require("../../../Common/utils/helpers");
var eventListener_1 = require("../../../Common/utils/eventListener");
var typestyle_1 = require("typestyle");
var assign = require("object-assign");
var classNames = require("classnames");
var actions_1 = require("./actions");
typestyle_1.cssRaw("\n.up-contextmenu {\n min-width: 160px;\n padding: 5px 0;\n margin: 2px 0 0;\n font-size: 16px;\n color: #373a3c;\n text-align: left;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid rgba(0,0,0,.15);\n border-radius: .25rem;\n outline: none;\n opacity: 0;\n pointer-events: none;\n}\n\n.up-contextmenu.up-contextmenu--visible {\n opacity: 1;\n pointer-events: auto;\n}\n\n.up-contextmenu-link {\n display: inline-block;\n width: 100%;\n padding: 3px 20px;\n clear: both;\n font-weight: 400;\n line-height: 1.5;\n color: #373a3c;\n text-align: inherit;\n white-space: nowrap;\n background: 0 0;\n border: 0;\n}\n\n.up-contextmenu-link.active,\n.up-contextmenu-link:hover {\n color: #fff;\n background-color: #0275d8;\n border-color: #0275d8;\n text-decoration: none;\n}\n.up-contextmenu-item.submenu > a {\n padding-right: 27px;\n}\n\n.up-contextmenu-item.submenu > a:after {\n content: \"\u25B6\";\n display: inline-block;\n position: absolute;\n right: 7px;\n}\n");
var UpContextMenu = (function (_super) {
__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) {
console.log('handleShow');
console.log(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);
helpers_1.callIfExists(_this.props.onShow, e);
};
_this.handleHide = function (e) {
console.log('handleHide');
console.log(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 });
helpers_1.callIfExists(_this.props.onHide, e);
};
_this.handleOutsideClick = function (e) {
if (!_this.menu.contains(e.target))
_this.hideMenu({}, e.target);
};
_this.hideMenu = function (opts, target) {
if (opts === void 0) { opts = {}; }
eventListener_1.default.dispatchGlobalEvent(actions_1.MENU_HIDE, assign({}, 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";
});
});
}
else {
}
};
UpContextMenu.prototype.componentWillUnmount = function () {
if (this.listenerId) {
eventListener_1.default.unregister(this.listenerId);
}
};
UpContextMenu.prototype.render = function () {
var children = this.props.children;
var _a = this.state, top = _a.top, left = _a.left;
var style = { position: "fixed", top: top, left: left };
var MenuStyle = 'up-contextmenu';
if (this.state.isVisible)
MenuStyle = classNames(MenuStyle, 'up-contextmenu--visible');
return (React.createElement("nav", { ref: this.setMenu, style: style, onContextMenu: this.handleHide, className: MenuStyle }, children));
};
UpContextMenu.defaultProps = {};
return UpContextMenu;
}(React.PureComponent));
exports.default = UpContextMenu;
//# sourceMappingURL=UpContextMenu.js.map