FocusView
Un composant FocusView
peut être ouvert à partir d’autres composants View
et permet aux développeurs d’ouvrir un espace dédié pour que le client final puisse effectuer une tâche spécifique. En voici quelques exemples :
- Saisir des informations pour créer une nouvelle entrée dans une base de données
- Suivre les indications d’un assistant pour décider des prochaines étapes
- Confirmer que l’utilisateur souhaite effectuer l’action qu’il a indiquée
Apparence d’une FocusView
FocusView
doit être un enfant de ContextView
. N’intégrez pas FocusView
à une structure conditionnelle. Utilisez plutôt la propriété shown
pour contrôler s’il est à l’état visible. Pour en savoir plus, consultez la page ContextView.
Pour ajouter le composant FocusView
à votre application :
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. |
Fermer la boîte de dialogue de confirmation
Lors de la transmission de confirmCloseMessages
, pour que la boîte de dialogue de confirmation de fermeture fonctionne correctement dans chaque scénario de fermeture, transmettez la propriété setShown
afin que FocusView
puisse gérer son état shown
. Pour contrôler le moment où la boîte de dialogue de confirmation de fermeture s’affiche, vous pouvez utiliser l’état pour conditionner le passage de confirmCloseMessages
à FocusView
, comme dans l’exemple suivant :
Exemple
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;