Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3692 Rev 3719
Línea 1... Línea 1...
1 
import React from 'react';
 1 
import React from 'react';
2 
import { Controller } from 'react-hook-form';
 2 
import { Controller } from 'react-hook-form';
3 
import { FormControl, InputLabel, MenuItem, Select as MuiSelect } from '@mui/material';
 3 
import { FormControl, InputLabel, MenuItem, Select as MuiSelect } from '@mui/material';
4 
 
 4 
 
5 
import FormErrorFeedback from '../form/FormErrorFeedback';
 5 
import FormErrorFeedback from '../form/FormErrorFeedback';
6 
 
 6 
 
7 
const Select = ({
 7 
const Select = ({
8 
  name,
 8 
  name,
9 
  control,
 9 
  control,
10 
  label,
 10 
  label,
11 
  rules,
 11 
  rules,
12 
  defaultValue,
 12 
  defaultValue,
13 
  onChange,
 13 
  onChange,
14 
  value,
 14 
  value,
15 
  icon,
 - 
 
16 
  accept,
 - 
 
17 
  error,
 15 
  error,
18 
  placeholder = 'Seleccione una opción',
 16 
  placeholder = 'Seleccione una opción',
19 
  options = [],
 17 
  options = [],
20 
  ...props
 18 
  ...props
21 
}) => {
 19 
}) => {
22 
  if (control) {
 20 
  if (control) {
23 
    return (
 21 
    return (
24 
      <Controller
 22 
      <Controller
25 
        name={name}
 23 
        name={name}
26 
        control={control}
 24 
        control={control}
27 
        rules={rules}
 25 
        rules={rules}
28 
        defaultValue={defaultValue}
 26 
        defaultValue={defaultValue}
29 
        render={({ field }) => (
 27 
        render={({ field }) => (
30 
          <FormControl fullWidth>
 28 
          <FormControl fullWidth>
31 
            {label && <InputLabel shrink>{label}</InputLabel>}
 29 
            {label && <InputLabel shrink>{label}</InputLabel>}
32 
 
 30 
 
33 
            <MuiSelect
 31 
            <MuiSelect
34 
              {...field}
 32 
              {...field}
35 
              fullWidth
 33 
              fullWidth
36 
              displayEmpty
 34 
              displayEmpty
37 
              sx={{
 35 
              sx={{
38 
                borderRadius: '4px'
 36 
                borderRadius: '4px'
39 
              }}
 37 
              }}
40 
              {...props}
 38 
              {...props}
41 
            >
 39 
            >
42 
              <MenuItem value='' disabled>
 40 
              <MenuItem value='' disabled>
43 
                {placeholder}
 41 
                {placeholder}
44 
              </MenuItem>
 42 
              </MenuItem>
45 
 
 43 
 
46 
              {options.map(({ label, value }) => (
 44 
              {options.map(({ label, value }) => (
47 
                <MenuItem key={value} value={value}>
 45 
                <MenuItem key={value} value={value}>
48 
                  {label}
 46 
                  {label}
49 
                </MenuItem>
 47 
                </MenuItem>
50 
              ))}
 48 
              ))}
51 
            </MuiSelect>
 49 
            </MuiSelect>
52 
 
 50 
 
53 
            {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
 51 
            {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
54 
          </FormControl>
 52 
          </FormControl>
55 
        )}
 53 
        )}
56 
      />
 54 
      />
57 
    );
 55 
    );
58 
  }
 56 
  }
59 
 
 57 
 
60 
  return (
 58 
  return (
61 
    <FormControl fullWidth>
 59 
    <FormControl fullWidth>
62 
      {label && <InputLabel shrink>{label}</InputLabel>}
 60 
      {label && <InputLabel shrink>{label}</InputLabel>}
63 
 
 61 
 
64 
      <MuiSelect
 62 
      <MuiSelect
65 
        name={name}
 63 
        name={name}
66 
        defaultValue={defaultValue}
 64 
        defaultValue={defaultValue}
67 
        value={value}
 65 
        value={value}
68 
        onChange={onChange}
 66 
        onChange={onChange}
69 
        fullWidth
 67 
        fullWidth
70 
        displayEmpty
 68 
        displayEmpty
71 
        sx={{
 69 
        sx={{
72 
          borderRadius: '4px'
 70 
          borderRadius: '4px'
73 
        }}
 71 
        }}
74 
        {...props}
 72 
        {...props}
75 
      >
 73 
      >
76 
        <MenuItem value='' disabled>
 74 
        <MenuItem value='' disabled>
77 
          {placeholder}
 75 
          {placeholder}
78 
        </MenuItem>
 76 
        </MenuItem>
79 
 
 77 
 
80 
        {options.map(({ label, value }) => (
 78 
        {options.map(({ label, value }) => (
81 
          <MenuItem key={value} value={value}>
 79 
          <MenuItem key={value} value={value}>
82 
            {label}
 80 
            {label}
83 
          </MenuItem>
 81 
          </MenuItem>
84 
        ))}
 82 
        ))}
85 
      </MuiSelect>
 83 
      </MuiSelect>
86 
 
 84 
 
87 
      {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
 85 
      {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
88 
    </FormControl>
 86 
    </FormControl>
89 
  );
 87 
  );
90 
};
 88 
};
91 
 
 89 
 
92 
export default Select;
 90 
export default Select;