FocusView
Eine FocusView
-Komponente kann von anderen View
-Komponenten aus geöffnet werden und ermöglicht es den Entwickler/innen einen speziellen Bereich für die Kund/innen 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, dass die Nutzer/innen die von ihnen angegebene Aktion ausführen möchten.
Darstellung der FocusView
FocusView
muss ContextView
untergeordnet sein. Wrappen Sie die FocusView
nicht in eine Bedingung, sondern verwenden Sie stattdessen die Eigenschaft shown
, um ihren sichtbaren Status zu steuern. Weitere Informationen finden Sie unter ContextView.
So fügen Sie Ihrer App die FocusView
Komponente hinzu:
import {FocusView} from '@stripe/ui-extension-sdk/ui';
Props
Prop | Type | Description |
---|---|---|
children Required |
| The contents of the FocusView. |
title Required |
| The title of the FocusView. This will be displayed at the top
of the drawer under your app's name. |
confirmCloseMessages |
| If provided, confirmCloseMessages will be displayed when the user closes the FocusView. |
footerContent |
| React node adjacent to any actions in the footer. |
primaryAction |
| A primary call to action ("Save" or "Continue") button placed in the footer. |
secondaryAction |
| A secondary call to action ("Cancel") button placed in the footer. |
setShown |
| Allows the FocusView to manage shown state if a user requests to close the window, or if
it needs to stay open because of the close confirmation dialog. |
shown |
| Whether the FocusView should be shown or not. This property is maintained by a parent view. |
onClose Deprecated |
| (Deprecated, use `setShown` instead) If the user clicks out of the FocusView or presses
the escape button, this informs the extension that the user has closed the view. |
Bestätigungsdialogfeld schließen
Wenn Sie confirmCloseMessages
übergeben, übergeben Sie die Eigenschaft setShown
, damit die 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 die FocusView
zu übergeben, wie im folgenden Beispiel:
Beispiel
import { useState } 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] = useState<Mood>("Happy"); const [shown, setShown] = useState<boolean>(false); const [confirmClose, setConfirmClose] = 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> ); }; export default MoodView;