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

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}
</>
);
}
}