Rev 2795 | Rev 3683 | Ir a la última revisión | 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,
icon,
accept,
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(({ name, value }) => (
<MenuItem key={value} value={value}>
{name}
</MenuItem>
))}
</MuiSelect>
{error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
</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(({ name, value }) => (
<MenuItem key={value} value={value}>
{name}
</MenuItem>
))}
</MuiSelect>
{error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
</FormControl>
)
}
export default Select