1 | import React from 'react';
|
2 | import brighten from './brighten';
|
3 | import shouldPureComponentUpdate from 'react-pure-render/function';
|
4 |
|
5 | const styles = {
|
6 | base: {
|
7 | cursor: 'pointer',
|
8 | fontWeight: 'bold',
|
9 | borderRadius: 3,
|
10 | padding: 4,
|
11 | marginLeft: 3,
|
12 | marginRight: 3,
|
13 | marginTop: 5,
|
14 | marginBottom: 5,
|
15 | flexGrow: 1,
|
16 | display: 'inline-block',
|
17 | fontSize: '0.8em',
|
18 | color: 'white',
|
19 | textDecoration: 'none'
|
20 | }
|
21 | };
|
22 |
|
23 | export default class LogMonitorButton extends React.Component {
|
24 | shouldComponentUpdate = shouldPureComponentUpdate;
|
25 |
|
26 | constructor(props) {
|
27 | super(props);
|
28 |
|
29 | this.handleMouseEnter = this.handleMouseEnter.bind(this);
|
30 | this.handleMouseLeave = this.handleMouseLeave.bind(this);
|
31 | this.handleMouseDown = this.handleMouseDown.bind(this);
|
32 | this.handleMouseUp = this.handleMouseUp.bind(this);
|
33 | this.onClick = this.onClick.bind(this);
|
34 |
|
35 | this.state = {
|
36 | hovered: false,
|
37 | active: false
|
38 | };
|
39 | }
|
40 |
|
41 | handleMouseEnter() {
|
42 | this.setState({ hovered: true });
|
43 | }
|
44 |
|
45 | handleMouseLeave() {
|
46 | this.setState({ hovered: false });
|
47 | }
|
48 |
|
49 | handleMouseDown() {
|
50 | this.setState({ active: true });
|
51 | }
|
52 |
|
53 | handleMouseUp() {
|
54 | this.setState({ active: false });
|
55 | }
|
56 |
|
57 | onClick() {
|
58 | if (!this.props.enabled) {
|
59 | return;
|
60 | }
|
61 | if (this.props.onClick) {
|
62 | this.props.onClick();
|
63 | }
|
64 | }
|
65 |
|
66 | render() {
|
67 | let style = {
|
68 | ...styles.base,
|
69 | backgroundColor: this.props.theme.base02
|
70 | };
|
71 | if (this.props.enabled && this.state.hovered) {
|
72 | style = {
|
73 | ...style,
|
74 | backgroundColor: brighten(this.props.theme.base02, 0.2)
|
75 | };
|
76 | }
|
77 | if (!this.props.enabled) {
|
78 | style = {
|
79 | ...style,
|
80 | opacity: 0.2,
|
81 | cursor: 'text',
|
82 | backgroundColor: 'transparent'
|
83 | };
|
84 | }
|
85 | return (
|
86 | <a
|
87 | onMouseEnter={this.handleMouseEnter}
|
88 | onMouseLeave={this.handleMouseLeave}
|
89 | onMouseDown={this.handleMouseDown}
|
90 | onMouseUp={this.handleMouseUp}
|
91 | onClick={this.onClick}
|
92 | style={style}
|
93 | >
|
94 | {this.props.children}
|
95 | </a>
|
96 | );
|
97 | }
|
98 | }
|