From 357c29db3f297771b638fc3c9ad386989b8462f6 Mon Sep 17 00:00:00 2001
From: Pascal LEPAISANT <pascal.lepaisant@kleegroup.com>
Date: Mon, 11 Apr 2016 15:05:27 +0200
Subject: [PATCH] code enhancements and background color for popins

---
 src/application/popin/example/index.jsx | 75 +++++++++++++++++--------
 src/application/popin/index.js          | 26 +++++----
 2 files changed, 67 insertions(+), 34 deletions(-)

diff --git a/src/application/popin/example/index.jsx b/src/application/popin/example/index.jsx
index c2a11f81d..67b186ac4 100644
--- a/src/application/popin/example/index.jsx
+++ b/src/application/popin/example/index.jsx
@@ -1,8 +1,9 @@
 const {MenuLeft} = FocusComponents.components;
 const Popin = FocusComponents.application.popin.component;
+const {Panel} = FocusComponents.components;
 
-let  currentLevel = 0;
-const getLevel =  function  getLevel(){
+let currentLevel = 0;
+const getLevel = function getLevel() {
     currentLevel++;
     return currentLevel;
 };
@@ -16,19 +17,19 @@ const MyMenu = React.createClass({
         const self = this;
         return [
             {
-                icon:'home',
+                icon: 'home',
                 onClick() {
                     self.goHome();
                 }
             },
             {
-                icon:'notifications',
+                icon: 'notifications',
                 onClick() {
                     self.refs.popin.togglePopin();
                 }
             },
             {
-                icon:'chat',
+                icon: 'chat',
                 onClick() {
                     self.refs.thirdPopin.togglePopin();
                 }
@@ -37,18 +38,18 @@ const MyMenu = React.createClass({
     },
     style: {
         position: 'fixed',
-        left:'40%',
-        top:'30%',
-        width:'576px'
+        left: '40%',
+        top: '30%',
+        width: '576px'
     },
     titleStyle: {
         color: 'white',
-        height:' 176px',
+        height: ' 176px',
         backgroundImage: 'url(http://media.dcentertainment.com/sites/default/files/character_bio_576_superman_0.jpg)'
     },
     makeTheSecondPopinPop() {
         const self = this;
-        self.refs.secondPopin.setState({dynamicPopin : 0});
+        self.refs.secondPopin.setState({dynamicPopin: 0});
         return self.refs.secondPopin.togglePopin();
     },
     makeTheThirdPopinPop() {
@@ -66,13 +67,24 @@ const MyMenu = React.createClass({
                     </div>
                     <div className="mdl-card__supporting-text" style={this.divSupportText}>
                         <h5>
-                            Through this example you'll find the different possibilities you got with the Focus Popin component.
+                            Through this example you'll find the different possibilities you got with the Focus Popin
+                            component.
                             <br/><br/>
-                            Click on <div className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"><i  className="material-icons">notifications</i></div> icon to have a menu slidding popin
+                            Click on
+                            <div className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"><i
+                                className="material-icons">notifications</i></div>
+                            icon to have a menu slidding popin
                             <br/>
-                            Click on <div className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"><i  className="material-icons">chat</i></div> icon to have a right slidding popin
+                            Click on
+                            <div className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"><i
+                                className="material-icons">chat</i></div>
+                            icon to have a right slidding popin
                             <br/>
-                            And <button className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onClick={this.makeTheSecondPopinPop}><b>Click here</b></button> to display a fade-in popin example.
+                            And
+                            <button
+                                className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
+                                onClick={this.makeTheSecondPopinPop}><b>Click here</b></button>
+                            to display a fade-in popin example.
                             <br/>
                         </h5>
                     </div>
@@ -115,19 +127,30 @@ const MyPopin = React.createClass({
 const SecondPopin = React.createClass({
 
     getInitialState() {
-        return {dynamicPopin : 0};
+        return {dynamicPopin: 0};
     },
     togglePopin() {
         this.refs.secondPopin.setLevel(getLevel());
         this.refs.secondPopin.toggleOpen();
     },
     _renderDynamicPopin(){
+        const colors = ['grey', 'Cornsilk', 'Gainsboro', 'LightCyan '];
         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>});
+            .map(idx => {
+                const colorStyle = {backgroundColor: colors[idx % colors.length]};
+                //const popinTile = 'Popin ' + (idx+1);
+                const popinTile = `Popin ${idx + 1}`;
+                return (
+                    <Popin key={idx} size='small' overlay={false} open={true} level={getLevel()}>
+                        <Panel style={colorStyle} title={popinTile}>
+                            <p>Close this popin with Escape key</p>
+                        </Panel>
+                    </Popin>);
+            });
         return popins;
     },
     addPopup(){
-        this.setState({dynamicPopin : this.state.dynamicPopin +1});
+        this.setState({dynamicPopin: this.state.dynamicPopin + 1});
     },
     render() {
         return (
@@ -139,14 +162,16 @@ const SecondPopin = React.createClass({
                 <h4>
                     This Popin is, as described, set the default <b>type</b> named <b>full</b> it defines its animation.
                     <br/>
-                    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.
+                    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>
+                <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>
         );
@@ -168,28 +193,32 @@ const ThirdPopin = React.createClass({
                 <center>
                     <b>Material design</b>
                     <br/>
-                    <iframe width="560" height="315" src="https://www.youtube.com/embed/Q8TXgCzxEnw" frameborder="0" allowfullscreen></iframe>
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/Q8TXgCzxEnw" frameborder="0"
+                            allowfullscreen></iframe>
                     <br/>
                     <br/>
                 </center>
                 <center>
                     <b>Making Material Design: Crafting Material</b>
                     <br/>
-                    <iframe width="560" height="315" src="https://www.youtube.com/embed/Y0UEGsvcYvk" frameborder="0" allowfullscreen></iframe>
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/Y0UEGsvcYvk" frameborder="0"
+                            allowfullscreen></iframe>
                     <br/>
                     <br/>
                 </center>
                 <center>
                     <b>Material Design : Palette Perfect</b>
                     <br/>
-                    <iframe width="560" height="315" src="https://www.youtube.com/embed/xYkz0Ueg0L4" frameborder="0" allowfullscreen></iframe>
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/xYkz0Ueg0L4" frameborder="0"
+                            allowfullscreen></iframe>
                     <br/>
                     <br/>
                 </center>
                 <center>
                     <b>Material Desing : Story</b>
                     <br/>
-                    <iframe width="560" height="315" src="https://www.youtube.com/embed/rrT6v5sOwJg" frameborder="0" allowfullscreen></iframe>
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/rrT6v5sOwJg" frameborder="0"
+                            allowfullscreen></iframe>
                 </center>
             </Popin>
         );
diff --git a/src/application/popin/index.js b/src/application/popin/index.js
index 56650bc28..c31163de4 100644
--- a/src/application/popin/index.js
+++ b/src/application/popin/index.js
@@ -71,7 +71,8 @@ const popin = {
      */
     getInitialState() {
         return ({
-            opened: this.props.open
+            opened: this.props.open,
+            level: this.props.level,
         });
     },
     /**
@@ -102,7 +103,8 @@ const popin = {
         types: types('string'),
         level: types('number'),
         overlay: types('bool'),
-        open: types('bool')
+        open: types('bool'),
+        size: PropTypes.oneOf(['small', 'medium', 'large']),
     },
     /**
      * Wheel event handler.
@@ -156,11 +158,16 @@ const popin = {
     },
 
     componentDidMount() {
-        if (this.state.opened){
+        if (this.state.opened) {
             window.addEventListener('keydown', this.handleKeyDown, true);
         }
     },
-
+    componentWillReceiveProps(nextProps){
+        const {level} = nextProps;
+        if(level){
+            this.setState({level:level});
+        }
+    },
     componentWillUnmount() {
         window.clearTimeout(this._openTimeoutID);
     },
@@ -169,7 +176,7 @@ const popin = {
      * @param level
      */
     setLevel(level) {
-        this.setState({level : level});
+        this.setState({level: level});
     },
     /**
      * keyboard event handler
@@ -182,12 +189,12 @@ const popin = {
             if (this.state.opened) {
                 const popins = [...document.querySelectorAll("[data-focus='popin']")].reduce((prec, current) => {
                     if (current.hasChildNodes()) {
-                        prec.push(Number(current.getAttribute('data-level')));
+                        prec.push(+current.getAttribute('data-level'));
                     }
                     return prec;
                 }, []);
 
-                const level = this.state.level || this.props.level;
+                const level = this.state.level;
                 if (max(popins) === level) {
                     this.toggleOpen();
                     e.stopPropagation();
@@ -202,7 +209,7 @@ const popin = {
      */
     render() { // test for this.state.opened and return an Overlay component if true
         const {type, modal, overlay, children} = this.props;
-        const level = this.state.level || this.props.level;
+        const {level} = this.state;
         return (
             <div data-focus='popin' data-level={level} data-size={this._validateSize()} data-type={type}>
                 {this.state.opened &&
@@ -255,9 +262,6 @@ const popin = {
      * @private
      */
     _validateSize() {
-        if (!includes(['small', 'medium', 'large'], this.props.size)) {
-            throw new ArgumentInvalidException('Please provide a valid popin size among small, medium and large. Provided ' + this.props.size);
-        }
         return this.props.size;
     },
     /**