Merge branch 'front' of https://git.sitenevis.com/Reza_ashrafi/ChatPWA into front
commit
1f41ec6a12
15 changed files with 263 additions and 83 deletions
@ -0,0 +1,5 @@ |
|||||||
|
{ |
||||||
|
"recommendations": [ |
||||||
|
"rvest.vs-code-prettier-eslint" |
||||||
|
] |
||||||
|
} |
@ -0,0 +1,5 @@ |
|||||||
|
.timer{ |
||||||
|
flex-direction: row; |
||||||
|
direction: rtl !important; |
||||||
|
margin-right: 10px; |
||||||
|
} |
@ -0,0 +1,66 @@ |
|||||||
|
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