Stripe Apps の TaskList コンポーネント
TaskList を使用すると、ユーザーは完了する必要があるタスクの一覧で進行状況を把握できます。
警告
TaskList コンポーネントをアプリに追加するには、以下のようにします。
import {TaskList, TaskListItem} from '@stripe/ui-extension-sdk/ui';
TaskList を次に使用します。
- 大きなタスクまたはプロセスを、ユーザーが完了する複数の連続したステップに分割する
- 未完了のタスクの進捗状況をユーザーに通知する
タスクリストは、個々のアイテムで構成されます。タスクリストをタスクリストアイテム内にネストして、サブタスクを表すことができます。ユーザーがタスクを完了したら、そのサブタスクの表示を停止します。役に立たなくなった場合は完全に非表示にするか、ユーザーがクリックして表示できるようにすることができます。
次の例は、コネクターラインを使用してタスクリストを表示し、タスクを順番に完了する要件を強調する方法を示しています。
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 プロパティ
| プロパティ | タイプ |
|---|---|
| 必要
1 つ以上の |
TaskListItem
TaskList コンポーネントには、ユーザーが実行する必要がある各タスクを定義する 1 つ以上の TaskListItem コンポーネントが含まれます。タスクリスト項目が固有のサブタスクを定義している場合、ユーザーはそれらのサブタスクを完了して親タスクを完了する必要があります。
TaskListItem プロパティ
| プロパティ | タイプ |
|---|---|
| 必要
タスクの表示タイトル。 |
| オプション
ユーザーがタスク上の任意の場所をクリックしたときのイベントハンドラー。 |
| オプション
タスクの現在のステータス。 |
| オプション
このタスクに属するサブタスクのリスト。 関連型: SubTasks。 |
SubTasks
| プロパティ | タイプ |
|---|---|
| 必要
タスクの表示タイトル。 |
| オプション
ユーザーがタスク上の任意の場所をクリックしたときのイベントハンドラー。 |
| オプション
タスクの現在のステータス。 |
ステートフル
次の例は、クリックイベントに応答して各タスク項目の状態が更新される、ステートフルタスクリストの表示方法を示しています。
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; } }