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.
 
 
 

100 lines
2.6 KiB

import { Component } from "react";
import "./index.css";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
},
};
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",
}}
>
زمان باقیمانده تا انقضای کد:
</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 }}>
زمان باقیمانده تا انقضای کد
</div>
<div>{this.state.time.s}</div>:
<div>{this.state.time.m + this.state.time.h * 60}</div>
</div>
) : null}
</>
);
}
}