-/**\r
- * ============LICENSE_START========================================================================\r
- * ONAP : ccsdk feature sdnr wt odlux\r
- * =================================================================================================\r
- * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.\r
- * =================================================================================================\r
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except\r
- * in compliance with the License. You may obtain a copy of the License at\r
- *\r
- * http://www.apache.org/licenses/LICENSE-2.0\r
- *\r
- * Unless required by applicable law or agreed to in writing, software distributed under the License\r
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express\r
- * or implied. See the License for the specific language governing permissions and limitations under\r
- * the License.\r
- * ============LICENSE_END==========================================================================\r
- */\r
-import * as React from 'react';\r
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';\r
-\r
-import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons';\r
-\r
-import Drawer from '@material-ui/core/Drawer';\r
-import List from '@material-ui/core/List';\r
-\r
-import Divider from '@material-ui/core/Divider';\r
-\r
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r
-import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons';\r
-\r
-import ListItemLink from '../components/material-ui/listItemLink';\r
-\r
-import connect, { Connect } from '../flux/connect';\r
-import { MenuAction } from '../actions/menuAction';\r
-import * as classNames from 'classnames';\r
-import { transportPCEUrl } from '../app';\r
-\r
-\r
-const drawerWidth = 240;\r
-\r
-const extraLinks = (window as any)._odluxExtraLinks as [string, string][];\r
-\r
-const styles = (theme: Theme) => createStyles({\r
- drawerPaper: {\r
- position: 'relative',\r
- width: drawerWidth,\r
- },\r
- toolbar: theme.mixins.toolbar as any,\r
-\r
- drawerOpen: {\r
- width: drawerWidth,\r
- transition: theme.transitions.create('width', {\r
- easing: theme.transitions.easing.sharp,\r
- duration: theme.transitions.duration.enteringScreen,\r
- }),\r
- },\r
- drawerClose: {\r
- transition: theme.transitions.create('width', {\r
- easing: theme.transitions.easing.sharp,\r
- duration: theme.transitions.duration.leavingScreen,\r
- }),\r
- overflowX: 'hidden',\r
- width: theme.spacing(7) + 1,\r
- [theme.breakpoints.up('sm')]: {\r
- width: theme.spacing(9) + 1,\r
- },\r
- },\r
- drawer: {\r
-\r
- },\r
- menu: {\r
- flex: "1 0 0%",\r
- },\r
- optLinks: {\r
- borderTop: "2px solid #cfcfcf",\r
- display: "flex",\r
- flexDirection: "row",\r
- flexWrap: "wrap",\r
- justifyContent: "space-around"\r
- },\r
- link: {\r
- margin: theme.spacing(1)+1,\r
- fontSize: theme.typography.fontSize-2,\r
- },\r
-});\r
-\r
-const tabletWidthBreakpoint = 768;\r
-\r
-export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, dispatch }: WithStyles<typeof styles> & Connect & Connect) => {\r
- const { user } = state.framework.authenticationState;\r
- const isOpen = state.framework.applicationState.isMenuOpen;\r
- const closedByUser = state.framework.applicationState.isMenuClosedByUser;\r
- const transportUrl = state.framework.applicationState.transportpceUrl;\r
-\r
- const [responsive, setResponsive] = React.useState(false);\r
-\r
- //collapse menu on mount if necessary\r
- React.useEffect(()=>{\r
-\r
- if(isOpen && window.innerWidth < tabletWidthBreakpoint){\r
-\r
- setResponsive(true);\r
- dispatch(new MenuAction(false));\r
- }\r
-\r
- },[]);\r
-\r
- React.useEffect(() => {\r
-\r
- function handleResize() {\r
- if (user && user.isValid) {\r
- if (window.innerWidth < tabletWidthBreakpoint && !responsive) {\r
- setResponsive(true);\r
- if (!closedByUser) {\r
- console.log("responsive menu collapsed")\r
- dispatch(new MenuAction(false));\r
- }\r
-\r
- } else if (window.innerWidth > tabletWidthBreakpoint && responsive) {\r
- setResponsive(false);\r
- if (!closedByUser) {\r
- console.log("responsive menu restored")\r
- dispatch(new MenuAction(true));\r
- }\r
-\r
- }\r
- }\r
- }\r
- window.addEventListener("resize", handleResize);\r
-\r
-\r
- return () => {\r
- window.removeEventListener("resize", handleResize);\r
- }\r
- })\r
-\r
- React.useEffect(()=>{\r
- // trigger a resize if menu changed in case elements have to re-arrange\r
- window.dispatchEvent(new Event('menu-resized'));\r
- }, [isOpen])\r
-\r
- let menuItems = state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {\r
- const reg = state.framework.applicationRegistraion[key];\r
- return reg && (\r
- <ListItemLink\r
- key={reg.name}\r
- to={reg.path || `/${reg.name}`}\r
- primary={reg.menuEntry || reg.name}\r
- secondary={reg.subMenuEntry}\r
- icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />\r
- ) || null;\r
- }) || null;\r
-\r
- if(transportUrl.length>0){\r
-\r
- const transportPCELink = <ListItemLink\r
- key={"transportPCE"}\r
- to={transportUrl}\r
- primary={"TransportPCE"}\r
- icon={<FontAwesomeIcon icon={faProjectDiagram} />}\r
- external />;\r
-\r
- const linkFound = menuItems.find(obj => obj.key === "linkCalculation");\r
- \r
- if (linkFound) {\r
- const index = menuItems.indexOf(linkFound);\r
- menuItems.splice(index + 1, 0, transportPCELink);\r
- } else {\r
- menuItems.push(transportPCELink);\r
- }\r
- }\r
- \r
-\r
- return (\r
- <Drawer\r
- variant="permanent"\r
- className={\r
- classNames(classes.drawer, {\r
- [classes.drawerOpen]: isOpen,\r
- [classes.drawerClose]: !isOpen\r
- })\r
- }\r
- classes={{\r
- paper: classes.drawerPaper,\r
- }}\r
- >\r
- {user && user.isValid && <>\r
- <div className={classes.toolbar} />\r
- { /* https://fiffty.github.io/react-treeview-mui/ */}\r
- <List className={classes.menu} component="nav">\r
- <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} />\r
- <Divider />\r
- {\r
- menuItems\r
- }\r
- <Divider />\r
- <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} />\r
- {(false && process.env.NODE_ENV === "development")\r
- ? <>\r
- <Divider />\r
- <ListItemLink to="/test" primary="Test" icon={<FontAwesomeIcon icon={faHome} />} />\r
- </>\r
- : null\r
- }\r
- </List>\r
- {isOpen && extraLinks && <div className={classes.optLinks}>\r
- {extraLinks.map(linkInfo => (<a className={classes.link} href={linkInfo[1]}>{linkInfo[0]}</a>))}\r
- </div> || null}\r
- </> || null\r
- }\r
- </Drawer>)\r
-}));\r
-\r
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons';
+
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+
+import Divider from '@mui/material/Divider';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
+
+import ListItemLink from '../components/material-ui/listItemLink';
+
+import connect, { Connect } from '../flux/connect';
+import { MenuAction } from '../actions/menuAction';
+import * as classNames from 'classnames';
+import { transportPCEUrl } from '../app';
+
+
+const drawerWidth = 240;
+
+const extraLinks = (window as any)._odluxExtraLinks as [string, string][];
+
+const styles = (theme: Theme) => createStyles({
+ drawerPaper: {
+ position: 'relative',
+ width: drawerWidth,
+ },
+ toolbar: theme.mixins.toolbar as any,
+
+ drawerOpen: {
+ width: drawerWidth,
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ drawerClose: {
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ overflowX: 'hidden',
+ width: theme.spacing(7) + 1,
+ [theme.breakpoints.up('sm')]: {
+ width: theme.spacing(9) + 1,
+ },
+ },
+ drawer: {
+
+ },
+ menu: {
+ flex: "1 0 0%",
+ },
+ optLinks: {
+ borderTop: "2px solid #cfcfcf",
+ display: "flex",
+ flexDirection: "row",
+ flexWrap: "wrap",
+ justifyContent: "space-around"
+ },
+ link: {
+ margin: theme.spacing(1)+1,
+ fontSize: theme.typography.fontSize-2,
+ },
+});
+
+const tabletWidthBreakpoint = 768;
+
+export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, dispatch }: WithStyles<typeof styles> & Connect & Connect) => {
+ const { user } = state.framework.authenticationState;
+ const isOpen = state.framework.applicationState.isMenuOpen;
+ const closedByUser = state.framework.applicationState.isMenuClosedByUser;
+ const transportUrl = state.framework.applicationState.transportpceUrl;
+
+ const [responsive, setResponsive] = React.useState(false);
+
+ //collapse menu on mount if necessary
+ React.useEffect(()=>{
+
+ if(isOpen && window.innerWidth < tabletWidthBreakpoint){
+
+ setResponsive(true);
+ dispatch(new MenuAction(false));
+ }
+
+ },[]);
+
+ React.useEffect(() => {
+
+ function handleResize() {
+ if (user && user.isValid) {
+ if (window.innerWidth < tabletWidthBreakpoint && !responsive) {
+ setResponsive(true);
+ if (!closedByUser) {
+ console.log("responsive menu collapsed")
+ dispatch(new MenuAction(false));
+ }
+
+ } else if (window.innerWidth > tabletWidthBreakpoint && responsive) {
+ setResponsive(false);
+ if (!closedByUser) {
+ console.log("responsive menu restored")
+ dispatch(new MenuAction(true));
+ }
+
+ }
+ }
+ }
+ window.addEventListener("resize", handleResize);
+
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ }
+ })
+
+ React.useEffect(()=>{
+ // trigger a resize if menu changed in case elements have to re-arrange
+ window.dispatchEvent(new Event('menu-resized'));
+ }, [isOpen])
+
+ let menuItems = state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {
+ const reg = state.framework.applicationRegistraion[key];
+ return reg && (
+ <ListItemLink
+ key={reg.name}
+ to={reg.path || `/${reg.name}`}
+ primary={reg.menuEntry || reg.name}
+ secondary={reg.subMenuEntry}
+ icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />
+ ) || null;
+ }) || null;
+
+ if(transportUrl.length>0){
+
+ const transportPCELink = <ListItemLink
+ key={"transportPCE"}
+ to={transportUrl}
+ primary={"TransportPCE"}
+ icon={<FontAwesomeIcon icon={faProjectDiagram} />}
+ external />;
+
+ const linkFound = menuItems.find(obj => obj.key === "linkCalculation");
+
+ if (linkFound) {
+ const index = menuItems.indexOf(linkFound);
+ menuItems.splice(index + 1, 0, transportPCELink);
+ } else {
+ menuItems.push(transportPCELink);
+ }
+ }
+
+
+ return (
+ <Drawer
+ variant="permanent"
+ className={
+ classNames(classes.drawer, {
+ [classes.drawerOpen]: isOpen,
+ [classes.drawerClose]: !isOpen
+ })
+ }
+ classes={{
+ paper: classes.drawerPaper,
+ }}
+ >
+ {user && user.isValid && <>
+ <div className={classes.toolbar} />
+ { /* https://fiffty.github.io/react-treeview-mui/ */}
+ <List className={classes.menu} component="nav">
+ <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} />
+ <Divider />
+ {
+ menuItems
+ }
+ <Divider />
+ <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} />
+ {(false && process.env.NODE_ENV === "development")
+ ? <>
+ <Divider />
+ <ListItemLink to="/test" primary="Test" icon={<FontAwesomeIcon icon={faHome} />} />
+ </>
+ : null
+ }
+ </List>
+ {isOpen && extraLinks && <div className={classes.optLinks}>
+ {extraLinks.map(linkInfo => (<a className={classes.link} href={linkInfo[1]}>{linkInfo[0]}</a>))}
+ </div> || null}
+ </> || null
+ }
+ </Drawer>)
+}));
+
export default NavigationMenu;
\ No newline at end of file
Code Review / ccsdk / features.git / blobdiff