Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1258 | Ir a la última revisión | | 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 
 
14 
  input[type='checkbox'],
15 
  input[type='radio'] {
16 
    display: none;
17 
    & + span {
18 
      display: inline-block;
19 
      width: 15px;
20 
      height: 15px;
21 
      position: relative;
22 
      border: 1px solid #d2d2d2;
23 
      border-radius: 100px;
24 
      &::before {
25 
        content: '';
26 
        border-radius: 100px;
27 
        background-color: #e44d3a;
28 
        width: 8px;
29 
        height: 8px;
30 
        inset: 0;
31 
        margin: auto;
32 
        position: absolute;
33 
        opacity: 0;
34 
        visibility: hidden;
35 
      }
36 
    }
37 
    &:checked + span:before {
38 
      opacity: 1;
39 
      visibility: visible;
40 
    }
41 
  }
42 
  label {
43 
    font-size: 14px;
44 
    margin-left: 10px;
45 
  }
46 
`
47 
 
48 
const Checkbox = ({ name, control, rules = {}, label = '', error = '' }) => {
49 
  const { field } = useController({
50 
    name,
51 
    control,
52 
    rules
53 
  })
54 
 
55 
  return (
56 
    <>
57 
      <CheckboxContainer>
58 
        <span></span>
59 
        <input
60 
          type='checkbox'
61 
          onChange={field.onChange}
62 
          onBlur={field.onBlur}
63 
          value={field.value}
64 
          name={field.name}
65 
          ref={field.ref}
66 
        />
67 
        <label htmlFor={field.name}>{label}</label>
68 
      </CheckboxContainer>
69 
      {error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
70 
    </>
71 
  )
72 
}
73 
 
74 
export default Checkbox