Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useController } from 'react-hook-form'
import { InputBase, MenuItem, Select, styled } from '@mui/material'

import FormErrorFeedback from './FormErrorFeedback'

const BootstrapInput = styled(InputBase)(({ theme }) => ({
  'label + &': {
    marginTop: theme.spacing(3)
  },
  '& .MuiInputBase-input': {
    borderRadius: 4,
    position: 'relative',
    backgroundColor: theme.palette.background.default,
    border: '1px solid var(--border-primary)',
    fontSize: 16,
    padding: '10px 26px 10px 12px',
    transition: theme.transitions.create(['border-color', 'box-shadow'])
  }
}))

const SelectField = ({
  control,
  name = '',
  placeholder = '',
  error = null,
  rules = {
    required: { value: true, message: 'This field is required' }
  },
  options = [],
  label = '',
  defaultValue = '',
  ...rest
}) => {
  const { field } = useController({
    name,
    control,
    rules,
    defaultValue
  })

  return (
    <>
      <Select
        placeholder={placeholder}
        onChange={field.onChange}
        name={field.name}
        id={field.name}
        ref={field.ref}
        value={field.value}
        {...rest}
        input={<BootstrapInput />}
        displayEmpty
        fullWidth
      >
        <MenuItem value=''>{label}</MenuItem>
        {options.map(({ name, value }) => (
          <MenuItem key={value} value={value}>
            {name}
          </MenuItem>
        ))}
      </Select>
      {error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
    </>
  )
}

export default SelectField