Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
1267 stevensc 1 
import React, { useState } from 'react'
1257 stevensc 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`
1270 stevensc 8 
  margin-bottom: 0.5rem;
1271 stevensc 9 
  label {
10 
    font-size: 14px;
11 
    margin-left: 10px;
12 
    line-height: 1;
13 
    cursor: pointer;
14 
    display: inline-flex;
15 
    align-items: center;
16 
  }
1257 stevensc 17 
 
1258 stevensc 18 
  span {
19 
    display: inline-block;
20 
    width: 15px;
21 
    height: 15px;
22 
    position: relative;
23 
    border: 1px solid #d2d2d2;
24 
    border-radius: 100px;
1271 stevensc 25 
    margin-right: 0.5rem;
1258 stevensc 26 
    &::before {
27 
      content: '';
1257 stevensc 28 
      border-radius: 100px;
1258 stevensc 29 
      background-color: #e44d3a;
30 
      width: 8px;
31 
      height: 8px;
32 
      inset: 0;
33 
      margin: auto;
34 
      position: absolute;
35 
      opacity: 0;
36 
      visibility: hidden;
1257 stevensc 37 
    }
38 
  }
1258 stevensc 39 
 
40 
  input {
1261 stevensc 41 
    display: none;
1258 stevensc 42 
  }
43 
 
1261 stevensc 44 
  ${(props) =>
45 
    props.isChecked &&
46 
    css`
47 
      span::before {
1263 stevensc 48 
        visibility: visible;
1261 stevensc 49 
        opacity: 1;
50 
      }
51 
    `}
1257 stevensc 52 
`
53 
 
1268 stevensc 54 
const Checkbox = ({
55 
  name,
56 
  control,
57 
  rules = {},
58 
  label = '',
59 
  error = '',
1269 stevensc 60 
  defaultValue = false
1268 stevensc 61 
}) => {
62 
  const [isChecked, setChecked] = useState(defaultValue)
1270 stevensc 63 
  const { field } = useController({ name, control, defaultValue, rules })
1267 stevensc 64 
 
1268 stevensc 65 
  const handleChange = (e) => {
66 
    setChecked(e.target.checked)
67 
    field.onChange(e)
1267 stevensc 68 
  }
1266 stevensc 69 
 
1257 stevensc 70 
  return (
71 
    <>
1267 stevensc 72 
      <CheckboxContainer isChecked={isChecked}>
1266 stevensc 73 
        <label htmlFor={name}>
1270 stevensc 74 
          <span></span>
1266 stevensc 75 
          <input
76 
            type='checkbox'
1268 stevensc 77 
            {...field}
1270 stevensc 78 
            id={name}
1268 stevensc 79 
            checked={isChecked}
80 
            onChange={handleChange}
1266 stevensc 81 
          />
82 
          {label}
83 
        </label>
1257 stevensc 84 
      </CheckboxContainer>
85 
      {error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
86 
    </>
87 
  )
88 
}
89 
 
90 
export default Checkbox