Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { FormControl, InputLabel, MenuItem, Select as MuiSelect, Typography } from '@mui/material';

export function FormSelect({
  name,
  label,
  rules,
  placeholder = 'Seleccione una opción',
  options = [],
  style = {},
  ...props
}) {
  const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      rules={rules}
      render={({ field, fieldState: { error } }) => (
        <FormControl variant='standard' fullWidth sx={style}>
          {label && <InputLabel shrink>{label}</InputLabel>}

          <MuiSelect
            {...field}
            fullWidth
            displayEmpty
            sx={{
              borderRadius: '4px'
            }}
            {...props}
          >
            <MenuItem value='' disabled>
              {placeholder}
            </MenuItem>
            {options.map(({ label, value }) => (
              <MenuItem key={value} value={value}>
                {label}
              </MenuItem>
            ))}
          </MuiSelect>

          {error && (
            <Typography variant='caption' color='red'>
              {error.message}
            </Typography>
          )}
        </FormControl>
      )}
    />
  );
}