diff --git a/README.md b/README.md index 2cba9887..6b6f9f52 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,26 @@ you can pass `className` and `overlayClassName` props to the Modal. If you do this then none of the default styles will apply and you will have full control over styling via CSS. +If you want to override default content and overlay classes you can pass object +with three required properties: `base`, `afterOpen`, `beforeClose`. + +```jsx + +``` + You can also pass a `portalClassName` to change the wrapper's class (*ReactModalPortal*). This doesn't affect styling as no styles are applied to this element by default. diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js index 74799d6a..e9cfeff9 100644 --- a/lib/components/ModalPortal.js +++ b/lib/components/ModalPortal.js @@ -7,16 +7,8 @@ var createReactClass = require('create-react-class'); // so that our CSS is statically analyzable var CLASS_NAMES = { - overlay: { - base: 'ReactModal__Overlay', - afterOpen: 'ReactModal__Overlay--after-open', - beforeClose: 'ReactModal__Overlay--before-close' - }, - content: { - base: 'ReactModal__Content', - afterOpen: 'ReactModal__Content--after-open', - beforeClose: 'ReactModal__Content--before-close' - } + overlay: 'ReactModal__Overlay', + content: 'ReactModal__Content' }; var ModalPortal = module.exports = createReactClass({ @@ -169,12 +161,15 @@ var ModalPortal = module.exports = createReactClass({ }, buildClassName: function(which, additional) { - var className = CLASS_NAMES[which].base; - if (this.state.afterOpen) - className += ' '+CLASS_NAMES[which].afterOpen; - if (this.state.beforeClose) - className += ' '+CLASS_NAMES[which].beforeClose; - return additional ? className + ' ' + additional : className; + var classNames = (typeof additional === 'object') ? additional : { + base: CLASS_NAMES[which], + afterOpen: CLASS_NAMES[which] + "--after-open", + beforeClose: CLASS_NAMES[which] + "--before-close" + }; + var className = classNames.base; + if (this.state.afterOpen) { className += " " + classNames.afterOpen; } + if (this.state.beforeClose) { className += " " + classNames.beforeClose; } + return (typeof additional === 'string' && additional) ? [className, additional].join(" ") : className; }, render: function() { diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js index 4c2c210e..c9612f96 100644 --- a/specs/Modal.spec.js +++ b/specs/Modal.spec.js @@ -171,6 +171,32 @@ describe('State', () => { ).toBeTruthy(); }); + it('overrides the default content classes when a custom object className is used', () => { + const modal = renderModal({ + isOpen: true, + className: { + base: 'myClass', + afterOpen: 'myClass_after-open', + beforeClose: 'myClass_before-close' + } + }); + expect(modal.portal.refs.content.className).toEqual('myClass myClass_after-open'); + unmountModal(); + }); + + it('overrides the default overlay classes when a custom object overlayClassName is used', () => { + const modal = renderModal({ + isOpen: true, + overlayClassName: { + base: 'myOverlayClass', + afterOpen: 'myOverlayClass_after-open', + beforeClose: 'myOverlayClass_before-close' + } + }); + expect(modal.portal.refs.overlay.className).toEqual('myOverlayClass myOverlayClass_after-open'); + unmountModal(); + }); + it('supports overriding react modal open class in document.body.', () => { const modal = renderModal({ isOpen: true, bodyOpenClassName: 'custom-modal-open' }); expect(document.body.className.indexOf('custom-modal-open') !== -1).toBeTruthy();