Tasklist-Komponente für Stripe Apps
Verwenden Sie TaskList, um Nutzern und Nutzerinnen zu helfen, ihren Fortschritt anhand einer Liste von Aufgaben zu verfolgen, die sie erledigen müssen.
Achtung
So fügen Sie Ihrer App die TaskList Komponente hinzu:
import {TaskList, TaskListItem} from '@stripe/ui-extension-sdk/ui';
Verwenden Sie TaskList:
- So unterteilen Sie größere Aufgaben oder Prozesse in mehrere, aufeinanderfolgende Schritte, die von einem/einer Nutzer/in ausgeführt werden müssen
- So erinnern Sie Nutzer/innen an ihren Fortschritt bei nicht erledigten Aufgaben
Aufgabenlisten bestehen aus einzelnen Elementen. Sie können Aufgabenlisten innerhalb von Aufgabenlistenelementen verschachteln, um Unteraufgaben darzustellen. Wenn ein/e Nutzer/in eine Aufgabe erledigt hat, zeigen Sie die Unteraufgaben nicht mehr an. Sie können sie entweder vollständig ausblenden, wenn sie nicht mehr nützlich sind, oder dem/der Nutzerin gestatten, sie per Klick anzuzeigen.
Im folgenden Beispiel wird veranschaulicht, wie eine Aufgabenliste mit einer Verbindungslinie gerendert wird, um die Anforderung zu verstärken, Aufgaben nacheinander auszuführen.
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> )
TaskList-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Eine oder mehrere |
TaskListItem
TaskList-Komponenten enthalten eine oder mehrere TaskListItem-Komponenten, die jede Aufgabe definieren, die der/die Nutzer/in erledigen muss. Wenn ein Aufgabenlistenelement seine eigenen Unteraufgaben definiert, muss ein/e Nutzer/in diese Unteraufgaben erledigen, um die übergeordnete Aufgabe abzuschließen.
TaskListItem-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Anzeigetitel der Aufgabe. |
| Optional
Ein Ereignishandler, wenn der/die Nutzer/in auf eine beliebige Stelle in der Aufgabe klickt. |
| Optional
Der aktuelle Status der Aufgabe. |
| Optional
Eine Liste der Unteraufgaben, die zu dieser Aufgabe gehören. Verwandte Typen: SubTasks. |
SubTasks
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Anzeigetitel der Aufgabe. |
| Optional
Ein Ereignishandler, wenn der/die Nutzer/in auf eine beliebige Stelle in der Aufgabe klickt. |
| Optional
Der aktuelle Status der Aufgabe. |
Zustandsorientiert
Im folgenden Beispiel wird veranschaulicht, wie eine zustandsbehaftete Aufgabenliste gerendert wird, bei der der Status der einzelnen Aufgabenelemente als Reaktion auf ein Klickereignis aktualisiert wird.
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; } }