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 |