Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3473 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3452 stevensc 1
import React from 'react';
2
import { Controller, useFormContext } from 'react-hook-form';
3
import { FormControl, InputLabel, MenuItem, Select as MuiSelect, Typography } from '@mui/material';
4
 
5
export function FormSelect({
6
  name,
7
  label,
8
  rules,
9
  placeholder = 'Seleccione una opción',
10
  options = [],
11
  style = {},
12
  ...props
13
}) {
14
  const { control } = useFormContext();
15
 
16
  return (
17
    <Controller
18
      name={name}
19
      control={control}
20
      rules={rules}
21
      render={({ field, fieldState: { error } }) => (
22
        <FormControl variant='standard' fullWidth sx={style}>
23
          {label && <InputLabel shrink>{label}</InputLabel>}
24
 
25
          <MuiSelect
26
            {...field}
27
            fullWidth
28
            displayEmpty
29
            sx={{
30
              borderRadius: '4px'
31
            }}
32
            {...props}
33
          >
34
            <MenuItem value='' disabled>
35
              {placeholder}
36
            </MenuItem>
37
            {options.map(({ label, value }) => (
38
              <MenuItem key={value} value={value}>
39
                {label}
40
              </MenuItem>
41
            ))}
42
          </MuiSelect>
43
 
44
          {error && (
45
            <Typography sx={{ color: 'red', fontSize: '0.75rem' }}>{error.message}</Typography>
46
          )}
47
        </FormControl>
48
      )}
49
    />
50
  );
51
}