You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.1 KiB
123 lines
3.1 KiB
import { Component } from "react"; |
|
import "./index.css"; |
|
|
|
const maxDesktopSize = 1250; |
|
const maxMobileSize = 550; |
|
|
|
const fontSize = { |
|
desktop: { |
|
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
|
}, |
|
mobile: { |
|
div: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
|
}, |
|
}; |
|
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 ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<div className="timer d-flex mt-4"> |
|
<div |
|
style={{ |
|
color: "#a5a5a5", |
|
marginLeft: 5, |
|
fontSize: fontSize.desktop.div, |
|
fontFamily: "numeralLight", |
|
}} |
|
> |
|
{window.t("زمان باقیمانده تا انقضای کد:")} |
|
</div> |
|
<div style={{ fontSize: fontSize.desktop.div }}> |
|
{this.state.time.s} |
|
</div> |
|
: |
|
<div style={{ fontSize: fontSize.desktop.div }}> |
|
{this.state.time.m + this.state.time.h * 60} |
|
</div> |
|
</div> |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
<div className="timer d-flex mt-4"> |
|
<div |
|
style={{ |
|
color: "#a5a5a5", |
|
marginLeft: 5, |
|
fontSize: fontSize.mobile.div, |
|
}} |
|
> |
|
{window.t("زمان باقیمانده تا انقضای کد:")}{" "} |
|
</div> |
|
<div |
|
style={{ |
|
fontSize: fontSize.mobile.div, |
|
}} |
|
> |
|
{this.state.time.s} |
|
</div> |
|
: |
|
<div |
|
style={{ |
|
fontSize: fontSize.mobile.div, |
|
}} |
|
> |
|
{this.state.time.m + this.state.time.h * 60} |
|
</div> |
|
</div> |
|
) : null} |
|
</> |
|
); |
|
} |
|
}
|
|
|