Source: navigation/FrameSelect.js

import React, { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import { useReactorNavigation } from "../../_core";
import { reactorParser, uuid } from "../..";

/**
 * Componente que renderiza un selector que apunta a una operación, al cambiar la selección se llama a la operación con la data que la opcion tenga establecida, el resultado se renderiza en un FrameDiv de destino.
 * @name Reactor.Components.Navigation.FrameSelect
 * @param {string} href Nombre de la operación que va a llamar para recibir el objeto de construccion
 * @param {string} to Identificador del FrameDiv de destino
 * @param {"true"|"false"} use_token Si es "true" envía el token del flujo actual a la operación 
 * @param {"true"|"false"} use_prev_token Si es "true" utiliza el token recibido en la última respuesta de operación, si es "false" la omite creando un nuevo flujo
 * @param {string} value Valor de la opción que por defecto va a estar seleccionada (desencadena un llamado a la operación )
 * @param {string} content Objeto de template en formato json string para actualizar el FrameDiv de manera sincrónica y offline, es necesario que href sea establecido en "_"
 * @param {string} selected Determina si el FrameLink iniciara activo por defecto (cuando se renderiza hace la petición al servidor o envía el content al FrameDiv sincrónicamente), establecer en "true" para activar
 * @class
 * @example
<frame_select
  href="Operacion"
  to="DivCharts"
  value="10"
  options='{
    "class": "form-select rounded-xs"
  }'
>
  <option value="00" data='{"idMes": "00"}'>Mes actual</option>
  <option value="01" data='{"idMes": "01"}'>Enero</option>
  <option value="02" data='{"idMes": "02"}'>Febrero</option>
  <option value="03" data='{"idMes": "03"}'>Marzo</option>
  <option value="04" data='{"idMes": "04"}'>Abril</option>
  <option value="05" data='{"idMes": "05"}'>Mayo</option>
  <option value="06" data='{"idMes": "06"}'>Junio</option>
  <option value="07" data='{"idMes": "07"}'>Julio</option>
  <option value="08" data='{"idMes": "08"}'>Agosto</option>
  <option value="09" data='{"idMes": "09"}'>Septiembre</option>
  <option value="10" data='{"idMes": "10"}'>Octubre</option>
  <option value="11" data='{"idMes": "11"}'>Noviembre</option>
  <option value="12" data='{"idMes": "12"}'>Diciembre</option>
</frame_select>
 */

export const FrameSelect = ({to, children, options, current_value, href, use_token = "false", use_prev_token = "false"}) => {

  const navigation = useReactorNavigation({target: "frame"});
  const element = useRef();
  const frameData = useSelector(state => state.app.frameDivs[to]);
  const active = frameData && frameData.active;

  useEffect(()=>{
    navigate(element.current, current_value);
  }, [current_value])

  const handleChange = (event) => {
    navigate(event.target, event.target.value);
  }
  
  const navigate = (select, value) => {
    const options = Object.values(select.options);
    const json = options.find(option => option.value === value)?.attributes.data.value.replace("\\", "");
    var jsonData = null;
    try{
      jsonData = JSON.parse(json);
    }catch(e){
    }
    navigation.ToFrameDiv(jsonData, href, value, to, json, use_token==="true", use_prev_token==="true");
  }

  const newOptions = options ? JSON.parse(options, reactorParser) : {};

  return (
    <select ref={element} value={active} {...newOptions} onChange={handleChange} >     
      {children} 
    </select>
  )

}