Class: Live

new Live(template, div_optionsopt, paramsopt)

Parameters:

Name	Type	Attributes	Default	Description
template	string			Un código react que tendra acceso a un contexto limitado (componentes, React y useVariables)
div_options	JsonString	<optional>	"{}"	Propiedades que se envian al componente div que envuelve el live
params	JsonString	<optional>	"{}"	Parametros que se envian al componente live (solo cuando se llama a un componente live desde el parametro template)

Source:

• templates/Live.js, line 20

Example

<live template='
  () => {
    const [count, setCount] = React.useState(0);
    React.useEffect(()=>{
      var interval = setInterval(() => {
        setCount(count => count + 1)
      }, 1000);
      return ()=>clearInterval(interval);
    }, [])
    return (
      <center>
        <h3>
          {count}
        </h3>
      </center>
    )

  }
'>
</live>
*************************
codigo de template live

() => {
  //params:
      //variable: string, nombre de la variable que se va a modificar
      //context: string, contexto al que pertenece la variable
      //defaultValue: number, el valor por defecto
      //count: cantidad de botones
      //max: number, el valor maximo posible

  //inicializacion de parametros
  const { 
    variable = "botoneta", 
    context = "live", 
    defaultValue,
    count = 5, 
    max = Number.MAX_SAFE_INTEGER, 
  } = params;

  //variables de contexto
  const [value, setValue] = useVars({variable, context, defaultValue});
  const [editing, setEditing] = useVars({variable: `${variable}_editing`, context, defaultValue: false});
  const [disabled, setDisabled] = useVars({variable: `${variable}_disabled`, context, defaultValue: false});

  //referencias interna
  const inputRef = React.useRef();
  
  const botoncitos = Array(count).fill(0).map((n, index) => index + 1);

  //cuando hace click en el boton mas disminuye en uno el valor (si no es menor a cero)  
  const handleMinusClick = (event) => {
    if(disabled) return;
    event.preventDefault();
    const currentValue = value || 0;
    setValue(currentValue - 1 < 0 ? 0 : currentValue - 1);
  }
  
  //cuando hace click en el boton mas aumenta en uno el valor (si no excede params.max)  
  const handlePlusClick = (event) => {
    if(disabled) return;
    event.preventDefault();
    const currentValue = value || 0;
    setValue(currentValue + 1 > max ? currentValue : currentValue + 1);
  }
  
  //cuando hace click en el boton del numero establece ese numero como valor
  const handleNumberClick = (number, event) => {
    if(disabled) return;
    event.preventDefault();
    setValue(number);
  }

  //cuando hace click en el numero inicializa la edicion a mano, hace foco en el input y deshabilita el control
  const handleValueClick = (event) => {
    if(disabled) return;
    event.preventDefault();
    setEditing(true);
    setTimeout(()=>inputRef.current.focus(), 1);
  }
  
  //cuando se hace foco en el input se selecciona todo el texto
  const handleEditingFocus = () => {
    inputRef.current.select();
  };

  //cuando se pierde el foco del input se sale de la edicion
  const handleEditingBlur = () => {
    setEditing(false);
  };
  
  //cuando esta editando y se cambia el valor lo guarda temporalmente (siempre que sea valido)
  const handleEditingChangeValue = (event) => {
    const validate = inputRef.current.validity.valid && 
                      ( event.target.value === "" ||
                        (
                          parseInt(event.target.value) >= 0 && 
                          parseInt(event.target.value) <= max
                        )
                      );
    if(validate){
      setValue(event.target.value);
    }
  }
  

  return (
    <div className="botoneta wrapper">
      {botoncitos.map(n => <a href="#" className={`botoneta button ${(n === value ? "active" : "")}`} onClick={(event) => handleNumberClick(n, event)}>{n}</a>)}
      <a href="#" className="botoneta button minus" onClick={handleMinusClick}>-</a>
      {editing &&
        <input className="botoneta input" ref={inputRef} type="number" value={value} onChange={handleEditingChangeValue} onFocus={handleEditingFocus} onBlur={handleEditingBlur} pattern="^\d+$"/>
      }
      {!editing &&
        <div className="botoneta value" onClick={handleValueClick}>{value || 0}</div>
      }
      <a href="#" className="botoneta button plus" onClick={handlePlusClick}>+</a>
      
      {!value &&
        children
      }
    </div>
  )
}
*************************
para llamarlo desde otro template:
<live 
  template="LiveBotoneta" 
  params='{"count": 8, "variable": "noches", "context": "test", "max": 10, "defaultValue": 2}' 
  show_errors="true"
>
  <h1>hola</h1>
</live>