139 lines
4.3 KiB
React
139 lines
4.3 KiB
React
import React, { useRef } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import Icons from "../../Icons";
|
|
|
|
export default function InputCom({
|
|
label,
|
|
type,
|
|
name,
|
|
placeholder,
|
|
iconName,
|
|
passIcon,
|
|
inputHandler,
|
|
value,
|
|
forgotPassword,
|
|
parentClass,
|
|
labelClass,
|
|
inputClass,
|
|
fieldClass,
|
|
onClick,
|
|
disable,
|
|
blurHandler,
|
|
spanTag,
|
|
inputBg,
|
|
direction,
|
|
errorBorder,
|
|
}) {
|
|
const inputRef = useRef(null);
|
|
// Entry Validation
|
|
// for Min Length:
|
|
const minLengthValidation = () => {
|
|
const inputConfig = inputConfigs[inputRef?.current?.name]?.minLength;
|
|
return inputConfig || 0;
|
|
};
|
|
|
|
// for MaxLength
|
|
const maxLengthValidation = () => {
|
|
const inputConfig = inputConfigs[inputRef?.current?.name]?.maxLength;
|
|
return inputConfig || 30;
|
|
};
|
|
|
|
// for Patterns
|
|
const inputPatterns = () => {
|
|
const inputConfig = inputConfigs[inputRef?.current?.name]?.pattern;
|
|
return inputConfig || "";
|
|
};
|
|
return (
|
|
<div className={`input-com ${parentClass}`}>
|
|
<div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
|
|
{label && (
|
|
<label
|
|
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
|
|
htmlFor={name}
|
|
>
|
|
{label}
|
|
{spanTag && spanTag == "*" ? (
|
|
<span className="text-red-700 text-sm tracking-wide">
|
|
{" "}
|
|
{spanTag}
|
|
</span>
|
|
) : (
|
|
<span className="text-green-700 text-sm tracking-wide">
|
|
{spanTag}
|
|
</span>
|
|
)}
|
|
</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 ${
|
|
errorBorder
|
|
? "border-[#ff0a0a63] border-[0.5px] shadow-red-500 animate-shake"
|
|
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
|
} w-full rounded-full 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 ${inputClass}`}
|
|
>
|
|
<input
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={inputHandler}
|
|
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide ${
|
|
inputBg ? inputBg : "bg-[#FAFAFA]"
|
|
} dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
|
|
type={type}
|
|
id={name}
|
|
name={name}
|
|
minLength={minLengthValidation()}
|
|
maxLength={maxLengthValidation()}
|
|
// pattern={inputPatterns()}
|
|
ref={inputRef}
|
|
readOnly={disable}
|
|
onBlur={blurHandler}
|
|
dir={direction}
|
|
/>
|
|
{iconName && (
|
|
<div className="absolute right-6 bottom-[10px] z-10 flex gap-2">
|
|
{iconName.split(" ").map((item, index) => (
|
|
<Icons key={index} name={item} />
|
|
))}
|
|
</div>
|
|
)}
|
|
{passIcon && (
|
|
<div
|
|
className="absolute right-6 bottom-[10px] z-10"
|
|
onClick={onClick}
|
|
>
|
|
<Icons name={passIcon} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const inputConfigs = {
|
|
email: { minLength: 7, maxLength: 35 },
|
|
first_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
|
|
last_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
|
|
address: { minLength: 5, maxLength: 49, pattern: "[a-zA-Z0-9]+" },
|
|
password: { minLength: 8, maxLength: 15, pattern: ".{8,}" },
|
|
state: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
|
|
province: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
|
|
city: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
|
|
amount: { minLength: 1, maxLength: 9, pattern: "[0-9]+" },
|
|
description: { minLength: 5, maxLength: 250 },
|
|
};
|
|
|
|
/* Numbers Only: <input type="text" pattern="[0-9]*" /> strictly numbers
|
|
Alphabets Only: <input type="text" pattern="[a-zA-Z]+" /> strictly alphabets
|
|
Alphanumeric: <input type="text" pattern="[a-zA-Z0-9]+" /> mix
|
|
Password: <input type="text" pattern=".{8,}" /> a minimum of 8 characters
|
|
*/
|