-
-
Notifications
You must be signed in to change notification settings - Fork 102
/
MenuPanel.js
70 lines (61 loc) · 1.8 KB
/
MenuPanel.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
import ModalBox from './ModalBox';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import classnames from 'classnames';
import {QuestionIcon, CogIcon} from 'plotly-icons';
export default class MenuPanel extends Component {
constructor() {
super();
this.state = {isOpen: false};
this.togglePanel = this.togglePanel.bind(this);
}
getIcon() {
const {question, icon: Icon} = this.props;
if (question) {
return {
icon: <QuestionIcon className="menupanel__icon" />,
spanClass: `menupanel__icon-span menupanel__icon-span--question`,
};
}
if (Icon) {
return {
icon: <Icon className="menupanel__icon" />,
spanClass: `menupanel__icon-span`,
};
}
return {
icon: <CogIcon className="menupanel__icon" />,
spanClass: 'menupanel__icon-span menupanel__icon-span--cog',
};
}
togglePanel() {
this.setState({isOpen: !this.state.isOpen});
}
render() {
const {show, ownline, label, children} = this.props;
const isOpen = show || this.state.isOpen;
const containerClass = classnames('menupanel', {
'menupanel--ownline': ownline,
});
const {icon, spanClass} = this.getIcon();
return (
<div className={containerClass}>
<div className={spanClass}>
<div className="menupanel__label">{label}</div>
<div className="menupanel__icon__wrapper" onClick={this.togglePanel}>
{icon}
</div>
</div>
{isOpen && <ModalBox onClose={this.togglePanel}>{children}</ModalBox>}
</div>
);
}
}
MenuPanel.propTypes = {
children: PropTypes.node,
icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
label: PropTypes.string,
ownline: PropTypes.bool,
question: PropTypes.bool,
show: PropTypes.bool,
};