Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14230 | Rev 14351 | 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',
8 
	setValue = function () { }
9 
}) => {
14229 stevensc 10 
 
11 
	const [isActive, setIsActive] = useState(false)
12 
 
13 
	useEffect(() => {
14 
		setValue(isActive)
15 
	}, [isActive])
16 
 
17 
 
18 
	return (
19 
		<div
20 
			className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
21 
			data-toggle="toggle"
22 
			role="button"
23 
			style={{ width: '130px' }}
24 
			onClick={() => setIsActive(!isActive)}
25 
		>
26 
			<input
27 
				type="checkbox"
28 
				checked={isActive}
29 
			/>
30 
			<div className="toggle-group">
14231 stevensc 31 
				<label htmlFor="status" className="btn btn-primary toggle-on">{label1}</label>
32 
				<label htmlFor="status" className="btn btn-light toggle-off">{label2}</label>
14229 stevensc 33 
				<span className="toggle-handle btn btn-light"></span>
34 
			</div>
35 
		</div>
36 
	)
37 
}
38 
 
39 
export default ToggleComponent