@up-group-ui/react-controls
Version:
Up shared react controls
397 lines • 19.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuItem = exports.LeftMenu = exports.TopMenuItem = exports.TopMenu = exports.SubItems = exports.SubMenu = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var typestyle_1 = require("typestyle");
require("./sources/up.png");
var utils_1 = require("../../../Common/theming/utils");
var UpMenuBeta = (function (_super) {
(0, 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 = (0, typestyle_1.style)({
minHeight: 250,
});
var styleContent = (0, typestyle_1.style)({
margin: 'auto',
});
return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "" }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(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 }, void 0), (0, jsx_runtime_1.jsx)(LeftMenu, { clickCollapse: this.clickCollapse, open: this.state.open, menuItems: this.props.menuItems, onMenuClick: this.props.onMenuClick }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: styleContentWrapper }, { children: (0, jsx_runtime_1.jsx)("section", (0, tslib_1.__assign)({ className: styleContent }, { children: this.props.children }), void 0) }), void 0)] }, void 0) }), void 0));
};
return UpMenuBeta;
}(react_1.default.Component));
exports.default = UpMenuBeta;
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.render = function () {
var _this = this;
if (this.props.childMenuItems == null || this.props.childMenuItems.length == 0) {
return null;
}
var list = (0, typestyle_1.style)({
backgroundColor: '#003845',
listStyle: 'none',
$nest: {
'& ul': {
paddingLeft: (0, 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 ((0, jsx_runtime_1.jsx)(SubItems, { 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, isSelected: v.isSelected, icon: v.icon, childMenuItems: v.childMenuItems }, i));
});
return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: list }, { children: lis }), void 0);
};
return SubMenu;
}(react_1.default.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.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: false,
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: false,
configurable: true
});
SubItems.prototype.render = function () {
var _a;
var liElment = (0, typestyle_1.style)({
paddingLeft: (0, utils_1.toRem)(20),
position: 'relative',
});
var inlie = (0, typestyle_1.style)({
display: 'inline-block',
$nest: {
i: {
display: 'inline',
position: 'absolute',
fontSize: (0, utils_1.toRem)(25),
fontWeight: 900,
cursor: 'pointer',
},
},
});
var inliei = (0, typestyle_1.style)({
display: 'inline',
position: 'absolute',
top: 0,
left: 0,
fontSize: (0, utils_1.toRem)(25),
fontWeight: 900,
cursor: 'pointer',
});
var liLine = (0, typestyle_1.style)({
padding: (0, 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 ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: liElment }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: liLine }, { children: [this.anyChild ? ((0, jsx_runtime_1.jsx)("i", { onClick: this.onClick, className: inliei + ' ' + (this.state.active || this.isMenuSelected ? 'pe-7s-angle-down' : 'pe-7s-angle-right') }, void 0)) : null, (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ className: inlie, onClick: this.onClickA, href: this.props.uri }, { children: this.props.title }), void 0)] }), void 0), this.anyChild && (this.state.active || this.isMenuSelected) ? ((0, jsx_runtime_1.jsx)(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 }, void 0)) : null] }), void 0));
};
return SubItems;
}(react_1.default.Component));
exports.SubItems = SubItems;
var TopMenu = (function (_super) {
(0, 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 (0, jsx_runtime_1.jsx)(TopMenuItem, { title: v.title, icon: v.icon, action: v.action }, i);
});
}
var iconBtn = (0, typestyle_1.style)({
cursor: 'pointer',
padding: (0, utils_1.toRem)(0) + " " + (0, utils_1.toRem)(10),
minWidth: (0, utils_1.toRem)(50),
fontSize: (0, utils_1.toRem)(25),
color: 'white',
lineHeight: 2,
$nest: (_a = {},
_a['&:hover'] = {
backgroundColor: '#00AAD4',
},
_a['&:hover > i'] = {
color: 'white',
},
_a),
});
var inputDiv = (0, typestyle_1.style)({
padding: (0, utils_1.toRem)(5),
});
var floatLeft = (0, typestyle_1.style)({
float: 'left',
$nest: (_b = {},
_b['& > div'] = {
float: 'left',
},
_b),
});
var floatRight = (0, typestyle_1.style)({
float: 'right',
$nest: (_c = {},
_c['& > div'] = {
float: 'left',
},
_c),
});
var main = (0, typestyle_1.style)({
backgroundColor: '#00BBD3',
display: 'block',
zIndex: 1000,
height: (0, utils_1.toRem)(75),
});
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: main }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: floatLeft }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: iconBtn, onClick: this.props.onUpClick }, { children: [(0, jsx_runtime_1.jsx)("img", { src: "./up.png", alt: "" }, void 0), " ONE HOME"] }), void 0), (0, jsx_runtime_1.jsx)("div", { className: inputDiv }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: floatRight }, { children: [this.props.username == null ? null : ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: iconBtn }, { children: (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ id: "imageProfil", "data-toggle": "dropdown", "aria-expanded": "true" }, { children: (0, jsx_runtime_1.jsx)("span", { children: this.props.username }, void 0) }), void 0) }), void 0)), this.props.onReglagesClick == null ? null : ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: iconBtn, onClick: this.props.onReglagesClick }, { children: (0, jsx_runtime_1.jsx)("i", { className: "pe pe-7s-edit" }, void 0) }), void 0)), this.props.onDeconnexionClick == null ? null : ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: iconBtn, onClick: this.props.onDeconnexionClick }, { children: (0, jsx_runtime_1.jsx)("i", { className: "pe pe-7s-power" }, void 0) }), void 0))] }), void 0)] }), void 0));
};
return TopMenu;
}(react_1.default.Component));
exports.TopMenu = TopMenu;
var TopMenuItem = (function (_super) {
(0, 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 ((0, jsx_runtime_1.jsx)("li", (0, tslib_1.__assign)({ title: this.props.title, "data-toggle": "tooltip", "data-placement": "bottom" }, { children: (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ href: this.props.action }, { children: (0, jsx_runtime_1.jsx)("i", { className: this.props.icon }, void 0) }), void 0) }), void 0));
}
else {
return ((0, jsx_runtime_1.jsx)("li", (0, tslib_1.__assign)({ title: this.props.title, "data-toggle": "tooltip", "data-placement": "bottom" }, { children: (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ onClick: this.props.action }, { children: (0, jsx_runtime_1.jsx)("i", { className: this.props.icon }, void 0) }), void 0) }), void 0));
}
};
return TopMenuItem;
}(react_1.default.Component));
exports.TopMenuItem = TopMenuItem;
var LeftMenu = (function (_super) {
(0, 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 = (0, 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 = (0, typestyle_1.style)({
fontSize: (0, utils_1.toRem)(25),
padding: (0, utils_1.toRem)(10),
});
var menu = this.props.menuItems
.filter(function (v) {
return v.isVisible !== false;
})
.map(function (v, i) {
return ((0, jsx_runtime_1.jsx)(MenuItem, { onBranchClick: _this.onBranchClick, branchId: i.toString(), selectedBranchId: _this.state.selectedBranchId, open: _this.props.open, onMenuClick: _this.props.onMenuClick, title: v.title, icon: v.icon, uri: v.uri, isSelected: v.isSelected, isVisible: v.isVisible, childMenuItems: v.childMenuItems }, i));
});
return ((0, jsx_runtime_1.jsx)("aside", (0, tslib_1.__assign)({ className: mainSideBar }, { children: (0, jsx_runtime_1.jsx)("section", (0, tslib_1.__assign)({ className: "" }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "" }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: expandIcon, onClick: this.props.clickCollapse }, { children: (0, jsx_runtime_1.jsx)("i", { className: "pe p7 pe-7s-menu" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "" }, { children: menu }), void 0)] }), void 0) }), void 0) }), void 0));
};
return LeftMenu;
}(react_1.default.Component));
exports.LeftMenu = LeftMenu;
var MenuItem = (function (_super) {
(0, tslib_1.__extends)(MenuItem, _super);
function MenuItem() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.iconClick = function (e) {
_this.props.onBranchClick(_this.props.branchId);
_this.setState({ active: !_this.state.active });
e.stopPropagation();
};
_this.onClickA = function (e) {
e.preventDefault();
};
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: false,
configurable: true
});
MenuItem.prototype.render = function () {
var _a, _b;
var subMenu = (0, typestyle_1.style)({});
var menuItem = (0, typestyle_1.style)({
borderTopRightRadius: (0, 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: (0, utils_1.toRem)(10),
}
: null,
_a),
});
var meunuIcon = (0, typestyle_1.style)({
fontSize: (0, utils_1.toRem)(25),
paddingBottom: (0, utils_1.toRem)(5),
paddingRight: (0, utils_1.toRem)(10),
});
var slectedMenu = {
background: 'rgba(0, 74, 92, 1) none repeat scroll 0 0',
borderLeft: '3px solid #F39C12',
};
var menuItemHover = (0, typestyle_1.style)({
borderLeft: this.isMenuSelected ? '3px solid #F39C12' : '',
paddingLeft: (0, utils_1.toRem)(10),
borderTopRightRadius: (0, utils_1.toRem)(5),
$nest: (_b = {},
_b['&:hover'] = slectedMenu,
_b['&:hover > .' + meunuIcon + ' > i'] = {
color: 'white',
},
_b['&:hover > a'] = {
color: 'white',
},
_b),
});
var menuLink = (0, typestyle_1.style)({
minWidth: 200,
position: 'absolute',
padding: (0, utils_1.toRem)(10),
left: (0, utils_1.toRem)(45),
});
var hide = this.props.isVisible === false ? 'hide ' : '';
var active = this.state.active || this.props.isSelected ? ' active' : '';
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: menuItem }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: menuItemHover }, { 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.iconClick }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ className: menuLink, onClick: this.onClickA, href: this.props.uri }, { children: this.props.title }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: subMenu }, { children: (0, jsx_runtime_1.jsx)(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 }, void 0) }), void 0)] }), void 0));
};
return MenuItem;
}(react_1.default.Component));
exports.MenuItem = MenuItem;
//# sourceMappingURL=UpMenuBeta.js.map