Skip to content

Commit

Permalink
exemple updated
Browse files Browse the repository at this point in the history
  • Loading branch information
plepaisant committed Apr 8, 2016
1 parent cd0ad71 commit 1cc0e33
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 2 deletions.
30 changes: 29 additions & 1 deletion src/application/popin/example/index.jsx
Original file line number Diff line number Diff line change
@@ -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 = '#'
},
Expand Down Expand Up @@ -41,6 +48,7 @@ const MyMenu = React.createClass({
},
makeTheSecondPopinPop() {
const self = this;
self.refs.secondPopin.setState({dynamicPopin : 0});
return self.refs.secondPopin.togglePopin();
},
makeTheThirdPopinPop() {
Expand Down Expand Up @@ -79,6 +87,7 @@ const MyMenu = React.createClass({

const MyPopin = React.createClass({
togglePopin() {
this.refs.popin.setLevel(getLevel());
this.refs.popin.toggleOpen();
},
render() {
Expand All @@ -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>
Expand All @@ -120,15 +142,20 @@ 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>
);
}
});

const ThirdPopin = React.createClass({
togglePopin() {
this.refs.thirdPopin.setLevel(getLevel());
this.refs.thirdPopin.toggleOpen();
},
render() {
Expand Down Expand Up @@ -169,4 +196,5 @@ const ThirdPopin = React.createClass({
}
});


module.exports = MyMenu;
8 changes: 7 additions & 1 deletion src/application/popin/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,12 @@ const popin = {
}, timeout);
},

componentDidMount() {
if (this.state.opened){
window.addEventListener('keydown', this.handleKeyDown, true);
}
},

componentWillUnmount() {
window.clearTimeout(this._openTimeoutID);
},
Expand All @@ -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')));
}
Expand Down

0 comments on commit 1cc0e33

Please sign in to comment.