Proyectos de Subversion LeadersLinked - SPA

Rev

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

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