59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
import {Grid, TextField} from '@mui/material';
|
|
import {useEffect} from "react";
|
|
|
|
const BetweenNumberFilter = ({formik, id , defaultValue}) => {
|
|
|
|
useEffect(() => {
|
|
formik.setFieldValue(`${id}[0]`, defaultValue?.[0] || '');
|
|
formik.setFieldValue(`${id}[1]`, defaultValue?.[1] || '');
|
|
}, []);
|
|
const handleBlur = (index) => () => {
|
|
const minValue = formik.values[id][0];
|
|
const maxValue = formik.values[id][1];
|
|
|
|
if (index === 0 && minValue !== '' && maxValue !== '' && parseInt(minValue) > parseInt(maxValue)) {
|
|
formik.setFieldValue(`${id}[0]`, maxValue);
|
|
}
|
|
|
|
if (index === 1 && minValue !== '' && maxValue !== '' && parseInt(maxValue) < parseInt(minValue)) {
|
|
formik.setFieldValue(`${id}[1]`, minValue);
|
|
}
|
|
};
|
|
return (
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<TextField
|
|
name={`${id}[0]`}
|
|
label="کمترین رقم"
|
|
id={`${id}_min`}
|
|
onChange={formik.handleChange}
|
|
onBlur={handleBlur(0)}
|
|
fullWidth
|
|
value={formik.values[id][0] || ''}
|
|
margin="normal"
|
|
sx={{
|
|
position: 'relative'
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<TextField
|
|
name={`${id}[1]`}
|
|
label="بیشترین رقم"
|
|
id={`${id}_max`}
|
|
onChange={formik.handleChange}
|
|
onBlur={handleBlur(1)}
|
|
fullWidth
|
|
value={formik.values[id][1] || ''}
|
|
margin="normal"
|
|
sx={{
|
|
position: 'relative'
|
|
}}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default BetweenNumberFilter;
|