diff --git a/src/Modal.js b/src/Modal.js index feaaa8ca31..70b5945bab 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -449,7 +449,7 @@ const Modal = React.createClass({ {this.props.children} ); // I can't think of another way to not break back compat while defaulting container - if ( show != null ){ + if ( !this.props.__isUsedInModalTrigger && show != null ){ return ( { show && modal } diff --git a/src/ModalTrigger.js b/src/ModalTrigger.js index 1bfde9325b..e1087dc384 100644 --- a/src/ModalTrigger.js +++ b/src/ModalTrigger.js @@ -4,6 +4,7 @@ import deprecationWarning from './utils/deprecationWarning'; import createChainedFunction from './utils/createChainedFunction'; import createContextWrapper from './utils/createContextWrapper'; +import { OverlayMixin } from './OverlayMixin'; function createHideDepreciationWrapper(hide){ return function(...args){ @@ -16,6 +17,8 @@ function createHideDepreciationWrapper(hide){ const ModalTrigger = React.createClass({ + mixins: [ OverlayMixin ], + propTypes: { modal: React.PropTypes.node.isRequired, /** @@ -28,6 +31,7 @@ const ModalTrigger = React.createClass({ onMouseOver: React.PropTypes.func }, + getInitialState() { return { isOverlayShown: false @@ -52,31 +56,19 @@ const ModalTrigger = React.createClass({ }); }, - componentDidMount(){ - this._overlay = document.createElement('div'); - React.render(this.getOverlay(), this._overlay); - }, - - componentWillUnmount() { - React.unmountComponentAtNode(this._overlay); - this._overlay = null; - clearTimeout(this._hoverDelay); - }, - - componentDidUpdate(){ - React.render(this.getOverlay(), this._overlay); - }, - - getOverlay() { + renderOverlay() { let modal = this.props.modal; + if (!this.state.isOverlayShown) { + return ; + } + return cloneElement( modal, { - show: this.state.isOverlayShown, onHide: this.hide, onRequestHide: createHideDepreciationWrapper(this.hide), - container: modal.props.container || this.props.container + __isUsedInModalTrigger: true } ); },