Boîte de dialogue

Composants de boîte de dialogue de la RCL

Table des matières

PanBasicDialog

Une boîte de dialogue modale dimensionnée selon son contenu (largeur minimale de 280 px, largeur maximale sm). Elle affiche un titre, votre contenu et une rangée de boutons d’action en bas. C’est le bon choix pour les confirmations et les formulaires courts.

Cliquer sur l’arrière-plan ou appuyer sur Échap appelle closeFn. La surface de la boîte de dialogue est rendue comme un élément HTML form.

Propriété Type Défaut Rôle
titleLabel string obligatoire Texte affiché comme titre de la boîte de dialogue. Traduisez-le avant de le transmettre.
isOpen boolean obligatoire Indique si la boîte de dialogue est visible. Le composant parent gère cet état.
closeFn () => void obligatoire Fonction appelée pour fermer la boîte de dialogue. Elle est appelée lorsque l’utilisateur clique sur l’arrière-plan ou appuie sur Échap. Votre code doit s’en servir pour mettre isOpen à false.
children ReactNode aucun Le contenu de la boîte de dialogue : n’importe quels nœuds React (texte, champs de formulaire, listes…).
actionsButtonArray ReactElement[] aucun Tableau de boutons affichés dans le pied de page, dans l’ordre. Normalement le résultat de PanDialogActionsArray(...), mais tout tableau d’éléments React convient.
requiredFieldsLabel boolean false Si true, une note est affichée au-dessus du contenu pour expliquer que les champs obligatoires sont signalés (clé de traduction library:pankosmia-rcl:required_field). Utilisez-le lorsque la boîte de dialogue contient un formulaire avec des champs obligatoires.
dividers boolean false Si true, un séparateur horizontal est tracé entre le titre et le contenu, et entre le contenu et les boutons.

PanAdvancedDialog

Une boîte de dialogue modale avec une barre de titre colorée (couleur primaire du thème), pleine largeur jusqu’au point de rupture sm, et un séparateur au-dessus des boutons. Elle est destinée aux contenus et formulaires plus longs.

Comportement sur les petits écrans

Sous le point de rupture sm, la boîte de dialogue passe en plein écran. Une icône de fermeture apparaît au début de la barre de titre et appelle closeFn. Le pied de page est masqué, et le deuxième bouton de actionsButtonArray (le bouton d’action créé par PanDialogActionsArray) est déplacé à la fin de la barre de titre. Gardez l’action principale en deuxième position pour qu’elle reste accessible sur mobile. Contrairement à PanBasicDialog, cliquer sur l’arrière-plan ou appuyer sur Échap ne ferme pas cette boîte de dialogue.

Propriété Type Défaut Rôle
titleLabel string obligatoire Texte affiché comme titre de la boîte de dialogue. Traduisez-le avant de le transmettre.
isOpen boolean obligatoire Indique si la boîte de dialogue est visible. Le composant parent gère cet état.
closeFn () => void obligatoire Fonction appelée lorsque l’utilisateur clique sur l’icône de fermeture affichée dans la barre de titre sur les petits écrans. Votre code doit s’en servir pour mettre isOpen à false. Elle n’est pas appelée par l’arrière-plan ni par Échap.
children ReactNode aucun Le contenu de la boîte de dialogue : n’importe quels nœuds React (texte, champs de formulaire, listes…).
actionsButtonArray ReactElement[] aucun Tableau de boutons affichés dans le pied de page, dans l’ordre. Normalement le résultat de PanDialogActionsArray(...), mais tout tableau d’éléments React convient.
requiredFieldsLabel boolean false Si true, une note est affichée au-dessus du contenu pour expliquer que les champs obligatoires sont signalés (clé de traduction library:pankosmia-rcl:required_field). Utilisez-le lorsque la boîte de dialogue contient un formulaire avec des champs obligatoires.

PanDialogActionsArray

Malgré son nom, c’est une simple fonction et non un composant : appelez-la comme PanDialogActionsArray({ ... }). Elle renvoie un tableau de deux éléments, [boutonFermer, boutonAction], à transmettre à la propriété actionsButtonArray de PanBasicDialog ou PanAdvancedDialog. Le bouton de fermeture est toujours en premier. Le bouton d’action est en second ; lorsque onlyCloseButton vaut true, cet emplacement est null.

Propriété Type Défaut Rôle
actionFn () => void obligatoire Fonction exécutée au clic sur le bouton d’action. Non utilisée lorsque onlyCloseButton vaut true.
actionLabel string obligatoire Libellé du bouton d’action. Traduisez-le avant de le transmettre.
closeFn () => void obligatoire Fonction exécutée au clic sur le bouton de fermeture. Elle est aussi appelée après actionFn lorsque closeOnAction vaut true.
closeLabel string obligatoire Libellé du bouton de fermeture (par exemple Annuler ou Fermer). Traduisez-le avant de le transmettre.
isDisabled boolean aucun Si true, le bouton d’action est désactivé. Utilisé typiquement tant qu’un formulaire est invalide. Le bouton de fermeture n’est jamais désactivé par cette propriété.
closeOnAction boolean true Si true, closeFn est appelée juste après actionFn. Mettez-le à false lorsque l’action est asynchrone ou peut échouer et que votre code doit fermer la boîte de dialogue lui-même.
onlyCloseButton boolean false Si true, seul le bouton de fermeture est créé (pour les boîtes de dialogue purement informatives). Le deuxième emplacement du tableau est null.
actionVariant string aucun Variante MUI Button du bouton d’action : text, outlined ou contained. À défaut, la valeur par défaut de MUI (text) est utilisée.
closeVariant string aucun Variante MUI Button du bouton de fermeture : text, outlined ou contained. À défaut, la valeur par défaut de MUI (text) est utilisée.
isLoading boolean aucun Si true, le bouton de fermeture est désactivé et affiche un petit indicateur de chargement. Notez que cela s’applique uniquement au bouton de fermeture, pas au bouton d’action.
loadingLabel string aucun Libellé qui remplace celui du bouton de fermeture pendant que isLoading vaut true. À défaut, le libellé normal est conservé.

Exemples

Une boîte de dialogue avec une action de confirmation. Le même schéma fonctionne pour PanAdvancedDialog :

const [open, setOpen] = useState(false);

<PanBasicDialog
  titleLabel="Delete this item?"
  isOpen={open}
  closeFn={() => setOpen(false)}
  actionsButtonArray={PanDialogActionsArray({
    actionLabel: "Delete",
    actionFn: () => deleteItem(),
    closeLabel: "Cancel",
    closeFn: () => setOpen(false),
    actionVariant: "contained",
  })}
>
  <Typography>This cannot be undone.</Typography>
</PanBasicDialog>

Des démonstrations fonctionnelles se trouvent dans src/componentDemos/V1.0 du dépôt core-client-rcl.