@gpa-gemstone/react-interactive
Version:
Interactive UI Components for GPA products
220 lines (219 loc) • 16 kB
JavaScript
"use strict";
// ******************************************************************************************************
// 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 gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
var Content_1 = __importDefault(require("./Content"));
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
var SidebarNav = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n & {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 100;\n padding: 48px 0 0;\n box-shadow: inset -1px 0 0 rgba(0,0,0,.1);\n width: ", "px;\n }"], ["\n & {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 100;\n padding: 48px 0 0;\n box-shadow: inset -1px 0 0 rgba(0,0,0,.1);\n width: ", "px;\n }"])), function (props) { return props.collapsed ? 50 : 200; });
var SidebarDiv = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n & {\n position: -webkit-sticky;\n position: sticky;\n height: calc( 100% - 35px);\n overflow-y: auto;\n overflow-x: hidden;\n }"], ["\n & {\n position: -webkit-sticky;\n position: sticky;\n height: calc( 100% - 35px);\n overflow-y: auto;\n overflow-x: hidden;\n }"])));
var MainDiv = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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(false), shouldRemoveSideNav = _e[0], setShouldRemoveSideNav = _e[1];
var _f = React.useState(false), shouldAddCollapseOptions = _f[0], setShouldAddCollapseOptions = _f[1];
var _g = React.useState(''), activeSection = _g[0], setActiveSection = _g[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(React.Fragment, null,
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, { 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, { Collapsed: collapsed, HideSide: hideSide, Version: props.Version }, props.children),
React.createElement(MainDiv, { left: hideSide ? 0 : (collapsed ? 50 : 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, { SetCollapsed: setCollapsed, HomePath: props.HomePath, Logo: props.Logo, OnSignOut: props.OnSignOut, ShowOpen: showOpen, ShowClose: showClose, NavBarContent: props.NavBarContent, ref: navBarRef }),
React.createElement(SideBarContent, { Collapsed: collapsed, HideSide: hideSide, Version: props.Version }, props.children),
React.createElement(MainDiv, { left: hideSide ? 0 : (collapsed ? 50 : 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 SideBarContent = function (props) {
return React.createElement(React.Fragment, null, props.HideSide ? null : React.createElement(SidebarNav, { className: "bg-light navbar-light navbar", collapsed: props.Collapsed },
React.createElement(SidebarDiv, null,
React.createElement("ul", { className: "navbar-nav px-3" }, React.Children.map(props.children, function (e) {
if (!React.isValidElement(e))
return null;
if (e.type === Page_1.default)
return e;
return null;
})),
React.Children.map(props.children, function (e) {
if (!React.isValidElement(e))
return null;
if (e.type === Section_1.default)
return e;
return null;
})),
props.Version !== undefined && !props.Collapsed ?
React.createElement("div", { style: { width: '100%', textAlign: 'center', height: 35 } },
React.createElement("span", null,
"Version ",
props.Version),
React.createElement("br", null),
React.createElement("span", null)) : null));
};
var HeaderContent = React.forwardRef(function (props, ref) {
return React.createElement(React.Fragment, null,
React.createElement("nav", { className: "navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow", ref: ref },
props.ShowOpen ? React.createElement("a", { style: { color: 'var(--light)', marginLeft: 15 }, onClick: function () { return props.SetCollapsed(false); } },
React.createElement(gpa_symbols_1.ReactIcons.ArrowForward, null)) : null,
props.ShowClose ? React.createElement("a", { style: { color: 'var(--light)', marginLeft: 15 }, onClick: function () { return props.SetCollapsed(true); } },
React.createElement(gpa_symbols_1.ReactIcons.ArrowBackward, null)) : null,
props.Logo !== undefined ?
React.createElement("a", { className: "navbar-brand col-sm-2 col-md-1 mr-0 mr-auto", href: props.HomePath },
React.createElement("img", { style: { maxHeight: 35, margin: -5 }, src: props.Logo })) : null,
React.createElement("ul", { className: "navbar-nav px-3 ml-auto" },
React.createElement("li", { className: "nav-item text-nowrap" }, props.OnSignOut !== undefined ? React.createElement("a", { className: "nav-link", onClick: props.OnSignOut }, "Sign out") : null)),
props.NavBarContent));
});
var templateObject_1, templateObject_2, templateObject_3;