88 lines
2.5 KiB
JavaScript
88 lines
2.5 KiB
JavaScript
import { TextField } from "@mui/material";
|
||
import { styleTextSelectRight } from "@/mui";
|
||
|
||
// تابع تبدیل اعداد فارسی به انگلیسی
|
||
const convertPersianToEnglish = (str) => {
|
||
const persianNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
|
||
const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
|
||
|
||
let result = str;
|
||
for (let i = 0; i < 10; i++) {
|
||
const regex = new RegExp(persianNumbers[i], 'g');
|
||
result = result.replace(regex, i.toString());
|
||
const arabicRegex = new RegExp(arabicNumbers[i], 'g');
|
||
result = result.replace(arabicRegex, i.toString());
|
||
}
|
||
return result;
|
||
};
|
||
|
||
function Field({
|
||
title,
|
||
error,
|
||
placeholder,
|
||
inputProps,
|
||
type,
|
||
dir,
|
||
value,
|
||
updateState,
|
||
}) {
|
||
const handleChange = (e) => {
|
||
let inputValue = e.target.value;
|
||
|
||
// اگر type تلفن است، فقط اعداد انگلیسی را قبول کن
|
||
if (type === "tel") {
|
||
// ابتدا اعداد فارسی و عربی را به انگلیسی تبدیل کن
|
||
inputValue = convertPersianToEnglish(inputValue);
|
||
// فقط اعداد انگلیسی را نگه دار
|
||
inputValue = inputValue.replace(/[^0-9]/g, '');
|
||
}
|
||
|
||
updateState(inputValue);
|
||
};
|
||
|
||
return (
|
||
<TextField
|
||
label={title}
|
||
error={error}
|
||
dir={dir || "rtl"}
|
||
type={type || "text"}
|
||
value={value}
|
||
onChange={handleChange}
|
||
className="!w-full !mx-auto !bg-[#FFF]"
|
||
InputProps={inputProps}
|
||
placeholder={placeholder || ""}
|
||
sx={{
|
||
".MuiOutlinedInput-notchedOutline.muirtl-1d3z3hw-MuiOutlinedInput-notchedOutline":
|
||
{
|
||
border: error && "1px solid red !important",
|
||
},
|
||
...styleTextSelectRight,
|
||
// Hide Icon Number
|
||
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
|
||
{
|
||
display: "none",
|
||
},
|
||
"& input[type=number]": {
|
||
MozAppearance: "textfield",
|
||
},
|
||
"& .MuiInputBase-input": {
|
||
padding: "12.5px 14px",
|
||
color: "#0009",
|
||
},
|
||
"& .MuiInputBase-root": { borderRadius: "6px !important" },
|
||
"& .MuiOutlinedInput-notchedOutline": {
|
||
border: "1px solid #E9ECEF !important",
|
||
},
|
||
".Mui-focused": {
|
||
"& .MuiOutlinedInput-notchedOutline": {
|
||
border: "1px solid #5559CE !important",
|
||
transition: "0.5s all",
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
|
||
export default Field;
|