sdnr/wt/odlux/framework/src/components/navigationMenu.tsx

   1 /**\r
   2  * ============LICENSE_START========================================================================\r
   3  * ONAP : ccsdk feature sdnr wt odlux\r
   4  * =================================================================================================\r
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.\r
   6  * =================================================================================================\r
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except\r
   8  * in compliance with the License. You may obtain a copy of the License at\r
   9  *\r
  10  * http://www.apache.org/licenses/LICENSE-2.0\r
  11  *\r
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License\r
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express\r
  14  * or implied. See the License for the specific language governing permissions and limitations under\r
  15  * the License.\r
  16  * ============LICENSE_END==========================================================================\r
  17  */\r
  18 import * as React from 'react';\r
  19 import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';\r
  20 \r
  21 import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons';\r
  22 \r
  23 import Drawer from '@material-ui/core/Drawer';\r
  24 import List from '@material-ui/core/List';\r
  25 \r
  26 import Divider from '@material-ui/core/Divider';\r
  27 \r
  28 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r
  29 \r
  30 import ListItemLink from '../components/material-ui/listItemLink';\r
  31 \r
  32 import connect, { Connect, IDispatcher } from '../flux/connect';\r
  33 import { MenuAction } from '../actions/menuAction';\r
  34 import * as classNames from 'classnames';\r
  35 \r
  36 const drawerWidth = 240;\r
  37 \r
  38 const styles = (theme: Theme) => createStyles({\r
  39   drawerPaper: {\r
  40     position: 'relative',\r
  41     width: drawerWidth,\r
  42   },\r
  43   toolbar: theme.mixins.toolbar as any,\r
  44   drawerOpen: {\r
  45     width: drawerWidth,\r
  46     transition: theme.transitions.create('width', {\r
  47       easing: theme.transitions.easing.sharp,\r
  48       duration: theme.transitions.duration.enteringScreen,\r
  49     }),\r
  50   },\r
  51   drawerClose: {\r
  52     transition: theme.transitions.create('width', {\r
  53       easing: theme.transitions.easing.sharp,\r
  54       duration: theme.transitions.duration.leavingScreen,\r
  55     }),\r
  56     overflowX: 'hidden',\r
  57     width: theme.spacing(7) + 1,\r
  58     [theme.breakpoints.up('sm')]: {\r
  59       width: theme.spacing(9) + 1,\r
  60     },\r
  61   }\r
  62 });\r
  63 \r
  64 const tabletWidthBreakpoint = 768;\r
  65 \r
  66 export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, dispatch }: WithStyles<typeof styles> & Connect & Connect) => {\r
  67   const { user } = state.framework.authenticationState\r
  68   const isOpen = state.framework.applicationState.isMenuOpen\r
  69   const closedByUser = state.framework.applicationState.isMenuClosedByUser\r
  70 \r
  71   const [responsive, setResponsive] = React.useState(false);\r
  72 \r
  73   React.useEffect(() => {\r
  74 \r
  75     function handleResize() {\r
  76       if (user && user.isValid) {\r
  77         if (window.innerWidth < tabletWidthBreakpoint && !responsive) {\r
  78           setResponsive(true);\r
  79           if (!closedByUser) {\r
  80             console.log("responsive menu collapsed")\r
  81             dispatch(new MenuAction(false));\r
  82           }\r
  83 \r
  84         } else if (window.innerWidth > tabletWidthBreakpoint && responsive) {\r
  85           setResponsive(false);\r
  86           if (!closedByUser) {\r
  87             console.log("responsive menu restored")\r
  88             dispatch(new MenuAction(true));\r
  89           }\r
  90 \r
  91         }\r
  92       }\r
  93     }\r
  94     window.addEventListener("resize", handleResize);\r
  95 \r
  96 \r
  97     return () => {\r
  98       window.removeEventListener("resize", handleResize);\r
  99     }\r
 100   })\r
 101 \r
 102   return (\r
 103     <Drawer\r
 104       variant="permanent"\r
 105       className={\r
 106         classNames({\r
 107           [classes.drawerOpen]: isOpen,\r
 108           [classes.drawerClose]: !isOpen\r
 109         })\r
 110       }\r
 111       classes={{\r
 112         paper: classes.drawerPaper,\r
 113       }}\r
 114     >\r
 115       {user && user.isValid && <>\r
 116         <div className={classes.toolbar} />\r
 117         { /* https://fiffty.github.io/react-treeview-mui/ */}\r
 118         <List component="nav">\r
 119           <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} />\r
 120           <Divider />\r
 121           {\r
 122             state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {\r
 123               const reg = state.framework.applicationRegistraion[key];\r
 124               return reg && (\r
 125                 <ListItemLink\r
 126                   key={reg.name}\r
 127                   to={reg.path || `/${reg.name}`}\r
 128                   primary={reg.menuEntry || reg.name}\r
 129                   secondary={reg.subMenuEntry}\r
 130                   icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />\r
 131               ) || null;\r
 132             }) || null\r
 133           }\r
 134           <Divider />\r
 135           <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} />\r
 136           {(false && process.env.NODE_ENV === "development")\r
 137             ? <>\r
 138               <Divider />\r
 139               <ListItemLink to="/test" primary="Test" icon={<FontAwesomeIcon icon={faHome} />} />\r
 140             </>\r
 141             : null\r
 142           }\r
 143         </List>\r
 144       </> || null\r
 145       }\r
 146     </Drawer>)\r
 147 }));\r
 148 \r
 149 export default NavigationMenu;