@gpa-gemstone/react-interactive
Version:
Interactive UI Components for GPA products
180 lines (179 loc) • 12.5 kB
JavaScript
;
// ******************************************************************************************************
// Application.tsx - Gbtc
//
// Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
//
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
// file except in compliance with the License. You may obtain a copy of the License at:
//
// http://opensource.org/licenses/MIT
//
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
// License for the specific language governing permissions and limitations.
//
// Code Modification History:
// ----------------------------------------------------------------------------------------------------
// 02/13/2022 - C. Lackner
// Generated original version of source code.
//
// ******************************************************************************************************
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var Context_1 = require("../Context");
var React = __importStar(require("react"));
var react_router_dom_1 = require("react-router-dom");
var Page_1 = __importDefault(require("../Page"));
var Section_1 = __importDefault(require("../Section"));
var LoadingScreen_1 = __importDefault(require("../../LoadingScreen"));
var ServerErrorIcon_1 = __importDefault(require("../../ServerErrorIcon"));
var styled_components_1 = __importDefault(require("styled-components"));
var Content_1 = __importDefault(require("../Content"));
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
var SideBarContent_1 = __importDefault(require("./SideBarContent"));
var HeaderContent_1 = __importDefault(require("./HeaderContent"));
var MainDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n& {\n top: ", "px;\n position: absolute;\n width: calc(100% - ", "px);\n height: calc(100% - ", "px);\n overflow: hidden;\n left: ", "px;\n}\n& svg {\n user-select: none;\n }"], ["\n& {\n top: ", "px;\n position: absolute;\n width: calc(100% - ", "px);\n height: calc(100% - ", "px);\n overflow: hidden;\n left: ", "px;\n}\n& svg {\n user-select: none;\n }"])), function (props) { return props.top; }, function (props) { return props.left; }, function (props) { return props.top; }, function (props) { return props.left; });
var Applications = function (props, ref) {
var _a;
var _b = React.useState(false), collapsed = _b[0], setCollapsed = _b[1];
var navBarRef = React.useRef(null);
var mainDivRef = React.useRef(null);
var width = (0, helper_functions_1.useGetContainerPosition)(mainDivRef).width;
var _c = React.useReducer(function (x) { return x + 1; }, 0), _ignored = _c[0], forceUpdate = _c[1]; // integer state for resize renders
var _d = React.useState(40), navBarHeight = _d[0], setNavBarHeight = _d[1];
var _e = React.useState(50), sidebarWidth = _e[0], setSideBarWidth = _e[1];
var _f = React.useState(false), shouldRemoveSideNav = _f[0], setShouldRemoveSideNav = _f[1];
var _g = React.useState(false), shouldAddCollapseOptions = _g[0], setShouldAddCollapseOptions = _g[1];
var _h = React.useState(''), activeSection = _h[0], setActiveSection = _h[1];
var showOpen = (props.AllowCollapsed !== undefined && props.AllowCollapsed || shouldAddCollapseOptions) && collapsed;
var showClose = (props.AllowCollapsed !== undefined && props.AllowCollapsed || shouldAddCollapseOptions) && !collapsed;
var hideSide = (props.HideSideBar === undefined && !shouldRemoveSideNav) ? false : (((_a = props.HideSideBar) !== null && _a !== void 0 ? _a : false) || shouldRemoveSideNav);
React.useLayoutEffect(function () {
var _a, _b;
setNavBarHeight((_b = (_a = navBarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 40);
});
React.useEffect(function () {
var _a;
if (width === 0)
return;
if (width <= 200)
setShouldRemoveSideNav(true);
else
setShouldRemoveSideNav(false);
if (width <= 600) {
if (!((_a = props.AllowCollapsed) !== null && _a !== void 0 ? _a : false))
setShouldAddCollapseOptions(true);
setCollapsed(true);
}
}, [width, props.AllowCollapsed]);
React.useEffect(function () {
var listener = function (evt) { return forceUpdate(); };
window.addEventListener('resize', listener);
return function () { return window.removeEventListener('resize', listener); };
}, []);
React.useImperativeHandle(ref, function () { return ({
mainDiv: mainDivRef.current,
navBarDiv: navBarRef.current,
}); });
function GetContext() {
var _a, _b;
return {
homePath: props.HomePath,
userRoles: ((_a = props.UserRoles) !== null && _a !== void 0 ? _a : ['Viewer']),
collapsed: collapsed,
useSearchMatch: (_b = props.UseLegacyNavigation) !== null && _b !== void 0 ? _b : false,
activeSection: activeSection,
setActiveSection: setActiveSection
};
}
function CreateRoute(element) {
var routes = [];
// Generate a route for the Name prop
if (element.props.RequiredRoles !== undefined && element.props.RequiredRoles.filter(function (r) { return GetContext().userRoles.findIndex(function (i) { return i === r; }) > -1; }).length === 0)
routes.push(React.createElement(react_router_dom_1.Route, { path: "".concat(props.HomePath).concat(element.props.Name), element: React.createElement(ServerErrorIcon_1.default, { Show: true, Label: 'You are not authorized to view this page.' }) }));
else
routes.push(React.createElement(react_router_dom_1.Route, { path: "".concat(props.HomePath).concat(element.props.Name), element: React.createElement(Content_1.default, null, element.props.children) }));
// Generate additional routes for Paths prop if it exists
if ((element.props.Paths != null)) {
for (var _i = 0, _a = element.props.Paths; _i < _a.length; _i++) {
var path = _a[_i];
var fullPath = "".concat(props.HomePath).concat(element.props.Name).concat(path);
if (element.props.RequiredRoles !== undefined && element.props.RequiredRoles.filter(function (r) { return GetContext().userRoles.findIndex(function (i) { return i === r; }) > -1; }).length === 0)
routes.push(React.createElement(react_router_dom_1.Route, { path: fullPath, element: React.createElement(ServerErrorIcon_1.default, { Show: true, Label: 'You are not authorized to view this page.' }) }));
else
routes.push(React.createElement(react_router_dom_1.Route, { path: fullPath, element: React.createElement(Content_1.default, null, element.props.children) }));
}
}
return routes;
}
return (React.createElement(Context_1.Context.Provider, { value: GetContext() }, props.UseLegacyNavigation === undefined || !props.UseLegacyNavigation ? React.createElement(react_router_dom_1.BrowserRouter, null,
React.createElement("div", { ref: mainDivRef, style: { width: '100%', height: '100%', position: "absolute" } },
React.createElement(HeaderContent_1.default, { SetCollapsed: setCollapsed, HomePath: props.HomePath, Logo: props.Logo, OnSignOut: props.OnSignOut, ShowOpen: hideSide ? false : showOpen, ShowClose: hideSide ? false : showClose, NavBarContent: props.NavBarContent, ref: navBarRef }),
React.createElement(React.Suspense, { fallback: React.createElement(LoadingScreen_1.default, { Show: true }) },
React.createElement(SideBarContent_1.default, { Collapsed: collapsed, HideSide: hideSide, Version: props.Version, SetSideBarWidth: setSideBarWidth }, props.children),
React.createElement(MainDiv, { left: hideSide ? 0 : (collapsed ? sidebarWidth : 200), top: navBarHeight },
React.createElement(react_router_dom_1.Routes, null,
React.createElement(react_router_dom_1.Route, { path: "".concat(props.HomePath) },
React.createElement(react_router_dom_1.Route, { index: true, element: React.createElement(react_router_dom_1.Navigate, { to: "".concat(props.HomePath).concat(props.DefaultPath) }) }),
React.Children.map(props.children, function (element) {
if (!React.isValidElement(element))
return null;
if (element.type === Page_1.default && React.Children.count(element.props.children) > 0)
return CreateRoute(element);
if (element.type === Section_1.default)
return React.Children.map(element.props.children, function (e) {
if (!React.isValidElement(e))
return null;
if (e.type === Page_1.default && React.Children.count(e.props.children) > 0)
return CreateRoute(e);
return null;
});
return null;
}))))))) :
React.createElement("div", { ref: mainDivRef, style: { width: '100%', height: '100%', position: "absolute" } },
React.createElement(HeaderContent_1.default, { SetCollapsed: setCollapsed, HomePath: props.HomePath, Logo: props.Logo, OnSignOut: props.OnSignOut, ShowOpen: showOpen, ShowClose: showClose, NavBarContent: props.NavBarContent, ref: navBarRef }),
React.createElement(SideBarContent_1.default, { Collapsed: collapsed, HideSide: hideSide, Version: props.Version, SetSideBarWidth: setSideBarWidth }, props.children),
React.createElement(MainDiv, { left: hideSide ? 0 : (collapsed ? sidebarWidth : 200), top: navBarHeight }, React.Children.map(props.children, function (element) {
if (!React.isValidElement(element))
return null;
if (element.type === Page_1.default && React.Children.count(element.props.children) > 0)
return element.props.children;
if (element.type === Section_1.default)
return null;
return element;
})))));
};
exports.default = React.forwardRef(Applications);
var templateObject_1;