Weiter zum Inhalt
Konto erstellen oder anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellenAnmelden
Übersicht
Versionierung
Aktualisieren Sie Ihre API-Version
Essentials
Tools
Stripe für Visual Studio Code
Funktionen
Stripe-StatuswarnungenHochgeladene Dateien
KI-Lösungen
Model Context ProtocolAgentische KI-SaaS-Billing-Workflows aufbauen
Sicherheit und Datenschutz
Stripebot-Webcrawler
Extend Stripe
Erstellen Sie Stripe-Apps
Partner
Partner-Zertifizierung

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.

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.

Beispiel wird geladen ...
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

EigenschaftTyp

children

Pflichtfeld

React.ReactNode

Eine oder mehrere TaskListItem-Komponenten.

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

EigenschaftTyp

title

Pflichtfeld

string

Der Anzeigetitel der Aufgabe.

onPress

Optional

((event: PressEvent) => void) | undefined

Ein Ereignishandler, wenn der/die Nutzer/in auf eine beliebige Stelle in der Aufgabe klickt.

status

Optional

("not-started" | "in-progress" | "blocked" | "complete") | undefined

Der aktuelle Status der Aufgabe.

subTasks

Optional

Array<SubTasks> | undefined

Eine Liste der Unteraufgaben, die zu dieser Aufgabe gehören.

Verwandte Typen: SubTasks.

SubTasks

EigenschaftTyp

title

Pflichtfeld

string

Der Anzeigetitel der Aufgabe.

onPress

Optional

((event: PressEvent) => void) | undefined

Ein Ereignishandler, wenn der/die Nutzer/in auf eine beliebige Stelle in der Aufgabe klickt.

status

Optional

("not-started" | "in-progress" | "blocked" | "complete") | undefined

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.

Beispiel wird geladen ...
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;
  }
}

Siehe auch

War diese Seite hilfreich?
JaNein