114 lines
3.6 KiB
JavaScript
114 lines
3.6 KiB
JavaScript
import EditGrayA from "@/components/icons/EditGrayA";
|
||
import EditOrangeA from "@/components/icons/EditOrangeA";
|
||
import { Button, TextField } from "@mui/material";
|
||
|
||
// تابع تبدیل اعداد فارسی و عربی به انگلیسی
|
||
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 EditField({
|
||
changeData,
|
||
multiline,
|
||
icon,
|
||
placeholder,
|
||
data,
|
||
name,
|
||
iconGray,
|
||
isTransparent,
|
||
noDisable,
|
||
type,
|
||
props,
|
||
error,
|
||
}) {
|
||
const handleChange = (e) => {
|
||
let inputValue = e.target.value;
|
||
|
||
// اگر فیلد کد ملی یا شماره موبایل یا شماره بیمه است، فقط اعداد انگلیسی
|
||
if (name === "national_code" || name === "phone" || name === "insurance_id" || type === "tel") {
|
||
// ابتدا اعداد فارسی و عربی را به انگلیسی تبدیل کن
|
||
inputValue = convertPersianToEnglish(inputValue);
|
||
// فقط اعداد انگلیسی را نگه دار
|
||
inputValue = inputValue.replace(/[^0-9]/g, '');
|
||
|
||
// محدودیت تعداد ارقام
|
||
if (name === "national_code" && inputValue.length > 10) {
|
||
inputValue = inputValue.slice(0, 10);
|
||
} else if (name === "phone" && inputValue.length > 11) {
|
||
inputValue = inputValue.slice(0, 11);
|
||
} else if (name === "insurance_id" && inputValue.length > 16) {
|
||
inputValue = inputValue.slice(0, 16);
|
||
}
|
||
}
|
||
|
||
changeData(inputValue, "value", name);
|
||
};
|
||
|
||
return (
|
||
<div className="relative w-full">
|
||
<TextField
|
||
{...props}
|
||
rows={multiline}
|
||
multiline={multiline}
|
||
type={type || "text"}
|
||
value={data?.value || ""}
|
||
placeholder={placeholder || ""}
|
||
disabled={noDisable ? false : !data?.isEdit}
|
||
error={!!error}
|
||
helperText={error || ""}
|
||
className={`!w-full res-field-account dark:!bg-transparent ${isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"}
|
||
}`}
|
||
onChange={handleChange}
|
||
sx={{
|
||
"& .MuiFormLabel-root": {
|
||
top: "-4px !important",
|
||
},
|
||
"& .MuiInputBase-input": { padding: "12.5px 14px" },
|
||
"& .MuiOutlinedInput-notchedOutline": {
|
||
border: "1px solid #D7D7D7 !important",
|
||
},
|
||
"& .MuiInputBase-root": {
|
||
padding: "0 !important",
|
||
borderRadius: "8px !important",
|
||
},
|
||
"& .MuiFormHelperText-root": {
|
||
marginLeft: "0",
|
||
marginRight: "14px",
|
||
},
|
||
".Mui-focused": {
|
||
"& .MuiOutlinedInput-notchedOutline": {
|
||
border: "1px solid #5559CE !important",
|
||
transition: "0.5s all",
|
||
},
|
||
},
|
||
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
|
||
{
|
||
display: "none",
|
||
},
|
||
}}
|
||
/>
|
||
<Button
|
||
className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
|
||
${multiline ? "!top-[24px]" : "!top-1/2"}`}
|
||
// onClick={() => {
|
||
// changeData(!data.isEdit, "isEdit", name);
|
||
// }}
|
||
>
|
||
{icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default EditField;
|