AsyncLink

AsyncLink in Storybook

Verwendung

Überblick

Die AsyncLink-Komponente bietet eine Möglichkeit, zu einer neuen Seite oder Route zu navigieren, allerdings erst nach Abschluss bestimmter Aufgaben oder Überprüfungen. Mit ihr können Sie steuern, wann und ob der Benutzer basierend auf bestimmten Bedingungen oder Vorgängen umgeleitet wird.

Zu verwenden

Verwenden Sie die AsyncLink-Komponente für Folgendes:

• Überprüfen von Benutzeraktionen, z. B. Sicherstellen, dass ein Formular erfolgreich übermittelt wurde, bevor zu einer neuen Seite gewechselt wird.
• Laden von Daten, um sicherzustellen, dass vor dem Aufrufen wichtige Daten für die nächste Seite geladen werden.
• Ausführen von Aufgaben, z. B. das Speichern von Benutzeraktionen, das Verfolgen des Benutzerverhaltens, das Anfordern einer Benutzerbestätigung oder das Speichern des aktuellen Status vor der Weiterleitung.

Nicht zu verwenden

Verwenden Sie die AsyncLink-Komponente nicht für Folgendes:

• Sofortige Navigation. Vermeiden Sie die Verwendung des Async-Links, wenn eine sofortige Navigation ohne Vorbedingungen oder Überprüfungen erforderlich ist. Verwenden Sie stattdessen die Link-Komponente.
• Einfache Navigation. Wenn die Navigation keine asynchronen Aufgaben wie das Laden von Daten oder Benutzeraktionen umfasst, kann die Verwendung eines asynchronen Links zu unnötiger Komplexität führen. Verwenden Sie stattdessen die Link-Komponente.

Formatierung

Aufbau

Die AsyncLink-Komponente besteht aus den folgenden Elementen:

1. Beschriftung: Beschreibender Text, der den Kontext liefert und erklärt, wohin der Link führt.

Inhalt

Die AsyncLink-Komponente folgt den Inhaltsrichtlinien für die Link-Komponente.

Verhalten

AsyncLink zeigt beim Abrufen von Inhalten eine Ladeanzeige an. Diese besteht aus 3 pulsierenden Punkten. Die Ladeanzeige gewährleistet, dass Benutzer über laufende Vorgänge informiert sind.

Bei Fehlern zeigt AsyncLink bei Bedarf eine Fehlermeldung oder eine Fallback-Benutzeroberfläche an. Nach erfolgreichem Abschluss wird eine Aktualisierung durchgeführt und der abgerufene Inhalt angezeigt.

Barrierefreiheit

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

• Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
• Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
• Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
• Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Beachten Sie bei der Verwendung dieser Komponente in Ihren Anwendungen die folgenden Anweisungen:

• Vergewissern Sie sich, dass alle Farbänderungen den erforderlichen Schwellenwert von 4,5:1 einhalten.
• Stellen Sie sicher, dass Screenreader den Ladestatus und eventuelle Fehlermeldungen übermitteln.
• Vermeiden Sie die Verwendung von Wörtern und Wortgruppen wie „Hier klicken“ oder „hier“ als Linktext. Erstellen Sie stattdessen einen aussagekräftigen Linktext, der für sich allein genommen Sinn ergibt.

Code

Importanweisung

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

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

onTriggererforderlich

Typ

function

Beschreibung

Calls the method used to trigger the promise.

children

Typ

React.ReactNode | intlMessageShape

Beschreibung

The children elements to render inside the Link.

disabled

Typ

string

Beschreibung

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

failTo

Typ

string

Beschreibung

The destination path when the promise is rejected.

failToMessage

Typ

string

Beschreibung

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

message

Typ

string

Beschreibung

The message shown when executing the trigger/promise.

to

Typ

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

hash

Typ

IntlMessageShape

Beschreibung

Hash to put in the URL.

pathname

Typ

IntlMessageShape

Beschreibung

Link path.

Beschreibung

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

toMessage

Typ

string

Beschreibung

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

Hooks

Für AsyncLink sind keine Hooks verfügbar.

Übersetzungsschlüssel

Mit der Komponente AsyncLink sind keine Übersetzungsschlüssel verknüpft.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Folgende Optionen sind verfügbar:

• Design-Token
• Übergeben nativer HTML-Attribute
• Ref mit imperativen Handlern
• Native Ereigniseigenschaft

Beispiele

Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie die Komponente AsyncLink verwenden können.

Einfache AsyncLink-Komponente

Dieses Beispiel zeigt die grundlegende Verwendung der AsyncLink-Komponente. Wenn Sie auf den Link klicken, kann der Rückruf der Eigenschaft onTrigger entweder true, false oder eine Zusage zurückgeben. In diesem Beispiel wird die zugewiesene Meldung „Bitte warten...“ angezeigt. Nach zwei Sekunden verschwindet diese Nachricht und der Text „Gesendet“ wird angezeigt.

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>
  );
};

AsyncLink-Meldungen

Mit den Eigenschaften toMessage und failToMessage können Sie Meldungen anzeigen, je nachdem, ob die zurückgegebene Zusage erfolgreich war oder abgelehnt wurde.

Außerdem können Sie die Eigenschaft failTo verwenden, um zu einem anderen Pfad weiterzuleiten, falls die Zusage fehlschlägt.

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>
  );
};

Änderungsprotokoll

10.9.0

• Es wurde eine neue Opt-in-Funktion eingeführt, die die automatische Ereignisveröffentlichung für die Komponente AsyncLink deaktiviert. Sie können diese Funktion aktivieren, indem Sie der .env-Datei im Stammverzeichnis Ihrer Jutro-Anwendung JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true hinzufügen. Wenn diese Option aktiviert ist, veröffentlichen ältere Komponenten standardmäßig keine Ereignisse mehr. Weitere Informationen zu Ereignissen und zum Einrichten neuer Ereignisse finden Sie in der Dokumentation zu Ereignissen.

10.1.0

• Unterstützung für Design-Token wurde hinzugefügt.