Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4379 stevensc 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useState } from "react";
3 
import styled from "styled-components";
4 
 
5 
const StyledSwitch = styled.label`
6 
  position: relative;
7 
  display: inline-block;
8 
  width: 60px;
9 
  height: 34px;
10 
  input {
11 
    opacity: 0;
12 
    width: 0;
13 
    height: 0;
14 
  }
15 
  .slider {
16 
    position: absolute;
17 
    cursor: pointer;
18 
    top: 0;
19 
    left: 0;
20 
    right: 0;
21 
    bottom: 0;
22 
    background-color: #ccc;
23 
    -webkit-transition: 0.4s;
24 
    transition: 0.4s;
25 
  }
26 
  .slider:before {
27 
    position: absolute;
28 
    content: "";
29 
    height: 26px;
30 
    width: 26px;
31 
    left: 4px;
32 
    bottom: 4px;
33 
    background-color: white;
34 
    -webkit-transition: 0.4s;
35 
    transition: 0.4s;
36 
  }
37 
  input.active + .slider {
38 
    background-color: #2196f3;
39 
  }
40 
  input:focus + .slider {
41 
    box-shadow: 0 0 1px #2196f3;
42 
  }
43 
  input.active + .slider:before {
44 
    -webkit-transform: translateX(26px);
45 
    -ms-transform: translateX(26px);
46 
    transform: translateX(26px);
47 
  }
48 
  .slider.round {
49 
    border-radius: 34px;
50 
  }
51 
 
52 
  .slider.round:before {
53 
    border-radius: 50%;
54 
  }
55 
`;
56 
 
57 
const SwitchInput = ({ isChecked = false, setValue = () => null }) => {
58 
 
59 
  const [isActive, setIsActive] = useState(isChecked)
60 
 
61 
  useEffect(() => setValue(isActive), [isActive])
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;