Gestion des événements

Jutro est configuré de façon à gérer et envoyer des événements à partir de votre application Jutro pour des événements tels que les suivants : un utilisateur clique sur le bouton Annuler d'un formulaire ou accède à une certaine page. Pour accéder à ces fonctionnalités :

1. Ajoutez le package @jutro/events à votre fichier package.json
2. Utilisez l’importation suivante dans votre code :

import {
  publish,
  subscribe,
  unsubscribe,
  UnsubscribeAll,
  JUTRO_TOPICS,
} from '@jutro/events';

Jutro fournit des types d'événements par défaut pour ses composants, qui sont définis dans un objet appelé JUTRO_TOPICS :

const JUTRO_TOPICS = {
  COMPONENT_LOADED: 'JUTRO_TOPICS.COMPONENT_LOADED',
  VALUE_CHANGED: 'JUTRO_TOPICS.VALUE_CHANGED',
  FIELD_BLUR: 'JUTRO_TOPICS.FIELD_BLUR',
  ROUTE_CHANGED: 'JUTRO_TOPICS.ROUTE_CHANGED',
  FETCH_REQUEST: 'JUTRO_TOPICS.FETCH_REQUEST',
  FETCH_RESPONSE: 'JUTRO_TOPICS.FETCH_RESPONSE',
  FETCH_ERROR: 'JUTRO_TOPICS.FETCH_ERROR',
  UNKNOWN_ERROR: 'JUTRO_TOPICS.UNKNOWN_ERROR',
  BUTTON_CLICKED: 'JUTRO_TOPICS.BUTTON_CLICKED',
  LINK_CLICKED: 'JUTRO_TOPICS.LINK_CLICKED',
};

Publication d'événements

Vous pouvez publier des événements à l'aide de la méthode publish. Généralement utilisée à l'intérieur d'une fonction onclick() ou onchange() dans votre code, la méthode publish accepte deux paramètres :

• topic : chaîne contenant le nom de la rubrique.
• event : l'événement qui a été déclenché, sous la forme d'un objet avec les informations pertinentes.

publish('ACCOUNT_CREATED', dataObj);

Les composants hérités suivants publient des événements par défaut :

• AppSwitcher
• AsyncLink
• Barre de navigation
• DropdownMenuButton
• ErrorBoundary
• ErrorNotice
• InlineNotification
• Modal
• NavBar
• NotificationAction
• PopoverContainer
• Toast
• TreeView
• Assistant

Les composants créés à partir de Jutro 10.0 ne publient pas d'événements par défaut, contrairement aux composants hérités tels que ceux répertoriés dans la section précédente. Pour désactiver tous les paramètres de publication d'événements par défaut, ajoutez JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true au fichier .env dans la racine de votre application Jutro. Lorsque celui-ci est défini sur true ou que vous créez un nouvel événement, vous devez d'abord publier l'événement, puis vous abonner pour pouvoir le suivre.

Note: Il est recommandé de définir JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true dans votre .env fichier pour garantir une expérience cohérente dans tous les événements de composant.

Abonnement à des événements

Vous pouvez suivre les événements à l'aide de la méthode subscribe. Deux paramètres sont acceptés :

• topics : nom de rubrique ou liste de noms de rubrique auxquels s'abonner, en utilisant l'un des types de données suivants :
  • string : un seul nom de rubrique.
  • strings [] : une série de noms de rubriques.
  • object : paires clé/valeur dont la valeur est un nom de rubrique.
• handler : la fonction à exécuter lors de la réception de l'événement. Le gestionnaire reçoit l'événement déclenché, ainsi que le nom de la rubrique sous forme de chaîne.

La méthode subscribe renvoie un handle qui peut être utilisé pour mettre fin à l'abonnement pour un listener spécifique.

// registers one topic
subscribe(JUTRO_TOPICS.ROUTE_CHANGED, (event) => console.log(event));

// registers a subset of Jutro topics
subscribe(
  [JUTRO_TOPICS.VALUE_CHANGED, JUTRO_TOPICS.FIELD_BLUR],
  (event, topic) => console.log(topic, event)
);

// registers all Jutro topics
subscribe(JUTRO_TOPICS, (event, topic) => console.log(topic, event));

Annulation de l'abonnement à des événements uniques

Vous pouvez annuler les abonnements de listeners individuels à l'aide de la méthode unsubscribe. Un paramètre est accepté :

• handle : le handle est utilisé pour annuler l'abonnement d'un listener spécifique.

// subscribe will return handles
// then you can unsubscribe a single listener
const handle = subscribe(JUTRO_TOPICS.ROUTE_CHANGED, () =>
  console.log('event fired')
);
unsubscribe(handle);

const [valueChangeHandle, blurHandle] = subscribe(
  [JUTRO_TOPICS.VALUE_CHANGED, JUTRO_TOPICS.FIELD_BLUR],
  () => console.log('event fired')
);
unsubscribe(valueChangeHandle);
unsubscribe(blurHandle);

const handles = subscribe(JUTRO_TOPICS, () => console.log('event fired'));
unsubscribe(handles[JUTRO_TOPICS.ROUTE_CHANGED]);

Annulation de l'abonnement à des sujets entiers ou suppression de tous les listeners

Vous pouvez annuler les abonnements de sujets entiers ou supprimer complètement tous les listeners à l'aide de la méthode UnsubscribeAll. Un paramètre est accepté :

• topic : nom de rubrique utilisant l'un des types de données suivants :
  • string : un seul nom de rubrique.
  • strings [] : une série de noms de rubriques.
  • object : paires clé/valeur dont la valeur est un nom de rubrique.

// unsubscribe all listeners from one topic
UnsubscribeAll(JUTRO_TOPICS.ROUTE_CHANGED);

// unsubscribe all listeners from a subset of Jutro topics
UnsubscribeAll([JUTRO_TOPICS.VALUE_CHANGED, JUTRO_TOPICS.FIELD_BLUR]);

// unsubscribe all listeners from Jutro topics
UnsubscribeAll(JUTRO_TOPICS);

// unsubscribe all existing topics
UnsubscribeAll();

Création d'un fournisseur d'événements personnalisé

Vous pouvez créer votre propre instance de EventProvider, mais elle ne sera pas associée aux événements Jutro par défaut. Cela peut être utile dans vos scénarios de test.

import { EventProvider } from '@jutro/events';

const provider = new EventProvider();

provider.publish(...)
provider.subscribe(...)
provider.unsubscribe(...)
provider.UnsubscribeAll(...)