Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1437 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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