Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
496 stevensc 1 
import React from 'react'
1385 stevensc 2 
import { useController } from 'react-hook-form'
1390 stevensc 3 
import { InputBase, MenuItem, Select, styled } from '@mui/material'
543 stevensc 4 
 
496 stevensc 5 
import FormErrorFeedback from './FormErrorFeedback'
6 
 
1390 stevensc 7 
const BootstrapInput = styled(InputBase)(({ theme }) => ({
1391 stevensc 8 
  width: '100%',
1390 stevensc 9 
  'label + &': {
10 
    marginTop: theme.spacing(3)
11 
  },
12 
  '& .MuiInputBase-input': {
13 
    borderRadius: 4,
14 
    position: 'relative',
1391 stevensc 15 
    backgroundColor: theme.palette.background.default,
1390 stevensc 16 
    border: '1px solid #ced4da',
17 
    fontSize: 16,
18 
    padding: '10px 26px 10px 12px',
19 
    transition: theme.transitions.create(['border-color', 'box-shadow']),
20 
 
21 
    '&:focus': {
22 
      borderRadius: 4,
23 
      borderColor: '#80bdff',
24 
      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)'
25 
    }
543 stevensc 26 
  }
1390 stevensc 27 
}))
543 stevensc 28 
 
539 stevensc 29 
const SelectField = ({
1385 stevensc 30 
  control,
31 
  name = '',
32 
  placeholder = '',
33 
  error = null,
34 
  rules = {
35 
    required: { value: true, message: 'This field is required' }
36 
  },
37 
  options = [],
540 stevensc 38 
  label = '',
1390 stevensc 39 
  defaultValue = '',
40 
  ...rest
1385 stevensc 41 
}) => {
42 
  const { field } = useController({
43 
    name,
44 
    control,
45 
    rules,
46 
    defaultValue
47 
  })
496 stevensc 48 
 
1385 stevensc 49 
  return (
1390 stevensc 50 
    <>
51 
      <Select
1385 stevensc 52 
        placeholder={placeholder}
53 
        onChange={field.onChange}
54 
        name={field.name}
55 
        id={field.name}
56 
        ref={field.ref}
1386 stevensc 57 
        value={field.value}
1390 stevensc 58 
        {...rest}
59 
        input={<BootstrapInput />}
1392 stevensc 60 
        displayEmpty
1385 stevensc 61 
      >
1390 stevensc 62 
        <MenuItem value=''>{label}</MenuItem>
1385 stevensc 63 
        {options.map(({ name, value }) => (
1390 stevensc 64 
          <MenuItem key={value} value={value}>
1385 stevensc 65 
            {name}
1390 stevensc 66 
          </MenuItem>
1385 stevensc 67 
        ))}
1390 stevensc 68 
      </Select>
1385 stevensc 69 
      {error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
1390 stevensc 70 
    </>
1385 stevensc 71 
  )
72 
}
73 
 
496 stevensc 74 
export default SelectField