Compare commits
No commits in common. '087526d1c620c02f6bdde544b0c6d5e66cac4c9c' and 'cf527dea8608eaf3f38efc644fb1c031b3aba3c8' have entirely different histories.
087526d1c6
...
cf527dea86
15 changed files with 84 additions and 263 deletions
@ -1,5 +0,0 @@ |
|||||||
{ |
|
||||||
"recommendations": [ |
|
||||||
"rvest.vs-code-prettier-eslint" |
|
||||||
] |
|
||||||
} |
|
@ -1,5 +0,0 @@ |
|||||||
.timer{ |
|
||||||
flex-direction: row; |
|
||||||
direction: rtl !important; |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
@ -1,66 +0,0 @@ |
|||||||
import { Component } from 'react'; |
|
||||||
import './Timer.css'; |
|
||||||
|
|
||||||
export default class Timer extends Component { |
|
||||||
constructor(props) { |
|
||||||
super(props); |
|
||||||
this.state = { time: {}, seconds: this.props.seconds, flag: true, }; |
|
||||||
this.timer = 0; |
|
||||||
this.startTimer = this.startTimer.bind(this); |
|
||||||
this.countDown = this.countDown.bind(this); |
|
||||||
} |
|
||||||
|
|
||||||
secondsToTime(secs) { |
|
||||||
let hours = Math.floor(secs / (60 * 60)); |
|
||||||
|
|
||||||
let divisor_for_minutes = secs % (60 * 60); |
|
||||||
let minutes = Math.floor(divisor_for_minutes / 60); |
|
||||||
|
|
||||||
let divisor_for_seconds = divisor_for_minutes % 60; |
|
||||||
let seconds = Math.ceil(divisor_for_seconds); |
|
||||||
|
|
||||||
let obj = { |
|
||||||
"h": hours, |
|
||||||
"m": minutes, |
|
||||||
"s": seconds |
|
||||||
}; |
|
||||||
return obj; |
|
||||||
} |
|
||||||
|
|
||||||
componentDidMount() { |
|
||||||
this.startTimer(); |
|
||||||
let timeLeftVar = this.secondsToTime(this.state.seconds); |
|
||||||
this.setState({ time: timeLeftVar }); |
|
||||||
} |
|
||||||
|
|
||||||
startTimer() { |
|
||||||
if (this.timer === 0 && this.state.seconds > 0) { |
|
||||||
this.timer = setInterval(this.countDown, 1000); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
countDown = async () => { |
|
||||||
// Remove one second, set state so a re-render happens.
|
|
||||||
let seconds = this.state.seconds - 1; |
|
||||||
this.setState({ |
|
||||||
time: this.secondsToTime(seconds), |
|
||||||
seconds: seconds, |
|
||||||
}); |
|
||||||
if (seconds === 0) { |
|
||||||
this.props.parent.setState({ resendStatus : true }); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
componentWillUnmount() { |
|
||||||
clearInterval(this.timer); |
|
||||||
} |
|
||||||
render() { |
|
||||||
return ( |
|
||||||
<div className="timer logo__footer d-flex" style={{ top : 150,color : 'blue' }}> |
|
||||||
<div className="ml-2">دریافت مجدد کد در</div> |
|
||||||
<div>{this.state.time.s}</div>:<div>{this.state.time.m+this.state.time.h*60}</div> |
|
||||||
<div className="mr-2">دیگر</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
Loading…
Reference in new issue