sdnr/wt-odlux/odlux/apps/configurationApp/src/components/ifWhenTextInput.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 React from 'react';
  20 import InputAdornment from '@mui/material/InputAdornment';
  21 import Input, { InputProps } from '@mui/material/Input';
  22 import Tooltip from '@mui/material/Tooltip';
  23 import FormControl from '@mui/material/FormControl';
  24 import InputLabel from '@mui/material/InputLabel';
  25 import FormHelperText from '@mui/material/FormHelperText';
  26
  27 import makeStyles from '@mui/styles/makeStyles';
  28 import createStyles from '@mui/styles/createStyles';
  29
  30 import { faAdjust } from '@fortawesome/free-solid-svg-icons/faAdjust';
  31 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  32
  33 import { ViewElementBase } from '../models/uiModels';
  34
  35 const useStyles = makeStyles(() =>
  36   createStyles({
  37     iconDark: {
  38       color: '#ff8800',
  39     },
  40     iconLight: {
  41       color: 'orange',
  42     },
  43     padding: {
  44       paddingLeft: 10,
  45       paddingRight: 10,
  46     },
  47   }),
  48 );
  49
  50 type IfWhenProps = InputProps & {
  51   label: string;
  52   element: ViewElementBase;
  53   helperText: string;
  54   error: boolean;
  55   onChangeTooltipVisibility(value: boolean): void;
  56 };
  57
  58 export const IfWhenTextInput = (props: IfWhenProps) => {
  59
  60   const { element, id, label, helperText: errorText, error, style, ...otherProps } = props;
  61   const classes = useStyles();
  62
  63   const ifFeature = element.ifFeature
  64     ? (
  65       <Tooltip
  66         title={element.ifFeature}
  67         disableInteractive
  68         onMouseMove={() => props.onChangeTooltipVisibility(false)}
  69         onMouseOut={() => props.onChangeTooltipVisibility(true)}
  70       >
  71           <InputAdornment position="start">
  72             <FontAwesomeIcon icon={faAdjust} className={classes.iconDark} />
  73           </InputAdornment>
  74         </Tooltip>
  75     )
  76     : null;
  77
  78   const whenFeature = element.when
  79     ? (
  80       <Tooltip
  81         title={element.when}
  82         disableInteractive
  83         className={classes.padding}
  84         onMouseMove={() => props.onChangeTooltipVisibility(false)}
  85         onMouseOut={() => props.onChangeTooltipVisibility(true)}
  86       >
  87           <InputAdornment className={classes.padding} position="end">
  88             <FontAwesomeIcon icon={faAdjust} className={classes.iconLight}/>
  89           </InputAdornment>
  90         </Tooltip>
  91     )
  92     : null;
  93
  94   return (
  95     <FormControl variant="standard" error={error} style={style}>
  96       <InputLabel htmlFor={id} >{label}</InputLabel>
  97       <Input id={id} inputProps={{ 'aria-label': label + '-input' }} endAdornment={<div>{ifFeature}{whenFeature}</div>} {...otherProps}  />
  98       <FormHelperText>{errorText}</FormHelperText>
  99     </FormControl>
 100   );
 101 };