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.
79 lines
2.1 KiB
79 lines
2.1 KiB
import React from "react"; |
|
|
|
import { useState } from "react"; |
|
|
|
import fixNumbers from "./fixNumbers"; |
|
|
|
const FormFields = ({ |
|
defaultValue, |
|
set, |
|
label, |
|
borderClassname, |
|
inputClassname, |
|
type, |
|
maxLength, |
|
max, |
|
min, |
|
register, |
|
onClick, |
|
}) => { |
|
const [value, setValue] = useState(defaultValue); |
|
|
|
return ( |
|
<div |
|
onClick={onClick} |
|
className={ |
|
"h-full flex flex-row items-center rounded border mx-1 relative " + |
|
borderClassname + |
|
(value ? "bg-white border rounded" : "bg-transparent") |
|
} |
|
> |
|
<div |
|
className={ |
|
"text-xs absolute transition-all duration-300 pointer-events-none px-3 transform -translate-x-[7px]" + |
|
(value |
|
? `text-[#2483E1] bg-white top-[-10px]` |
|
: "text-[#0F0543] top-[10px]") |
|
} |
|
> |
|
{label} |
|
</div> |
|
{type !== "textarea" ? ( |
|
<input |
|
{...register} |
|
maxLength={maxLength} |
|
value={value} |
|
type={"text"} |
|
onInput={(e) => { |
|
let value = e.target.value; |
|
if (type === "number") |
|
value = fixNumbers(value).replace(/[^\d.-]/g, ""); |
|
if (maxLength && value.length > maxLength) |
|
value = value.slice(0, maxLength); |
|
if (!isNaN(max) && +e.target.value > max) value = max; |
|
if (!isNaN(min) && +e.target.value < min) value = min; |
|
e.target.value = value; |
|
}} |
|
className={`rtl w-full h-full px-4 py-2 outline-0 text-xs rounded-md text-[#0F0543] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent |
|
${value === "" ? "bg-red-200 " : "bg-[#F9F9F9] "} `} |
|
onChange={(e) => setValue(e.target.value)} |
|
inputMode={type === "number" ? "numeric" : ""} |
|
/> |
|
) : ( |
|
<textarea |
|
{...register} |
|
className={"rtl w-full h-full p-4 outline-0 resize-none"} |
|
onChange={(e) => setValue(e.target.value)} |
|
> |
|
{value} |
|
</textarea> |
|
)} |
|
</div> |
|
); |
|
}; |
|
|
|
export default FormFields; |
|
|
|
FormFields.defaultProps = { |
|
// borderClassname: "border-[#E0E0E0]", |
|
};
|
|
|