Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1258 | Rev 1260 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1257 stevensc 1 
import React from 'react'
2 
import { useController } from 'react-hook-form'
3 
import styled from 'styled-components'
4 
 
5 
import FormErrorFeedback from '../FormErrorFeedback'
6 
 
7 
const CheckboxContainer = styled.div`
8 
  display: inline-flex;
9 
  align-items: center;
10 
  * {
11 
    cursor: pointer;
12 
  }
13 
 
1258 stevensc 14 
  span {
15 
    display: inline-block;
16 
    width: 15px;
17 
    height: 15px;
18 
    position: relative;
19 
    border: 1px solid #d2d2d2;
20 
    border-radius: 100px;
21 
    &::before {
22 
      content: '';
1257 stevensc 23 
      border-radius: 100px;
1258 stevensc 24 
      background-color: #e44d3a;
25 
      width: 8px;
26 
      height: 8px;
27 
      inset: 0;
28 
      margin: auto;
29 
      position: absolute;
30 
      opacity: 0;
31 
      visibility: hidden;
1257 stevensc 32 
    }
33 
  }
1258 stevensc 34 
 
35 
  input {
36 
    visibility: hidden;
37 
  }
38 
 
39 
  input:checked + span::before {
40 
    opacity: 1;
41 
    visibility: visible;
42 
  }
43 
 
1257 stevensc 44 
  label {
45 
    font-size: 14px;
46 
    margin-left: 10px;
47 
  }
48 
`
49 
 
50 
const Checkbox = ({ name, control, rules = {}, label = '', error = '' }) => {
51 
  const { field } = useController({
52 
    name,
53 
    control,
54 
    rules
55 
  })
56 
 
57 
  return (
58 
    <>
59 
      <CheckboxContainer>
60 
        <span></span>
61 
        <input
62 
          type='checkbox'
63 
          onChange={field.onChange}
64 
          onBlur={field.onBlur}
65 
          value={field.value}
66 
          name={field.name}
67 
          ref={field.ref}
1259 stevensc 68 
          id={field.name}
1257 stevensc 69 
        />
70 
        <label htmlFor={field.name}>{label}</label>
71 
      </CheckboxContainer>
72 
      {error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
73 
    </>
74 
  )
75 
}
76 
 
77 
export default Checkbox