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

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]",
};