-
-
Save zackperdue/cedb174cdec816d52d9b to your computer and use it in GitHub Desktop.
Versatile Dialog Box ReactJS Component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
Uses Twitter Bootstrap HTML.
Modeled after http://material-ui.com/#/components/dialog