Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1268 | Rev 1270 | 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`
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`
1266 stevensc 48 
      margin-bottom: 0.5rem;
1261 stevensc 49 
      span::before {
1263 stevensc 50 
        visibility: visible;
1261 stevensc 51 
        opacity: 1;
52 
      }
53 
    `}
1257 stevensc 54 
`
55 
 
1268 stevensc 56 
const Checkbox = ({
57 
  name,
58 
  control,
59 
  rules = {},
60 
  label = '',
61 
  error = '',
1269 stevensc 62 
  defaultValue = false
1268 stevensc 63 
}) => {
64 
  const [isChecked, setChecked] = useState(defaultValue)
65 
  const { field } = useController({ name, control, defaultValue })
1267 stevensc 66 
 
1268 stevensc 67 
  const handleChange = (e) => {
1269 stevensc 68 
    console.log(e.target.checked)
1268 stevensc 69 
    setChecked(e.target.checked)
70 
    field.onChange(e)
1267 stevensc 71 
  }
1266 stevensc 72 
 
1257 stevensc 73 
  return (
74 
    <>
1267 stevensc 75 
      <CheckboxContainer isChecked={isChecked}>
1257 stevensc 76 
        <span></span>
1266 stevensc 77 
        <label htmlFor={name}>
78 
          <input
79 
            type='checkbox'
1268 stevensc 80 
            {...field}
81 
            checked={isChecked}
82 
            onChange={handleChange}
1266 stevensc 83 
          />
84 
          {label}
85 
        </label>
1257 stevensc 86 
      </CheckboxContainer>
87 
      {error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
88 
    </>
89 
  )
90 
}
91 
 
92 
export default Checkbox