@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
586 lines • 24.3 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 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 UP = require("./up.png");
var heightTopBar = 60;
var widthLeftMenuStandard = 300;
var widthLeftMenuCollapse = 64;
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 styleMenuOh = typestyle_1.style({
backgroundColor: "#f5f5f5",
overflow: "hidden",
height: "100%",
width: "100%",
});
var styleLeftMenu = typestyle_1.style({
zIndex: 1,
position: "absolute",
left: 0,
top: 0,
height: "100%",
width: widthLeftMenuStandard,
backgroundColor: "#4e5b59",
alignItems: "center",
transition: "width 0.5s",
overflow: "hidden",
$nest: {
'& i': {
cursor: "pointer",
},
'& a': {
textDecoration: "none",
},
},
});
var imgHomelink = typestyle_1.style({ display: "inline" });
var styleLeftMenuCollapse = typestyle_1.style({
width: widthLeftMenuCollapse,
$nest: (_a = {
'& a': {
display: "none",
}
},
_a['& .' + imgHomelink] = {
display: "inline"
},
_a),
});
var rightSpace = typestyle_1.style({
position: "absolute",
top: 0,
right: 0,
left: widthLeftMenuStandard,
height: "100%",
transition: "left 0.5s",
overflow: "hidden",
});
var rightSpaceCollapse = typestyle_1.style({
left: widthLeftMenuCollapse,
});
var styleTopbar = typestyle_1.style({
width: "100%",
left: 0,
top: 0,
position: "absolute",
height: heightTopBar,
backgroundColor: "#ffffff",
textAlign: "right",
});
var styleContenu = typestyle_1.style({
position: "absolute",
left: 0,
top: heightTopBar,
bottom: 0,
right: 0,
overflow: "hidden",
});
var styleUserExpand = typestyle_1.style({
position: "absolute",
top: heightTopBar,
right: "128px",
overflow: "visible",
});
var UpMenuOH = (function (_super) {
__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.render = function () {
var right = rightSpace + (this.state.collapseActive ? " " + rightSpaceCollapse : "");
return React.createElement("div", { className: 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: styleContenu }, this.props.children)));
};
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;
};
return UpMenuOH;
}(React.Component));
exports.default = UpMenuOH;
var LeftMenu = (function (_super) {
__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: 60,
margin: 24,
});
var img_style = typestyle_1.style({
maxHeight: "100%",
maxWidth: "100%"
});
var div_style = typestyle_1.style({
height: 45,
paddingLeft: 25,
color: "#FFF",
fontSize: 25,
});
var firstSub = typestyle_1.style({
paddingLeft: "24px",
position: "absolute",
top: "153px",
bottom: "0",
left: "0",
right: "0",
$nest: {
"& > *": {
height: "100%",
width: "100%",
},
},
});
var left = styleLeftMenu + (this.props.collapse ? " " + styleLeftMenuCollapse : "");
return React.createElement("aside", { className: left },
React.createElement("div", { className: img_space },
React.createElement("a", { className: 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) {
__extends(TopMenu, _super);
function TopMenu(p, c) {
var _this = _super.call(this, p, c) || this;
_this.state = {};
return _this;
}
TopMenu.prototype.render = function () {
var styleGauche = typestyle_1.style({
width: "20%",
minWidth: "250px",
float: "left",
marginLeft: "60px",
marginTop: "16px",
});
var styleDroite = helpers_1.getFontClassName({ fontSize: "14px", color: "#4a4a4a", }) + " " + typestyle_1.style({
marginTop: "16px",
height: "100%",
marginRight: "60px",
display: "inline-block",
});
return React.createElement("div", { className: 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(UserExpand, { Utilisateur: this.props.Utilisateur }),
React.createElement(Icons_1.IconDeconnexion, { onClick: this.props.onDeconnexionClick })));
};
return TopMenu;
}(React.Component));
exports.TopMenu = TopMenu;
var UserExpand = (function (_super) {
__extends(UserExpand, _super);
function UserExpand(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;
}
UserExpand.prototype.render = function () {
var styleInfosTexte = typestyle_1.style({
marginRight: "48px",
$nest: {
"& > i": {
fontStyle: "normal",
margin: "0 8px",
},
"& *:focus": {
outline: "none",
},
},
});
var styleComboUser = typestyle_1.style({
padding: "16px 16px 6px",
zIndex: 9998,
backgroundColor: "#ffffff",
borderRadius: "4px",
boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2)",
border: "1px solid #eaeae9",
textAlign: "left",
});
return 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),
helpers_1.arrayIsNullOrEmpty(this.props.Utilisateur.Links) ? null :
React.createElement("span", null,
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 ? null :
React.createElement("div", { className: styleUserExpand + " " + styleComboUser }, this.props.Utilisateur.Links.map(function (link, idx) {
return React.createElement("p", { key: idx }, link);
})))));
};
return UserExpand;
}(React.Component));
exports.UserExpand = UserExpand;
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.startsWith = function (str, search) {
return str.substr(0, search.length) === search;
};
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: "" + v.title + v.uri + 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);
}
};
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
});
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.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 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: 14,
fontWeight: 500,
fontStyle: "normal",
fontStretch: "normal",
minHeight: this.hasIcon || this.props.styleType === "button" ? 42 : 32,
wordBreak: "break-all",
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: 3,
position: "relative",
fontSize: 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);
var _a, _b, _c;
};
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;
var _a;
//# sourceMappingURL=UpMenuOH.js.map