kea-react
Version:
Componentes comunes de react
131 lines (130 loc) • 6.35 kB
JavaScript
"use strict";
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 item_1 = require("./item");
var ExtendedNavBar = /** @class */ (function (_super) {
__extends(ExtendedNavBar, _super);
function ExtendedNavBar() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(ExtendedNavBar.prototype, "style", {
get: function () {
return {
top: 0,
height: (this.props.height + 1) + "px",
left: 0,
right: 0,
position: "relative",
background: interfaces_1.dark,
display: "flex",
};
},
enumerable: true,
configurable: true
});
ExtendedNavBar.prototype.render = function () {
var _this = this;
return (
/**El primer div se usa para ocupar espacio en la pagina pero el que se dibuja en realidad es el 2do div */
React.createElement("div", { style: this.style },
React.createElement("div", { style: { flex: "0 1 auto" } },
this.props.header && this.props.header.map(function (x, i) { return item_1.mapNavBarItem(false, _this.props.height, undefined, x, i); }),
this.props.left && this.props.left.map(function (x, i) { return item_1.mapNavBarItem(false, _this.props.height, undefined, x, i); })),
React.createElement("div", { style: { flex: "1 0 auto" } }),
React.createElement("div", null, this.props.right && this.props.right.map(function (x, i) { return item_1.mapNavBarItem(false, _this.props.height, undefined, x, i); }))));
};
return ExtendedNavBar;
}(React.PureComponent));
var Burger = /** @class */ (function (_super) {
__extends(Burger, _super);
function Burger() {
return _super !== null && _super.apply(this, arguments) || this;
}
Burger.prototype.render = function () {
var spanStyle = {
height: "3px",
background: interfaces_1.dark ? "black" : "white",
width: "20px",
margin: "3px 2px 3px 2px"
};
return (React.createElement("div", { style: { display: "inline-block" } },
React.createElement("div", { style: spanStyle }),
React.createElement("div", { style: spanStyle }),
React.createElement("div", { style: spanStyle })));
};
return Burger;
}(React.Component));
var CollapsedNavBar = /** @class */ (function (_super) {
__extends(CollapsedNavBar, _super);
function CollapsedNavBar(props) {
var _this = _super.call(this, props) || this;
_this.navBarStyle = {
top: 0,
height: (_this.props.height + 1) + "px",
left: 0,
right: 0,
position: "absolute",
background: interfaces_1.dark,
display: "flex",
};
_this.mapItem = function (x, i) { return item_1.mapNavBarItem(true, _this.props.height, _this.handleCollapse, x, i); };
_this.handleExpand = function () {
_this.setState(function (prev) { return ({ expanded: !prev.expanded }); });
};
_this.handleCollapse = function () {
_this.setState({ expanded: false });
};
_this.state = { expanded: false };
return _this;
}
CollapsedNavBar.prototype.render = function () {
return (React.createElement("div", { style: { top: 0, left: 0, right: 0 } },
React.createElement("div", { style: __assign({}, this.navBarStyle, { flexDirection: "column", height: undefined, position: "relative" }) },
React.createElement("div", null,
React.createElement("div", { style: { flex: "0 1 auto" } },
React.createElement("div", null,
React.createElement("div", { style: { display: "flex" } },
React.createElement("div", { style: { flex: "1 0 auto" } }, this.props.header && this.props.header.map(this.mapItem)),
React.createElement("div", { onClick: this.handleExpand, style: { flex: "0 0 auto", display: "flex", justifyContent: "center", flexDirection: "column", background: interfaces_1.light } },
React.createElement(Burger, { dark: true }))))),
React.createElement("div", { style: { flex: "1 0 auto" } }),
React.createElement("div", null)),
this.state.expanded &&
React.createElement("div", null,
this.props.left && this.props.left.map(this.mapItem),
this.props.right && this.props.right.map(this.mapItem)))));
};
return CollapsedNavBar;
}(React.Component));
var NavBarContainer = /** @class */ (function (_super) {
__extends(NavBarContainer, _super);
function NavBarContainer() {
return _super !== null && _super.apply(this, arguments) || this;
}
NavBarContainer.prototype.render = function () {
return (this.props.collapsed ?
React.createElement(CollapsedNavBar, __assign({}, this.props))
: React.createElement(ExtendedNavBar, __assign({}, this.props)));
};
return NavBarContainer;
}(React.Component));
exports.NavBarContainer = NavBarContainer;