Source: templates/ForOne.js

import React, { useEffect, useMemo, useState } from "react";
import { useSelector } from "react-redux";
import { emptyObject, processIncludeVariables, processOptions, Template, useIncludeVariables } from "../..";
const objectPath = require("object-path");

/**
 * Componente que convierte variable de objeto en un componente
 * @name Reactor.Components.Templates.ForOne
 * @param {string} variable Nombre de la variable
 * @param {string} [context = "global"] Nombre del contexto a usar
 * @param {string} template Un nombre de template o un html template
 * @param {string} empty Un nombre de template que se ejecuta llama cuando el objeto es nulo
 * @param {JsonString} [params = "{}"] Parametros que se envian al item y se inyectan en el objeto
 * @param {string} [include_variables = ""] Lista de variables que se envian al item en la propiedad _includeVariables
 * @class 
 * @example 
<ul>
  <!--en el template las propiedades del objeto pasan como parametros-->
  <for_one variable="lista" context="un_contexto" template="NombreTemplateItem" empty="NombreTemplateVacio">
  </for_each>
</ul>
 */

export const ForOne = ({variable, context = "global", template, empty, children, include_variables, params}) => {
 
  const varsContext = useSelector(state => state.app.variables[context])
  const obj = useMemo(() => objectPath.get( varsContext, variable), [varsContext, variable]);
  const _includeVariables = useIncludeVariables({variablesState: varsContext, include_variables});
  const paramsObj = useMemo(() => processOptions(params, emptyObject, emptyObject), [params]);

  const Component = useMemo(()=>{
    if(!!obj){
      return <Template content={{...obj, template, ...paramsObj, _includeVariables: _includeVariables?.variables, _context: context, _variable: variable}} /> ; 
    }else{
      return empty ? <Template content={{template: empty}} /> : <></>; 
    }
  }, [variable, context, empty, template, obj, paramsObj, _includeVariables])

  return (
    <>
      {Component}
      {children}
    </>
  );

}