Add TimerProgress componenet
This commit is contained in:
parent
4fade93b43
commit
6da5198c74
46
src/components/Authenicator/TimerProgress.tsx
Normal file
46
src/components/Authenicator/TimerProgress.tsx
Normal file
|
@ -0,0 +1,46 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const TimerProgress = ({ period }) => {
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [ticker, setTicker] = useState(null);
|
||||
const microSecondsInPeriod = period * 1000000;
|
||||
|
||||
const startTicker = () => {
|
||||
const ticker = setInterval(() => {
|
||||
updateTimeRemaining();
|
||||
}, 10);
|
||||
setTicker(ticker);
|
||||
};
|
||||
|
||||
const updateTimeRemaining = () => {
|
||||
const timeRemaining =
|
||||
microSecondsInPeriod -
|
||||
((new Date().getTime() * 1000) % microSecondsInPeriod);
|
||||
setProgress(timeRemaining / microSecondsInPeriod);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
startTicker();
|
||||
return () => clearInterval(ticker);
|
||||
}, []);
|
||||
|
||||
const color = progress > 0.4 ? 'green' : 'orange';
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '3px',
|
||||
backgroundColor: 'transparent',
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
width: `${progress * 100}%`,
|
||||
height: '100%',
|
||||
backgroundColor: color,
|
||||
}}></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimerProgress;
|
Loading…
Reference in a new issue