Source: templates/StampLodash.js

import React, { useMemo } from "react";
import { useLodash } from "../../_core/hooks/useLodash";

/**
 * Componente que muestra el valor de una variable primitiva permitiendo pasar el valor por una o varias funciones lodash y/o moment
 * @name Reactor.Components.Templates.StampLodash
 * @param {string} variable Nombre de la variable o un valor string comenzando con comilla simple (')
 * @param {string} [context = "global"] Nombre del contexto a usar
 * @param {string} [empty = ""] Texto que se va a mostrar cuando el valor de la variable este vacío
 * @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 
<div class="pt-2">
  <h6>
    <stamp_lodash 
      variable="'{{fechaProgramada}}" 
      operations='[
        ["moment.format", "DD/MM"]
      ]'
    ></stamp_lodash>
  </h6>
  <h6>
    <stamp_lodash 
      variable="'{{fechaProgramada}}" 
      operations='[
        ["moment.format", "HH:mm"]
      ]'
    ></stamp_lodash>
  </h6>  
</div>

 */

const StampLodash = ({variable, context, operations, debug = "false", children, empty = ""}) => {
  const lodashResult = useLodash({input_context: context, input_variable: variable, operations, debug})
  const finalData = useMemo(()=>{
    if(typeof lodashResult === "object"){
      return JSON.stringify(lodashResult);
    }
    return lodashResult === null || lodashResult === undefined || lodashResult === "" ? empty : lodashResult;
  }, [lodashResult]) 
  return (
    <>
      {finalData}
      {children}
    </>
  );
}

export default StampLodash;