Panneau glissant

Présentation

TODO: image

Ce composant est un composant React permettant de mettre en place un panneau glissant venant de la droite de la page ou du menu de celle-ci. Ce composant est fait pour apparaître suite à une action sur la page ( clique sur un bouton, sur une ligne d'une liste ou autres ).

Détail du composant

Le composant panneau glissant est appelé Popin, il se trouve dans Focus-components/application/popin.

Ses attributs

Type Nom Valeurs par défaut Valeurs possibles Rôle
bool modal false true / false Permet de savoir si la Popin est modal ou non.
string size Medium Small / Medium / Large Permet de définir la taille de la Popin.
string type full full / from-menu / from-right Permet de définir d'où apparaît la Popin
string level 0 0 / 1 / 2 Permet de modifier le z-index du css de la Popin
string overlay true true / false Permet de définir le css de la Popin à visibility : collapse si ce dernier est false.
bool open true true / false Permet de définir si la Popin est à l'état ouverte ou non.

Ses fonctions

  • toggleOpen() : Fontion permettant d'ouvrir ou de fermer une Popin en changeant son état.

  • onPopinClose() : Fonction pouvant être passée en propriété à la Popin. Cette fonction est à écrire.

  • _getAnimationProps() : Fonction qui renvoie un json necessaire l'initialisation de la Popin.

  • _validateSize() : Fonction permettant de vérifier que la taille de la Popin, définie dans ses props, est valide ( à savoir l'une des trois valeurs possibles). Elle retourne la taille valide ou une lève une exception.
  • _preventPopinClose() : Fonction permettant une fermeture de la popin en cas de clique en dehors de la Popin.

Exemple

Afin de pouvoir mettre en place une Popin il est recommandé de lire la documentation de React sur le this.refs : https://facebook.github.io/react/docs/more-about-refs.html. Ce dernier permet de récupérer un element du render().

Pour créer une Popin, il suffit de déclarer une Popin dans la fonction render de votre classe React comme un composant.

Ensuite à l'intérieur de ce composant, il faut définir un composant enfant qui sera le rendu de la Popin.

Il ne reste plus qu'à mettre en place l'évènement qui déclanchera l'ouverture de la Popin en utilisant le this.refs pour avoir accès à la fonction d'ouverture (toggleOpen()) de la Popin déclarée dans la fonction render().

Dans l'exemple, le click du bouton permet d'ouvrir la popin.

let Button = FocusComponents.common.button.action.component;
let Popin = Focus.components.application.popin.component;

module.exports = React.createClass({
    ouverturePopinExemple() {
        return this.refs['popinExemple'].toggleOpen();
    },
    render() {
        return (
            <div>

                <Button handleOnClick={this.ouverturePopinExemple}
                        shape='flat'
                        label="Ouverture d'une Popin" type='button'
                        icon="play">
                </Button>
                <Popin ref='popinExemple' type='from-right'>

                   <PopinContent/> //todo
                   <div>Bonjour, je suis la Popin d'Exemple !</div>
                </Popin>
            </div>
        );
    }
});