Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2785 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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