Source: templates/SetFocus.js

import React, { useMemo } from "react";
import { booleanString, processOptions } from "../..";
const safeEval = require('safe-eval-2')

/**
 * Componente que responde al evento click para hacer foco en un componente
 * @name Reactor.Components.Templates.SetFocus
 * @param {string!} target Id del input
 * @param {BooleanString} clear Intenta limpiar el elemento target al darle foco
 * @param {string} delay Se puede establecer un intérvalo en ms para retrasar el foco  del elemento
 * @param {JsonString} options Json string con los atributos que se quieran enviar al div contenedor
 * @class 
 * @example 
<input type="text" id="test" />
<set_focus 
  target="test" 
  clear="true"
>
  ...
<set_focus/>
 */

export const SetFocus = ({target, clear, options, delay, children}) => {
  const focus = () => {
    let element = document.getElementById(target);
    try{
      element?.focus && element.focus();
      if(booleanString(clear)){
        element?.setAttribute("value", "");
      }
    } catch(e){
    }
  }

  const handleClick = (event) => {
    if(delay){
      setTimeout(focus, parseInt(delay));
    }else{
      focus();
    }
  }

  const divOptions = useMemo(() => processOptions(options), [options]);
  
  return <div {...divOptions} onClick={handleClick}>{children}</div>;
}