Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3475 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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