Skip to content

Instantly share code, notes, and snippets.

@tarjei
Created June 17, 2014 11:02
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tarjei/326a1db2616d0d473ec1 to your computer and use it in GitHub Desktop.
Save tarjei/326a1db2616d0d473ec1 to your computer and use it in GitHub Desktop.
Foundation.reveal as a React.js component
/**
* @jsx React.DOM
*/
var React = require('react/addons');
/* the link component is used to navigate away from th current url. Some of it is app spesific and
therefore not included here. */
var Link = require('../components/Link.jsx');
var cx = React.addons.classSet;
var Modal = React.createClass({
propTypes: {
url: React.PropTypes.string.isRequired,
},
getInitialState: function() {
return {
visibility: false
};
},
componentDidMount: function() {
document.addEventListener('keyup', this.handleDocumentKeyUp);
setTimeout(function() {
this.setState({
'visibility': true
});
}.bind(this), 0);
},
componentWillUnmount: function() {
document.removeEventListener('keyup', this.handleDocumentKeyUp);
},
hide: function() {
window.history.back();
},
render: function() {
var classes = {
"reveal-modal": true,
//"completed": true,
//"open": this.state.visibility,
"animatable": true,
"slide-in-right": true,
'active': this.state.visibility
};
var style = {
display: "block",
"-webkit-transform-origin": "0px 0px",
"-webkit-transform": "scale(1, 1)",
visibility: "visible",
top: "100px"
};
return (
<span>
<div onClick={this.handleBackdropClick} className="reveal-modal-bg" style={{opacity: 1, display: "block", 'zIndex': '300', "pointer-events": 'auto'}}></div>
<div className={cx(classes)}>
<Link url={this.props.url} className="close-reveal-modal">&#215;</Link>
{this.props.children}
</div>
</span>
);
},
handleBackdropClick: function (e) {
if (e.target !== e.currentTarget) {
return;
}
this.hide();
//this.props.onRequestHide();
},
handleDocumentKeyUp: function (e) {
if (e.keyCode === 27) {
this.hide();
}
}
});
module.exports = Modal;
@marlonmantilla
Copy link

This seems helpful!
What if I need a component inside of that Modal ? let's say a form that saves something ?

Thanks in advance

@marlonmantilla
Copy link

Got it just realized that you include this.props.children 😄

@dyatlov
Copy link

dyatlov commented Sep 21, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment