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={{

              marginTop: '0',

              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>

      )}

    />

  );

}