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>×</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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Uses Twitter Bootstrap HTML.
Modeled after http://material-ui.com/#/components/dialog