@up-group-ui/react-controls
Version:
Up shared react controls
216 lines • 13.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpMenuDefaultHeader = exports.UpMenu = exports.SubItems = exports.SubMenu = exports.MenuItem = 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 theming_1 = require("../../../Common/theming");
var theming_2 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var utils_1 = require("../../../Common/utils");
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../SvgIcon"));
var Box_1 = (0, tslib_1.__importDefault)(require("../../Containers/Box"));
var styles_1 = require("./styles");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var lodash_1 = require("lodash");
var Ligne_1 = (0, tslib_1.__importDefault)(require("../Ligne"));
var colorMap_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/colorMap"));
var typestyle_1 = require("typestyle");
var helpers_1 = require("../../../Common/utils/helpers");
var logo_up_square_svg_1 = (0, tslib_1.__importDefault)(require("./sources/logo-up-square.svg"));
var UpMenu = (function (_super) {
(0, tslib_1.__extends)(UpMenu, _super);
function UpMenu(p, c) {
var _this = _super.call(this, p, c) || this;
_this.toggleMinification = function () {
if (_this.isMinifiedControlled && _this.props.onMinifiedChange) {
_this.props.onMinifiedChange(!_this.currentMinifiedValue);
}
else {
_this.setState({ minified: !_this.currentMinifiedValue }, function () {
if (_this.props.onMinifiedChange) {
_this.props.onMinifiedChange(_this.currentMinifiedValue);
}
});
}
};
_this.setMinification = function (minified) {
if (_this.isMinifiedControlled && _this.props.onMinifiedChange) {
_this.props.onMinifiedChange(minified);
}
else {
_this.setState({ minified: minified }, function () {
if (_this.props.onMinifiedChange) {
_this.props.onMinifiedChange(minified);
}
});
}
};
_this.handleClick = function (menuitem) {
if (_this.currentMinifiedValue && !(0, utils_1.isEmpty)(menuitem.childMenuItems)) {
_this.setMinification(false);
}
if ((0, helpers_1.isMobileDevice)()) {
if (!_this.currentMinifiedValue && (0, utils_1.isEmpty)(menuitem.childMenuItems)) {
_this.setMinification(true);
}
}
return _this.props.onClick(menuitem.uri, menuitem);
};
_this.state = {
minified: p.minified || false,
};
return _this;
}
Object.defineProperty(UpMenu.prototype, "isMinifiedControlled", {
get: function () {
return this.props.minified !== undefined;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpMenu.prototype, "currentMinifiedValue", {
get: function () {
return this.isMinifiedControlled ? this.props.minified : this.state.minified;
},
enumerable: false,
configurable: true
});
UpMenu.prototype.render = function () {
var _this = this;
var _a = this.props, header = _a.header, icon = _a.icon, footer = _a.footer, menuItems = _a.menuItems, children = _a.children, others = (0, tslib_1.__rest)(_a, ["header", "icon", "footer", "menuItems", "children"]);
var menu = menuItems.map(function (v, i) {
if (v.render != null) {
var e = v.render(v, others, _this.state);
return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: e }, i);
}
return ((0, jsx_runtime_1.jsx)(MenuItem, { onClick: _this.handleClick, title: v.title, icon: v.icon, uri: v.uri, isSelected: v.isSelected, isVisible: v.isVisible, childMenuItems: v.childMenuItems, isSeparator: v.isSeparator }, i));
});
var renderChildren = children;
if (children != null && (0, utils_1.isFunction)(children)) {
renderChildren = children(this.props, this.state);
}
var renderHeader = header;
if (header != null && (0, utils_1.isFunction)(header)) {
renderHeader = header(this.props, this.state);
}
else if (this.props.title) {
renderHeader = UpMenuDefaultHeader({ title: this.props.title }, this.state);
}
var renderFooter = footer;
if (footer != null && (0, utils_1.isFunction)(footer)) {
renderFooter = footer(this.props, this.state);
}
var renderIcon = icon;
if (icon != null && (0, utils_1.isFunction)(icon)) {
renderIcon = icon(this.props, this.state);
}
var toggleIconName = others.toggleIconName || 'burger-menu2';
var upMenuNavClassName = (0, typestyle_1.classes)('up-menu-nav', this.currentMinifiedValue ? 'minified' : '');
var showToggler = (!this.props.blocked && (0, helpers_1.isMobileDevice)()) || this.props.showToggler;
return ((0, jsx_runtime_1.jsxs)("aside", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-menu', (0, styles_1.MenuStyles)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.props), { minified: this.currentMinifiedValue }))) }, { children: [(0, jsx_runtime_1.jsxs)("section", (0, tslib_1.__assign)({ className: "up-menu-header" }, { children: [renderIcon && (0, jsx_runtime_1.jsx)("section", (0, tslib_1.__assign)({ className: "up-app-icon-wrapper" }, { children: renderIcon }), void 0), renderHeader, showToggler && ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { width: 15, height: 15, iconName: toggleIconName, className: "up-menu-toggle", onClick: this.toggleMinification, style: { marginLeft: 'auto', marginRight: 10 } }, void 0))] }), void 0), !(0, helpers_1.isMobileDevice)() && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "up-menu-actions" }, { children: !this.props.blocked && ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { width: 15, height: 15, iconName: toggleIconName, className: "up-menu-toggle", onClick: this.toggleMinification }, void 0)) }), void 0)), (0, jsx_runtime_1.jsx)("section", (0, tslib_1.__assign)({ className: upMenuNavClassName }, { children: (0, jsx_runtime_1.jsx)("nav", { children: (0, jsx_runtime_1.jsx)("ul", { children: menu }, void 0) }, void 0) }), void 0), renderChildren && (0, jsx_runtime_1.jsx)("section", (0, tslib_1.__assign)({ className: "up-menu-content" }, { children: renderChildren }), void 0), renderFooter && (0, jsx_runtime_1.jsx)("section", (0, tslib_1.__assign)({ className: "up-menu-footer" }, { children: renderFooter }), void 0)] }), void 0));
};
UpMenu.defaultProps = {
theme: theming_2.default,
icon: function () { return (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { width: 48, height: 48, iconHtml: logo_up_square_svg_1.default }, void 0); },
width: 300,
};
return UpMenu;
}(react_1.default.Component));
exports.UpMenu = UpMenu;
var MenuItem = (function (_super) {
(0, tslib_1.__extends)(MenuItem, _super);
function MenuItem(p, c) {
var _this = _super.call(this, p, c) || this;
_this.onItemClick = function (e) {
var value = _this.props.onClick(_this.props);
if (value === false) {
e.preventDefault();
e.stopPropagation();
}
};
return _this;
}
MenuItem.prototype.shouldComponentUpdate = function (nextProps) {
return !(0, lodash_1.isEqual)(this.props, nextProps);
};
MenuItem.prototype.render = function () {
var hide = this.props.isVisible === false;
var active = this.props.isSelected;
var hasChilren = !(0, utils_1.isEmpty)(this.props.childMenuItems);
var isSeparator = this.props.isSeparator;
return ((0, jsx_runtime_1.jsxs)("li", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('treeview', {
hide: hide,
active: active,
hasChildren: hasChilren,
separator: isSeparator,
}) }, { children: [this.props.uri && ((0, jsx_runtime_1.jsxs)("a", (0, tslib_1.__assign)({ onClick: this.onItemClick, href: this.props.uri }, { children: [(0, lodash_1.isString)(this.props.icon) && ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { title: this.props.title, width: 30, height: 30, iconName: this.props.icon, color: "#000" }, void 0)), (0, utils_1.isFunction)(this.props.icon) && this.props.icon(this.props), (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: 'up-menu-item-title' }, { children: this.props.title }), void 0), !(0, utils_1.isEmpty)(this.props.childMenuItems) && ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { className: "chevron", width: 15, height: 15, style: { marginLeft: 'auto' }, iconName: 'arrow-right' }, void 0))] }), void 0)), !(0, utils_1.isEmpty)(this.props.childMenuItems) && ((0, jsx_runtime_1.jsx)(SubMenu, { title: this.props.title, onClick: this.props.onClick, childMenuItems: this.props.childMenuItems }, void 0))] }), void 0));
};
return MenuItem;
}(react_1.default.Component));
exports.MenuItem = MenuItem;
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.shouldComponentUpdate = function (nextProps) {
return !(0, lodash_1.isEqual)(this.props, nextProps);
};
SubMenu.prototype.render = function () {
var _this = this;
if (this.props.childMenuItems == null || this.props.childMenuItems.length == 0) {
return null;
}
var items = this.props.childMenuItems.map(function (v, i) {
return ((0, jsx_runtime_1.jsx)(SubItems, { onClick: _this.props.onClick, 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)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("ul", (0, tslib_1.__assign)({ className: "up-sub-menu" }, { children: [this.props.title && (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: 'up-sub-menu-title' }, { children: this.props.title }), void 0), items] }), void 0) }, 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) {
e.preventDefault();
e.stopPropagation();
_this.setState({ active: !_this.state.active });
return false;
};
_this.onClickA = function (e) {
var value = _this.props.onClick(_this.props);
if (value === false) {
e.preventDefault();
e.stopPropagation();
}
};
_this.state = { active: false };
return _this;
}
SubItems.prototype.shouldComponentUpdate = function (nextProps, nextState) {
return !(0, lodash_1.isEqual)(this.props, nextProps) || !(0, lodash_1.isEqual)(this.state, nextState);
};
Object.defineProperty(SubItems.prototype, "anyChild", {
get: function () {
return this.props.childMenuItems != null && this.props.childMenuItems.length != 0;
},
enumerable: false,
configurable: true
});
SubItems.prototype.render = function () {
var hide = this.props.isVisible === false ? ' hide' : '';
var active = this.state.active || this.props.isSelected ? 'active' : '';
var hasChildren = this.anyChild ? ' hasChildren' : '';
return ((0, jsx_runtime_1.jsxs)("li", (0, tslib_1.__assign)({ className: active + hide + hasChildren }, { children: [(0, jsx_runtime_1.jsxs)("a", (0, tslib_1.__assign)({ onClick: this.onClickA, href: this.props.uri }, { children: [(0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: 'up-menu-item-title' }, { children: this.props.title }), void 0), this.anyChild && ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { className: "chevron", width: 15, height: 15, style: { marginLeft: 'auto' }, iconName: 'arrow-right' }, void 0))] }), void 0), this.anyChild ? (0, jsx_runtime_1.jsx)(SubMenu, { onClick: this.props.onClick, childMenuItems: this.props.childMenuItems }, void 0) : null] }), void 0));
};
return SubItems;
}(react_1.default.Component));
exports.SubItems = SubItems;
var UpMenuDefaultHeader = function (props, state) { return ((0, jsx_runtime_1.jsx)(Box_1.default, (0, tslib_1.__assign)({ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', style: { height: '100%' } }, { children: !state.minified && ((0, jsx_runtime_1.jsx)(Ligne_1.default, (0, tslib_1.__assign)({ color: colorMap_1.default.white, className: (0, typestyle_1.style)({ marginLeft: '8px' }) }, { children: props.title }), void 0)) }), void 0)); };
exports.UpMenuDefaultHeader = UpMenuDefaultHeader;
exports.default = (0, theming_1.withTheme)(UpMenu);
//# sourceMappingURL=UpMenu.js.map