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 = [],

  ...props

}) {

  const { control } = useFormContext();

  return (

    <Controller

      name={name}

      control={control}

      rules={rules}

      render={({ field, fieldState: { error } }) => (

        <FormControl variant='standard' fullWidth>

          {label && <InputLabel shrink>{label}</InputLabel>}

          <MuiSelect {...field} fullWidth displayEmpty {...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>

      )}

    />

  );

}