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
10 * http://www.apache.org/licenses/LICENSE-2.0
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
16 * ============LICENSE_END==========================================================================
19 import React, { useState } from 'react';
20 import { Tooltip, Button, FormControl, Theme } from '@mui/material';
22 import createStyles from '@mui/styles/createStyles';
23 import makeStyles from '@mui/styles/makeStyles';
25 import { ViewElement } from '../models/uiModels';
27 const useStyles = makeStyles((theme: Theme) => createStyles({
29 "justifyContent": "left"
33 type UIElementReferenceProps = {
36 onOpenReference(element: ViewElement): void;
39 export const UIElementReference: React.FC<UIElementReferenceProps> = (props) => {
40 const classes = useStyles();
41 const [disabled, setDisabled] = useState(true);
42 const { element } = props;
44 <FormControl variant="standard" key={element.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }} onMouseDown={(ev) => { ev.preventDefault(); ev.stopPropagation(); ev.button === 1 && setDisabled(!disabled) }}>
45 <Tooltip disableInteractive title={element.description || element.path || ''}>
46 <Button className={classes.button} aria-label={element.label+'-button'} color="secondary" disabled={props.disabled && disabled} onClick={() => {
47 props.onOpenReference(element);
48 }} >{`${element.label}`}</Button>