FocusView-Komponente für Stripe-AppsNur Dashboard

Verwenden Sie FocusView, um einen speziellen Bereich zu öffnen, in dem der/die Endnutzer/in eine bestimmte Aufgabe durchführen kann.

SDK-Version

Eine FocusView-Komponente kann von anderen View-Komponenten aus geöffnet werden und ermöglicht es den Entwicklerinnen/Entwicklern einen speziellen Bereich für die Kundinnen/Kunden zum Ausführen einer bestimmten Aufgabe zu öffnen. Beispiele:

Details zum Erstellen eines neuen Eintrags in einer Datenbank eingeben
Bestimmen Sie mithilfe eines Assistenten die nächsten Schritte.
Bestätigen Sie, ob die Nutzer/innen die von ihnen angegebene Aktion ausführen möchten.

Darstellung von FocusView

FocusView muss ein untergeordnetes Element von ContextView sein. Wrappen Sie FocusView nicht in einer Bedingung. Verwenden Sie stattdessen die Eigenschaft shown, um den sichtbaren Status zu kontrollieren. Weitere Informationen finden Sie unter ContextView.

So fügen Sie Ihrer App die FocusView Komponente hinzu:

import {FocusView} from '@stripe/ui-extension-sdk/ui';

FocusView-Eigenschaften

Eigenschaft	Typ
`children`	Pflichtfeld `React.ReactNode` Der Inhalt der Komponente.
`title`	Pflichtfeld `string` Der Titel der `FocusView`. Dieser wird oben im Drawer unter dem Namen Ihrer App angezeigt.
`confirmCloseMessages`	Optional `ConfirmCloseMessages \| undefined` Falls vorhanden, wird confirmCloseMessages angezeigt, wenn Nutzer/innen die `FocusView` schließen. Verwandte Typen: ConfirmCloseMessages.
`footerContent`	Optional `React.ReactNode` React Node neben allen Aktionen in der Fußzeile.
`primaryAction`	Optional `React.ReactElement \| undefined` Eine primäre Aktionsaufruf-`Button` („Speichern“ oder „Fortfahren“) in der Fußzeile.
`secondaryAction`	Optional `React.ReactElement \| undefined` Eine sekundäre Aktionsaufruf-`Button` („Abbrechen“) in der Fußzeile.
`setShown`	Optional `((shown: boolean) => void) \| undefined` Ermöglicht es der `FocusView`, den angezeigten Status zu verwalten, wenn Nutzer/innen das Fenster schließen möchten oder es aufgrund des Bestätigungsdialogfelds zum Schließen geöffnet bleiben muss.
`shown`	Optional `boolean \| undefined` Gibt an, ob `FocusView` angezeigt werden soll oder nicht. Diese Eigenschaft wird von einer übergeordneten Ansicht verwaltet.
`onClose`	OptionalVeraltet Verwenden Sie stattdessen `setShown`. Wenn der/die Nutzer/in die `FocusView` durch einen Klick beendet oder die Esc-Taste drückt, wird die Erweiterung darüber informiert, dass der/die Nutzer/in die Ansicht geschlossen hat. `(() => void) \| undefined`

ConfirmCloseMessages

Eigenschaft	Typ
`cancelAction`	Pflichtfeld `string`
`description`	Pflichtfeld `string`
`exitAction`	Pflichtfeld `string`
`title`	Pflichtfeld `string`

Bestätigungsdialogfeld schließen

Wenn Sie confirmCloseMessages übergeben, übergeben Sie auch die Eigenschaft setShown, damit FocusView ihren shown-Status verwalten kann und der Bestätigungsdialog zum Schließen in jedem Szenario ordnungsgemäß funktioniert. Um zu steuern, wann das Dialogfeld zur Bestätigung des Schließens angezeigt wird, können Sie einen Status verwenden, um confirmCloseMessages bedingt an FocusView zu übergeben, wie im folgenden Beispiel:

Beispiel

import React from 'react';
import {
  Box,
  Button,
  ContextView,
  FocusView,
  Select,
} from '@stripe/ui-extension-sdk/ui';

type Mood = 'Happy' | 'Sad';

const confirmCloseMessages = {
  title: 'Your mood will not be saved',
  description: 'Are you sure you want to exit?',
  cancelAction: 'Cancel',
  exitAction: 'Exit',
};

const MoodView = () => {
  const [mood, setMood] = React.useState<Mood>('Happy');
  const [shown, setShown] = React.useState<boolean>(false);
  const [confirmClose, setConfirmClose] = React.useState<boolean>(false);

  const open = () => {
    setConfirmClose(true);
    setShown(true);
  };

  const closeWithoutConfirm = () => {
    setConfirmClose(false);
    setShown(false);
  };

  const closeWithConfirm = () => {
    setShown(false);
  };

  const updateMood = (newMood: Mood) => {
    setMood(newMood);
    closeWithoutConfirm();
  };

  return (
    <ContextView
      title="Mood picker"
      description="This section communicates my extension's feelings"
    >
      <FocusView
        title="Pick your mood"
        shown={shown}
        setShown={setShown}
        confirmCloseMessages={confirmClose ? confirmCloseMessages : undefined}
        secondaryAction={<Button onPress={closeWithConfirm}>Cancel</Button>}
      >
        <Select onChange={(e) => updateMood(e.target.value as Mood)}>
          <option label="">Select mood</option>
          <option label="Happy">Happy</option>
          <option label="Sad">Sad</option>
        </Select>
      </FocusView>
      <Box css={{stack: 'x', gap: 'medium'}}>
        <Box
          css={{
            font: 'subheading',
            color: mood === 'Happy' ? 'success' : 'info',
          }}
        >
          {mood}
        </Box>
        <Button onPress={open}>Change mood</Button>
      </Box>
    </ContextView>
  );
};