@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
452 lines • 19.2 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 __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var typestyle_1 = require("typestyle");
var index_1 = require("../../Inputs/Input/index");
require("./up.png");
var UpMenuBeta = (function (_super) {
__extends(UpMenuBeta, _super);
function UpMenuBeta(p, c) {
var _this = _super.call(this, p, c) || this;
_this.clickCollapse = function () {
_this.setState({ open: !_this.state.open });
};
_this.state = {
open: false,
};
return _this;
}
UpMenuBeta.prototype.render = function () {
var styleContentWrapper = typestyle_1.style({
minHeight: 250
});
var styleContent = typestyle_1.style({
margin: "auto",
});
return React.createElement("div", { className: "" },
React.createElement("div", null,
React.createElement(TopMenu, { username: this.props.username, open: this.state.open, childMenuItems: this.props.topMenuItems, onUpClick: this.props.onUpClick, onHomeClick: this.props.onHomeClick, onReglagesClick: this.props.onReglagesClick, onDeconnexionClick: this.props.onDeconnexionClick }),
React.createElement(LeftMenu, { clickCollapse: this.clickCollapse, open: this.state.open, menuItems: this.props.menuItems, onMenuClick: this.props.onMenuClick }),
React.createElement("div", { className: styleContentWrapper },
React.createElement("section", { className: styleContent }, this.props.children))));
};
return UpMenuBeta;
}(React.Component));
exports.default = UpMenuBeta;
var SubMenu = (function (_super) {
__extends(SubMenu, _super);
function SubMenu(p, c) {
var _this = _super.call(this, p, c) || this;
_this.state = {};
return _this;
}
SubMenu.prototype.render = function () {
var _this = this;
if (this.props.childMenuItems == null || this.props.childMenuItems.length == 0) {
return null;
}
var list = typestyle_1.style({
backgroundColor: "#003845",
listStyle: "none",
$nest: {
'& ul': {
paddingLeft: 40,
},
'& a': {
$nest: {
'&:hover': {},
}
},
}
});
var lis = this.props.childMenuItems
.filter(function (v) {
return v.isVisible !== false;
})
.map(function (v, i) {
var localId = (_this.props.branchId != null ? _this.props.branchId + "-" : "") + i;
return React.createElement(SubItems, { selectedBranchId: _this.props.selectedBranchId, branchId: localId, onBranchClick: _this.props.onBranchClick, key: i, open: _this.props.open, onMenuClick: _this.props.onMenuClick, uri: v.uri, title: v.title, isVisible: v.isVisible, isSelected: v.isSelected, icon: v.icon, childMenuItems: v.childMenuItems });
});
return React.createElement("div", { className: list }, lis);
};
return SubMenu;
}(React.Component));
exports.SubMenu = SubMenu;
var SubItems = (function (_super) {
__extends(SubItems, _super);
function SubItems(p, c) {
var _this = _super.call(this, p, c) || this;
_this.onClick = function (e) {
_this.props.onBranchClick(_this.props.branchId);
_this.setState({ active: !_this.state.active });
e.preventDefault();
e.stopPropagation();
return false;
};
_this.onClickA = function (e) {
_this.props.onBranchClick(_this.props.branchId);
var value = _this.props.onMenuClick(_this.props.uri);
if (value === false) {
e.preventDefault();
}
};
_this.state = { active: false };
return _this;
}
SubItems.prototype.render = function () {
var liElment = typestyle_1.style({
paddingLeft: 20,
position: "relative"
});
var inlie = typestyle_1.style({
display: "inline-block",
$nest: {
"i": {
display: "inline",
position: "absolute",
fontSize: 25,
fontWeight: 900,
cursor: "pointer"
}
}
});
var inliei = typestyle_1.style({
display: "inline",
position: "absolute",
top: 0,
left: 0,
fontSize: 25,
fontWeight: 900,
cursor: "pointer"
});
var liLine = typestyle_1.style({
padding: 5,
color: "#8aa4af",
$nest: (_a = {},
_a["&:hover"] = {
color: "white",
backgroundColor: "#194B57"
},
_a["&:hover > a"] = {
color: "white",
},
_a["&:hover > i"] = {
color: "white",
},
_a["& > a"] = {
color: (this.state.active || this.isMenuSelected) ? "white" : "#8aa4af",
},
_a["& > i"] = {
color: (this.state.active || this.isMenuSelected) ? "white" : "#8aa4af",
},
_a)
});
var hide = this.props.isVisible === false ? " hide" : "";
var active = this.state.active || this.props.isSelected ? "active" : "";
return React.createElement("div", { className: liElment },
React.createElement("div", { className: liLine },
this.anyChild ?
React.createElement("i", { onClick: this.onClick, className: inliei + " " + ((this.state.active || this.isMenuSelected) ? "pe-7s-angle-down" : "pe-7s-angle-right") })
:
null,
React.createElement("a", { className: inlie, onClick: this.onClickA, href: this.props.uri }, this.props.title)),
this.anyChild && (this.state.active || this.isMenuSelected) ? React.createElement(SubMenu, { onBranchClick: this.props.onBranchClick, branchId: this.props.branchId, selectedBranchId: this.props.selectedBranchId, open: this.props.open, onMenuClick: this.props.onMenuClick, childMenuItems: this.props.childMenuItems }) : null);
var _a;
};
Object.defineProperty(SubItems.prototype, "anyChild", {
get: function () {
return this.props.childMenuItems != null && this.props.childMenuItems.length != 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubItems.prototype, "isMenuSelected", {
get: function () {
return this.props.isSelected || this.props.selectedBranchId.substr(0, this.props.branchId.length) === this.props.branchId;
},
enumerable: true,
configurable: true
});
return SubItems;
}(React.Component));
exports.SubItems = SubItems;
var TopMenu = (function (_super) {
__extends(TopMenu, _super);
function TopMenu(p, c) {
var _this = _super.call(this, p, c) || this;
_this.onSearchChange = function (str) {
_this.setState({ strSearch: str });
};
_this.state = {
strSearch: ""
};
return _this;
}
TopMenu.prototype.render = function () {
var topMenuItem = [];
if (this.props.childMenuItems && this.props.childMenuItems.length) {
topMenuItem = this.props.childMenuItems.map(function (v, i) {
return React.createElement(TopMenuItem, { key: i, title: v.title, icon: v.icon, action: v.action });
});
}
var iconBtn = typestyle_1.style({
cursor: "pointer",
padding: "0 10px",
minWidth: 50,
fontSize: 25,
color: "white",
lineHeight: "50px",
$nest: (_a = {},
_a["&:hover"] = {
backgroundColor: "#00AAD4"
},
_a["&:hover > i"] = {
color: "white",
},
_a)
});
var inputDiv = typestyle_1.style({
padding: 5
});
var floatLeft = typestyle_1.style({
float: "left",
$nest: (_b = {},
_b["& > div"] = {
float: "left"
},
_b)
});
var floatRight = typestyle_1.style({
float: "right",
$nest: (_c = {},
_c["& > div"] = {
float: "left"
},
_c)
});
var main = typestyle_1.style({
backgroundColor: "#00BBD3",
display: "block",
zIndex: 1000,
height: 75
});
return React.createElement("div", { className: main },
React.createElement("div", { className: floatLeft },
React.createElement("div", { className: iconBtn, onClick: this.props.onUpClick },
React.createElement("img", { src: "./up.png", alt: "" }),
"ONE HOME"),
React.createElement("div", { className: inputDiv },
React.createElement(index_1.default, { value: this.state.strSearch, onChange: this.onSearchChange, iconName: "search" }))),
React.createElement("div", { className: floatRight },
this.props.username == null ? null :
React.createElement("div", { className: iconBtn },
React.createElement("a", { id: "imageProfil", "data-toggle": "dropdown", "aria-expanded": "true" },
React.createElement("span", null, this.props.username))),
this.props.onReglagesClick == null ? null :
React.createElement("div", { className: iconBtn, onClick: this.props.onReglagesClick },
React.createElement("i", { className: "pe pe-7s-edit" })),
this.props.onDeconnexionClick == null ? null :
React.createElement("div", { className: iconBtn, onClick: this.props.onDeconnexionClick },
React.createElement("i", { className: "pe pe-7s-power" }))));
var _a, _b, _c;
};
return TopMenu;
}(React.Component));
exports.TopMenu = TopMenu;
var TopMenuItem = (function (_super) {
__extends(TopMenuItem, _super);
function TopMenuItem(p, c) {
var _this = _super.call(this, p, c) || this;
_this.state = {};
return _this;
}
TopMenuItem.prototype.render = function () {
if (typeof (this.props.action) === "string") {
return React.createElement("li", { title: this.props.title, "data-toggle": "tooltip", "data-placement": "bottom" },
React.createElement("a", { href: this.props.action },
React.createElement("i", { className: this.props.icon })));
}
else {
return React.createElement("li", { title: this.props.title, "data-toggle": "tooltip", "data-placement": "bottom" },
React.createElement("a", { onClick: this.props.action },
React.createElement("i", { className: this.props.icon })));
}
};
return TopMenuItem;
}(React.Component));
exports.TopMenuItem = TopMenuItem;
var LeftMenu = (function (_super) {
__extends(LeftMenu, _super);
function LeftMenu(p, c) {
var _this = _super.call(this, p, c) || this;
_this.onBranchClick = function (branchId) {
_this.setState({ selectedBranchId: branchId });
};
_this.state = {
selectedBranchId: ""
};
return _this;
}
LeftMenu.prototype.render = function () {
var _this = this;
var mainSideBar = typestyle_1.style({
backgroundColor: "#FAFAFA",
width: "15%",
height: "10%",
$nest: {
'& a': {
color: "black",
textDecoration: "none",
$nest: {
'&:hover': {
color: "white",
textDecoration: "none",
},
}
},
'& i': {
color: "black",
cursor: "pointer",
$nest: {
'&:hover': {
color: "white",
}
}
}
}
});
var expandIcon = typestyle_1.style({
fontSize: 25,
padding: 10
});
var menu = this.props.menuItems
.filter(function (v) {
return v.isVisible !== false;
})
.map(function (v, i) {
return React.createElement(MenuItem, { onBranchClick: _this.onBranchClick, branchId: i.toString(), selectedBranchId: _this.state.selectedBranchId, open: _this.props.open, key: i, onMenuClick: _this.props.onMenuClick, title: v.title, icon: v.icon, uri: v.uri, isSelected: v.isSelected, isVisible: v.isVisible, childMenuItems: v.childMenuItems });
});
return React.createElement("aside", { className: mainSideBar },
React.createElement("section", { className: "" },
React.createElement("div", { className: "" },
React.createElement("div", { className: expandIcon, onClick: this.props.clickCollapse },
React.createElement("i", { className: "pe p7 pe-7s-menu" })),
React.createElement("div", { className: "" }, menu))));
};
return LeftMenu;
}(React.Component));
exports.LeftMenu = LeftMenu;
var MenuItem = (function (_super) {
__extends(MenuItem, _super);
function MenuItem(p, c) {
var _this = _super.call(this, p, c) || this;
_this.iconClick = function (e) {
_this.props.onBranchClick(_this.props.branchId);
_this.setState({ active: !_this.state.active });
e.stopPropagation();
};
_this.onClickA = function (e) {
var value = _this.props.onMenuClick(_this.props.uri);
e.preventDefault();
if (value === false) {
}
};
_this.state = { active: false };
return _this;
}
MenuItem.prototype.render = function () {
var subMenu = typestyle_1.style({});
var menuItem = typestyle_1.style({
borderTopRightRadius: 5,
position: "relative",
display: "list-item",
overflow: "hidden",
minHeight: 37,
$nest: (_a = {},
_a["." + subMenu] = {
display: this.props.open === true && this.state.active === true ? "block" : "none",
},
_a['&:hover'] = this.props.open === false ?
{
backgroundColor: "rgb(0, 74, 92)",
minWidth: 250,
overflow: "visible",
}
: null,
_a['&:hover > .' + subMenu] = this.props.open === false ?
{
display: "block",
paddingLeft: 50,
position: "absolute",
minWidth: 250
}
: null,
_a['&:hover > .' + subMenu + " > div"] = this.props.open === false ?
{
paddingTop: 0,
paddingBottom: 10
}
: null,
_a),
});
var meunuIcon = typestyle_1.style({
fontSize: 25,
paddingBottom: 5,
paddingRight: 10,
});
var slectedMenu = {
background: "rgba(0, 74, 92, 1) none repeat scroll 0 0",
borderLeft: "3px solid #F39C12"
};
var menuItemHover = typestyle_1.style({
borderLeft: this.isMenuSelected ? "3px solid #F39C12" : "",
paddingLeft: 10,
borderTopRightRadius: 5,
$nest: (_b = {},
_b["&:hover"] = slectedMenu,
_b['&:hover > .' + meunuIcon + " > i"] = {
color: "white"
},
_b["&:hover > a"] = {
color: "white"
},
_b)
});
var menuLink = typestyle_1.style({
minWidth: 200,
position: "absolute",
padding: 10,
left: 45,
});
var hide = this.props.isVisible === false ? "hide " : "";
var active = this.state.active || this.props.isSelected ? " active" : "";
return React.createElement("div", { className: menuItem },
React.createElement("div", { className: menuItemHover },
React.createElement("span", { className: meunuIcon },
React.createElement("i", { className: this.props.icon, onClick: this.iconClick })),
React.createElement("a", { className: menuLink, onClick: this.onClickA, href: this.props.uri }, this.props.title)),
React.createElement("div", { className: subMenu },
React.createElement(SubMenu, { selectedBranchId: this.props.selectedBranchId, onBranchClick: this.props.onBranchClick, branchId: this.props.branchId, open: this.props.open, onMenuClick: this.props.onMenuClick, childMenuItems: this.props.childMenuItems })));
var _a, _b;
};
Object.defineProperty(MenuItem.prototype, "isMenuSelected", {
get: function () {
return this.props.isSelected || this.props.selectedBranchId.substr(0, this.props.branchId.length) === this.props.branchId;
},
enumerable: true,
configurable: true
});
return MenuItem;
}(React.Component));
exports.MenuItem = MenuItem;
//# sourceMappingURL=UpMenuBeta.js.map