232 lines
6.2 KiB
JavaScript
232 lines
6.2 KiB
JavaScript
import {Box, Button, Drawer, FormHelperText, TextField, Typography} from "@mui/material";
|
||
import {useTranslations} from "next-intl";
|
||
import AccessibleIcon from '@mui/icons-material/Accessible';
|
||
import {useState} from "react";
|
||
|
||
const plate_words = [
|
||
{
|
||
id: 1,
|
||
value: "الف",
|
||
name: "الف"
|
||
},
|
||
{
|
||
id: 2,
|
||
value: "ب",
|
||
name: "ب"
|
||
},
|
||
{
|
||
id: 3,
|
||
value: "پ",
|
||
name: "پ"
|
||
},
|
||
{
|
||
id: 4,
|
||
value: "ت",
|
||
name: "ت"
|
||
},
|
||
{
|
||
id: 5,
|
||
value: "ث",
|
||
name: "ث"
|
||
},
|
||
{
|
||
id: 6,
|
||
value: "ج",
|
||
name: "ج"
|
||
},
|
||
{
|
||
id: 7,
|
||
value: "د",
|
||
name: "د"
|
||
},
|
||
{
|
||
id: 8,
|
||
value: "ز",
|
||
name: "ز"
|
||
},
|
||
{
|
||
id: 9,
|
||
value: "س",
|
||
name: "س"
|
||
},
|
||
{
|
||
id: 10,
|
||
value: "ش",
|
||
name: "ش"
|
||
},
|
||
{
|
||
id: 11,
|
||
value: "ص",
|
||
name: "ص"
|
||
},
|
||
{
|
||
id: 12,
|
||
value: "ط",
|
||
name: "ط"
|
||
},
|
||
{
|
||
id: 13,
|
||
value: "ع",
|
||
name: "ع"
|
||
},
|
||
{
|
||
id: 14,
|
||
value: "ف",
|
||
name: "ف"
|
||
},
|
||
{
|
||
id: 15,
|
||
value: "ق",
|
||
name: "ق"
|
||
},
|
||
{
|
||
id: 16,
|
||
value: "ک",
|
||
name: "گ"
|
||
},
|
||
{
|
||
id: 17,
|
||
value: "ل",
|
||
name: "ل"
|
||
},
|
||
{
|
||
id: 18,
|
||
value: "م",
|
||
name: "م"
|
||
},
|
||
{
|
||
id: 19,
|
||
value: "ن",
|
||
name: "ن"
|
||
},
|
||
{
|
||
id: 20,
|
||
value: "و",
|
||
name: "و"
|
||
},
|
||
{
|
||
id: 21,
|
||
value: "ه",
|
||
name: "ه"
|
||
},
|
||
{
|
||
id: 22,
|
||
value: "ی",
|
||
name: "ی"
|
||
},
|
||
{
|
||
id: 23,
|
||
value: "*",
|
||
name: <AccessibleIcon/>
|
||
},
|
||
]
|
||
const PlateNumber = ({formik}) => {
|
||
const t = useTranslations();
|
||
const [plateDrawer, setPlateDrawer] = useState(false);
|
||
const [selectedWordName, setSelectedWordName] = useState("الف");
|
||
const [selectedWordValue, setSelectedWordValue] = useState("");
|
||
|
||
return (
|
||
<>
|
||
<Box sx={{
|
||
display: "flex",
|
||
width: "fit-content",
|
||
flexDirection: "row",
|
||
alignItems: "end",
|
||
justifyContent: "end",
|
||
gap: 0.75
|
||
}}>
|
||
<Box sx={{display: "flex", flexDirection: "column", textAlign: "center"}}>
|
||
<Typography variant="caption" sx={{fontWeight: 500}}>
|
||
ایران
|
||
</Typography>
|
||
<TextField
|
||
sx={{width: "50px"}}
|
||
name="plate_part4"
|
||
variant="outlined"
|
||
size="small"
|
||
type='number'
|
||
onChange={formik.handleChange}
|
||
onBlur={formik.handleBlur("plate_part4")}
|
||
/>
|
||
</Box>
|
||
<Box>
|
||
<TextField
|
||
sx={{width: "70px"}}
|
||
name="plate_part3"
|
||
variant="outlined"
|
||
size="small"
|
||
type='number'
|
||
onChange={formik.handleChange}
|
||
onBlur={formik.handleBlur("plate_part3")}
|
||
/>
|
||
</Box>
|
||
<Box>
|
||
{/*<TextField*/}
|
||
{/* sx={{width: "50px"}}*/}
|
||
{/* name="plate_part2"*/}
|
||
{/* variant="outlined"*/}
|
||
{/* type={'number'}*/}
|
||
{/* size="small"*/}
|
||
{/* onChange={formik.handleChange}*/}
|
||
{/* onBlur={formik.handleBlur("plate_part1")}*/}
|
||
{/*/>*/}
|
||
<Button onClick={() => setPlateDrawer(true)}
|
||
sx={{
|
||
borderColor: "divider",
|
||
fontSize: "16px"
|
||
}}
|
||
variant="outlined"
|
||
data-selected-word={selectedWordValue}
|
||
>{selectedWordName}</Button>
|
||
<Drawer
|
||
anchor={"bottom"}
|
||
open={plateDrawer}
|
||
onClose={() => setPlateDrawer(false)}
|
||
>
|
||
<Box sx={{
|
||
display: "flex",
|
||
flexWrap: "wrap",
|
||
mx: "auto",
|
||
my: 2,
|
||
gap: 2,
|
||
width: "60%",
|
||
justifyContent: "center"
|
||
}}>
|
||
{plate_words.map((item) => (
|
||
<Button
|
||
key={item.id}
|
||
onClick={() => {
|
||
setSelectedWordName(item.name);
|
||
setSelectedWordValue(item.value);
|
||
setPlateDrawer(false);
|
||
}}
|
||
sx={{
|
||
width: "fit-content"
|
||
}}
|
||
variant="contained"
|
||
>
|
||
{item.name}
|
||
</Button>
|
||
))}
|
||
</Box>
|
||
</Drawer>
|
||
</Box>
|
||
<Box>
|
||
<TextField
|
||
sx={{width: "50px"}}
|
||
name="plate_part1"
|
||
variant="outlined"
|
||
type='number'
|
||
size="small"
|
||
onChange={formik.handleChange}
|
||
onBlur={formik.handleBlur("plate_part1")}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
<FormHelperText>{t("error_message_plate_number")}</FormHelperText>
|
||
</>
|
||
|
||
)
|
||
}
|
||
export default PlateNumber |