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.
64 lines
2.5 KiB
64 lines
2.5 KiB
import React from "react"; |
|
|
|
|
|
const Input = ({ |
|
title, |
|
borderType, |
|
gapSize, |
|
id, |
|
type, |
|
direction, |
|
className, |
|
onChange, |
|
style, |
|
bg |
|
|
|
}) => { |
|
|
|
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 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 `}></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> |
|
<input |
|
type={type ? type : 'text'} |
|
name="Login-box-form-item-input-name" |
|
id={`Login-box-form-item-input-name${id}`} |
|
className={`Login-box-form-item-input w-full h-full px-4 outline-0 rounded-lg text-gray-700 focus:text-red52`} |
|
style={{ direction: direction ? direction : "ltr", backgroundColor: bg }} |
|
onFocus={() => focusHandler(id ? id : 0)} |
|
onBlur={() => blurHandler(id ? id : 0)} |
|
onChange={onChange} |
|
|
|
/> |
|
</div> |
|
) |
|
} |
|
export default Input; |