Source: surfaces/OpenToast.js

  1. import React, { useEffect, useState } from "react";
  2. import { connect } from "react-redux";
  3. import { appActions } from "../../redux";
  4. import { useToastContext } from "../../_core";
  5. import { Loading } from "../";
  6. import { Template } from "../templates";
  8. /**
  9.  * Componente que muestra un Toast con un contenido sincrónico, mientras asincrónicamente se llama a una operación.
  10.  * El Toast se mostrará durante un tiempo determinado o hasta recibir la respuesta.
  11.  * Mientras se espera la respuesta se va a renderizar un Spinner.
  12.  * @name Reactor.Components.Surfaces.Toast
  13.  * @param {string} href Nombre de la operación que se va a llamar
  14.  * @param {string} token Token si hay un flujo en ejecución
  15.  * @param {number} [time = "4000"] Tiempo en ms que aparecerá el Toast
  16.  * @class
  17.  * @example
  18.  *  <toast href="MostrarResultadoDeposito" token="{{tokenOperacion}}" time="5000">
  19.  *    <div>Aguarde mientras procesamos la operación</div>
  20.  *  </toast>
  21.  */
  23. const _OpenToast = ({getAsyncContent, token, href, children, time = 4000}) => {
  24.   const { show, hide } = useToastContext();
  25.   const [ data, setData ] = useState()
  26.   
  27.   useEffect(()=>{
  28.     show({content: children});
  30.     getAsyncContent(href, token, null).then(response => {
  31.       setData(response.data.data);
  32.       hide();
  33.     })
  35.     const timer = setTimeout(()=>hide(), time)
  36.     return clearTimeout(timer);
  37.   }, [])
  39.   return <>{data ? <Template content={data}/> : <Loading/>}</>;
  40. }
  42. const mapStateToProps = (state) => {
  43.   return state.app;
  44. }
  46. export const OpenToast = connect(mapStateToProps, appActions)(_OpenToast)