Source: templates/SelectCase.js

import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useSelector } from "react-redux";
const objectPath = require("object-path");

/**
 * Componente que inicia un contexto de SelectCase para usar Case y Default
 * @name Reactor.Components.Templates.SelectCase
 * @param {string} variable Nombre de la variable, para enviar valores absolutos (o parametros) comenzar con comilla simple la cadena, es este caso no se requiere context
 * @param {string} [context = "global"] Nombre del contexto a usar. Por defecto es "global"
 * @class 
 * @example 
SelectCase con variables
<select_case variable="tipo" context="un_contexto">
  <case value="alerta">...</case>
  <case value="mensaje">...</case>
  <case value="info">...</case>
  <default>...</default>
</select_case>
SelectCase con valor absoluto o parametros
<select_case variable="'{{tipoMensaje}}">
  <case value="alerta">...</case>
  <case value="mensaje">...</case>
  <case value="info">...</case>
  <default>...</default>
</select_case>
*/
export const SelectCaseContext = React.createContext({value: "", match: false, updateMatch: (match=>{})})

export const SelectCase = ({variable, context = "global", children}) => {
  
  const getVariable = useCallback(state => {
    return variable.startsWith("'") 
      ? variable.substring(1)
      : objectPath.get(state.app.variables, `${context}.${variable}`);
  }, [variable, context]);

  const variableValue = useSelector(getVariable);

  const [match, setMatch] = useState(false);

  const updateMatch = useCallback(()=>{
    setMatch(true);
  }, []);

  useEffect(()=>{
    setMatch(false);
  }, [variableValue]);

  const contextValue = useMemo(() => {
    return {value: variableValue, match, updateMatch};
  }, [variableValue, match, updateMatch]);

  return <SelectCaseContext.Provider value={contextValue}>{children}</SelectCaseContext.Provider>;

}