-
Notifications
You must be signed in to change notification settings - Fork 12
/
ConfigSelect.jsx
106 lines (94 loc) · 3.1 KB
/
ConfigSelect.jsx
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
97
98
99
100
101
102
103
104
105
106
import React from 'react';
import { Tooltip, MenuItem, Menu, ButtonGroup, Button } from '@mui/material'
import {
ArrowDropDown as ArrowDropDownIcon
} from '@mui/icons-material'
import { map, get } from 'lodash';
import ResponsiveDrawer from './ResponsiveDrawer';
import ViewConfigForm from './ViewConfigForm';
import { BLUE, WHITE } from '../../common/constants';
const ConfigSelect = ({configs, selected, onChange, color, resourceURL, onWidthChange, ...rest}) => {
const [drawer, setDrawer] = React.useState(false);
const [open, setOpen] = React.useState(false);
const [anchorEl, setAnchorEl] = React.useState(null);
const [preview, setPreviewConfig] = React.useState(null);
const toggleOpen = event => {
const newOpen = !open
setOpen(newOpen)
setAnchorEl(newOpen ? event.currentTarget : null)
}
const _onChange = (event, config) => {
event.persist();
setPreviewConfig(null)
onChange(config)
toggleOpen(event)
}
const onIconClick = event => {
event.stopPropagation();
event.preventDefault();
setDrawer(!drawer)
onWidthChange(drawer ? 0 : 360)
}
const getLabel = () => {
const name = get(selected, 'name')
return preview ? `Preview : ${name || 'New Configuration'}` : `Layout : ${name}`;
}
const onCancel = () => {
setDrawer(false)
onWidthChange(0)
}
return (
<span>
<ButtonGroup style={{backgroundColor: preview ? BLUE : color}} size='small'>
<Tooltip arrow title='View Configuration'>
<Button style={{borderColor: WHITE, maxWidth: '200px', color: WHITE, textTransform: 'revert', letterSpacing: 'unset', overflow: 'hidden', whiteSpace: 'nowrap'}} onClick={onIconClick}>
{getLabel()}
</Button>
</Tooltip>
<Tooltip arrow title='Switch Configuration'>
<Button style={{color: WHITE, borderColor: WHITE}} onClick={toggleOpen}>
<ArrowDropDownIcon style={{width: '18px'}} />
</Button>
</Tooltip>
</ButtonGroup>
<Menu
id="results-size-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={toggleOpen}
>
{
map(configs, config => (
<MenuItem key={config.name} onClick={event => _onChange(event, config)}>
{config.name}
</MenuItem>
))
}
</Menu>
{
drawer &&
<ResponsiveDrawer
variant='persistent'
isOpen={drawer}
onClose={() => setDrawer(false)}
onWidthChange={onWidthChange}
formComponent={
<ViewConfigForm
reloadOnSuccess
previewFields={get(preview, 'fields')}
selected={get(preview, 'selected') || selected}
configs={configs}
onCancel={onCancel}
resourceURL={resourceURL}
onChange={onChange}
onPreview={setPreviewConfig}
{...rest}
/>
}
/>
}
</span>
)
}
export default ConfigSelect;