From a12246e4bbb60b905aa5e29fe74751e66a45d3b1 Mon Sep 17 00:00:00 2001
From: Bruno Dias <dias.h.bruno@gmail.com>
Date: Sun, 11 Jun 2017 20:12:44 -0300
Subject: [PATCH] [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 #330.

https://github.com/reactjs/react-modal/pull/330
---
 README.md                     | 20 ++++++++++++++++++++
 lib/components/ModalPortal.js | 27 +++++++++++----------------
 specs/Modal.spec.js           | 26 ++++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 16 deletions(-)

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
+<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.
 
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..9dfa3850 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(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();