sdnr/wt-odlux/odlux/apps/helpApp/src/components/tocEntry.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 import * as React from "react"
  20 import { TocTreeNode } from "../models/tocNode"
  21 import { Typography, Link, Theme } from "@mui/material";
  22
  23 import makeStyles from '@mui/styles/makeStyles';
  24 import createStyles from '@mui/styles/createStyles';
  25
  26 const useStyles = makeStyles((theme: Theme) =>
  27     createStyles({
  28         link: {
  29             color: "blue",
  30         },
  31         sublink: {
  32             margin: theme.spacing(1),
  33             color: "blue",
  34         },
  35         container: {
  36             display: "flex",
  37             flexDirection: "row",
  38             flexWrap: "wrap",
  39         }
  40     }),
  41 );
  42
  43 type tocEntryProps = {
  44     label: string,
  45     overviewUri: string,
  46     nodes?: TocTreeNode[],
  47     loadDocument(uri: string): any
  48 }
  49
  50 const TocEntry: React.FunctionComponent<tocEntryProps> = (props) => {
  51     const classes = useStyles();
  52     const areNodesEmpty = !props.nodes || props.nodes.length === 0
  53
  54     const navigate = (event: React.SyntheticEvent, uri: string) => {
  55         event.preventDefault();
  56         event.stopPropagation();
  57         props.loadDocument(uri);
  58     }
  59
  60     return (<div>
  61         {
  62             areNodesEmpty ? <Typography variant="h6">
  63                 <Link underline="hover" onClick={(event: any) => navigate(event, props.overviewUri)} className={classes.link}> {props.label}</Link>
  64             </Typography> :
  65                 <>
  66                     <Typography variant="h6">
  67                         {props.label}
  68                     </Typography>
  69                     <div className={classes.container}>
  70                         <Typography variant="body1">
  71                             <Link underline="hover" onClick={(event: any) => navigate(event, props.overviewUri)} className={classes.sublink}>Overview</Link>
  72                         </Typography>
  73                         {props.nodes !== undefined && props.nodes.map((item, index) =>
  74                             <Typography variant="body1" key={index + 'x' + item.id}>
  75                                 <Link underline="hover" onClick={(event: any) => navigate(event, item.uri)} className={classes.sublink}>{item.label}</Link>
  76                             </Typography>
  77                         )}
  78                     </div>
  79                 </>
  80         }
  81     </div >)
  82 }
  83
  84
  85 export default TocEntry;