Source: navigation/FrameLink.js

import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { emptyObject, useReactorNavigation } from "../../_core";

/**
 * Componente que renderiza un link que apunta a una operación y renderiza el resultado en un FrameDiv.
 * @name Reactor.Components.Navigation.FrameLink
 * @param {string} href Nombre de la operación que va a llamar para recibir el objeto de construccion
 * @param {string} data Datos que se van a enviar a la operación en formato json string
 * @param {string} id Identificador del link (para determinar cuales de los )
 * @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} class_name Clase de estilo que va a tener siempre incluida el elemento <a/>
 * @param {string} active_class Clase de estilo que únicamente que se agregará cuando el elemento <a/> este activo (sea el último en setear contenido al FrameDiv de destino)
 * @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_link selected="true" id="movimientos" to="MenuActividadTab" class_name="font-13 rounded-m shadow-bg shadow-bg-s collapsed" content='{"template": "MenuActividadGraficoArea"}' href="_">Movimientos</frame_link >
<frame_link id="ingresos" to="MenuActividadTab" class_name="font-13 rounded-m shadow-bg shadow-bg-s collapsed" href="NombreOperacion" data='{"identificador": 5}'>Ingresos</frame_link >
 */

export const FrameLink = (props) => {
  const {href = "", data = false, id, to, children, class_name = "", active_class = "active-nav", content, selected, use_token = "false", use_prev_token = "false"} = props;
  const frameData = useSelector(state => state.app.frameDivs[to]);
  const isActive = frameData && (id === frameData.active);
  //const navigation = useReactorNavigation({data, target: "frame", to, from: id, href, content});
  const navigation = useReactorNavigation({target: "frame"});

  useEffect(()=>{
    if(selected === true || selected === "true"){
      execute();
    }
  }, [selected, id, to])

  const handleClick = (event) => {
    event && event.preventDefault();
    execute();
  }

  const execute = () => {
    navigation.ToFrameDiv(data ? JSON.parse(data) : emptyObject, href, id, to, content, use_token==="true", use_prev_token==="true");
  }  
  
  return (
    <>
      <a aria-expanded={isActive ? "true" : "false"} className={isActive ? class_name + " " + active_class : class_name} href="#" onClick={handleClick} >{ children }</a>
    </>
  )
}