From f2bbe5ee5f1b67f59c07cdaccf5f6b121088c267 Mon Sep 17 00:00:00 2001
From: Pascal LEPAISANT <pascal.lepaisant@kleegroup.com>
Date: Fri, 8 Apr 2016 16:49:55 +0200
Subject: [PATCH] exemple updated

---
 src/application/popin/example/index.jsx | 30 ++++++++++++++++++++++++-
 src/application/popin/index.js          |  8 ++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/application/popin/example/index.jsx b/src/application/popin/example/index.jsx
index af7df5e92..c2a11f81d 100644
--- a/src/application/popin/example/index.jsx
+++ b/src/application/popin/example/index.jsx
@@ -1,7 +1,14 @@
 const {MenuLeft} = FocusComponents.components;
 const Popin = FocusComponents.application.popin.component;
 
+let  currentLevel = 0;
+const getLevel =  function  getLevel(){
+    currentLevel++;
+    return currentLevel;
+};
+
 const MyMenu = React.createClass({
+
     goHome() {
         window.location.href = '#'
     },
@@ -41,6 +48,7 @@ const MyMenu = React.createClass({
     },
     makeTheSecondPopinPop() {
         const self = this;
+        self.refs.secondPopin.setState({dynamicPopin : 0});
         return self.refs.secondPopin.togglePopin();
     },
     makeTheThirdPopinPop() {
@@ -79,6 +87,7 @@ const MyMenu = React.createClass({
 
 const MyPopin = React.createClass({
     togglePopin() {
+        this.refs.popin.setLevel(getLevel());
         this.refs.popin.toggleOpen();
     },
     render() {
@@ -104,12 +113,25 @@ const MyPopin = React.createClass({
 });
 
 const SecondPopin = React.createClass({
+
+    getInitialState() {
+        return {dynamicPopin : 0};
+    },
     togglePopin() {
+        this.refs.secondPopin.setLevel(getLevel());
         this.refs.secondPopin.toggleOpen();
     },
+    _renderDynamicPopin(){
+        const popins = Array.from(Array(this.state.dynamicPopin).keys())
+            .map(idx => { return <Popin key={idx}  size='small'  overlay={false} open={true} level={getLevel()} type='from-right'><h2> Popin {idx+1}</h2> </Popin>});
+        return popins;
+    },
+    addPopup(){
+        this.setState({dynamicPopin : this.state.dynamicPopin +1});
+    },
     render() {
         return (
-            <Popin ref='secondPopin' size='medium'>
+            <Popin ref='secondPopin' id='secondPopin' size='medium' overlay={false}>
                 <h2>
                     The Modal, The Medium and The Full !
                 </h2>
@@ -120,8 +142,12 @@ const SecondPopin = React.createClass({
                     You have 3 choices which are <b>"full"</b>, <b>"from-menu"</b> and <b>"from-right"</b>. The modal <b>attribute</b> is, by default, set to true so you can click outside of the Popin to close it.
                     <br/>
                     Check the notification icon which is in the Focus menu bar now.
+                    <br/> <br/>
+                    You can add as much popin as you want and close them with esc, from newer to older ones.
                 </h4>
                 <br/>
+                <button className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onClick={this.addPopup}><b>Click here</b></button>
+                {this._renderDynamicPopin()}
             </Popin>
         );
     }
@@ -129,6 +155,7 @@ const SecondPopin = React.createClass({
 
 const ThirdPopin = React.createClass({
     togglePopin() {
+        this.refs.thirdPopin.setLevel(getLevel());
         this.refs.thirdPopin.toggleOpen();
     },
     render() {
@@ -169,4 +196,5 @@ const ThirdPopin = React.createClass({
     }
 });
 
+
 module.exports = MyMenu;
diff --git a/src/application/popin/index.js b/src/application/popin/index.js
index 09e4c0350..56650bc28 100644
--- a/src/application/popin/index.js
+++ b/src/application/popin/index.js
@@ -155,6 +155,12 @@ const popin = {
         }, timeout);
     },
 
+    componentDidMount() {
+        if (this.state.opened){
+            window.addEventListener('keydown', this.handleKeyDown, true);
+        }
+    },
+
     componentWillUnmount() {
         window.clearTimeout(this._openTimeoutID);
     },
@@ -174,7 +180,7 @@ const popin = {
         e.preventDefault();
         if (e.code === "Escape") {
             if (this.state.opened) {
-                const popins = [].slice.call(document.querySelectorAll("[data-focus='popin']")).reduce((prec, current) => {
+                const popins = [...document.querySelectorAll("[data-focus='popin']")].reduce((prec, current) => {
                     if (current.hasChildNodes()) {
                         prec.push(Number(current.getAttribute('data-level')));
                     }