@arche-mc2/arche-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
461 lines • 19.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var typestyle_1 = require("typestyle");
require("./sources/up.png");
var utils_1 = require("../../../Common/theming/utils");
;
;
var UpMenuBeta = (function (_super) {
tslib_1.__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) {
tslib_1.__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: utils_1.toRem(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) {
tslib_1.__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;
}
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
});
SubItems.prototype.render = function () {
var _a;
var liElment = typestyle_1.style({
paddingLeft: utils_1.toRem(20),
position: "relative"
});
var inlie = typestyle_1.style({
display: "inline-block",
$nest: {
"i": {
display: "inline",
position: "absolute",
fontSize: utils_1.toRem(25),
fontWeight: 900,
cursor: "pointer"
}
}
});
var inliei = typestyle_1.style({
display: "inline",
position: "absolute",
top: 0,
left: 0,
fontSize: utils_1.toRem(25),
fontWeight: 900,
cursor: "pointer"
});
var liLine = typestyle_1.style({
padding: utils_1.toRem(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));
};
return SubItems;
}(React.Component));
exports.SubItems = SubItems;
;
;
var TopMenu = (function (_super) {
tslib_1.__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 _a, _b, _c;
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: utils_1.toRem(0) + " " + utils_1.toRem(10),
minWidth: utils_1.toRem(50),
fontSize: utils_1.toRem(25),
color: "white",
lineHeight: 2,
$nest: (_a = {},
_a["&:hover"] = {
backgroundColor: "#00AAD4"
},
_a["&:hover > i"] = {
color: "white",
},
_a)
});
var inputDiv = typestyle_1.style({
padding: utils_1.toRem(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: utils_1.toRem(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("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" })))));
};
return TopMenu;
}(React.Component));
exports.TopMenu = TopMenu;
;
;
;
var TopMenuItem = (function (_super) {
tslib_1.__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) {
tslib_1.__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: utils_1.toRem(25),
padding: utils_1.toRem(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) {
tslib_1.__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;
}
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
});
MenuItem.prototype.render = function () {
var _a, _b;
var subMenu = typestyle_1.style({});
var menuItem = typestyle_1.style({
borderTopRightRadius: utils_1.toRem(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: utils_1.toRem(10)
}
: null,
_a),
});
var meunuIcon = typestyle_1.style({
fontSize: utils_1.toRem(25),
paddingBottom: utils_1.toRem(5),
paddingRight: utils_1.toRem(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: utils_1.toRem(10),
borderTopRightRadius: utils_1.toRem(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: utils_1.toRem(10),
left: utils_1.toRem(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 }))));
};
return MenuItem;
}(React.Component));
exports.MenuItem = MenuItem;
;
//# sourceMappingURL=UpMenuBeta.js.map