Ebube
108 lines
3.9 KiB
React
108 lines
3.9 KiB
React
import React, { useRef } from "react";
|
|
import Icons from "../../Icons";
|
|
import { Link } from "react-router-dom";
|
|
|
|
export default function InputCom({
|
|
label,
|
|
type,
|
|
name,
|
|
placeholder,
|
|
iconName,
|
|
passIcon,
|
|
inputHandler,
|
|
value,
|
|
forgotPassword,
|
|
onClick,
|
|
disable,
|
|
blurHandler,
|
|
}) {
|
|
const inputRef = useRef(null)
|
|
// Entry Validation
|
|
// for Min Length:
|
|
const minLengthValidation = () => {
|
|
if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
|
|
return 7
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
|
|
return 3
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
|
|
return 3
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
|
|
return 5
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
|
|
return 8
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
|
|
return 3
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
|
|
return 3
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
|
|
return 3
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
|
|
return 1
|
|
}
|
|
}
|
|
|
|
// for MaxLength
|
|
const maxLengthValidation = () => {
|
|
if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
|
|
return 35
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
|
|
return 25
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
|
|
return 25
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
|
|
return 49
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
|
|
return 15
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
|
|
return 25
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
|
|
return 25
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
|
|
return 25
|
|
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
|
|
return 9
|
|
}
|
|
}
|
|
return (
|
|
<div className="input-com">
|
|
<div className="flex items-center justify-between">
|
|
{label && (
|
|
<label
|
|
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block mb-2.5"
|
|
htmlFor={name}
|
|
>
|
|
{label}
|
|
</label>
|
|
)}
|
|
{forgotPassword && <Link to="/forgot-password" className="text-[13.975px] leading-[20.9625px] text-[#019ef7] hover:text-[#009ef7]">Forgot Password?</Link>}
|
|
</div>
|
|
<div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
|
|
<input
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={inputHandler}
|
|
className="input-field placeholder:text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
|
|
type={type}
|
|
id={name}
|
|
name={name}
|
|
minLength={minLengthValidation()}
|
|
maxLength={maxLengthValidation()}
|
|
ref={inputRef}
|
|
readOnly={disable}
|
|
onBlur={blurHandler}
|
|
/>
|
|
{iconName && (
|
|
<div className="absolute right-6 bottom-[10px] z-10">
|
|
<Icons name={iconName} />
|
|
</div>
|
|
)}
|
|
{passIcon && (
|
|
<div className="absolute right-6 bottom-[10px] z-10" onClick={onClick}>
|
|
<Icons name={passIcon} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|