@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
553 lines • 24.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var typestyle_1 = require("typestyle");
var react_custom_scrollbars_1 = require("react-custom-scrollbars");
var helpers_1 = require("../../../Common/utils/helpers");
var UpHover_1 = require("../../Containers/Hover/UpHover");
var Icons_1 = require("../Icons/Icons");
var styles_1 = require("./styles");
var utils_1 = require("../../../Common/theming/utils");
var UP = require("./sources/up.png");
var branchIdHelper = (function () {
function branchIdHelper() {
}
branchIdHelper.toArray = function (id) {
return id.split(/(\d{1,})/).filter(function (x) { return x !== ""; });
};
branchIdHelper.getLevel = function (id) {
return this.toArray(id).length / 2;
};
branchIdHelper.hasChild = function (id) {
return id.substr(id.length - 1, 1) === "*";
};
return branchIdHelper;
}());
;
;
;
;
;
var UpMenuOH = (function (_super) {
tslib_1.__extends(UpMenuOH, _super);
function UpMenuOH(p, c) {
var _this = _super.call(this, p, c) || this;
_this.onCollapseChange = function () {
if (_this.state.collapseActive) {
_this.setState({ collapseActive: false, collapse: false });
}
else {
_this.setState({ collapseActive: true, collapse: true });
}
};
_this.onHover = function (hover) {
if (_this.state.collapseActive) {
_this.setState({ collapse: !hover });
}
};
_this.onBranchClick = function (branchId) {
_this.setState({ selectedBranchId: branchId, });
};
_this.state = {
selectedBranchId: "",
collapse: false,
hoverMenu: false,
collapseActive: false,
};
return _this;
}
UpMenuOH.prototype.componentDidUpdate = function () {
if (this.props.selectMenu != null) {
var idSelected = this.findSelected(this.props.menuItems);
if (this.state.selectedBranchId !== idSelected && idSelected != null) {
this.setState({ selectedBranchId: idSelected });
}
}
};
UpMenuOH.prototype.findSelected = function (MenuItemData) {
for (var i = 0; i < MenuItemData.length; i++) {
var localId = i + (MenuItemData[i].childMenuItems != null && MenuItemData[i].childMenuItems.length != 0 ? "*" : "-");
if (this.props.selectMenu(MenuItemData[i]) == true) {
return localId;
}
else {
if (MenuItemData[i].childMenuItems != null && MenuItemData[i].childMenuItems.length != 0) {
var child = this.findSelected(MenuItemData[i].childMenuItems);
if (child != null) {
return localId + child.toString();
}
}
}
}
return null;
};
UpMenuOH.prototype.render = function () {
var right = styles_1.rightSpace + (this.state.collapseActive ? " " + styles_1.rightSpaceCollapse : "");
return (React.createElement("div", { className: styles_1.styleMenuOh },
React.createElement(LeftMenu, { onHover: this.onHover, onCollapseChange: this.onCollapseChange, collapse: this.state.collapse, selectedBranchId: this.state.selectedBranchId, onBranchClick: this.onBranchClick, onHomeClick: this.props.onHomeClick, menuItems: this.props.menuItems, onMenuClick: this.props.onMenuClick }),
React.createElement("div", { className: right },
React.createElement(TopMenu, { Recherche: this.props.Recherche, Antennes: this.props.Antennes, Utilisateur: this.props.Utilisateur, onDeconnexionClick: this.props.onDeconnexionClick }),
React.createElement("div", { className: styles_1.styleContenu }, this.props.children))));
};
return UpMenuOH;
}(React.Component));
exports.default = UpMenuOH;
;
;
;
var LeftMenu = (function (_super) {
tslib_1.__extends(LeftMenu, _super);
function LeftMenu(p, c) {
var _this = _super.call(this, p, c) || this;
_this.state = {
selectedBranchId: "",
};
return _this;
}
LeftMenu.prototype.render = function () {
var img_space = typestyle_1.style({
height: utils_1.toRem(60),
margin: utils_1.toRem(24),
});
var img_style = typestyle_1.style({
maxHeight: "100%",
maxWidth: "100%"
});
var div_style = typestyle_1.style({
height: utils_1.toRem(45),
paddingLeft: utils_1.toRem(25),
color: "#FFF",
fontSize: utils_1.toRem(25),
});
var firstSub = typestyle_1.style({
paddingLeft: utils_1.toRem(24),
position: "absolute",
top: utils_1.toRem(153),
bottom: 0,
left: 0,
right: 0,
$nest: {
"& > *": {
height: "100%",
width: "100%",
},
},
});
var left = styles_1.styleLeftMenu + (this.props.collapse ? " " + styles_1.styleLeftMenuCollapse : "");
return (React.createElement("aside", { className: left },
React.createElement("div", { className: img_space },
React.createElement("a", { className: styles_1.imgHomelink, onClick: this.props.onHomeClick },
React.createElement("img", { className: img_style, src: UP }))),
React.createElement("div", { className: div_style },
React.createElement("span", { className: "icon-Lmenu", onClick: this.props.onCollapseChange })),
React.createElement("div", { className: firstSub },
React.createElement(UpHover_1.default, { onHoverChange: this.props.onHover },
React.createElement(SubMenu, { open: false, onBranchClick: this.props.onBranchClick, branchId: "", selectedBranchId: this.props.selectedBranchId, onMenuClick: this.props.onMenuClick, childMenuItems: this.props.menuItems, top: false, collapse: this.props.collapse })))));
};
return LeftMenu;
}(React.Component));
exports.LeftMenu = LeftMenu;
;
;
;
var TopMenu = (function (_super) {
tslib_1.__extends(TopMenu, _super);
function TopMenu(p, c) {
var _this = _super.call(this, p, c) || this;
_this.onUserClick = function () {
_this.setState({ UserExpand: true, });
};
_this.onUserBlur = function () {
_this.setState({ UserExpand: false, });
};
_this.state = {
UserExpand: false,
};
return _this;
}
TopMenu.prototype.render = function () {
var styleGauche = typestyle_1.style({
width: "20%",
minWidth: utils_1.toRem(250),
float: "left",
marginLeft: utils_1.toRem(60),
marginTop: utils_1.toRem(16),
});
var styleDroite = helpers_1.getFontClassName({ fontSize: "" + utils_1.toRem(14), color: "#4a4a4a", }) + " " + typestyle_1.style({
marginTop: utils_1.toRem(16),
height: "100%",
marginRight: utils_1.toRem(60),
display: "inline-block",
});
var styleInfosTexte = typestyle_1.style({
marginRight: utils_1.toRem(48),
$nest: {
"& > i": {
fontStyle: "normal",
margin: "0 " + utils_1.toRem(14),
},
"& *:focus": {
outline: "none",
},
},
});
return (React.createElement("div", { className: styles_1.styleTopbar },
helpers_1.isNullOrUndef(this.props.Recherche) ? null :
React.createElement("div", { className: styleGauche }, this.props.Recherche),
React.createElement("span", { className: styleDroite },
helpers_1.isNullOrUndef(this.props.Antennes) ? null : this.props.Antennes,
helpers_1.isNullOrUndef(this.props.Utilisateur) ? null :
React.createElement(Icons_1.IconUtilisateur, { IconSize: "14px", lineHeight: 1.14, AvecCercle: false, Color: "#4a4a4a", BackgroundColor: "#ffffff" },
React.createElement("span", { className: styleInfosTexte },
React.createElement("i", null, this.props.Utilisateur.Nom),
React.createElement(Icons_1.IconChevron, { Direction: Icons_1.DirectionEnum.Bas, Color: "#4a4a4a", BackgroundColor: "#ffffff", IconSize: "14px", onClick: this.onUserClick, tabIndex: -1, onBlur: this.onUserBlur }),
this.state.UserExpand ? React.createElement(UserExpand, { Utilisateur: this.props.Utilisateur }) : null)),
React.createElement(Icons_1.IconDeconnexion, { onClick: this.props.onDeconnexionClick }))));
};
return TopMenu;
}(React.Component));
exports.TopMenu = TopMenu;
;
;
;
var UserExpand = (function (_super) {
tslib_1.__extends(UserExpand, _super);
function UserExpand(p, c) {
var _this = _super.call(this, p, c) || this;
_this.writeDateTime = function (dateTime) {
if (helpers_1.isNullOrUndef(dateTime)) {
return null;
}
return helpers_1.addZeroBeforeNumber(dateTime.getDate(), 2) + "/"
+ helpers_1.addZeroBeforeNumber(dateTime.getMonth(), 2) + "/"
+ helpers_1.addZeroBeforeNumber(dateTime.getFullYear(), 4) + " "
+ helpers_1.addZeroBeforeNumber(dateTime.getHours(), 2) + ":"
+ helpers_1.addZeroBeforeNumber(dateTime.getMinutes(), 2) + ":"
+ helpers_1.addZeroBeforeNumber(dateTime.getSeconds(), 2);
};
return _this;
}
UserExpand.prototype.render = function () {
var styleG = typestyle_1.style({
padding: utils_1.toRem(16) + " " + utils_1.toRem(16) + " " + utils_1.toRem(6),
zIndex: 9998,
backgroundColor: "#ffffff",
borderRadius: utils_1.toRem(4),
boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2)",
border: "1px solid #eaeae9",
textAlign: "left",
});
var styleChangeMdp = typestyle_1.style({
cursor: "pointer",
marginLeft: utils_1.toRem(8),
});
var styleAlertes = typestyle_1.style({
cursor: helpers_1.isNullOrUndef(this.props.Utilisateur.Alertes) || helpers_1.isNullOrUndef(this.props.Utilisateur.Alertes.onClick) ? "auto" : "pointer",
marginLeft: utils_1.toRem(8),
});
var derniereCo = this.writeDateTime(this.props.Utilisateur.DerniereConnexion);
var nbAlerte = helpers_1.isNullOrUndef(this.props.Utilisateur.Alertes.NonLues) ? null :
isNaN(this.props.Utilisateur.Alertes.NonLues) ? null :
this.props.Utilisateur.Alertes.NonLues <= 0 ? null :
this.props.Utilisateur.Alertes.NonLues > 99 ? "99+" :
this.props.Utilisateur.Alertes.NonLues.toString();
return (React.createElement("div", { className: styles_1.styleUserExpand + " " + styleG },
derniereCo === null ? null : React.createElement("p", null,
"Derni\u00E8re connexion : ",
derniereCo),
helpers_1.stringIsNullOrEmpty(this.props.Utilisateur.NomBinome) ? null : React.createElement("p", null,
"Votre bin\u00F4me : ",
this.props.Utilisateur.NomBinome),
helpers_1.isNullOrUndef(this.props.Utilisateur.onChangeMdpClick) ? null :
React.createElement("p", null,
React.createElement(Icons_1.IconVerrou, { onMouseDown: this.props.Utilisateur.onChangeMdpClick },
React.createElement("span", { className: styleChangeMdp }, " Changer votre mot de passe"))),
helpers_1.isNullOrUndef(this.props.Utilisateur.Alertes) ? null :
React.createElement("p", null,
React.createElement(Icons_1.IconAlertes, { AlertNumber: nbAlerte, AlertCircle: { Active: true, Color: "#f44336" }, AlertFont: { fontSize: "8px", color: "#ffffff" }, onMouseDown: this.props.Utilisateur.Alertes.onClick },
React.createElement("span", { className: styleAlertes }, " Alertes utilisateur")))));
};
return UserExpand;
}(React.Component));
exports.UserExpand = UserExpand;
;
;
;
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.startsWith = function (str, search) {
return str.substr(0, search.length) === search;
};
SubMenu.prototype.getMenuItemfromId = function (branchid, menu) {
var first = branchid.substr(0, 2);
var rest = branchid.substr(2, branchid.length);
var find = menu.filter(function (x) { return x.isVisible === true; })[first.substr(0, 1)].childMenuItems;
if (find.length == 0) {
return menu;
}
if (rest == "") {
return find;
}
return this.getMenuItemfromId(rest, find);
};
Object.defineProperty(SubMenu.prototype, "levelselectedBranchId", {
get: function () {
return branchIdHelper.getLevel(this.props.selectedBranchId);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubMenu.prototype, "selectedBranchIdHasChild", {
get: function () {
return branchIdHelper.hasChild(this.props.selectedBranchId);
},
enumerable: true,
configurable: true
});
SubMenu.prototype.render = function () {
var _this = this;
if (this.props.childMenuItems == null || this.props.childMenuItems.length == 0) {
return null;
}
var lis = this.props.childMenuItems.map(function (v, i, arr) {
var localId = _this.props.branchId + i + (v.childMenuItems != null && v.childMenuItems.length != 0 ? "*" : "-");
return (React.createElement(SubItems, { forceOpen: v.forceOpen, sibling: arr, top: _this.props.top, icon: v.icon, 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, childMenuItems: v.childMenuItems, collapse: _this.props.collapse, styleType: v.styleType }));
});
if (this.props.branchId === "") {
return (React.createElement(react_custom_scrollbars_1.Scrollbars, { style: {
height: "100%",
} }, lis));
}
else {
return (React.createElement("div", null, 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.LightenDarkenColor = function (col, amt) {
var usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col, 16);
var r = (num >> 16) + amt;
if (r > 255)
r = 255;
else if (r < 0)
r = 0;
var b = ((num >> 8) & 0x00FF) + amt;
if (b > 255)
b = 255;
else if (b < 0)
b = 0;
var g = (num & 0x0000FF) + amt;
if (g > 255)
g = 255;
else if (g < 0)
g = 0;
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
};
_this.onClick = function (e) {
if (_this.props.selectedBranchId.substr(0, _this.props.branchId.length) === _this.props.branchId) {
_this.SendBranchClick();
}
else {
_this.SendBranchClick();
}
e.preventDefault();
e.stopPropagation();
return false;
};
_this.onClickA = function (e) {
_this.SendBranchClick();
var value = _this.props.onMenuClick(_this.props.uri);
e.preventDefault();
};
_this.SendBranchClick = function () {
_this.props.onBranchClick(_this.props.branchId);
};
_this.SendBranchParentClick = function () {
var idParent = _this.props.branchId.substr(0, _this.props.branchId.length - 2);
_this.props.onBranchClick(idParent);
};
return _this;
}
SubItems.prototype.startsWith = function (str, search) {
return str.substr(0, search.length) === search;
};
SubItems.prototype.shouldComponentUpdate = function (nextProps, nextState) {
if (this.props.selectedBranchId.substr(0, this.props.branchId.length) === this.props.branchId) {
return true;
}
if (nextProps.selectedBranchId.substr(0, nextProps.branchId.length) === nextProps.branchId) {
return true;
}
return false;
};
SubItems.prototype.render = function () {
var _a, _b, _c;
var branch = typestyle_1.style({
paddingLeft: this.level == 1 ? 0 : this.level == 2 ? 60 : 20,
display: this.props.isVisible === false ? "none" : "inherit",
position: "relative",
});
var link = typestyle_1.style({
color: this.isThisMenuSelected ? "#f39100" : this.props.top ? "#FFF" : "#FFF",
display: this.props.collapse ? "none" : "initial",
paddingLeft: this.level == 1 ? 15 : 0,
});
var branchItem = typestyle_1.style({
marginTop: this.props.styleType === "button" ? 15 : 0,
fontSize: utils_1.toRem(14),
fontWeight: 500,
fontStyle: "normal",
fontStretch: "normal",
height: this.hasIcon || this.props.styleType === "button" ? 42 : 32,
letterSpacing: "normal",
color: this.isThisMenuSelected ? "#f39100" : this.props.top ? "#FFF" : "#FFF",
$nest: (_a = {},
_a["& a"] = {
color: this.isThisMenuSelected ? "#f39100" : this.props.top ? "#FFF" : "#FFF",
},
_a)
});
var meunuIcon = typestyle_1.style({
color: "#FFF",
marginTop: utils_1.toRem(3),
position: "relative",
fontSize: utils_1.toRem(25),
display: this.hasIcon ? "initial" : "none",
});
var innnerSubmenu = typestyle_1.style({
display: this.props.collapse ? "none" : "initial",
$nest: (_b = {},
_b["& > div"] = {
height: "100%",
overflow: "hidden",
maxHeight: 0,
transition: "max-height 1s",
},
_b)
});
var innnerSubmenuOpen = typestyle_1.style({
$nest: (_c = {},
_c["& > div"] = {
maxHeight: 1000,
transition: "max-height 2.5s",
},
_c)
});
if (this.props.collapse) {
return React.createElement("div", { className: branch, "data-branch": this.props.branchId },
React.createElement("div", { className: branchItem, onClick: this.onClick },
React.createElement("span", { className: meunuIcon },
React.createElement("i", { className: this.props.icon, onClick: this.onClick })),
this.textContentColapse));
}
var content = this.props.title;
if (this.props.styleType === "button") {
content = React.createElement("span", { style: {
paddingRight: 53,
paddingBottom: 12,
paddingLeft: 53,
paddingTop: 12,
borderRadius: 30,
borderColor: this.isThisMenuSelected ? "#f39100" : this.props.top ? "#FFF" : "#FFF",
borderWidth: 1,
borderStyle: "solid"
} }, this.props.title);
}
return (React.createElement("div", { className: branch, "data-branch": this.props.branchId },
React.createElement("div", { className: branchItem, onClick: this.onClick },
React.createElement("span", { className: meunuIcon },
React.createElement("i", { className: this.props.icon, onClick: this.onClick })),
React.createElement("a", { className: link, onClick: this.onClickA, href: this.props.uri }, content)),
this.anyChild ?
React.createElement("div", { className: innnerSubmenu + ((this.isMenuSelected === true || this.props.forceOpen === true) ? " " + innnerSubmenuOpen : "") },
React.createElement(SubMenu, { top: this.props.top, onBranchClick: this.props.onBranchClick, branchId: this.props.branchId, selectedBranchId: this.props.selectedBranchId, open: this.props.open, onMenuClick: this.props.onMenuClick, childMenuItems: this.props.childMenuItems, collapse: this.props.collapse }))
: null));
};
Object.defineProperty(SubItems.prototype, "textContentColapse", {
get: function () {
if (this.props.icon != null && this.props.icon != "") {
return null;
}
if (this.props.title != null && typeof (this.props.title) === "string") {
return React.createElement("span", { style: {
paddingRight: 10,
paddingBottom: 5,
paddingLeft: 10,
paddingTop: 5,
borderRadius: 30,
borderColor: this.isThisMenuSelected ? "#f39100" : this.props.top ? "#FFF" : "#FFF",
borderWidth: 1,
borderStyle: "solid"
} }, this.props.title.substr(0, 2));
}
return null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubItems.prototype, "hasIcon", {
get: function () {
return this.props.icon != null && this.props.icon != "";
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubItems.prototype, "level", {
get: function () {
return branchIdHelper.getLevel(this.props.branchId);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubItems.prototype, "anyChild", {
get: function () {
var child = this.props.childMenuItems == null ? [] : this.props.childMenuItems.filter(function (x) { return x.isVisible == true && x.title != null; });
return child.length != 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubItems.prototype, "isMenuSelected", {
get: function () {
if (this.props.top === false) {
return this.props.selectedBranchId.substr(0, this.props.branchId.length) === this.props.branchId;
}
return this.isThisMenuSelected;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubItems.prototype, "isThisMenuSelected", {
get: function () {
if (this.startsWith(this.props.selectedBranchId, this.props.branchId) && this.anyChild === false) {
return true;
}
return this.props.selectedBranchId === this.props.branchId;
},
enumerable: true,
configurable: true
});
return SubItems;
}(React.Component));
exports.SubItems = SubItems;
;
//# sourceMappingURL=UpMenuOH.js.map