UNPKG

@up-group-ui/react-controls

Version:
514 lines 26.3 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.SubItems = exports.SubMenu = exports.UserExpand = exports.TopMenu = exports.LeftMenu = void 0; var tslib_1 = require("tslib"); var jsx_runtime_1 = require("react/jsx-runtime"); var React = (0, tslib_1.__importStar)(require("react")); var typestyle_1 = require("typestyle"); var react_custom_scrollbars_2_1 = require("react-custom-scrollbars-2"); var helpers_1 = require("../../../Common/utils/helpers"); var UpHover_1 = (0, tslib_1.__importDefault)(require("../../Containers/Hover/UpHover")); var Icons_1 = require("../Icons/Icons"); var styles_1 = require("./styles"); var utils_1 = require("../../../Common/theming/utils"); var up_png_1 = (0, tslib_1.__importDefault)(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) { (0, 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 ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: styles_1.styleMenuOh }, { children: [(0, jsx_runtime_1.jsx)(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 }, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: right }, { children: [(0, jsx_runtime_1.jsx)(TopMenu, { Recherche: this.props.Recherche, Antennes: this.props.Antennes, Utilisateur: this.props.Utilisateur, onDeconnexionClick: this.props.onDeconnexionClick }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: styles_1.styleContenu }, { children: this.props.children }), void 0)] }), void 0)] }), void 0)); }; return UpMenuOH; }(React.Component)); exports.default = UpMenuOH; var LeftMenu = (function (_super) { (0, 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 = (0, typestyle_1.style)({ height: (0, utils_1.toRem)(60), margin: (0, utils_1.toRem)(24), }); var img_style = (0, typestyle_1.style)({ maxHeight: '100%', maxWidth: '100%', }); var div_style = (0, typestyle_1.style)({ height: (0, utils_1.toRem)(45), paddingLeft: (0, utils_1.toRem)(25), color: '#FFF', fontSize: (0, utils_1.toRem)(25), }); var firstSub = (0, typestyle_1.style)({ paddingLeft: (0, utils_1.toRem)(24), position: 'absolute', top: (0, 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 ((0, jsx_runtime_1.jsxs)("aside", (0, tslib_1.__assign)({ className: left }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: img_space }, { children: (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ className: styles_1.imgHomelink, onClick: this.props.onHomeClick }, { children: (0, jsx_runtime_1.jsx)("img", { className: img_style, src: up_png_1.default }, void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: div_style }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'icon-Lmenu', onClick: this.props.onCollapseChange }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: firstSub }, { children: (0, jsx_runtime_1.jsx)(UpHover_1.default, (0, tslib_1.__assign)({ onHoverChange: this.props.onHover }, { children: (0, jsx_runtime_1.jsx)(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 }, void 0) }), void 0) }), void 0)] }), void 0)); }; return LeftMenu; }(React.Component)); exports.LeftMenu = LeftMenu; var TopMenu = (function (_super) { (0, 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 = (0, typestyle_1.style)({ width: '20%', minWidth: (0, utils_1.toRem)(250), float: 'left', marginLeft: (0, utils_1.toRem)(60), marginTop: (0, utils_1.toRem)(16), }); var styleDroite = (0, helpers_1.getFontClassName)({ fontSize: "" + (0, utils_1.toRem)(14), color: '#4a4a4a', }) + ' ' + (0, typestyle_1.style)({ marginTop: (0, utils_1.toRem)(16), height: '100%', marginRight: (0, utils_1.toRem)(60), display: 'inline-block', }); var styleInfosTexte = (0, typestyle_1.style)({ marginRight: (0, utils_1.toRem)(48), $nest: { '& > i': { fontStyle: 'normal', margin: "0 " + (0, utils_1.toRem)(14), }, '& *:focus': { outline: 'none', }, }, }); return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: styles_1.styleTopbar }, { children: [(0, helpers_1.isNullOrUndef)(this.props.Recherche) ? null : (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: styleGauche }, { children: this.props.Recherche }), void 0), (0, jsx_runtime_1.jsxs)("span", (0, tslib_1.__assign)({ className: styleDroite }, { children: [(0, helpers_1.isNullOrUndef)(this.props.Antennes) ? null : this.props.Antennes, (0, helpers_1.isNullOrUndef)(this.props.Utilisateur) ? null : ((0, jsx_runtime_1.jsx)(Icons_1.IconUtilisateur, (0, tslib_1.__assign)({ IconSize: "14px", lineHeight: 1.14, AvecCercle: false, Color: "#4a4a4a", BackgroundColor: "#ffffff" }, { children: (0, jsx_runtime_1.jsxs)("span", (0, tslib_1.__assign)({ className: styleInfosTexte }, { children: [(0, jsx_runtime_1.jsx)("i", { children: this.props.Utilisateur.Nom }, void 0), (0, jsx_runtime_1.jsx)(Icons_1.IconChevron, { Direction: Icons_1.DirectionEnum.Bas, Color: "#4a4a4a", BackgroundColor: "#ffffff", IconSize: "14px", onClick: this.onUserClick, tabIndex: -1, onBlur: this.onUserBlur }, void 0), this.state.UserExpand ? (0, jsx_runtime_1.jsx)(UserExpand, { Utilisateur: this.props.Utilisateur }, void 0) : null] }), void 0) }), void 0)), (0, jsx_runtime_1.jsx)(Icons_1.IconDeconnexion, { onClick: this.props.onDeconnexionClick }, void 0)] }), void 0)] }), void 0)); }; return TopMenu; }(React.Component)); exports.TopMenu = TopMenu; var UserExpand = (function (_super) { (0, tslib_1.__extends)(UserExpand, _super); function UserExpand(p, c) { var _this = _super.call(this, p, c) || this; _this.writeDateTime = function (dateTime) { if ((0, helpers_1.isNullOrUndef)(dateTime)) { return null; } return ((0, helpers_1.addZeroBeforeNumber)(dateTime.getDate(), 2) + '/' + (0, helpers_1.addZeroBeforeNumber)(dateTime.getMonth(), 2) + '/' + (0, helpers_1.addZeroBeforeNumber)(dateTime.getFullYear(), 4) + ' ' + (0, helpers_1.addZeroBeforeNumber)(dateTime.getHours(), 2) + ':' + (0, helpers_1.addZeroBeforeNumber)(dateTime.getMinutes(), 2) + ':' + (0, helpers_1.addZeroBeforeNumber)(dateTime.getSeconds(), 2)); }; return _this; } UserExpand.prototype.render = function () { var styleG = (0, typestyle_1.style)({ padding: (0, utils_1.toRem)(16) + " " + (0, utils_1.toRem)(16) + " " + (0, utils_1.toRem)(6), zIndex: 9998, backgroundColor: '#ffffff', borderRadius: (0, utils_1.toRem)(4), boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)', border: '1px solid #eaeae9', textAlign: 'left', }); var styleChangeMdp = (0, typestyle_1.style)({ cursor: 'pointer', marginLeft: (0, utils_1.toRem)(8), }); var styleAlertes = (0, typestyle_1.style)({ cursor: (0, helpers_1.isNullOrUndef)(this.props.Utilisateur.Alertes) || (0, helpers_1.isNullOrUndef)(this.props.Utilisateur.Alertes.onClick) ? 'auto' : 'pointer', marginLeft: (0, utils_1.toRem)(8), }); var derniereCo = this.writeDateTime(this.props.Utilisateur.DerniereConnexion); var nbAlerte = (0, 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 ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: styles_1.styleUserExpand + ' ' + styleG }, { children: [derniereCo === null ? null : (0, jsx_runtime_1.jsxs)("p", { children: ["Derni\u00E8re connexion : ", derniereCo] }, void 0), (0, helpers_1.stringIsNullOrEmpty)(this.props.Utilisateur.NomBinome) ? null : ((0, jsx_runtime_1.jsxs)("p", { children: ["Votre bin\u00F4me : ", this.props.Utilisateur.NomBinome] }, void 0)), (0, helpers_1.isNullOrUndef)(this.props.Utilisateur.onChangeMdpClick) ? null : ((0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)(Icons_1.IconVerrou, (0, tslib_1.__assign)({ onMouseDown: this.props.Utilisateur.onChangeMdpClick }, { children: (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: styleChangeMdp }, { children: " Changer votre mot de passe" }), void 0) }), void 0) }, void 0)), (0, helpers_1.isNullOrUndef)(this.props.Utilisateur.Alertes) ? null : ((0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)(Icons_1.IconAlertes, (0, tslib_1.__assign)({ AlertNumber: nbAlerte, AlertCircle: { Active: true, Color: '#f44336', }, AlertFont: { fontSize: '8px', color: '#ffffff', }, onMouseDown: this.props.Utilisateur.Alertes.onClick }, { children: (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: styleAlertes }, { children: " Alertes utilisateur" }), void 0) }), void 0) }, void 0))] }), void 0)); }; return UserExpand; }(React.Component)); exports.UserExpand = UserExpand; var SubMenu = (function (_super) { (0, 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: false, configurable: true }); Object.defineProperty(SubMenu.prototype, "selectedBranchIdHasChild", { get: function () { return branchIdHelper.hasChild(this.props.selectedBranchId); }, enumerable: false, 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 ((0, jsx_runtime_1.jsx)(SubItems, { forceOpen: v.forceOpen, sibling: arr, top: _this.props.top, icon: v.icon, selectedBranchId: _this.props.selectedBranchId, branchId: localId, onBranchClick: _this.props.onBranchClick, 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 }, i)); }); if (this.props.branchId === '') { return ((0, jsx_runtime_1.jsx)(react_custom_scrollbars_2_1.Scrollbars, (0, tslib_1.__assign)({ style: { height: '100%', } }, { children: lis }), void 0)); } else { return (0, jsx_runtime_1.jsx)("div", { children: lis }, void 0); } }; return SubMenu; }(React.Component)); exports.SubMenu = SubMenu; var SubItems = (function (_super) { (0, 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 = (0, typestyle_1.style)({ paddingLeft: this.level == 1 ? 0 : this.level == 2 ? 60 : 20, display: this.props.isVisible === false ? 'none' : 'inherit', position: 'relative', }); var link = (0, 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 = (0, typestyle_1.style)({ marginTop: this.props.styleType === 'button' ? 15 : 0, fontSize: (0, 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 = (0, typestyle_1.style)({ color: '#FFF', marginTop: (0, utils_1.toRem)(3), position: 'relative', fontSize: (0, utils_1.toRem)(25), display: this.hasIcon ? 'initial' : 'none', }); var innnerSubmenu = (0, 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 = (0, typestyle_1.style)({ $nest: (_c = {}, _c['& > div'] = { maxHeight: 1000, transition: 'max-height 2.5s', }, _c), }); if (this.props.collapse) { return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: branch, "data-branch": this.props.branchId }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: branchItem, onClick: this.onClick }, { children: [(0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: meunuIcon }, { children: (0, jsx_runtime_1.jsx)("i", { className: this.props.icon, onClick: this.onClick }, void 0) }), void 0), this.textContentColapse] }), void 0) }), void 0)); } var content = this.props.title; if (this.props.styleType === 'button') { content = ((0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ style: { paddingRight: 53, paddingBottom: 12, paddingLeft: 53, paddingTop: 12, borderRadius: 30, borderColor: this.isThisMenuSelected ? '#f39100' : this.props.top ? '#FFF' : '#FFF', borderWidth: 1, borderStyle: 'solid', } }, { children: this.props.title }), void 0)); } return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: branch, "data-branch": this.props.branchId }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: branchItem, onClick: this.onClick }, { children: [(0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: meunuIcon }, { children: (0, jsx_runtime_1.jsx)("i", { className: this.props.icon, onClick: this.onClick }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ className: link, onClick: this.onClickA, href: this.props.uri }, { children: content }), void 0)] }), void 0), this.anyChild ? ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: innnerSubmenu + (this.isMenuSelected === true || this.props.forceOpen === true ? ' ' + innnerSubmenuOpen : '') }, { children: (0, jsx_runtime_1.jsx)(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 }, void 0) }), void 0)) : null] }), void 0)); }; 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 ((0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ style: { paddingRight: 10, paddingBottom: 5, paddingLeft: 10, paddingTop: 5, borderRadius: 30, borderColor: this.isThisMenuSelected ? '#f39100' : this.props.top ? '#FFF' : '#FFF', borderWidth: 1, borderStyle: 'solid', } }, { children: this.props.title.substr(0, 2) }), void 0)); } return null; }, enumerable: false, configurable: true }); Object.defineProperty(SubItems.prototype, "hasIcon", { get: function () { return this.props.icon != null && this.props.icon != ''; }, enumerable: false, configurable: true }); Object.defineProperty(SubItems.prototype, "level", { get: function () { return branchIdHelper.getLevel(this.props.branchId); }, enumerable: false, 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: false, 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: false, 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: false, configurable: true }); return SubItems; }(React.Component)); exports.SubItems = SubItems; //# sourceMappingURL=UpMenuOH.js.map