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