Rev 3692 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react';
import { Controller } from 'react-hook-form';
import { FormControl, InputLabel, MenuItem, Select as MuiSelect } from '@mui/material';
import FormErrorFeedback from '../form/FormErrorFeedback';
const Select = ({
name,
control,
label,
rules,
defaultValue,
onChange,
value,
error,
placeholder = 'Seleccione una opción',
options = [],
...props
}) => {
if (control) {
return (
<Controller
name={name}
control={control}
rules={rules}
defaultValue={defaultValue}
render={({ field }) => (
<FormControl fullWidth>
{label && <InputLabel shrink>{label}</InputLabel>}
<MuiSelect
{...field}
fullWidth
displayEmpty
sx={{
borderRadius: '4px'
}}
{...props}
>
<MenuItem value='' disabled>
{placeholder}
</MenuItem>
{options.map(({ label, value }) => (
<MenuItem key={value} value={value}>
{label}
</MenuItem>
))}
</MuiSelect>
{error && <FormErrorFeedback>{error}</FormErrorFeedback>}
</FormControl>
)}
/>
);
}
return (
<FormControl fullWidth>
{label && <InputLabel shrink>{label}</InputLabel>}
<MuiSelect
name={name}
defaultValue={defaultValue}
value={value}
onChange={onChange}
fullWidth
displayEmpty
sx={{
borderRadius: '4px'
}}
{...props}
>
<MenuItem value='' disabled>
{placeholder}
</MenuItem>
{options.map(({ label, value }) => (
<MenuItem key={value} value={value}>
{label}
</MenuItem>
))}
</MuiSelect>
{error && <FormErrorFeedback>{error}</FormErrorFeedback>}
</FormControl>
);
};
export default Select;