Enlace asíncrono

Enlace asíncrono en Storybook

Uso

Descripción general

El componente AsyncLink proporciona una forma de navegar a una nueva página o ruta, pero solo después de completar ciertas tareas o verificaciones. Puede utilizarlo para controlar cuándo y si el usuario es redirigido en función de condiciones u operaciones específicas.

Cuándo se debe utilizar

Utilice el componente AsyncLink para lo siguiente:

• Verificar las acciones del usuario, como comprobar que un formulario se haya enviado correctamente antes de pasar a una nueva página.
• Cargar datos y garantizar que los datos importantes para la página siguiente se carguen antes de la navegación.
• Completar tareas, como guardar las acciones del usuario, rastrear el comportamiento del usuario, solicitar confirmación del usuario o guardar el estado actual antes de redirigirlo.

Cuándo no se debe utilizar

No utilice el componente AsyncLink para lo siguiente:

• Navegación inmediata. Si se necesita una navegación inmediata sin condiciones previas ni verificaciones, evite usar el enlace asíncrono. En cambio, utilice el ](pathname://es/link.mdx)componente de enlace[.
• Navegación sencilla. Si la navegación no implica ninguna tarea asincrónica, como la carga de datos o las acciones del usuario, el uso de un enlace asíncrono puede introducir una complejidad innecesaria. En cambio, utilice el ](pathname://es/link.mdx)componente de enlace[.

Formato

Anatomía

El componente AsyncLink consta de los siguientes elementos:

1. Rótulo: texto descriptivo que proporciona contexto y explica a dónde lleva el enlace.

Contenido

El componente AsyncLink sigue las pautas de contenido para el componente enlace.

Comportamientos

AsyncLink muestra un indicador de carga mientras se recupera el contenido. Consta de 3 puntos intermitentes. El indicador de carga garantiza que los usuarios estén al tanto de la actividad en curso.

AsyncLink maneja los errores mediante la presentación de un mensaje de error o una interfaz de usuario de respaldo cuando es necesario. Tras finalizar correctamente, se actualiza para mostrar el contenido recuperado.

Accesibilidad

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

• La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
• El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
• El elemento se puede operar con teclado, así como con mouse.
• Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Siga las instrucciones a continuación cuando utilice este componente en sus aplicaciones:

• Asegúrese de que los cambios de color alcancen el umbral requerido de 4,5:1.
• Asegúrese de que los lectores de pantalla transmitan el estado de carga y cualquier mensaje de error.
• Evite usar palabras y frases como “Haga clic aquí” o “aquí” como texto del enlace. En cambio, cree texto de enlace significativo que tenga sentido por sí mismo.

Código

Instrucción de importación

import { AsyncLink } from '@jutro/router/';

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

onTriggerobligatorio

Tipo

function

Descripción

Calls the method used to trigger the promise.

children

Tipo

React.ReactNode | intlMessageShape

Descripción

The children elements to render inside the Link.

disabled

Tipo

string

Descripción

If set to true, the link is rendered in disabled state.

failTo

Tipo

string

Descripción

The destination path when the promise is rejected.

failToMessage

Tipo

string

Descripción

The message shown when the promise is rejected. It is only shown if failTo is not provided.

message

Tipo

string

Descripción

The message shown when executing the trigger/promise.

to

Tipo

IntlMessageShape | { pathname?: IntlMessageShape; hash?: IntlMessageShape }

hash

Tipo

IntlMessageShape

Descripción

Hash to put in the URL.

pathname

Tipo

IntlMessageShape

Descripción

Link path.

Descripción

The destination path when the link is clicked. Use this for paths internal to the application.

toMessage

Tipo

string

Descripción

The message shown when the promise is resolved. It is only shown if to is not provided.

Ganchos

No hay ganchos para AsyncLink.

Claves de traducción

No hay claves de traducción AsyncLink asociadas al componente.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Están disponibles las siguientes opciones:

• Tokens de diseño
• Paso de atributos HTML nativos
• Referencia con controladores imperativos
• Propiedad de evento nativa

Ejemplos

Consulte la sección Uso para obtener más información sobre cómo y cuándo utilizar el componente AsyncLink.

AsyncLink básico

En este ejemplo, se muestra el uso básico del componente AsyncLink. Al hacer clic en el enlace, la devolución de llamada de propiedad onTrigger puede devolver true, false o una promesa. En este ejemplo, muestra el mensaje asignado, “Espere...”, y después de dos segundos este mensaje desaparece y muestra el texto “Enviado”.

import React, { useState, useEffect } from 'react';
import { AsyncLink } from '@jutro/router/';

export const BasicAsyncLink = () => {
  const [showMessage, setShowMessage] = useState(false);
  const [message, setMessage] = useState('Submit');

  const asyncMessage = "Wait..."; 

  useEffect(() => {
    let timerId;
    if (showMessage) {
      timerId = setTimeout(() => {
        setShowMessage(false);
        setMessage('Submited');
      }, 2000);
    }
    return () => clearTimeout(timerId); // Clear the timeout when the component unmounts or showMessage changes
  }, [showMessage]);

  function clickFunction() {
    setShowMessage(true);
    setMessage(asyncMessage);
  }

  return (
    <div>
      <AsyncLink
        message={asyncMessage}
        onTrigger={clickFunction}
        to="/test"
      >
        {message}
      </AsyncLink>
    </div>
  );
};

Mensajes de AsyncLink

Puede usar las propiedades toMessage y failToMessage para mostrar mensajes dependiendo de si la promesa devuelta se cumple o es rechazada.

Además, puede usar la propiedad failTo para redirigir a una ruta diferente en caso de que la promesa falle.

import React, { useState } from 'react';
import { AsyncLink } from '@jutro/router/';

export const MessagesAsyncLink = () => {
  const [successLinkText, setSuccessLinkText] = useState('Success link');
  const [failureLinkText, setFailureLinkText] = useState('Failure link');

  const asyncMessage = "Wait...";
  const successMessage = "Action completed successfully!";
  const failureMessage = "Action failed. Please try again.";
  const timer = 2000;

  const handleSuccess = () => {
    setSuccessLinkText(asyncMessage);

    setTimeout(() => {
      setSuccessLinkText(successMessage);
      setTimeout(() => setSuccessLinkText('Success link'), timer);
    }, 2000);
  };

  const handleFailure = () => {
    setFailureLinkText(asyncMessage);

    setTimeout(() => {
      setFailureLinkText(failureMessage);
      setTimeout(() => setFailureLinkText('Failure link'), timer);
    }, 2000);
  };

  return (
    <div>
      <div>
        <AsyncLink
          message={asyncMessage}
          toMessage={successMessage}
          failToMessage={failureMessage}
          onTrigger={handleSuccess}
          to="/async-link#asynclink-messages"
        >
          {successLinkText}
        </AsyncLink>
      </div>
      <div>
        <AsyncLink
          message={asyncMessage}
          toMessage={successMessage}
          failToMessage={failureMessage}
          onTrigger={handleFailure}
          to="/async-link#asynclink-messages"
        >
          {failureLinkText}
        </AsyncLink>
      </div>
    </div>
  );
};

Registro de cambios

10.9.0

• Se introdujo una nueva característica de opción de participación que desactiva la publicación automática de eventos para el componente AsyncLink. Puede habilitar esta función agregando JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true al archivo .env en la raíz de su aplicación de Jutro. Cuando esta acción está habilitada, los componentes heredados ya no publican eventos de forma predeterminada. Para obtener más información sobre los eventos y cómo configurar nuevos, consulte la documentación sobre eventos.

10.1.0

• Se agregó compatibilidad para tokens de diseño.