Source: data/Lodash.js

import React from "react";
import { useVars } from "../../_core";
import { useEffect } from "react";
import { useLodash } from "../../_core/hooks/useLodash";


/**
 * Componente que recibe data de una variable, realiza cierto numero de operaciones con Lodash y guarda el resultado en una variable de salida.
 * Para más información de como enviar generar las operaciones y los parametros que necesita cada una de ellas, ver la doc oficial de <a target="_blank" href="https://lodash.com/docs/4.17.15#map">Lodash</a>
 * @name Reactor.Components.Data.Lodash
 * @param {string} input_variable Variable que contiene la data de origen
 * @param {string} input_context Contexto de la variable de origen
 * @param {string} output_variable Variable donde se va a guardar el resultado de las operaciones
 * @param {string} output_context Contexto de la variable de salida
 * @param {JsonString} operations 
 *  Array de operaciones, cada operacion es un array donde el primer elemento es el nombre de la funcion 
 *  y los demas elementos son los parametros necesarios.
 * @class
 * @example
 * 
<lodash 
  input_variable="moviles" 
  input_context="crearOrden" 
  output_variable="moviles" 
  output_context="test" 
  operations='[
    ["orderBy", ["value"], ["<<test.menu.order.value>>"]],
    ["filter", "fnline|(item) => <<test.menu.filter.value>>===null || item.value===<<test.menu.filter.value>>"]
  ]' ></lodash> 

<lodash 
  input_variable="moviles" 
  input_context="test" 
  output_variable="moviles_count" 
  output_context="test" 
  operations='[
    ["size"]
  ]'></lodash> 

<lodash 
  input_variable="moviles" 
  input_context="test" 
  output_variable="moviles_value_sum" 
  output_context="test" 
  operations='[
    ["map", "value"],
    ["sum"]
  ]'></lodash> 

<a href="menu.order" context="test" data='{"value": "desc"}' target="variable">DESC</a>
<a href="menu.order" context="test" data='{"value": "asc"}' target="variable">ASC</a>

<a href="menu.filter" context="test" data='{"value": null}' target="variable">NO FILTRAR</a>
<a href="menu.filter" context="test" data='{"value": 6}' target="variable">FILTRAR POR VALUE 6</a>

<for_each variable="moviles" context="test" template="TestCampo"></for_each>

<p>cantidad: <stamp variable="moviles_count" context="test"></stamp></p>
<p>suma de values: <stamp variable="moviles_value_sum" context="test"></stamp></p>

 */
const Lodash = ({input_variable, input_context, output_variable, output_context, operations, debug = "false", children}) => {

  const lodashResult = useLodash({input_context, input_variable, operations, debug})
  const [ output, setOutput ] = useVars({variable: output_variable, context: output_context});

  useEffect(()=>{
    setOutput(lodashResult);
  }, [lodashResult]);

  return <>{children}</>;
}

export default Lodash;