kea-react
Version:
Componentes comunes de react
108 lines (107 loc) • 5.36 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 __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var interfaces_1 = require("./interfaces");
var menu_1 = require("./menu");
exports.mapNavBarItem = function (collapsed, height, onShouldCollapse, x, i) {
if (x.visible == false)
return null;
return (React.createElement(NavBarItemComponent, { items: x.items, light: x.light, collapsed: collapsed, height: height, key: i, onShouldCollapse: onShouldCollapse, selected: x.selected, onClick: x.onClick, borderless: x.borderless }, x.content));
};
var NavBarItemComponent = /** @class */ (function (_super) {
__extends(NavBarItemComponent, _super);
function NavBarItemComponent(props) {
var _this = _super.call(this, props) || this;
_this.handleDocumentClick = function (ev) {
var isMenuFunc = function (target) {
if (target == null)
return false;
if (target == _this.divRef) {
return true;
}
return isMenuFunc(target.parentNode);
};
var isMenu = isMenuFunc(ev.target);
if (!isMenu)
_this.setState({ open: false });
};
_this.handleOnMouseEnter = function () {
_this.setState({ hover: true });
};
_this.handleOnMouseLeave = function () {
_this.setState({ hover: false });
};
_this.handleOnClick = function () {
if (_this.props.onClick)
_this.props.onClick();
//Solo se debe de colapsar la barra si este no es un menu
if (_this.props.onShouldCollapse && (!_this.props.items || _this.props.items.length == 0))
_this.props.onShouldCollapse();
_this.setState(function (prev) { return ({ open: !prev.open }); });
};
_this.handleRef = function (div) {
_this.divRef = div;
};
_this.state = { hover: false, open: false };
return _this;
}
NavBarItemComponent.prototype.componentWillMount = function () {
document.addEventListener("click", this.handleDocumentClick);
};
NavBarItemComponent.prototype.componentWillUnmount = function () {
document.removeEventListener("click", this.handleDocumentClick);
};
NavBarItemComponent.prototype.render = function () {
var _this = this;
var itemPadding = this.props.borderless ? undefined : "0 10px 0 10px";
var navBarItemStyle = {
height: this.props.height + "px",
color: this.props.light ? "black" : "white",
cursor: "pointer",
position: "relative",
padding: itemPadding,
justifyContent: "center",
flexDirection: "column",
display: "flex",
float: this.props.collapsed ? undefined : "left"
};
var getBackgroundColor = function (hover, selected, normal) {
return _this.state.hover ? hover : _this.props.selected ? selected : normal;
};
var background = this.props.light ?
getBackgroundColor(interfaces_1.lightHover, interfaces_1.lightSelected, interfaces_1.light) :
getBackgroundColor(interfaces_1.darkHover, interfaces_1.darkSelected, undefined);
var showMenuItems = this.state.open && this.props.items;
var div = React.createElement("div", { ref: this.handleRef, style: __assign({}, navBarItemStyle, { background: background }), onMouseEnter: this.handleOnMouseEnter, onMouseLeave: this.handleOnMouseLeave, onClick: this.handleOnClick },
this.props.children,
showMenuItems && !this.props.collapsed && this.props.items &&
React.createElement(menu_1.NavBarMenu, { items: this.props.items, height: this.props.height }));
return (this.props.collapsed ?
React.createElement("div", { style: { position: "relative" } },
div,
showMenuItems && this.props.collapsed &&
React.createElement("div", { style: { marginLeft: "5px" } }, this.props.items &&
this.props.items
.filter(function (x) { return x; })
.map(function (x, i) { return x && exports.mapNavBarItem(true, _this.props.height, _this.props.onShouldCollapse, x, i); }))) : div);
};
return NavBarItemComponent;
}(React.PureComponent));