Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14229 | Rev 14231 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |

import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'

const ToggleComponent = ({ setValue = function () { } }) => {

        const [isActive, setIsActive] = useState(false)

        useEffect(() => {
                setValue(isActive)
        }, [isActive])


        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">Mostrar</label>
                                <label htmlFor="status" className="btn btn-light toggle-off">No mostrar</label>
                                <span className="toggle-handle btn btn-light"></span>
                        </div>
                </div>
        )
}

export default ToggleComponent