Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1269 | Rev 1271 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1269 Rev 1270
Línea 3... Línea 3...
3
import styled, { css } from 'styled-components'
3
import styled, { css } from 'styled-components'
Línea 4... Línea 4...
4
 
4
 
Línea 5... Línea 5...
5
import FormErrorFeedback from '../FormErrorFeedback'
5
import FormErrorFeedback from '../FormErrorFeedback'
6
 
-
 
7
const CheckboxContainer = styled.div`
6
 
8
  display: inline-flex;
-
 
9
  align-items: center;
-
 
10
  * {
-
 
Línea 11... Línea 7...
11
    cursor: pointer;
7
const CheckboxContainer = styled.div`
12
  }
8
  margin-bottom: 0.5rem;
13
 
9
 
14
  span {
10
  span {
15
    display: inline-block;
11
    display: inline-block;
16
    width: 15px;
12
    width: 15px;
17
    height: 15px;
13
    height: 15px;
-
 
14
    position: relative;
18
    position: relative;
15
    border: 1px solid #d2d2d2;
19
    border: 1px solid #d2d2d2;
16
    border-radius: 100px;
20
    border-radius: 100px;
17
 
21
    &::before {
18
    &::before {
22
      content: '';
19
      content: '';
Línea 43... Línea 40...
43
  }
40
  }
Línea 44... Línea 41...
44
 
41
 
45
  ${(props) =>
42
  ${(props) =>
46
    props.isChecked &&
43
    props.isChecked &&
47
    css`
-
 
48
      margin-bottom: 0.5rem;
44
    css`
49
      span::before {
45
      span::before {
50
        visibility: visible;
46
        visibility: visible;
51
        opacity: 1;
47
        opacity: 1;
52
      }
48
      }
Línea 60... Línea 56...
60
  label = '',
56
  label = '',
61
  error = '',
57
  error = '',
62
  defaultValue = false
58
  defaultValue = false
63
}) => {
59
}) => {
64
  const [isChecked, setChecked] = useState(defaultValue)
60
  const [isChecked, setChecked] = useState(defaultValue)
65
  const { field } = useController({ name, control, defaultValue })
61
  const { field } = useController({ name, control, defaultValue, rules })
Línea 66... Línea 62...
66
 
62
 
67
  const handleChange = (e) => {
-
 
68
    console.log(e.target.checked)
63
  const handleChange = (e) => {
69
    setChecked(e.target.checked)
64
    setChecked(e.target.checked)
70
    field.onChange(e)
65
    field.onChange(e)
Línea 71... Línea 66...
71
  }
66
  }
72
 
67
 
73
  return (
68
  return (
74
    <>
-
 
75
      <CheckboxContainer isChecked={isChecked}>
69
    <>
-
 
70
      <CheckboxContainer isChecked={isChecked}>
76
        <span></span>
71
        <label htmlFor={name}>
77
        <label htmlFor={name}>
72
          <span></span>
78
          <input
73
          <input
-
 
74
            type='checkbox'
79
            type='checkbox'
75
            {...field}
80
            {...field}
76
            id={name}
81
            checked={isChecked}
77
            checked={isChecked}
82
            onChange={handleChange}
78
            onChange={handleChange}
83
          />
79
          />