main
alireza khaji 2 years ago
parent a40a064265
commit e42bc8616e
  1. 182
      src/components/input/index.js
  2. 5
      src/view/register/index.js

@ -3,95 +3,103 @@ import _onInput from "../../utils/onInput";
const Input = ({
title,
borderType,
gapSize,
id,
type,
direction,
className,
onChange,
style,
bg,
value,
max,
onFocus
title,
borderType,
gapSize,
id,
type,
direction,
className,
onChange,
style,
bg,
value,
max,
onFocus,
defaultValue,
}) => {
useEffect(() => {
if(value !== null && value !== '' && value !== undefined){
blurHandler2(id ? id : 0)
}
}, [value])
useEffect(() => {
if (value !== null && value !== "" && value !== undefined) {
blurHandler2(id ? id : 0);
}
}, [value]);
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";
inputs[id].style.color = '#404040';
label[id].style.transform = `translate(-10px,-27px)`;
label[id].style.color = "#df1452";
line[id].style.backgroundColor = "#fff";
};
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");
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]) {
inputsBox[id].style.borderColor = "#EBEBEB";
label[id].style.transform = "translate(-10px,-27px)";
label[id].style.color = "#959595";
inputs[id].style.backgroundColor = "#fff";
line[id].style.backgroundColor = "#fff";
}
inputs[id].style.borderColor = "#df1452";
inputs[id].style.backgroundColor = "#fff";
inputs[id].style.color = "#404040";
label[id].style.transform = `translate(-10px,-27px)`;
label[id].style.color = "#df1452";
line[id].style.backgroundColor = "#fff";
};
};
const blurHandler2 = (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]) {
inputsBox[id].style.borderColor = "#404040";
label[id].style.transform = "translate(-10px,-27px)";
label[id].style.color = "#404040";
inputs[id].style.backgroundColor = "#fff";
line[id].style.backgroundColor = "#fff";
}
};
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 `}
style={{ direction: direction ? direction : "ltr", backgroundColor: bg }}
onFocus={() => {if(onFocus){onFocus();} focusHandler(id ? id : 0)}}
onBlur={() => blurHandler(id ? id : 0)}
onChange={onChange}
value={value}
maxLength={max}
/>
</div>
)
}
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]) {
inputsBox[id].style.borderColor = "#EBEBEB";
label[id].style.transform = "translate(-10px,-27px)";
label[id].style.color = "#959595";
inputs[id].style.backgroundColor = "#fff";
line[id].style.backgroundColor = "#fff";
}
};
const blurHandler2 = (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]) {
inputsBox[id].style.borderColor = "#404040";
label[id].style.transform = "translate(-10px,-27px)";
label[id].style.color = "#404040";
inputs[id].style.backgroundColor = "#fff";
line[id].style.backgroundColor = "#fff";
}
};
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 `}
style={{
pointerEvents : defaultValue ? "none" : 'auto',
direction: direction ? direction : "ltr",
backgroundColor: bg,
}}
onFocus={() => {
if (onFocus) {
onFocus();
}
focusHandler(id ? id : 0);
}}
onBlur={() => blurHandler(id ? id : 0)}
onChange={onChange}
value={value}
maxLength={max}
/>
</div>
);
};
export default Input;

@ -536,6 +536,7 @@ const Register = ({
direction="rtl"
id={0}
value={userInfo?.firstName}
defaultValue={user?.firstName}
onChange={(e) =>
setUserInfo({
...userInfo,
@ -550,6 +551,7 @@ const Register = ({
id={1}
direction="rtl"
value={userInfo.lastName}
defaultValue={user?.lastName}
onChange={(e) =>
setUserInfo({
...userInfo,
@ -566,6 +568,7 @@ const Register = ({
type="textNumber"
max={10}
value={userInfo.nationalId}
defaultValue={user?.nationalId}
onChange={(e) =>
setUserInfo({
...userInfo,
@ -608,6 +611,7 @@ const Register = ({
setUserInfo({ ...userInfo, gender: e.target.value })
}
className="bg-white border border-solid border-gray-200 w-52 px-3 mx-1 rounded text-black outline-red52 py-1 h-12 mt-6"
style={user?.gender ? { pointerEvents: "none" } : null}
>
{genders.map((item) => (
<option
@ -661,6 +665,7 @@ const Register = ({
setUserInfo({ ...userInfo, gradeIds: e.target.value })
}
className="bg-white border border-solid border-gray-300 w-48 p-3 rounded-lg text-black outline-red52 mx-6"
style={user?.gradeIds ? { pointerEvents: "none" } : null}
>
<option value={null}>انتخاب پایه تحصیلی</option>
{grades.map((item) => (

Loading…
Cancel
Save