sdnr/wt/odlux/framework/src/views/about.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 import * as React from 'react';
  19 import * as marked from 'marked';
  20 import * as hljs from 'highlight.js';
  21 import { requestRestExt } from '../services/restService';
  22 import { Button, Typography } from '@material-ui/core';
  23 const defaultRenderer = new marked.Renderer();
  24 defaultRenderer.link = (href, title, text) => (
  25   `<a target="_blank" rel="noopener noreferrer" href="${href}" title="${title}">${text}</a>`
  26 );
  27 interface AboutState {
  28   content: string | null;
  29   isCopiedSuccessfully: boolean;
  30   isContentLoadedSucessfully: boolean;
  31 }
  32
  33 class AboutComponent extends React.Component<any, AboutState> {
  34   textarea: React.RefObject<HTMLTextAreaElement>;
  35
  36
  37   constructor(props: any) {
  38     super(props);
  39     this.state = { content: null, isCopiedSuccessfully:false, isContentLoadedSucessfully: false }
  40     this.textarea = React.createRef();
  41     this.loadAboutContent();
  42   }
  43   private loadAboutContent(): void {
  44     requestRestExt<string>('/about').then((response) => {
  45       const content = response.status == 200 ? response.data : `${response.status} ${response.message}` || "Server error";
  46       const loadedSucessfully = response.status == 200 ? true : false;
  47       this.setState({ content: content, isContentLoadedSucessfully: loadedSucessfully });
  48     }).catch((error) => {
  49       this.setState({ content: error })
  50     })
  51   }
  52
  53   copyToClipboard = (e: React.MouseEvent<HTMLButtonElement>) =>{
  54     e.preventDefault();
  55
  56     if(this.textarea.current!==null){
  57       this.textarea.current.select();
  58       document.execCommand('copy');
  59       if(e.currentTarget != null){ // refocus on button, otherwhise the textarea would be focused
  60         e.currentTarget.focus();
  61       }
  62       this.setState({isCopiedSuccessfully: true});
  63       window.setTimeout(()=>{this.setState({isCopiedSuccessfully: false});},2000);
  64     }
  65   }
  66
  67   render() {
  68
  69     const markedOptions: marked.MarkedOptions = {
  70       gfm: true,
  71       breaks: false,
  72       pedantic: false,
  73       sanitize: true,
  74       smartLists: true,
  75       smartypants: false,
  76       langPrefix: 'hljs ',
  77       ...({}),
  78       highlight: (code, lang) => {
  79         if (!!(lang && hljs.getLanguage(lang))) {
  80           return hljs.highlight(lang, code).value;
  81         }
  82         return code;
  83       }
  84     };
  85
  86
  87     const className = "about-table"
  88     const style: React.CSSProperties = {};
  89     const containerStyle = { overflow: "auto", paddingRight: "20px" }
  90
  91     const html = (marked(this.state.content || 'loading', { renderer: markedOptions && markedOptions.renderer || defaultRenderer }));
  92
  93     return (
  94       <div style={containerStyle}>
  95         { this.state.isContentLoadedSucessfully &&
  96         <div style={{float: "right", marginRight: "10px"}}>
  97         <Button variant="contained" onClick={e => this.copyToClipboard(e)}>
  98            Copy to clipboard
  99         </Button>
 100           {
 101             this.state.isCopiedSuccessfully &&
 102             <Typography variant="body1" style={{color: "green"}} align="center">
 103              copied successfully
 104             </Typography>
 105           }
 106         </div>
 107       }
 108
 109         <div
 110           dangerouslySetInnerHTML={{ __html: html }}
 111           className={className}
 112           style={style}
 113         />
 114          <form>
 115           <textarea
 116            style={{opacity: ".01"}}
 117             ref={this.textarea}
 118             value={this.state.content || ''}
 119           />
 120         </form>
 121       </div>
 122     );
 123   }
 124 };
 125
 126 export const About = AboutComponent;
 127 export default About;