usage:
<ModalLink name="Click me!">
<h1>Hello modal!</h1>
</ModalLink>
var Modal = React.createClass({ | |
killClick: function(e) { | |
// clicks on the content shouldn't close the modal | |
e.stopPropagation(); | |
}, | |
componentDidMount: function() { | |
ModalCount += 1; | |
modalWindowLock(); | |
}, | |
handleBackdropClick: function() { | |
// when you click the background, the user is requesting that the modal gets closed. | |
// note that the modal has no say over whether it actually gets closed. the owner of the | |
// modal owns the state. this just "asks" to be closed. | |
this.props.onRequestClose(); | |
ModalCount -= 1; | |
if (ModalCount == 0) { | |
modalWindowUnlock(); | |
} | |
}, | |
render: function() { | |
var cls = "modal-content " + (this.props.className || ''); | |
return ( | |
<div {...this.props} className={"modal-container " + (this.props.className || '')} onClick={this.handleBackdropClick}> | |
<div className={cls} onClick={this.killClick}> | |
<a href="javascript:;" role="button" className="modal-close" onClick={this.handleBackdropClick}></a> | |
{this.props.children} | |
</div> | |
</div> | |
); | |
} | |
}); | |
var ModalLink = React.createClass({ | |
mixins: [LayerMixin], | |
handleClick: function() { | |
this.setState({ | |
show: !this.state.show | |
}); | |
}, | |
getInitialState: function() { | |
return { | |
show: false | |
}; | |
}, | |
close: function() { | |
this.setState({ | |
show: false | |
}); | |
}, | |
open: function() { | |
this.setState({ | |
show: true | |
}); | |
}, | |
renderModal: function() { | |
return (<div>{this.props.children}</div>); | |
}, | |
renderLayer: function() { | |
if (!this.state.show) { | |
return <span />; | |
} | |
var modal = this.renderModal(); | |
return (<Modal className={this.props.className} onRequestClose={this.handleClick}>{modal}</Modal>); | |
}, | |
render: function() { | |
return ( | |
<a href="javascript:;" role="button" className={this.props.linkClassName || ''} onClick={this.handleClick}>{this.props.name}</a> | |
); | |
} | |
}); |