1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import { useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'
import { List, ListItemText, Tooltip, Popover } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import './Helper/SchematicEditor.css'
import { AddComponent } from './Helper/SideBar'
const useStyles = makeStyles((theme) => ({
popupInfo: {
margin: theme.spacing(1.5),
padding: theme.spacing(1.5),
border: '1px solid blue',
borderRadius: '5px'
}
}))
export default function SideComp ({ component }) {
const classes = useStyles()
const imageRef = useRef()
const [anchorEl, setAnchorEl] = useState(null)
const handleClick = (event) => {
setAnchorEl(event.currentTarget)
}
const handleClose = () => {
setAnchorEl(null)
}
const open = Boolean(anchorEl)
const id = open ? 'simple-popover' : undefined
useEffect(() => {
// Function call to make components draggable
AddComponent(component, imageRef.current)
}, [component])
const link1 = process.env.REACT_APP_BLOCK_NAME + ' Name'
const link2 = process.env.REACT_APP_CATEGORY_NAME
const link3 = process.env.REACT_APP_CATEGORIES_NAME
return (
<div>
<Tooltip title={component.name} arrow>
{/* Display Image thumbnail in left side pane */}
<img ref={imageRef} className='compImage' src={'/django_static/' + component.block_image_path} alt={component.name} aria-describedby={id} onClick={handleClick} />
</Tooltip>
{/* Popover to display component information on single click */}
<Popover
id={id}
open={open}
className={classes.popup}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
>
<List component='div' className={classes.popupInfo} disablePadding dense>
<ListItemText>
<b>{link1}:</b> {component.name}
</ListItemText>
{
component.categories.length === 1 &&
<ListItemText>
<b>{link2}:</b> {component.categories[0].name}
</ListItemText>
}
{
component.categories.length > 1 &&
<ListItemText>
<b>{link3}:</b> {component.categories.map((c) => <li key={c.id}>{c.name}</li>)}
</ListItemText>
}
</List>
</Popover>
</div>
)
}
SideComp.propTypes = {
component: PropTypes.object.isRequired
}
|
