Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React, { useEffect, useState } from 'react';
2 
import styled, { css } from 'styled-components';
3 
 
4 
const SwitchContainer = styled.label`
5 
  display: flex;
6 
  flex-direction: column;
7 
`;
8 
 
9 
const StyledSwitch = styled.div`
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 
  }
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 
    `}
62 
`;
63 
 
64 
const SwitchInput = ({ label = '', isChecked: initialValue = false, setValue = () => null }) => {
65 
  const [isChecked, setIsChecked] = useState(false);
66 
 
67 
  const handleToggle = () => {
68 
    setIsChecked(!isChecked);
69 
    setValue(!isChecked);
70 
  };
71 
 
72 
  useEffect(() => {
73 
    setIsChecked(initialValue);
74 
  }, [initialValue]);
75 
 
76 
  return (
77 
    <SwitchContainer>
78 
      {label}
79 
 
80 
      <StyledSwitch isChecked={isChecked}>
81 
        <input type='checkbox' checked={isChecked} onChange={handleToggle} />
82 
        <span className='slider round'></span>
83 
      </StyledSwitch>
84 
    </SwitchContainer>
85 
  );
86 
};
87 
 
88 
export default SwitchInput;