Composants complexes
LateralSelectionPanel
Composant d'affichage d'une page en deux sections
- section de gauche : liste de selection.
- section de droite : affichage des données relatives au choix effectué dans la section de gauche.
dans l'exemple ci-dessus on cherche à afficher les données de contenues dans un tableau d'objet du type :
[ {id: 1, title: "Titre de l'item 1", content: "Contenu de la donnée 1"}, {id: 2, title: "Titre de l'item 2", content: "Contenu de la donnée 2"}, {id: 3, title: "Titre de l'item 3", content: "Contenu de la donnée 3"} ]
Propriété | Description | Statut |
---|---|---|
selectorName | Le titre de la section de selection (gauche) | Obligatoire |
dataSectionName | Le titre de la section de données (droite) | Obligatoire |
items | liste d'objets à afficher en selection (section de gauche) : exemple ici la liste des items | Obligatoire |
titleProperty | Le nom du champ utilisé pour l'affichage de la liste de selection : exemple ici "title" (la propriété title de l'item) | Obligatoire |
filterName | Le nom du champ de l'objet à utiliser pour filtrer (ou fetcher) les données à afficher : exemple ici "id" (la clé unique de l'item), Cette valeur est passée au dataComponent via une props item lors de la selection d'un élément de la liste de gauche | Obligatoire |
dataComponent | Le composant de données à afficher (composant React personnalisé) : RAPPEL : votre composant sera wrappé et chargé avec la propriété item , dont la valeur correspond , pour l'élément selectionné, à la valeur de la propriété défini dans filterName (permet de fetcher sur un id, key etc...) | Obligatoire |
onSelect | Fonction de lancement d'une action personnalisée à la selection d'un élément de la liste (section de gauche) | Facultatif |
onUpdate | Fonction qui sera passée au dataComponent pour lancer une action personnalisée à la mise à jour des données (un reload par exemple) | Facultatif |