diff --git a/src/Modal.js b/src/Modal.js index 78c983bc96..8be7f96032 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -4,10 +4,11 @@ import classNames from 'classnames'; import domUtils from './utils/domUtils'; import EventListener from './utils/EventListener'; import createChainedFunction from './utils/createChainedFunction'; +import CustomPropTypes from './utils/CustomPropTypes'; import Portal from './Portal'; import Fade from './Fade'; -import Dialog from './ModalDialog'; +import ModalDialog from './ModalDialog'; import Body from './ModalBody'; import Header from './ModalHeader'; import Title from './ModalTitle'; @@ -94,7 +95,7 @@ function getScrollbarSize(){ const Modal = React.createClass({ propTypes: { ...Portal.propTypes, - ...Dialog.propTypes, + ...ModalDialog.propTypes, /** * Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked. @@ -110,6 +111,12 @@ const Modal = React.createClass({ */ animation: React.PropTypes.bool, + /** + * A Component type that provides the modal content Markup. This is a useful prop when you want to use your own + * styles and markup to create a custom modal component. + */ + dialogComponent: CustomPropTypes.elementType, + /** * When `true` The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. * Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen-readers. @@ -127,6 +134,7 @@ const Modal = React.createClass({ getDefaultProps(){ return { bsClass: 'modal', + dialogComponent: ModalDialog, show: false, animation: true, backdrop: true, @@ -145,6 +153,7 @@ const Modal = React.createClass({ let { onExit, onExiting, onEnter, onEntering, onEntered } = props; let show = !!props.show; + let Dialog = props.dialogComponent; const mountModal = show || (animation && !this.state.exited); if (!mountModal) { @@ -434,7 +443,7 @@ Modal.Header = Header; Modal.Title = Title; Modal.Footer = Footer; -Modal.Dialog = Dialog; +Modal.Dialog = ModalDialog; Modal.TRANSITION_DURATION = 300; Modal.BACKDROP_TRANSITION_DURATION = 150; diff --git a/test/ModalSpec.js b/test/ModalSpec.js index 7ea08e9260..1cb52812b2 100644 --- a/test/ModalSpec.js +++ b/test/ModalSpec.js @@ -171,6 +171,22 @@ describe('Modal', function () { expect(test).not.to.throw(); }); + it('Should use dialogComponent', function () { + let noOp = function () {}; + + class CustomDialog { + render(){ return
; } + } + + let instance = render( + + Message + + , mountPoint); + + assert.ok(instance.refs.dialog instanceof CustomDialog); + }); + it('Should pass transition callbacks to Transition', function (done) { let count = 0; let increment = ()=> count++;