parent
443fb50be5
commit
8c523b1d3c
5 changed files with 8377 additions and 7970 deletions
@ -0,0 +1,71 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import { useState } from "react"; |
||||||
|
|
||||||
|
import fixNumbers from "./fixNumbers"; |
||||||
|
|
||||||
|
const Inputs = ({ |
||||||
|
defaultValue, |
||||||
|
set, |
||||||
|
label, |
||||||
|
className, |
||||||
|
type, |
||||||
|
maxLength, |
||||||
|
max, |
||||||
|
min, |
||||||
|
register, |
||||||
|
}) => { |
||||||
|
const [value, setValue] = useState(defaultValue); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={ |
||||||
|
"h-full rounded border border-color7 mx-1 relative flex items-center flex-row-reverse bg-color2_5" + |
||||||
|
className + |
||||||
|
(value ? " border-blue-500 bg-white border rounded" : " bg-transparent") |
||||||
|
} |
||||||
|
> |
||||||
|
<div |
||||||
|
className={ |
||||||
|
" text-sm absolute transition-all duration-300 pointer-events-none px-3 PY-2 text-left transform translate-x-[-10px] " + |
||||||
|
(value |
||||||
|
? `text-blue-500 bg-white top-[-10px]` |
||||||
|
: "text-color19 top-[20px]") |
||||||
|
} |
||||||
|
> |
||||||
|
{label} |
||||||
|
</div> |
||||||
|
{type !== "textarea" ? ( |
||||||
|
<input |
||||||
|
{...register} |
||||||
|
maxLength={maxLength} |
||||||
|
value={value} |
||||||
|
type={"text"} |
||||||
|
className={"rtl w-full h-full px-4 outline-0 "} |
||||||
|
onChange={(e) => setValue(e.target.value)} |
||||||
|
inputMode={type === "number" ? "numeric" : ""} |
||||||
|
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; |
||||||
|
}} |
||||||
|
/> |
||||||
|
) : ( |
||||||
|
<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 Inputs; |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
const persianNumbers = [ |
||||||
|
/۰/g, |
||||||
|
/۱/g, |
||||||
|
/۲/g, |
||||||
|
/۳/g, |
||||||
|
/۴/g, |
||||||
|
/۵/g, |
||||||
|
/۶/g, |
||||||
|
/۷/g, |
||||||
|
/۸/g, |
||||||
|
/۹/g, |
||||||
|
], |
||||||
|
arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g], |
||||||
|
fixNumbers = function (str) { |
||||||
|
if (typeof str === "string") { |
||||||
|
for (var i = 0; i < 10; i++) { |
||||||
|
str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i); |
||||||
|
} |
||||||
|
} |
||||||
|
return str; |
||||||
|
}; |
||||||
|
export default fixNumbers; |
||||||
Loading…
Reference in new issue