Create a gist now

Instantly share code, notes, and snippets.

@zackperdue /DialogBox.jsx Secret
Last active Aug 29, 2015

What would you like to do?
Versatile Dialog Box ReactJS Component
// jshint asi: true
var DialogBox = React.createClass({
getInitialState: function(){
return {
open: false
}
},
render: function(){
var classes = ['modal', 'fade', this.state.open && 'in'].join(' ')
var styles = {
closed: {},
open: {display: 'block'}
}
var actions = this._getActionsContainer(this.props.actions)
return (
<div className={classes} style={_.extend(styles.closed, this.state.open && styles.open)}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button className="close" onClick={this.dismiss}><span>&times;</span></button>
<h4 className="modal-title">{this.props.title}</h4>
</div>
<div className="modal-body">
{this.props.children}
</div>
{actions}
</div>
</div>
</div>
)
},
_getAction: function(options, key){
return (<button onClick={options.onClick.bind(this)} className={options.classes} key={key}>{options.label}</button>)
},
_getActionsContainer: function(actionObjects){
var actions = actionObjects.map(function(action, key){
return this._getAction(action, key)
}.bind(this))
return (
<div className="modal-footer">
{actions}
</div>
)
},
dismiss: function(){
this.setState({open: false}, function(){
if (typeof this.props.onDismiss == 'function'){
this.props.onDismiss.call(this)
}
}.bind(this))
},
open: function(){
this.setState({open: true}, function(){
if (typeof this.props.onOpen == 'function'){
this.props.onOpen.call(this)
}
}.bind(this))
},
isOpen: function(){
return this.state.open
}
})
var props = {
title: "Complete Your Profile",
classes: 'extra class',
onDismiss: function(){
// `this` = Component
},
onOpen: function(){
// `this` = Component
},
actions: [
{
label: 'OK',
classes: 'btn btn-primary',
onClick: function(e){
this.dismiss() // `this` = Component
}
}
]
}
<DialogBox {...props}>
Children Go Here
</DialogBox>
Owner

zackperdue commented Jun 9, 2015

Uses Twitter Bootstrap HTML.
Modeled after http://material-ui.com/#/components/dialog

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