Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 5 | Rev 1273 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
770 stevensc 1 
import React, { useState } from 'react'
2 
import styled, { css } from 'styled-components'
5 stevensc 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:focus + .slider {
37 
    box-shadow: 0 0 1px #2196f3;
38 
  }
39 
  .slider.round {
40 
    border-radius: 34px;
41 
  }
42 
  .slider.round:before {
43 
    border-radius: 50%;
44 
  }
770 stevensc 45 
  ${(props) =>
46 
    props.isChecked &&
47 
    css`
48 
      input + .slider {
49 
        background-color: #2196f3;
50 
      }
51 
      input + .slider:before {
52 
        -webkit-transform: translateX(26px);
53 
        -ms-transform: translateX(26px);
54 
        transform: translateX(26px);
55 
      }
56 
    `}
5 stevensc 57 
`
58 
 
770 stevensc 59 
const SwitchInput = ({ isChecked: initialValue, setValue = () => null }) => {
60 
  const [isChecked, setIsChecked] = useState(initialValue)
5 stevensc 61 
 
770 stevensc 62 
  const handleToggle = () => {
63 
    setIsChecked(!isChecked)
64 
    setValue(!isChecked)
65 
  }
5 stevensc 66 
 
67 
  return (
770 stevensc 68 
    <StyledSwitch isChecked={isChecked}>
69 
      <input type='checkbox' checked={isChecked} onChange={handleToggle} />
70 
      <span className='slider round'></span>
5 stevensc 71 
    </StyledSwitch>
72 
  )
73 
}
74 
 
75 
export default SwitchInput