[changed] use object className and overlayClassName prop to override...

This is a backport of @cassln's feature to version 1.8.x.

Original PR is reactjs#330.

reactjs#330

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
+<Modal
+  ...
+  className={{
+    base: 'myClass',
+    afterOpen: 'myClass_after-open',
+    beforeClose: 'myClass_before-close'
+  }}
+  overlayClassName={{
+    base: 'myOverlayClass',
+    afterOpen: 'myOverlayClass_after-open',
+    beforeClose: 'myOverlayClass_before-close'
+  }}
+  ...
+>
+```
+
 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.
 

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() {

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(mcontent(modal).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(moverlay(modal).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();