Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
6509 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import styled from 'styled-components'
3 
 
4 
const StyledSwitch = styled.label`
5 
  position: relative;
6 
  display: inline-block;
7 
  width: 60px;
8 
  height: 34px;
9 
  input {
10 
    opacity: 0;
11 
    width: 0;
12 
    height: 0;
13 
  }
14 
  .slider {
15 
    position: absolute;
16 
    cursor: pointer;
17 
    top: 0;
18 
    left: 0;
19 
    right: 0;
20 
    bottom: 0;
21 
    background-color: #ccc;
22 
    -webkit-transition: 0.4s;
23 
    transition: 0.4s;
24 
  }
25 
  .slider:before {
26 
    position: absolute;
27 
    content: '';
28 
    height: 26px;
29 
    width: 26px;
30 
    left: 4px;
31 
    bottom: 4px;
32 
    background-color: white;
33 
    -webkit-transition: 0.4s;
34 
    transition: 0.4s;
35 
  }
36 
  input.active + .slider {
37 
    background-color: #2196f3;
38 
  }
39 
  input:focus + .slider {
40 
    box-shadow: 0 0 1px #2196f3;
41 
  }
42 
  input.active + .slider:before {
43 
    -webkit-transform: translateX(26px);
44 
    -ms-transform: translateX(26px);
45 
    transform: translateX(26px);
46 
  }
47 
  .slider.round {
48 
    border-radius: 34px;
49 
  }
50 
 
51 
  .slider.round:before {
52 
    border-radius: 50%;
53 
  }
54 
`
55 
 
56 
const SwitchInput = ({ isChecked = false, setValue = () => null }) => {
57 
  const [isActive, setIsActive] = useState(isChecked)
58 
 
6882 stevensc 59 
  useEffect(() => {
60 
    setValue(isActive)
61 
  }, [isActive])
6509 stevensc 62 
 
63 
  return (
64 
    <StyledSwitch className="switch">
65 
      <input
66 
        type="checkbox"
67 
        className={isActive && 'active'}
68 
        onChange={() => setIsActive(!isActive)}
69 
      />
70 
      <span className="slider round"></span>
71 
    </StyledSwitch>
72 
  )
73 
}
74 
 
75 
export default SwitchInput