[added] refresh portalClassName on componentWillUpdate

reactjs · Jun 15, 2017 · 3139e85 · 3139e85
1 parent 09f8ac0
commit 3139e85
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/lib/components/Modal.js b/lib/components/Modal.js
@@ -73,6 +73,12 @@ var Modal = createReactClass({
     this.renderPortal(this.props);
   },
 
+  componentWillUpdate: function(newProps) {
+    if(newProps.portalClassName !== this.props.portalClassName) {
+      this.node.className = newProps.portalClassName;
+    }
+  },
+
   componentWillReceiveProps: function(newProps) {
     if (newProps.isOpen) refCount.add(this);
     if (!newProps.isOpen) refCount.remove(this);

diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
@@ -341,4 +341,42 @@ describe('State', () => {
 
     document.body.removeChild(currentDiv);
   });
+
+  it('verify that portalClassName is refreshed on component update', () => {
+    var node = document.createElement('div');
+    var modal = null;
+
+    var App = React.createClass({
+      getInitialState: function () {
+        return { testHasChanged: false };
+      },
+
+      componentDidMount: function() {
+        expect(modal.node.className).toEqual('myPortalClass');
+
+        this.setState({
+          testHasChanged: true
+        });
+      },
+
+      componentDidUpdate: function() {
+        expect(modal.node.className).toEqual('myPortalClass-modifier');
+      },
+
+      render: function() {
+        return (
+          <div>
+            <Modal
+              ref={modalComponent => { modal = modalComponent; }}
+              isOpen={true}
+              portalClassName={this.state.testHasChanged === true ? 'myPortalClass-modifier' : 'myPortalClass'}>
+            </Modal>
+          </div>
+        );
+      }
+    });
+
+    Modal.setAppElement(node);
+    ReactDOM.render(<App />, node);
+  });
 });