@centreon/react-components
Version:
react components used by centreon web frontend
299 lines (244 loc) • 13.3 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _classnames5 = _interopRequireDefault(require("classnames"));
var _Link = _interopRequireDefault(require("@material-ui/core/Link"));
var _styles = require("@material-ui/styles");
var _reactRouterDom = require("react-router-dom");
var _navigation = _interopRequireDefault(require("./navigation.scss"));
var _BoundingBox = _interopRequireDefault(require("../BoundingBox"));
/* eslint-disable no-useless-concat */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable react/jsx-filename-extension */
/* eslint-disable prefer-destructuring */
/* eslint-disable no-restricted-globals */
/* eslint-disable no-plusplus */
/* eslint-disable react/prop-types */
var StyledLink = (0, _styles.styled)(_Link["default"])(function () {
return {
textDecoration: 'none'
};
});
var Navigation =
/*#__PURE__*/
function (_Component) {
(0, _inherits2["default"])(Navigation, _Component);
function Navigation() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2["default"])(this, Navigation);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(Navigation)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
activeSecondLevel: null,
doubleClickedLevel: null,
navigatedPageId: false,
hrefOfIframe: false
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "watchHrefChange", function (event) {
if (event.detail.href.match(/p=/)) {
_this.setState({
hrefOfIframe: event.detail.href
});
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getUrlFromEntry", function (entryProps) {
var urlOptions = entryProps.page + (entryProps.options !== null ? entryProps.options : '');
var url = entryProps.is_react ? entryProps.url : "/main.php?p=".concat(urlOptions);
return url;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "activateSecondLevel", function (secondLevelPage) {
var activeSecondLevel = _this.state.activeSecondLevel;
_this.setState({
activeSecondLevel: activeSecondLevel === secondLevelPage ? true : secondLevelPage
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getActiveTopLevelIndex", function (pageId) {
var navigationData = _this.props.navigationData;
var index = -1;
for (var i = 0; i < navigationData.length; i++) {
if (!isNaN(pageId) && String(pageId).charAt(0) === navigationData[i].page) {
index = i;
}
}
return index;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onNavigate", function (id, url) {
var onNavigate = _this.props.onNavigate;
_this.setState({
navigatedPageId: id,
hrefOfIframe: false
});
onNavigate(id, url);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "areSamePage", function (page, level, imersion) {
return imersion ? !isNaN(page) && String(page).substring(0, imersion) === level.page : !isNaN(page) && page === level.page;
});
return _this;
}
(0, _createClass2["default"])(Navigation, [{
key: "componentDidMount",
value: function componentDidMount() {
window.addEventListener('react.href.update', this.watchHrefChange, false);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
window.removeEventListener('react.href.update', this.watchHrefChange);
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
navigationData = _this$props.navigationData,
sidebarActive = _this$props.sidebarActive,
reactRoutes = _this$props.reactRoutes;
var _this$state = this.state,
activeSecondLevel = _this$state.activeSecondLevel,
doubleClickedLevel = _this$state.doubleClickedLevel,
navigatedPageId = _this$state.navigatedPageId,
hrefOfIframe = _this$state.hrefOfIframe;
var pageId = '';
var _window$location = window.location,
pathname = _window$location.pathname,
search = _window$location.search;
if (navigatedPageId && !hrefOfIframe) {
pageId = navigatedPageId;
} else if (hrefOfIframe) {
if (hrefOfIframe.match(/p=/)) {
pageId = hrefOfIframe.split('p=')[1];
if (pageId) {
pageId = pageId.split('&')[0];
}
} else {
pageId = reactRoutes[hrefOfIframe] || hrefOfIframe;
}
} else if (search.match(/p=/)) {
pageId = search.split('p=')[1].split('&')[0];
} else {
pageId = reactRoutes[pathname] || pathname;
}
var activeIndex = this.getActiveTopLevelIndex(pageId);
return _react["default"].createElement("ul", {
className: (0, _classnames5["default"])(_navigation["default"].menu, _navigation["default"]['menu-items'], _navigation["default"]['list-unstyled'], _navigation["default"][sidebarActive ? 'menu-big' : 'menu-small'])
}, navigationData.map(function (firstLevel, firstLevelIndex) {
var _classnames;
var firstLevelIsActive = firstLevel.toggled || _this2.areSamePage(pageId, firstLevel, 1);
return _react["default"].createElement("li", {
className: (0, _classnames5["default"])(_navigation["default"]['menu-item'], _navigation["default"]["color-".concat(firstLevel.color)], (_classnames = {}, (0, _defineProperty2["default"])(_classnames, _navigation["default"].active, firstLevelIsActive), (0, _defineProperty2["default"])(_classnames, _navigation["default"]["active-".concat(firstLevel.color)], firstLevelIsActive), _classnames)),
key: "firstLevel-".concat(firstLevel.page)
}, _react["default"].createElement("span", {
className: (0, _classnames5["default"])(_navigation["default"]['menu-item-link'])
}, _react["default"].createElement(StyledLink, {
className: (0, _classnames5["default"])(_navigation["default"].iconmoon, _navigation["default"]["icon-".concat(firstLevel.icon)]),
onClick: function onClick(e) {
if (doubleClickedLevel) {
_this2.setState({
doubleClickedLevel: null,
hrefOfIframe: false
});
} else {
e.preventDefault();
}
},
onDoubleClick: function onDoubleClick(e) {
var target = e.target;
_this2.setState({
hrefOfIframe: false,
doubleClickedLevel: firstLevel
}, function () {
target.click();
});
},
component: _reactRouterDom.Link,
to: _this2.getUrlFromEntry(firstLevel)
}, _react["default"].createElement("span", {
className: (0, _classnames5["default"])(_navigation["default"]['menu-item-name'])
}, firstLevel.label))), _react["default"].createElement("ul", {
className: (0, _classnames5["default"])(_navigation["default"].collapse, _navigation["default"]['collapsed-items'], _navigation["default"]['list-unstyled'], _navigation["default"]["border-".concat(firstLevel.color)], _navigation["default"][activeIndex !== -1 && firstLevelIndex > activeIndex && sidebarActive && navigationData[activeIndex].children.length >= 5 ? 'towards-down' : 'towards-up'])
}, firstLevel.children.map(function (secondLevel) {
var _classnames2;
var secondLevelIsActive = activeSecondLevel === secondLevel.page || !activeSecondLevel && _this2.areSamePage(pageId, secondLevel, 3);
var secondLevelIsColored = secondLevel.toggled || _this2.areSamePage(pageId, secondLevel, 3);
return _react["default"].createElement("li", {
className: (0, _classnames5["default"])(_navigation["default"]['collapsed-item'], (_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, _navigation["default"].active, secondLevelIsActive), (0, _defineProperty2["default"])(_classnames2, _navigation["default"]["active-".concat(firstLevel.color)], secondLevelIsColored), _classnames2)),
key: "secondLevel-".concat(secondLevel.page)
}, _react["default"].createElement(StyledLink, {
className: (0, _classnames5["default"])(_navigation["default"]['collapsed-item-level-link'], _navigation["default"]["color-".concat(firstLevel.color)], (0, _defineProperty2["default"])({}, _navigation["default"]['img-none'], secondLevel.groups.length < 1)),
onClick: function onClick(e) {
if (secondLevel.groups.length > 0) {
e.preventDefault(); // do not redirect if level 2 has children
_this2.activateSecondLevel(secondLevel.page);
} else {
_this2.setState({
navigatedPageId: secondLevel.page,
hrefOfIframe: false
});
}
},
component: _reactRouterDom.Link,
to: _this2.getUrlFromEntry(secondLevel)
}, secondLevel.label), _react["default"].createElement(_BoundingBox["default"], {
active: true
}, function (_ref) {
var rectBox = _ref.rectBox;
var styleFor3rdLevel = {};
if (rectBox && rectBox.bottom < 1) {
styleFor3rdLevel = {
height: rectBox.offsetHeight + rectBox.bottom
};
}
return _react["default"].createElement("ul", {
className: (0, _classnames5["default"])(_navigation["default"]['collapsed-level-items'], _navigation["default"]['list-unstyled']),
style: styleFor3rdLevel
}, secondLevel.groups.map(function (group) {
return _react["default"].createElement(_react["default"].Fragment, {
key: "thirdLevelFragment-".concat(group.label)
}, secondLevel.groups.length > 1 ? _react["default"].createElement("span", {
className: (0, _classnames5["default"])(_navigation["default"]['collapsed-level-title'])
}, _react["default"].createElement("span", null, group.label)) : null, group.children.map(function (thirdLevel) {
var _classnames4;
var thirdLevelIsActive = thirdLevel.toggled || _this2.areSamePage(pageId, thirdLevel);
return _react["default"].createElement("li", {
className: (0, _classnames5["default"])(_navigation["default"]['collapsed-level-item'], (_classnames4 = {}, (0, _defineProperty2["default"])(_classnames4, _navigation["default"].active, thirdLevelIsActive), (0, _defineProperty2["default"])(_classnames4, _navigation["default"]["active-".concat(firstLevel.color)], thirdLevelIsActive), _classnames4)),
key: "thirdLevel-".concat(thirdLevel.page)
}, _react["default"].createElement(StyledLink, {
className: (0, _classnames5["default"])(_navigation["default"]['collapsed-item-level-link'], _navigation["default"]["color-".concat(firstLevel.color)]),
onClick: function onClick() {
_this2.setState({
navigatedPageId: thirdLevel.page,
hrefOfIframe: false
});
},
component: _reactRouterDom.Link,
to: _this2.getUrlFromEntry(thirdLevel)
}, thirdLevel.label));
}));
}));
}));
})));
}));
}
}]);
return Navigation;
}(_react.Component);
var _default = Navigation;
exports["default"] = _default;