This repository has been archived by the owner on Apr 11, 2023. It is now read-only.
/
SpeedDialMenu.js
141 lines (129 loc) · 4.8 KB
/
SpeedDialMenu.js
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { constants } from './../../redux/modules/Widgets';
import * as labels from './../../constants';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import VisibilityIcon from '@material-ui/icons/Visibility';
import AccessTimeIcon from '@material-ui/icons/AccessTime';
import ChartIcon from '@material-ui/icons/Timeline';
import LayersIcon from '@material-ui/icons/Layers';
import MapControlsIcon from '@material-ui/icons/MyLocation';
import InfoIcon from '@material-ui/icons/Description';
import DrawIcon from '@material-ui/icons/FormatShapes'
const styles = theme => {
// console.log(theme)
return ({
speedDial: {
position: 'fixed',
bottom: theme.spacing.unit * 4,
left: theme.spacing.unit * 5,
},
white: {
color: theme.palette.primary.contrastText
},
})
};
class SpeedDialMenu extends React.Component {
state = {
open: false
};
wrapperRef = null;
static propTypes = {
classes: PropTypes.object.isRequired,
toggleWidget: PropTypes.func.isRequired,
widgets: PropTypes.object.isRequired,
};
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
}
onToggleClicked = () => {
this.setState({
open: !this.state.open,
});
};
handleClickOutside = (event) => {
// If clicking outside the popover when its open, close it
if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
this.setState({open: false});
}
};
setWrapperRef = (node) => {
this.wrapperRef = node;
};
handleToggleWidget = widgetName => event => {
this.props.toggleWidget(widgetName);
};
render() {
const { classes } = this.props;
const { open } = this.state;
return (
<div ref={this.setWrapperRef}>
<SpeedDial
ariaLabel="SpeedDial openIcon example"
className={classes.speedDial}
icon={<SpeedDialIcon openIcon={<VisibilityIcon />} />}
onClick={this.onToggleClicked}
ButtonProps={{
id: "cy-speed-dial-menu-btn"
}}
open={open}>
<SpeedDialAction
icon={<LayersIcon className={classes.white}/>}
tooltipTitle={labels.LAYER_SWITCHER_WIDGET_TITLE}
onClick={this.handleToggleWidget(constants.WIDGET_LAYER_SWITCHER_KEY)}
ButtonProps={{
id: "cy-menu-layer-switcher-toggle-btn",
color: this.props.widgets.layerSwitcher? 'primary': 'secondary'
}} />
<SpeedDialAction
icon={<MapControlsIcon className={classes.white} />}
tooltipTitle={labels.MAP_CONTROLS_WIDGET_TITLE}
onClick={this.handleToggleWidget(constants.WIDGET_MAP_CONTROLS_KEY)}
ButtonProps={{
id: "cy-menu-map-controls-toggle-btn",
color: this.props.widgets.mapControls? 'primary': 'secondary'
}} />
<SpeedDialAction
icon={<AccessTimeIcon className={classes.white}/>}
tooltipTitle={labels.TIME_SLIDER_WIDGET_TITLE}
onClick={this.handleToggleWidget(constants.WIDGET_TIME_SLIDER_KEY)}
ButtonProps={{
id: "cy-menu-temporal-slider-toggle-btn",
color: this.props.widgets.timeSlider? 'primary': 'secondary'
}} />
<SpeedDialAction
icon={<ChartIcon className={classes.white}/>}
tooltipTitle={labels.CHART_WIDGET_TITLE}
onClick={this.handleToggleWidget(constants.WIDGET_CHART_KEY)}
ButtonProps={{
id: "cy-menu-time-series-toggle-btn",
color: this.props.widgets.chart? 'primary': 'secondary'
}} />
<SpeedDialAction
icon={<InfoIcon className={classes.white}/>}
tooltipTitle={labels.INFO_WIDGET_TITLE}
onClick={this.handleToggleWidget(constants.WIDGET_INFO_KEY)}
ButtonProps={{
id: "cy-menu-point-info-toggle-btn",
color: this.props.widgets.info? 'primary': 'secondary'
}} />
<SpeedDialAction
icon={<DrawIcon className={classes.white}/>}
tooltipTitle={labels.CUSTOM_REGIONS_WIDGET_TITLE}
onClick={this.handleToggleWidget(constants.WIDGET_CUSTOM_REGIONS_KEY)}
ButtonProps={{
id: "cy-menu-custom-regions-toggle-btn",
color: this.props.widgets.customRegions? 'primary': 'secondary'
}} />
</SpeedDial>
</div>
);
}
}
export default withStyles(styles)(SpeedDialMenu);