-
-
Save vvasilev-/fcf7d17610890e87f7069cd01c5260c5 to your computer and use it in GitHub Desktop.
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 Dialog = React.createClass({ | |
render: function() { | |
// 1) render nothing, this way the DOM diff will never try to do | |
// anything to it again, and we get a node to mess with | |
return React.DOM.div(); | |
}, | |
componentDidMount: function() { | |
// 2) do DOM lib stuff | |
this.node = this.getDOMNode(); | |
this.dialog = $(this.node).dialog({ | |
autoOpen: false, | |
// pass in lib options from props | |
title: this.props.title, | |
close: this.props.onClose | |
}).data('ui-dialog'); | |
// 3) call method to reconnect React's rendering | |
this.renderDialogContent(this.props); | |
}, | |
componentWillReceiveProps: function(newProps) { | |
// 4) render reconnected tree when props change | |
this.renderDialogContent(newProps); | |
}, | |
renderDialogContent: function(props) { | |
// 5) make a new rendering tree, we've now hidden the DOM | |
// manipulation that jQuery UI dialog did from React and | |
// continue the React render tree, some people call this | |
// a "portal" | |
React.renderComponent(React.DOM.div({}, props.children), this.node); | |
// 6) Call methods on the DOM lib via prop changes | |
if (props.open) | |
this.dialog.open(); | |
else | |
this.dialog.close(); | |
}, | |
componentWillUnmount: function() { | |
// clean up the mess | |
this.dialog.destroy(); | |
}, | |
getDefaultProps: function() { | |
return { | |
title: '', | |
onClose: function(){} | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment