Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3719 | | 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';
3736 stevensc 2 
import { styled } from '@mui/material';
3719 stevensc 3 
 
3736 stevensc 4 
const SwitchContainer = styled('label')`
3719 stevensc 5 
  display: flex;
6 
  flex-direction: column;
7 
`;
8 
 
3736 stevensc 9 
const StyledSwitch = styled('div')(({ isChecked }) => ({
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 
    backgroundColor: isChecked ? '#2196f3' : '#ccc',
27 
    WebkitTransition: '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 
    backgroundColor: 'white',
38 
    WebkitTransition: '0.4s',
39 
    transform: isChecked ? 'translateX(26px)' : 'translateX(0px)',
40 
    transition: '0.4s'
41 
  },
42 
  '& input:focus + .slider': {
43 
    boxShadow: '0 0 1px #2196f3'
44 
  },
45 
  '& .slider.round': {
46 
    borderRadius: '34px'
47 
  },
48 
  '& .slider.round:before': {
49 
    borderRadius: '50%'
3719 stevensc 50 
  }
3736 stevensc 51 
}));
3719 stevensc 52 
 
53 
const SwitchInput = ({ label = '', isChecked: initialValue = false, setValue = () => null }) => {
54 
  const [isChecked, setIsChecked] = useState(false);
55 
 
56 
  const handleToggle = () => {
57 
    setIsChecked(!isChecked);
58 
    setValue(!isChecked);
59 
  };
60 
 
61 
  useEffect(() => {
62 
    setIsChecked(initialValue);
63 
  }, [initialValue]);
64 
 
65 
  return (
66 
    <SwitchContainer>
67 
      {label}
68 
 
69 
      <StyledSwitch isChecked={isChecked}>
70 
        <input type='checkbox' checked={isChecked} onChange={handleToggle} />
71 
        <span className='slider round'></span>
72 
      </StyledSwitch>
73 
    </SwitchContainer>
74 
  );
75 
};
76 
 
77 
export default SwitchInput;