Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1264 | Rev 1266 | 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'
1261 stevensc 3
import styled, { css } from 'styled-components'
1257 stevensc 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 {
1261 stevensc 36
    display: none;
1258 stevensc 37
  }
38
 
1257 stevensc 39
  label {
40
    font-size: 14px;
41
    margin-left: 10px;
1260 stevensc 42
    line-height: 1;
1257 stevensc 43
  }
1261 stevensc 44
 
45
  ${(props) =>
46
    props.isChecked &&
47
    css`
48
      span::before {
1263 stevensc 49
        visibility: visible;
1261 stevensc 50
        opacity: 1;
51
      }
52
    `}
1257 stevensc 53
`
54
 
55
const Checkbox = ({ name, control, rules = {}, label = '', error = '' }) => {
56
  const { field } = useController({
57
    name,
58
    control,
59
    rules
60
  })
61
 
62
  return (
63
    <>
1262 stevensc 64
      <CheckboxContainer isChecked={field.ref.current.checked}>
1257 stevensc 65
        <span></span>
66
        <input
67
          type='checkbox'
68
          name={field.name}
1265 stevensc 69
          id={field.name}
1257 stevensc 70
          ref={field.ref}
71
        />
1265 stevensc 72
        <label htmlFor={name}>{label}</label>
1257 stevensc 73
      </CheckboxContainer>
74
      {error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
75
    </>
76
  )
77
}
78
 
79
export default Checkbox