9
votes

Actions de livre de contes - comment appellent-ils exactement?

Je suis un peu nouveau dans React et j'essaie de faire un mécanisme de balayage de carte.

J'utilise cette bibliothèque:

https://www.npmjs.com/package/react-swipe-card

J'ai essentiellement un composant de démonstration créé:

onEnd={action('end')

Cependant, je ne suis pas très familier avec les livres d'histoires - j'en ai lu et cela n'a pas vraiment de sens pour moi.

Par exemple, une fois que toutes les cartes ont été traitées, j'aimerais les mélanger et les afficher à nouveau.

À l'heure actuelle, la seule «action» qui est exécutée est «fin», quoi que cela fasse:

import React, { Component } from 'react'
import Cards, { Card } from 'react-swipe-card';
import { action } from '@storybook/addon-actions';
import addons, { mockChannel } from '@storybook/addons';

addons.setChannel(mockChannel());

const data = ['Alexandre', 'Thomas', 'Lucien']

const Wrapper = () => {
  return (
      <Cards onEnd={action('end')} className='master-root'>
        {data.map(item => 
          <Card
          key={item}
          onSwipeRight={action('swipe left')}
          onSwipeLeft={action('swipe left')}
          >
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
}

export default Wrapper;

Quel est cet appel de fin d'action exactement? Comment pourrais-je repeupler les cartes à la fin?

Désolé si c'est une question basique, honnêtement, je ne l'aurais pas posée si je n'avais pas essayé de comprendre des livres d'histoires pendant quelques jours d'abord.

javascript reactjs storybook

3 commentaires

Comprenez-vous pourquoi un livre d'histoires est nécessaire?

@DehandeCroos - Je ne le fais pas, même si je lis les explications maintenant.

Pour ce faire, supprimez complètement le livre de contes de votre projet pour le moment. Puisque vous êtes nouveau dans React, cela vous déroutera. Storybooks est un outil de gestion de l'interface utilisateur que vous ne livrez pas à vos clients. Il vise à garder votre équipe synchronisée avec le style d'interface utilisateur que vous êtes censé suivre.

3 Réponses :

0
votes

Vous devez écrire les histoires! https://www.learnstorybook.com/react/en/simple-component/

Cependant, si vous ne voulez pas utiliser de livre d'histoires et faire fonctionner votre carte, appelez simplement les fonctions spécifiques onSwipeLeft, onSwipeRight

0 commentaires

0
votes

En fait, l' action('end') est juste un gestionnaire d'action (ainsi qu'une action('swipe left') ou action('swipe right') ) qui est appelée sur un événement spécifique ( onEnd ). Jetez un œil à https://alexandre-garrec.github.io/react-swipe-card/ et à ACTION LOGGER en pied de page.

La documentation (très pauvre) ne donne aucune idée de ce que fait exactement onEnd dans cette bibliothèque, mais, comme je peux le voir dans le code source, cette fonction (si elle est passée comme accessoire) est appelée lors du retrait d'une carte si le compteur de cartes supprimées est égal au nombre total de cartes ( https://github.com/alexandre-garrec/react-swipe-card/blob/master/src/Cards.js , ligne 23). Je pense que cela est destiné à faire qc quand toutes les cartes ont été glissées, par exemple montrer une alerte ou autre.

Si je vous ai bien compris, aucune méthode de réinitialisation n'est disponible (à ce jour) pour ce composant. Toutes les fonctionnalités disponibles sont fournies sous forme de démo ici: https://github.com/alexandre-garrec/react-swipe-card/blob/master/stories/index.js

Dans une application réelle (pas dans des histoires), vous pouvez toujours essayer de mettre les données utilisées pour rendre les cartes dans l'état du composant, et de les réinitialiser quand vous le souhaitez (par exemple, appelez sa réinitialisation via onClick sur un bouton).

0 commentaires

2
votes

Ok, comme Jack l'aurait dit, allons-y par parties. Tout d'abord:

Je voudrais une explication sur le fonctionnement des actions de livre de contes

storybook-actions est un addon à la plateforme de Storybook. Les actions vous fournissent un mécanisme qui enregistre les interactions et les données des utilisateurs au fur et à mesure qu'elles transitent par vos composants dans l'interface utilisateur du Storybook. action() est en fait une high-order function qui renvoie une autre fonction similaire à console.log() , la seule différence ici est qu'en plus de console.log() l'activité de l'utilisateur et d'effectuer d'autres opérations, le nom de l'action (end, swipe-left, ...) sera également affiché sur le panneau d'action de votre livre de contes.

Les fonctions de gestionnaire d'événements créées par action() sont utiles pour remplacer les fonctions de gestionnaire d'événements réelles que vous passeriez à vos composants. D'autres fois, vous avez réellement besoin du comportement de gestion des événements pour s'exécuter. Par exemple, vous avez un champ de formulaire contrôlé qui conserve son propre état et vous voulez voir ce qui se passe lorsque l'état change

Consultez cet article sur les actions pour plus d'informations

Seconde:

Une réponse parfaite expliquerait comment faire répéter les cartes après qu'un utilisateur ait fini de parcourir une pile

Cela n'a en fait rien à voir avec des actions ou même avec un livre d'histoires, cette logique est implémentée par le package react-swipe-card , et ici j'avoue mon incompétence, j'ai même essayé de passer par la source, mais c'est tellement désordonné que Il est presque impossible de comprendre exactement ce qui se passe, la logique que vous recherchez n'est qu'un carousel , qui vérifie si l'élément suivant est null ou undefined et si la casse est vraie tout recommencer. Ou si l'élément précédent est null ou undefined et que la casse est vraie, passez au dernier élément. Je vous conseille de trouver une autre bibliothèque plus fiable comme les react-swipeable-views

0 commentaires