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

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;