var Button React createClass getDefaultProps function return width 150

 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
var Button = React.createClass({
getDefaultProps: function() {
return {
width: 150,
height: 30,
fontSize: 16,
title: "button"
};
},
componentDidMount: function() {
this.canvas = this.refs.btn.getDOMNode()
this.canvas.width = this.props.width
this.canvas.height = this.props.height
this.context = this.canvas.getContext('2d')
this.draw()
},
click() {
this.clicking = true
this.draw()
},
unclick() {
this.clicking = false
this.draw()
},
highlight() {
this.highlighted = true
this.draw()
},
unhighlight() {
this.highlighted = false
this.draw()
},
draw() {
this.context.rect(0, 0, this.canvas.width, this.canvas.height)
this.context.fillStyle = "black";
this.context.fill();
var gradient = this.context.createRadialGradient(this.canvas.width / 2,
this.canvas.height / 2,
0.000,
this.canvas.width / 2,
this.canvas.height / 2,
(this.canvas.width + this.canvas.height) * 2);
if (this.highlighted) {
if (this.clicking) {
gradient.addColorStop(0.000, 'rgba(0,100,150, 1.000)');
}
else {
gradient.addColorStop(0.000, 'rgba(0,10,50, 1.000)');
}
gradient.addColorStop(1.000, 'rgba(0, 255, 255, 1.000)');
} else {
gradient.addColorStop(0.000, 'rgba(0,0,0, 1.000)');
gradient.addColorStop(1.000, 'rgba(0, 230, 250, 1.000)');
}
this.context.fillStyle = gradient;
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
if (this.highlighted) {
this.context.lineWidth = 5
this.context.strokeStyle = "#00EEFF";
} else {
this.context.lineWidth = 3
this.context.strokeStyle = "#00BBAA";
}
this.context.rect(0, 0, this.canvas.width, this.canvas.height)
this.context.stroke()
this.context.font = this.props.fontSize + "px Orbitron";
var metrics = this.context.measureText(this.props.title.toUpperCase());
var posX = (this.canvas.width - metrics.width) / 2
var posY = this.canvas.height - (this.canvas.height - this.props.fontSize) + (this.canvas.height - this.props.fontSize)/4
this.context.fillStyle = "rgb(215,225,255)";
this.context.fillText(this.props.title.toUpperCase(), posX, posY);
},
render() {
var canvas = <canvas ref="btn" onMouseOver={this.highlight} onMouseOut={this.unhighlight} onMouseDown={this.click} onMouseUp={this.unclick} />
return canvas;
}
});