change size

This commit is contained in:
AmirHossein Mahmoodi
2025-01-21 16:49:11 +03:30
parent cba5126fd8
commit 05cf77b915
6 changed files with 26 additions and 37 deletions

View File

@@ -30,6 +30,7 @@ function MuiDatePicker({ label, value, setFieldValue, name, minDate, maxDate, he
maxDate={maxDate ? new Date(maxDate) : null} maxDate={maxDate ? new Date(maxDate) : null}
slotProps={{ slotProps={{
textField: { textField: {
size: 'small',
error: error, error: error,
placeholder: placeholder, placeholder: placeholder,
InputProps: { InputProps: {
@@ -60,9 +61,9 @@ function MuiDatePicker({ label, value, setFieldValue, name, minDate, maxDate, he
}, },
}} }}
/> />
<FormHelperText id="component-helper-text" sx={{ ml: 2, color: error ? "#d32f2f" : "unset" }}> {/* <FormHelperText id="component-helper-text" variant="caption" sx={{ ml: 2, color: error ? "#d32f2f" : "unset", fontWeight: 'bold' }}>
{helperText ? helperText : ""} {helperText ? helperText : ""}
</FormHelperText> </FormHelperText> */}
</LocalizationProvider> </LocalizationProvider>
</Box> </Box>
); );

View File

@@ -1,46 +1,32 @@
"use client"; "use client";
import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material"; import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material";
import { useEffect, useMemo } from "react"; function CustomSelect({ column, filterParameters, defaultFilterTranslation, handleChange }) {
function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultFilterTranslation, handleChange }) {
const columnSelectOption = useMemo(() => {
return column?.columnSelectOption?.(dependencyFieldValue) || [];
}, [dependencyFieldValue]);
useEffect(() => {
const isValidValue = columnSelectOption.some((option) => option.value === filterParameters.value);
if (!isValidValue) {
handleChange({ ...filterParameters, value: "" });
}
}, [columnSelectOption, filterParameters.value, handleChange]);
const isValidValue = columnSelectOption.some((option) => option.value === filterParameters.value);
const selectedValue = isValidValue ? filterParameters.value : "";
return ( return (
<FormControl fullWidth sx={{ marginY: 1 }}> <FormControl fullWidth sx={{ marginY: 1 }} size="small">
<InputLabel id={`label${column.id}`}>{column.header}</InputLabel> <InputLabel id={`label${column.id}`}>{column.header}</InputLabel>
<Select <Select
labelId={`label${column.id}`} labelId={`label${column.id}`}
id={column.id} id={column.id}
name={`${column.id}.value`} name={`${column.id}.value`}
value={selectedValue} value={filterParameters.value}
input={<OutlinedInput label={column.header} />} input={<OutlinedInput label={column.header} />}
size="small"
onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })} onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
> >
<MenuItem value="">{column.header}</MenuItem> <MenuItem value="">{column.header}</MenuItem>
{columnSelectOption.map((option) => ( {column.columnSelectOption().map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
{option.label} {option.label}
</MenuItem> </MenuItem>
))} ))}
</Select> </Select>
<FormHelperText> {/* <FormHelperText>
<Typography variant="button" sx={{ color: "#155175" }}> <Typography variant="caption" sx={{ color: "#155175", fontWeight: 'bold' }}>
نوع فیلتر: {defaultFilterTranslation} نوع فیلتر: {defaultFilterTranslation}
</Typography> </Typography>
</FormHelperText> </FormHelperText> */}
</FormControl> </FormControl>
); );
} }

View File

@@ -12,13 +12,14 @@ function CustomSelectByDependency({
columnSelectOption, columnSelectOption,
}) { }) {
return ( return (
<FormControl fullWidth sx={{ marginY: 1 }}> <FormControl fullWidth sx={{ marginY: 1 }} size="small">
<InputLabel id={`label${column.id}`}>{column.header}</InputLabel> <InputLabel id={`label${column.id}`}>{column.header}</InputLabel>
<Select <Select
labelId={`label${column.id}`} labelId={`label${column.id}`}
id={column.id} id={column.id}
name={`${column.id}.value`} name={`${column.id}.value`}
value={value} value={value}
size="small"
input={<OutlinedInput label={column.header} />} input={<OutlinedInput label={column.header} />}
onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })} onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
> >
@@ -28,11 +29,11 @@ function CustomSelectByDependency({
</MenuItem> </MenuItem>
))} ))}
</Select> </Select>
<FormHelperText> {/* <FormHelperText>
<Typography variant="button" sx={{ color: "#155175" }}> <Typography variant="caption" sx={{ color: "#155175", fontWeight: 'bold' }}>
نوع فیلتر: {defaultFilterTranslation} نوع فیلتر: {defaultFilterTranslation}
</Typography> </Typography>
</FormHelperText> </FormHelperText> */}
</FormControl> </FormControl>
); );
} }

View File

@@ -21,7 +21,7 @@ function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslati
}; };
return ( return (
<FormControl fullWidth sx={{ marginY: 1 }}> <FormControl fullWidth sx={{ marginY: 1 }} size="small">
<InputLabel htmlFor="uncontrolled-native" id={`label${column.id}`}> <InputLabel htmlFor="uncontrolled-native" id={`label${column.id}`}>
{column.header} {column.header}
</InputLabel> </InputLabel>
@@ -30,6 +30,7 @@ function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslati
id={column.id} id={column.id}
value={filterParameters.value} value={filterParameters.value}
multiple multiple
size="small"
onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })} onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
renderValue={(selected) => ( renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}> <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
@@ -46,11 +47,11 @@ function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslati
</MenuItem> </MenuItem>
))} ))}
</Select> </Select>
<FormHelperText> {/* <FormHelperText>
<Typography variant="button" sx={{ color: "#155175" }}> <Typography variant="caption" sx={{ color: "#155175", fontWeight: 'bold' }}>
نوع فیلتر: {defaultFilterTranslation} نوع فیلتر: {defaultFilterTranslation}
</Typography> </Typography>
</FormHelperText> </FormHelperText> */}
</FormControl> </FormControl>
); );
} }

View File

@@ -19,12 +19,12 @@ function CustomTextField({
onBlur={handleBlur} onBlur={handleBlur}
fullWidth fullWidth
helperText={ helperText={
<Typography variant="button" sx={{ color: "#155175" }}> <Typography variant="caption" sx={{ color: "#155175", fontWeight: 'bold' }}>
نوع فیلتر: {defaultFilterTranslation} نوع فیلتر: {defaultFilterTranslation}
</Typography> </Typography>
} }
variant="outlined" variant="outlined"
size="normal" size="small"
sx={{ marginY: 1 }} sx={{ marginY: 1 }}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (

View File

@@ -24,12 +24,12 @@ function CustomTextFieldRange({
fullWidth fullWidth
error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)} error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)}
helperText={ helperText={
<Typography variant="button" sx={{ color: "#155175" }}> <Typography variant="caption" sx={{ color: "#155175", fontWeight: 'bold' }}>
نوع فیلتر: {defaultFilterTranslation} نوع فیلتر: {defaultFilterTranslation}
</Typography> </Typography>
} }
variant="outlined" variant="outlined"
size="normal" size="small"
sx={{ marginY: 1, marginRight: 1 }} sx={{ marginY: 1, marginRight: 1 }}
/> />
<TextField <TextField
@@ -45,7 +45,7 @@ function CustomTextFieldRange({
value={filterParameters.value[1]} value={filterParameters.value[1]}
fullWidth fullWidth
variant="outlined" variant="outlined"
size="normal" size="small"
sx={{ marginY: 1 }} sx={{ marginY: 1 }}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (