Proyectos de Subversion LeadersLinked - Backend

import React from 'react'

import { useEffect } from 'react'

import { useState } from 'react'

const ToggleComponent = ({

	label1 = 'Activo',

	label2 = 'Inactivo',

	setValue = function () { },

	currentValue =true

}) => {

	const [isActive, setIsActive] = useState((currentValue) ? true : false)

	useEffect(() => {

		setValue(isActive)

	}, [isActive])

	useEffect(() => {

		console.log(currentValue)

		setIsActive((currentValue) ? true : false)

	}, [currentValue])

	return (

		<div

			className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}

			data-toggle="toggle"

			role="button"

			style={{ width: '130px' }}

			onClick={() => setIsActive(!isActive)}

		>

			<input

				type="checkbox"

				checked={isActive}

			/>

			<div className="toggle-group">

				<label htmlFor="status" className="btn btn-primary toggle-on">{label1}</label>

				<label htmlFor="status" className="btn btn-light toggle-off">{label2}</label>

				<span className="toggle-handle btn btn-light"></span>

			</div>

		</div>

	)

}

export default ToggleComponent