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 }) => ({
8
  'label + &': {
9
    marginTop: theme.spacing(3)
10
  },
11
  '& .MuiInputBase-input': {
12
    borderRadius: 4,
13
    position: 'relative',
1391 stevensc 14
    backgroundColor: theme.palette.background.default,
1401 stevensc 15
    border: '1px solid var(--border-primary)',
1390 stevensc 16
    fontSize: 16,
17
    padding: '10px 26px 10px 12px',
1401 stevensc 18
    transition: theme.transitions.create(['border-color', 'box-shadow'])
543 stevensc 19
  }
1390 stevensc 20
}))
543 stevensc 21
 
539 stevensc 22
const SelectField = ({
1385 stevensc 23
  control,
24
  name = '',
25
  placeholder = '',
26
  error = null,
27
  rules = {
28
    required: { value: true, message: 'This field is required' }
29
  },
30
  options = [],
540 stevensc 31
  label = '',
1390 stevensc 32
  defaultValue = '',
33
  ...rest
1385 stevensc 34
}) => {
35
  const { field } = useController({
36
    name,
37
    control,
38
    rules,
39
    defaultValue
40
  })
496 stevensc 41
 
1385 stevensc 42
  return (
1390 stevensc 43
    <>
44
      <Select
1385 stevensc 45
        placeholder={placeholder}
46
        onChange={field.onChange}
47
        name={field.name}
48
        id={field.name}
49
        ref={field.ref}
1386 stevensc 50
        value={field.value}
1390 stevensc 51
        {...rest}
52
        input={<BootstrapInput />}
1392 stevensc 53
        displayEmpty
1401 stevensc 54
        fullWidth
1385 stevensc 55
      >
1390 stevensc 56
        <MenuItem value=''>{label}</MenuItem>
1385 stevensc 57
        {options.map(({ name, value }) => (
1390 stevensc 58
          <MenuItem key={value} value={value}>
1385 stevensc 59
            {name}
1390 stevensc 60
          </MenuItem>
1385 stevensc 61
        ))}
1390 stevensc 62
      </Select>
1385 stevensc 63
      {error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
1390 stevensc 64
    </>
1385 stevensc 65
  )
66
}
67
 
496 stevensc 68
export default SelectField