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'
543 stevensc 2 
import styled from 'styled-components'
3 
 
496 stevensc 4 
import FormErrorFeedback from './FormErrorFeedback'
5 
 
543 stevensc 6 
const StyledSelectField = styled.div`
7 
  align-items: center;
8 
  background-color: #eef3f0;
9 
  border-radius: var(--border-radius);
10 
  color: gray;
11 
  cursor: pointer;
12 
  display: flex;
13 
  min-height: 1.5rem;
14 
  padding: 0.5rem;
15 
  width: -moz-available;
16 
  width: -webkit-fill-available;
17 
  width: fill-available;
18 
  select {
19 
    border: none;
20 
    outline: none;
545 stevensc 21 
    background-color: #eef3f0;
543 stevensc 22 
    width: 100%;
23 
  }
24 
`
25 
 
539 stevensc 26 
const SelectField = ({
541 stevensc 27 
  className = '',
540 stevensc 28 
  name = '',
29 
  label = '',
30 
  options = [],
31 
  ref = null,
32 
  errors = {},
539 stevensc 33 
  onChange = () => {},
547 stevensc 34 
  value = '',
539 stevensc 35 
}) => (
543 stevensc 36 
  <StyledSelectField className={className}>
547 stevensc 37 
    <select
38 
      defaultValue={value}
39 
      name={name}
40 
      id={name}
41 
      ref={ref}
42 
      onChange={onChange}
43 
    >
496 stevensc 44 
      <option value="">{label}</option>
45 
      {options.map(({ name, value }) => (
46 
        <option value={value} key={value}>
47 
          {name}
48 
        </option>
49 
      ))}
50 
    </select>
51 
    {errors[name] && (
52 
      <FormErrorFeedback>{errors[name].message}</FormErrorFeedback>
53 
    )}
543 stevensc 54 
  </StyledSelectField>
496 stevensc 55 
)
56 
 
57 
export default SelectField