parent
8f28c64106
commit
aa2756a828
10 changed files with 660 additions and 91 deletions
@ -0,0 +1,84 @@ |
||||
import { Component } from "react"; |
||||
|
||||
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: { |
||||
h: 0, |
||||
m: 0, |
||||
s: 0, |
||||
}, |
||||
seconds : 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.refresh(true); |
||||
} |
||||
}; |
||||
|
||||
componentWillUnmount() { |
||||
clearInterval(this.timer); |
||||
} |
||||
render() { |
||||
return ( |
||||
<> |
||||
<div className="timer text-greenBA text-sm inline"> |
||||
{this.state.time ? this.state.time.m : ''}:{this.state.time ? this.state.time.s : ''}
|
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
.timer { |
||||
flex-direction: row; |
||||
direction: rtl !important; |
||||
margin-right: 10px; |
||||
margin-left: 10px; |
||||
color: $green2; |
||||
font-family: numeralLight; |
||||
} |
||||
@ -0,0 +1,195 @@ |
||||
import React, { useState } from "react"; |
||||
import _ from "lodash"; |
||||
|
||||
|
||||
const langDetector = (lang, option1, option2) => { |
||||
return lang === "fa" ? option1 : option2; |
||||
}; |
||||
|
||||
const inputStatusHandler = (value, focus, status, primary, success, danger) => { |
||||
if (!focus) { |
||||
return ""; |
||||
} else { |
||||
if (!value) { |
||||
return primary; |
||||
} else { |
||||
if (status) { |
||||
return success; |
||||
} else { |
||||
return danger; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
export default function Input(props) { |
||||
const [value, setValue] = useState(""); |
||||
const [focusToggle, setFocusToggle] = useState(false); |
||||
|
||||
const { |
||||
backgroundColor, |
||||
lang, |
||||
theme, |
||||
inputMode, |
||||
label, |
||||
status, |
||||
maxLength, |
||||
message, |
||||
onChange, |
||||
align, |
||||
name, |
||||
regex, |
||||
direction, |
||||
width, |
||||
|
||||
title, |
||||
borderType, |
||||
gapSize, |
||||
id, |
||||
type, |
||||
className, |
||||
style, |
||||
bg |
||||
} = props; |
||||
|
||||
const focusHandler = (id) => { |
||||
let inputs = document.querySelectorAll(".Login-box-form-item"); |
||||
let label = document.querySelectorAll(".Login-box-form-item-label"); |
||||
let line = document.querySelectorAll(".Login-box-form-item-line"); |
||||
|
||||
inputs[id].style.borderColor = "#df1452"; |
||||
inputs[id].style.backgroundColor = "#fff"; |
||||
label[id].style.transform = `translate(-10px,-27px)`; |
||||
label[id].style.color = "#df1452"; |
||||
line[id].style.backgroundColor = "#fff"; |
||||
|
||||
|
||||
}; |
||||
|
||||
const blurHandler = (id) => { |
||||
let inputsBox = document.querySelectorAll(".Login-box-form-item"); |
||||
let inputs = document.querySelectorAll(".Login-box-form-item-input"); |
||||
let label = document.querySelectorAll(".Login-box-form-item-label"); |
||||
let line = document.querySelectorAll(".Login-box-form-item-line"); |
||||
if (inputs[id].value === "") { |
||||
inputsBox[id].style.borderColor = "#EBEBEB"; |
||||
label[id].style.transform = "translate(0px,0px)"; |
||||
label[id].style.color = "#959595"; |
||||
line[id].style.backgroundColor = "#EBEBEB"; |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<div style={style} className={`${className} Login-box-form-item w-full ml-4 h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7 mt-6 relative flex items-center flex-row-reverse`}> |
||||
<div className={`Login-box-form-item-line w-${gapSize ? gapSize : '20'} h-px absolute top-[-1px] right-7 bg-color7`}></div> |
||||
<div className="Login-box-form-item-label text-sm text-color19 bg-white absolute right-6 transition-all duration-300 pointer-events-none"> |
||||
{title ? title : 'نام کاربری'} |
||||
</div> |
||||
{/* <label |
||||
className={_.join( |
||||
[ |
||||
"absolute top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-white px-2 text-xs transition-all duration-300", |
||||
langDetector(lang, "right-2", "left-2"), |
||||
inputStatusHandler( |
||||
value, |
||||
focusToggle, |
||||
status, |
||||
"input__labelFocus", |
||||
"input__labelSuccess", |
||||
"input__labelDanger" |
||||
), |
||||
], |
||||
" " |
||||
)} |
||||
onClick={() => setFocusToggle(true)} |
||||
> |
||||
{label} |
||||
</label> */} |
||||
<input |
||||
type="text" |
||||
inputMode={inputMode} |
||||
|
||||
className={_.join( |
||||
[ |
||||
`flex-1 border border-gray-300 dark:bg-opacity-10 bg-transparent rounded-md outline-none py-3 px-4 text-tiny ${backgroundColor} ${align}`, |
||||
inputStatusHandler( |
||||
value, |
||||
focusToggle, |
||||
status, |
||||
"input__inputActive", |
||||
"input__inputSuccess", |
||||
"input__inputDanger" |
||||
), |
||||
"transition", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ direction: direction }} |
||||
onChange={(e) => |
||||
onChange(name, (e.target.value = regex(e.target.value))) |
||||
} |
||||
// onFocus={() => setFocusToggle(true)}
|
||||
// onBlur={() => (!value ? setFocusToggle(false) : setFocusToggle(true))}
|
||||
onFocus={() => focusHandler(id ? id : 0)} |
||||
onBlur={() => blurHandler(id ? id : 0)} |
||||
maxLength={maxLength} |
||||
/> |
||||
|
||||
|
||||
{value && !status && ( |
||||
<span |
||||
className={_.join( |
||||
[ |
||||
"input__message text-xs absolute -bottom-5", |
||||
langDetector(lang, "right-2", "left-2"), |
||||
inputStatusHandler( |
||||
value, |
||||
focusToggle, |
||||
status, |
||||
"", |
||||
"input__messageSuccess", |
||||
"input__messageDanger" |
||||
), |
||||
"transition", |
||||
], |
||||
" " |
||||
)} |
||||
> |
||||
{message} |
||||
</span> |
||||
)} |
||||
{value && ( |
||||
<span |
||||
className={_.join( |
||||
[ |
||||
"input__length absolute -bottom-5 text-xs", |
||||
langDetector(lang, "left-2", "right-2"), |
||||
inputStatusHandler( |
||||
value, |
||||
focusToggle, |
||||
status, |
||||
"", |
||||
"input__lengthSuccess", |
||||
"input__lengthDanger" |
||||
), |
||||
"transition", |
||||
], |
||||
" " |
||||
)} |
||||
> |
||||
{value.length + "/" + maxLength} |
||||
</span> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
Input.defaultProps = { |
||||
lang: "fa", |
||||
inputMode: "numeric", |
||||
label: "label", |
||||
status: "", |
||||
maxLength: "", |
||||
message: "", |
||||
direction: "rtl", |
||||
}; |
||||
Loading…
Reference in new issue