sdnr/wt-odlux/odlux/framework/src/components/logo.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18 /******************************************************************************
  19  * Copyright 2018 highstreet technologies GmbH
  20  *
  21  * Licensed under the Apache License, Version 2.0 (the "License");
  22  * you may not use this file except in compliance with the License.
  23  * You may obtain a copy of the License at
  24  *
  25  *     http://www.apache.org/licenses/LICENSE-2.0
  26  *
  27  * Unless required by applicable law or agreed to in writing, software
  28  * distributed under the License is distributed on an "AS IS" BASIS,
  29  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  30  * See the License for the specific language governing permissions and
  31  * limitations under the License.
  32  *****************************************************************************/
  33
  34 import * as React from 'react';
  35 import { withRouter, RouteComponentProps } from 'react-router-dom';
  36
  37 import { Theme } from '@mui/material/styles'; // infra for styling
  38
  39
  40 import { WithStyles } from '@mui/styles';
  41 import withStyles from '@mui/styles/withStyles';
  42 import createStyles from '@mui/styles/createStyles';
  43
  44
  45 const defaultLogo = require('../assets/icons/ht.Connect.svg');
  46
  47 const styles = (theme: Theme) => createStyles({
  48   headerLogo: {
  49     backgroundImage: "url(" + (theme.design && theme.design.url || defaultLogo) + ")",
  50     backgroundColor: theme.palette.primary.main,
  51     backgroundRepeat: "no-repeat",
  52     backgroundSize: "auto " + (theme.design && theme.design.logoHeight || 70) + "px",
  53     height: theme.design && theme.design.logoHeight || 70,
  54     width: theme.design ? theme.design.width / theme.design.height * theme.design.logoHeight : 220
  55   }
  56 });
  57
  58 type LogoProps = RouteComponentProps<{ id: string }> & WithStyles<typeof styles>;
  59 interface ILogoState {
  60   windowWidth: number
  61 }
  62
  63 class LogoComponent extends React.Component<LogoProps, ILogoState> {
  64
  65   private hideLogoWhenWindowWidthIsLower: number = 800;
  66
  67   constructor(props: LogoProps) {
  68     super(props);
  69     this.state = {
  70       windowWidth: 0
  71     };
  72     this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
  73   }
  74
  75   componentDidMount(): void {
  76     this.updateWindowDimensions();
  77     window.addEventListener('resize', this.updateWindowDimensions);
  78   };
  79   componentWillUnmount(): void {
  80     window.removeEventListener('resize', this.updateWindowDimensions);
  81   };
  82   updateWindowDimensions(): void {
  83     this.setState({ windowWidth: window.innerWidth });
  84   }
  85
  86   render(): JSX.Element {
  87     let div: JSX.Element = <div />;
  88     if (this.state.windowWidth >= this.hideLogoWhenWindowWidthIsLower) {
  89       div = <div className={this.props.classes.headerLogo} />;
  90     } else {
  91       console.info([
  92         "Logo hidden, because browser window width (",
  93         this.state.windowWidth,
  94         "px) is lower threshold (",
  95         this.hideLogoWhenWindowWidthIsLower,
  96         "px)."].join(''));
  97     }
  98     return div;
  99   }
 100 }
 101
 102 export const Logo = withStyles(styles)(withRouter(LogoComponent));
 103 export default Logo;