resolve conflicts
This commit is contained in:
232
src/core/components/PlateNumber.jsx
Normal file
232
src/core/components/PlateNumber.jsx
Normal file
@@ -0,0 +1,232 @@
|
||||
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
|
||||
Reference in New Issue
Block a user