Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 5 Rev 770
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import styled from 'styled-components'
 2 
import styled, { css } from 'styled-components'
Línea 3... Línea 3...
3 
 
 3 
 
4 
const StyledSwitch = styled.label`
 4 
const StyledSwitch = styled.label`
5 
  position: relative;
 5 
  position: relative;
6 
  display: inline-block;
 6 
  display: inline-block;
Línea 31... Línea 31...
31 
    bottom: 4px;
 31 
    bottom: 4px;
32 
    background-color: white;
 32 
    background-color: white;
33 
    -webkit-transition: 0.4s;
 33 
    -webkit-transition: 0.4s;
34 
    transition: 0.4s;
 34 
    transition: 0.4s;
35 
  }
 35 
  }
36 
  input.active + .slider {
 - 
 
37 
    background-color: #2196f3;
 - 
 
38 
  }
 - 
 
39 
  input:focus + .slider {
 36 
  input:focus + .slider {
40 
    box-shadow: 0 0 1px #2196f3;
 37 
    box-shadow: 0 0 1px #2196f3;
41 
  }
 38 
  }
42 
  input.active + .slider:before {
 - 
 
43 
    -webkit-transform: translateX(26px);
 - 
 
44 
    -ms-transform: translateX(26px);
 - 
 
45 
    transform: translateX(26px);
 - 
 
46 
  }
 - 
 
47 
  .slider.round {
 39 
  .slider.round {
48 
    border-radius: 34px;
 40 
    border-radius: 34px;
49 
  }
 41 
  }
50 
 
 - 
 
51 
  .slider.round:before {
 42 
  .slider.round:before {
52 
    border-radius: 50%;
 43 
    border-radius: 50%;
53 
  }
 44 
  }
- 
 
 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 
    `}
54 
`
 57 
`
Línea 55... Línea 58...
55 
 
 58 
 
56 
const SwitchInput = ({ isChecked = false, setValue = () => null }) => {
 59 
const SwitchInput = ({ isChecked: initialValue, setValue = () => null }) => {
Línea 57... Línea 60...
57 
  const [isActive, setIsActive] = useState(isChecked)
 60 
  const [isChecked, setIsChecked] = useState(initialValue)
58 
 
 61 
 
59 
  useEffect(() => {
 62 
  const handleToggle = () => {
- 
 
 63 
    setIsChecked(!isChecked)
Línea 60... Línea 64...
60 
    setValue(isActive)
 64 
    setValue(!isChecked)
61 
  }, [isActive])
 65 
  }
62 
 
 - 
 
63 
  return (
 - 
 
64 
    <StyledSwitch className="switch">
 - 
 
65 
      <input
 66 
 
66 
        type="checkbox"
 - 
 
67 
        className={isActive && 'active'}
 67 
  return (
68 
        onChange={() => setIsActive(!isActive)}
 68 
    <StyledSwitch isChecked={isChecked}>
69 
      />
 69 
      <input type='checkbox' checked={isChecked} onChange={handleToggle} />
70 
      <span className="slider round"></span>
 70 
      <span className='slider round'></span>
Línea 71... Línea 71...
71 
    </StyledSwitch>
 71 
    </StyledSwitch>