-
Notifications
You must be signed in to change notification settings - Fork 4
/
TimerProgress.js
76 lines (68 loc) · 1.8 KB
/
TimerProgress.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
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: MIT-0
import React from "react";
import Progress from "./Progress.js";
export default class TimerProgress extends React.Component {
/**
* Constructor
* @param {Object} props Our initial React object properties
*/
constructor(props) {
super(props);
this.state = {
ticks: 0,
value: 0,
};
this.timer = 0;
this.tick = this.tick.bind(this);
}
/**
* Function to check if our timer has hit its trigger level, and raise an event if it has
*/
tick() {
this.setState({ ticks: this.state.ticks + 1 });
if (this.state.ticks > this.props.size) {
this.reset();
this.props.triggered();
}
this.calculatePercent();
}
/**
* Function to handle our start event, creating a new 1 second callback timer
*/
start() {
if (!this.timer) {
this.timer = setInterval(this.tick, 1000);
}
}
/**
* Function to handle our stop event─ clears the timer and resets it
*/
stop() {
if (this.timer) {
clearInterval(this.timer);
this.timer = 0;
}
}
/**
* Function to reset our internal tick count
*/
reset() {
this.setState({ ticks: 0 });
}
/**
* Function to update our percentage of progress to the timeout stage
*/
calculatePercent() {
let percent = parseInt((this.state.ticks / this.props.size) * 100);
this.setState({ value: percent });
}
/**
* Function to render our UI
*/
render() {
return (
<Progress key={this.key} display="False" value={this.state.value} />
);
}
}