Source: input/SwitchOqt.js

import React, { useEffect, useMemo, useState } from "react";
import { uuid } from "../..";
import { processOptions } from "../..";

/**
 * Componente que renderiza un switch
 * @name Reactor.Components.Input.SwitchOqt
 * @param {string!} name Identificador del componente en el form
 * @param {string?} id Identificador único de componente (si no se pasa este parámetro se genera uno automáticamente)
 * @param {("true" | "false")} [checked = "false"] Establece el estado del switch
 * @param {string} [options = "{}"] Json string con parámetros que se pueden enviar al input en formato React (className, style, etc) 
 * @class
 * @example 
<div class="flex-grow-1 align-self-center" style="width: 20px;">
  <div class="form-switch android-switch switch-green switch-xs">      
    <switch name="{{switchId}}" checked="{{switchChecked}}"/>
  </div>
</div >
 */

export const SwitchOqt = ({children, options, ...props}) => {

  const [checked, setChecked] = useState(() => props.checked === "true");
  const randomId = useMemo(()=> props.id || uuid(), []); 

  const handleChange = (event) =>{
    const newValue = !checked;
    setChecked(newValue);
  }

  useEffect(()=>{
    setChecked(v => props.checked === true || props.checked === "true");
  }, [props.checked])

  return (
    <>
      <input name={props.name} className="android-input" id={props.id || randomId} style={{display: "none"}} type="checkbox" checked={checked} onChange={handleChange} {...processOptions(options)} {...props} />
      <label class="custom-control-label" for={props.id || randomId}></label>
    </>
  )
}