-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
69 lines (61 loc) · 2.13 KB
/
App.tsx
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
import React from 'react';
import logo from './logo.svg';
import './App.scss';
import {useStopwatch} from "react-timer-hook";
const ResetButton = (props: {clickEvent:() => void}): JSX.Element => {
return (<button onClick={props.clickEvent}>RESET</button>)
}
const StartPauseButton = (props: {running: boolean, clickEvent: () => void}): JSX.Element => {
if (!props.running) {
return (<button onClick={props.clickEvent}>START</button>)
}
return (<button onClick={props.clickEvent}>PAUSE</button>)
}
const elapse = (running: boolean, hours: number, minutes: number, seconds:number): string => {
return hours.toString().padStart(2, '0')
+ ':' + minutes.toString().padStart(2, '0')
+ ':' + seconds.toString().padStart(2, '0');
}
function App() {
const {
seconds,
minutes,
hours,
isRunning,
start,
pause,
reset
} = useStopwatch({autoStart: false});
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo"/> Stop Watch
</header>
<section className='main'>
<div>
<div className='timer'>
{elapse(isRunning, hours, minutes, seconds)}
</div>
</div>
<div className='buttons'>
<ResetButton clickEvent={() => {
// 2回ボタンを押すとちゃんとリセットされるんだけど…
reset();
pause();
}} />
<StartPauseButton running={isRunning} clickEvent={() => {
if (isRunning) {
pause();
} else {
start();
}
}} />
</div>
</section>
<footer>
<a className='App-link' href='https://github.com/satoshi-nishinaka/stop-watch'>satoshi-nishinaka/stop-watch</a>
</footer>
</div>
);
}
export default App;