Update className and style when new props arrive

Fixes tajo#72
luchkonikita · Jun 13, 2016 · 1de69e3 · 1de69e3
1 parent a4725ea
commit 1de69e3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/lib/portal.js b/lib/portal.js
@@ -126,21 +126,29 @@ export default class Portal extends React.Component {
     }
   }
 
+  applyClassNameAndStyle(props) {
+    if (props.className) {
+      this.node.className = props.className;
+    }
+    if (props.style) {
+      // React 15.1.0+ requires third parameter in debug mode
+      /* eslint-disable no-underscore-dangle */
+      CSSPropertyOperations.setValueForStyles(this.node,
+                                              props.style,
+                                              this._reactInternalInstance);
+      /* eslint-enable no-underscore-dangle */
+    }
+  }
+
   renderPortal(props) {
     if (!this.node) {
       this.node = document.createElement('div');
-      if (props.className) {
-        this.node.className = props.className;
-      }
-      if (props.style) {
-        // React 15.1.0+ requires third parameter in debug mode
-        /* eslint-disable no-underscore-dangle */
-        CSSPropertyOperations.setValueForStyles(this.node,
-                                                props.style,
-                                                this._reactInternalInstance);
-        /* eslint-enable no-underscore-dangle */
-      }
+      // apply CSS before the node is added to the DOM to avoid needless reflows
+      this.applyClassNameAndStyle(props);
       document.body.appendChild(this.node);
+    } else {
+      // update CSS when new props arrive
+      this.applyClassNameAndStyle(props);
     }
     this.portal = ReactDOM.unstable_renderSubtreeIntoContainer(
       this,

diff --git a/test/portal_spec.js b/test/portal_spec.js
@@ -77,11 +77,23 @@ describe('react-portal', () => {
     assert.equal(document.body.lastElementChild.className, 'some-class');
   });
 
-  it('should add inline style to portal\'s wrapping node', () => {
+  it('should add inline style to the portal\'s wrapping node', () => {
     mount(<Portal isOpened style={{ color: 'blue' }}><p>Hi</p></Portal>);
     assert.equal(document.body.lastElementChild.style.color, 'blue');
   });
 
+  it('should update className on the portal\'s wrapping node when props.className changes', () => {
+    const wrapper = mount(<Portal className="some-class" isOpened><p>Hi</p></Portal>);
+    wrapper.setProps({ className: 'some-other-class', children: <p>Hi</p> });
+    assert.equal(document.body.lastElementChild.className, 'some-other-class');
+  });
+
+  it('should update inline style on the portal\'s wrapping node when props.style changes', () => {
+    const wrapper = mount(<Portal isOpened style={{ color: 'blue' }}><p>Hi</p></Portal>);
+    wrapper.setProps({ style: { color: 'red' }, children: <p>Hi</p> });
+    assert.equal(document.body.lastElementChild.style.color, 'red');
+  });
+
   describe('callbacks', () => {
     it('should call props.beforeClose() if passed when calling Portal.closePortal()', () => {
       const props = { isOpened: true, beforeClose: spy() };