Composant TaskList pour Stripe Apps
Utilisez TaskList pour aider les utilisateurs à suivre leur progression dans la liste de tâches qu’ils doivent accomplir.
Avertissement
Pour ajouter le composant TaskList à votre application :
import {TaskList, TaskListItem} from '@stripe/ui-extension-sdk/ui';
Utilisez TaskList :
- Pour diviser des tâches ou des processus plus importants en plusieurs étapes séquentielles qu’un utilisateur doit effectuer
- Pour rappeler aux utilisateurs l’avancement des tâches non achevées
Les listes de tâches sont constituées d’éléments individuels. Vous pouvez imbriquer des listes de tâches dans des éléments de liste de tâches pour représenter des sous-tâches. Lorsqu’un utilisateur termine une tâche, arrêtez d’afficher ses sous-tâches. Vous pouvez soit les masquer complètement si elles ne sont plus utiles, soit permettre à l’utilisateur de cliquer pour les afficher.
L’exemple suivant montre comment afficher une liste de tâches avec une ligne de connecteur pour renforcer l’exigence consistant à effectuer les tâches de manière séquentielle.
const tasks: TaskListItemProps[] = [ { title: 'Add business info', status: 'complete', }, { title: 'Connect your bank', status: 'complete', }, { title: 'Secure your account', status: 'complete', }, { title: 'Add extras', status: 'in-progress', subTasks: [ { title: 'Tax calculation', status: 'complete', }, { title: 'Fraud protection', status: 'in-progress', }, { title: 'Climate contributions', status: 'not-started', }, ], }, { title: 'Review and finish', status: 'not-started', }, ]; return ( <TaskList> {tasks.map((task, idx) => ( <TaskListItem key={idx} {...task} /> ))} </TaskList> )
Propriétés TaskList
| Propriété | Type |
|---|---|
| Obligatoire
Un ou plusieurs composants |
TaskListItem
Les composants TaskList contiennent un ou plusieurs composants TaskListItem qui définissent chaque tâche que l’utilisateur doit effectuer. Si un élément de la liste des tâches définit ses propres sous-tâches, un utilisateur doit effectuer ces sous-tâches pour terminer la tâche parente.
Propriétés TaskListItem
| Propriété | Type |
|---|---|
| Obligatoire
Le titre affiché de la tâche. |
| Facultatif
Un gestionnaire d’événements pour quand l’utilisateur clique n’importe où dans la tâche. |
| Facultatif
L’état actuel de la tâche. |
| Facultatif
Une liste des sous-tâches qui appartiennent à cette tâche. Types associés : SubTasks. |
SubTasks
| Propriété | Type |
|---|---|
| Obligatoire
Le titre affiché de la tâche. |
| Facultatif
Un gestionnaire d’événements pour quand l’utilisateur clique n’importe où dans la tâche. |
| Facultatif
L’état actuel de la tâche. |
Avec état
L’exemple suivant montre comment afficher une liste de tâches avec état, où l’état de chaque élément de tâche est mis à jour en réponse à un événement de clic.
import {useReducer, useCallback} from 'react'; import { Box, Button, TaskList, TaskListItem, TaskListItemProps, } from '@stripe/ui-extension-sdk/ui'; const initialTasks: TaskListItemProps[] = [ { title: 'Add business info', status: 'in-progress', }, { title: 'Connect your bank', status: 'complete', }, { title: 'Secure your account', status: 'complete', }, { title: 'Add extras', status: 'in-progress', subTasks: [ { title: 'Tax calculation', status: 'in-progress', }, { title: 'Fraud protection', status: 'in-progress', }, { title: 'Climate contributions', status: 'not-started', }, ], }, { title: 'Review and finish', status: 'not-started', }, ]; const [tasks, dispatch] = useReducer(taskReducer, initialTasks); const toggleStatus = useCallback((taskIdx: number, subTaskIdx?: number) => { dispatch({type: 'TOGGLE_STATUS', taskIdx, subTaskIdx}); }, []); return ( <Box> <TaskList> {tasks.map((task, taskIdx) => ( <TaskListItem key={`task-${taskIdx}-${task.status}`} {...task} onPress={() => toggleStatus(taskIdx)} subTasks={task.subTasks?.map((subTask, subTaskIdx) => ({ ...subTask, onPress: () => toggleStatus(taskIdx, subTaskIdx), }))} /> ))} </TaskList> </Box> ); function getNextStatus( status: string, ): 'not-started' | 'in-progress' | 'complete' { switch (status) { case 'complete': return 'not-started'; case 'not-started': return 'in-progress'; case 'in-progress': return 'complete'; default: return 'not-started'; } } type TaskAction = { type: 'TOGGLE_STATUS'; taskIdx: number; subTaskIdx?: number; }; // Reducer function to handle state updates function taskReducer( state: TaskListItemProps[], action: TaskAction, ): TaskListItemProps[] { switch (action.type) { case 'TOGGLE_STATUS': // If subTaskId is provided, update the subtask if (action.subTaskIdx !== undefined) { return state.map((task, idx) => { if (idx === action.taskIdx && task.subTasks) { return { ...task, subTasks: task.subTasks.map((subTask, subIdx) => { if (subIdx === action.subTaskIdx) { return { ...subTask, status: getNextStatus(subTask.status as string), }; } return subTask; }), }; } return task; }); } // Otherwise update the main task else { return state.map((task, idx) => { if (idx === action.taskIdx) { return { ...task, status: getNextStatus(task.status as string), }; } return task; }); } default: return state; } }