Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
14229 stevensc 1 
import React from 'react'
2 
import { useEffect } from 'react'
3 
import { useState } from 'react'
4 
 
14231 stevensc 5 
const ToggleComponent = ({
6 
	label1 = 'Activo',
7 
	label2 = 'Inactivo',
14351 kerby 8 
	setValue = function () { },
9 
	currentValue
14231 stevensc 10 
}) => {
14229 stevensc 11 
 
14351 kerby 12 
	const [isActive, setIsActive] = useState((currentValue) ? true : false)
14229 stevensc 13 
 
14 
	useEffect(() => {
15 
		setValue(isActive)
16 
	}, [isActive])
17 
 
14352 kerby 18 
	useEffect(() => {
14353 kerby 19 
		console.log(currentValue)
14352 kerby 20 
		setIsActive((currentValue) ? true : false)
14353 kerby 21 
 
14352 kerby 22 
	}, [currentValue])
14229 stevensc 23 
 
14352 kerby 24 
 
14229 stevensc 25 
	return (
26 
		<div
27 
			className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
28 
			data-toggle="toggle"
29 
			role="button"
30 
			style={{ width: '130px' }}
31 
			onClick={() => setIsActive(!isActive)}
32 
		>
33 
			<input
34 
				type="checkbox"
35 
				checked={isActive}
36 
			/>
37 
			<div className="toggle-group">
14231 stevensc 38 
				<label htmlFor="status" className="btn btn-primary toggle-on">{label1}</label>
39 
				<label htmlFor="status" className="btn btn-light toggle-off">{label2}</label>
14229 stevensc 40 
				<span className="toggle-handle btn btn-light"></span>
41 
			</div>
42 
		</div>
43 
	)
44 
}
45 
 
46 
export default ToggleComponent