Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1437 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React, { useState } from 'react';
2 
import { useController } from 'react-hook-form';
3 
import styled, { css } from 'styled-components';
4 
 
5 
import FormErrorFeedback from '../form/FormErrorFeedback';
6 
 
7 
const CheckboxContainer = styled.div`
8 
  margin-bottom: 0.5rem;
9 
  label {
10 
    font-size: 14px;
11 
    line-height: 1;
12 
    cursor: pointer;
13 
    display: inline-flex;
14 
    align-items: center;
15 
  }
16 
 
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 
    margin-right: 0.5rem;
25 
    &::before {
26 
      content: '""';
27 
      border-radius: 100px;
28 
      background-color: #e44d3a;
29 
      width: 8px;
30 
      height: 8px;
31 
      inset: 0;
32 
      margin: auto;
33 
      position: absolute;
34 
      opacity: 0;
35 
      visibility: hidden;
36 
    }
37 
  }
38 
 
39 
  input {
40 
    display: none;
41 
  }
42 
 
43 
  ${(props) =>
44 
    props.isChecked &&
45 
    css`
46 
      span::before {
47 
        visibility: visible;
48 
        opacity: 1;
49 
      }
50 
    `}
51 
`;
52 
 
53 
const Checkbox = ({ name, control, rules = {}, label = '', error = '', defaultValue = false }) => {
54 
  const [isChecked, setChecked] = useState(defaultValue);
55 
  const { field } = useController({ name, control, defaultValue, rules });
56 
 
57 
  const handleChange = (e) => {
58 
    setChecked(e.target.checked);
59 
    field.onChange(e);
60 
  };
61 
 
62 
  return (
63 
    <>
64 
      <CheckboxContainer isChecked={isChecked}>
65 
        <label htmlFor={name}>
66 
          <span></span>
67 
          <input type='checkbox' {...field} id={name} checked={isChecked} onChange={handleChange} />
68 
          {label}
69 
        </label>
70 
      </CheckboxContainer>
71 
      {error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}
72 
    </>
73 
  );
74 
};
75 
 
76 
export default Checkbox;