-
Notifications
You must be signed in to change notification settings - Fork 0
/
CustomButton.js
executable file
·110 lines (91 loc) · 3.55 KB
/
CustomButton.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
import React from 'react';
import { TouchableHighlight, Alert, StyleSheet, Text, View, Button, Dimensions, Vibration } from 'react-native';
export default class CustomButton extends React.Component {
constructor(props) {
super(props);
this._onPressButton = this._onPressButton.bind(this);
this._startTest = this._startTest.bind(this);
this._stopTest = this._stopTest.bind(this);
this.heatMapColorforValue = this.heatMapColorforValue.bind(this)
this.state = {
testStarted: false,
startTime: -1,
elapsedTime: NaN,
};
}
// Called when button Appeares and wait for user to click, sets startTime
_startTest(){
//console.log("(" + this.props.rowNumber + "," + this.props.columnNumber+")_startTest()");
this.state.startTime = Date.now();
this.state.testStarted = true;
}
_stopTest(){
//console.log("(" + this.props.rowNumber + "," + this.props.columnNumber + ")_stopTest()");
this.state.testStarted = false;
let str = "Time elapsed: " + (new Date() - this.state.startTime);
this.state.elapsedTime = (new Date() - this.state.startTime);
//Alert.alert(str);
this.props.callbackFunc(this.props.rowNumber,this.props.columnNumber,this.state.elapsedTime);
// Callback!
}
_onPressButton(){
if (this.props.isCounting == 'true'){
Vibration.vibrate(500)
this._stopTest();
}
}
heatMapColorforValue(value) {
var h = (1.0 - value) * 240
return "hsl(" + h + ", 100%, 50%)";
}
render() {
if (this.props.doneWithTest && !isNaN(this.props.highestResult) && !isNaN(this.props.lowestResult)){
let maxMmin = this.props.highestResult - this.props.lowestResult
let valMmin = this.state.elapsedTime - this.props.lowestResult
let normalizedElapsed = valMmin / maxMmin
color = this.heatMapColorforValue(normalizedElapsed)
if (color == 'hsl(NaN, 100%, 50%)') { // Bug that heatMapColorforValue return null
color = 'rgb(255, 255, 255)'
}
return ( // Knapp av med resultat!
<TouchableHighlight underlayColor="black" style={[styles.buttonOff, {backgroundColor: color}]}>
<Text style={styles.textStajl}></Text>
</TouchableHighlight>
)
}else if (this.props.isCounting != 'true'){
this._startTest()
return ( // Knapp av
<TouchableHighlight underlayColor="black" style={styles.buttonOff}>
<Text style={styles.textStajl}></Text>
</TouchableHighlight>
)
} else if (this.state.testStarted){
return ( // Knapp på
<TouchableHighlight underlayColor="black" style={styles.button}>
<Text style={styles.textStajl}></Text>
</TouchableHighlight>
)
}
}
}
const styles = StyleSheet.create({
button: {
flex: 1,
backgroundColor: 'yellow',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 1,
},
buttonOff: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 1,
},
textStajl: {
color: 'blue',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 20,
}
});