[WIP] close popins with escape

[plepaisant]

Popin closed with esc

Description

issue #824 :
Escape, in order to close each and every opened panel (and popin and such).
Meaning we have to keep track of the order in which popins have been opened to close them in reverse order.

the z-order of the popins is managed with the data-level attribute. The view is responsible of attributting a new level each time a popin is opened.

Example

  /**
  *  return a level - z-order -  higher then the previous
  */ 
    getLevel(){
        this.currentLevel++;
        return this.currentLevel;
    }
    /**
    *  open a popin and set its level ie z-order 
    */  
    popinOpener(ref) {
        var self = this;
        return function (event) {
            event.preventDefault();
            // setting the new level when opening the popin
            self.refs[ref].setLevel(self.getLevel());
            self.refs[ref].toggleOpen();
        }
    }

    render() {
        return (
            <div>
                <Button handleOnClick={this.popinOpener('from-left')} label='Open from-left popin'
                        style={{className:'btn-primary'}}/>
                <Button handleOnClick={this.popinOpener('from-right')} label='Open from-right popin'
                        style={{className:'btn-primary'}}/>
                <Button handleOnClick={this.popinOpener('full')} label='Open full popin'
                        style={{className: 'btn-primary'}}/>
                <div className="popins-container">
                    <Popin ref="full" type="full">
                        {PopinContent}
                    </Popin>
                    <Popin ref="from-left" type="from-left" >
                        {PopinContent}
                    </Popin>
                    <Popin ref="from-menu-second"  type="from-menu">
                        {PopinContent}
                    </Popin>
                    <Popin ref="from-right" type="from-right">
                        {PopinContent}
                    </Popin>
                </div>
            </div>
        );
    }

[pierr]

[...document.querySelectpr]

[pierr]

render(){
const {isPopin1, isPopin2} = this.state;
{
isPopin && <Popin1 />
}

}

[pierr]

+

[pierr]

'Escape'

[pierr]

I don't see why the level cannot be a props

[pierr]

@plepaisant

[plepaisant]

In the Popin code example, the popins are created in the render method of the parent. To handle the z-order, the level property needs to be updated when the popins toggle to visible state. At that time, the prop level cannot be changed so I had to create a state level.

 render() {
        return (
            <div>
                <MenuLeft items={this.itemsBuilder()} handleBrandClick={this.goHome}>
                </MenuLeft>
                <div style={this.style} className="demo-card-wide mdl-card mdl-shadow--2dp">
                    <div className="mdl-card__title" style={this.titleStyle}>
                        <h2 className="mdl-card__title-text">The Superman</h2>
                    </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.
                            <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
                            <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
                            <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.
                            <br/>
                        </h5>
                    </div>
                </div>
                <MyPopin ref='popin'/>
                <SecondPopin ref='secondPopin'/>
                <ThirdPopin ref='thirdPopin'/>
            </div>
        );
    }