Bug fix: Render array of elements (#979)

Bug fix: render an array of elements

* handle array child elements; ensure that extraStateKeyMap is cleaned up

* Add regression test for render children.

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Radium Changelog
 
+## Unreleased
+- Fix `render` methods that return array of children. (#950)
+
 ## 0.23.0 (March 15, 2018)
 - Support ES7 arrow functions for React class methods. (#738)
 

src/__tests__/radium-test.js

@@ -790,6 +790,38 @@ describe('Radium blackbox tests', () => {
     expect(div.style.color).to.equal('red');
   });
 
+  // Regression test: https://github.com/FormidableLabs/radium/issues/950
+  it('works with array children', () => {
+    class TestComponent extends Component {
+      render = () => {
+        return [
+          <div key="key0" style={{color: 'blue', ':hover': {color: 'red'}}}>
+            {this.props.children}
+          </div>,
+          <div key="key1" style={{color: 'yellow', ':hover': {color: 'green'}}}>
+            two
+          </div>
+        ];
+      };
+    }
+
+    const Wrapped = Radium(TestComponent);
+    const output = TestUtils.renderIntoDocument(<Wrapped>hello world</Wrapped>);
+
+    const divs = getElements(output, 'div');
+
+    expect(divs[0].style.color).to.equal('blue');
+    expect(divs[0].getAttribute('data-radium')).to.equal('true');
+    expect(divs[0].innerText).to.equal('hello world');
+    TestUtils.SimulateNative.mouseOver(divs[0]);
+    expect(divs[0].style.color).to.equal('red');
+
+    expect(divs[1].style.color).to.equal('yellow');
+    expect(divs[1].innerText).to.equal('two');
+    TestUtils.SimulateNative.mouseOver(divs[1]);
+    expect(divs[1].style.color).to.equal('green');
+  });
+
   it('works fine if passing null, undefined, or false in style', () => {
     const TestComponent = Radium(() => (
       <div style={{background: undefined, border: false, color: null}} />
@@ -833,7 +865,6 @@ describe('Radium blackbox tests', () => {
       </ContextGivingWrapper>
     );
     const div = getElement(output, 'div');
-
     expect(div.style.color).to.equal('blue');
     expect(div.innerText).to.equal('hello world');
 

src/resolve-styles.js

@@ -385,6 +385,31 @@ resolveStyles = function(
     );
   }
 
+  if (Array.isArray(renderedElement) && !renderedElement.props) {
+    const elements = renderedElement.map(element => {
+      // element is in-use, so remove from the extraStateKeyMap
+      if (extraStateKeyMap) {
+        const key = getStateKey(element);
+        delete extraStateKeyMap[key];
+      }
+
+      // this element is an array of elements,
+      // so return an array of elements with resolved styles
+      return resolveStyles(
+        component,
+        element,
+        config,
+        existingKeyMap,
+        shouldCheckBeforeResolve,
+        extraStateKeyMap
+      ).element;
+    });
+    return {
+      extraStateKeyMap,
+      element: elements
+    };
+  }
+
   // ReactElement
   if (
     !renderedElement ||
@@ -400,8 +425,10 @@ resolveStyles = function(
     return {extraStateKeyMap, element: renderedElement};
   }
 
+  const children = renderedElement.props.children;
+
   const newChildren = _resolveChildren({
-    children: renderedElement.props.children,
+    children,
     component,
     config,
     existingKeyMap,
@@ -425,12 +452,9 @@ resolveStyles = function(
   });
 
   // If nothing changed, don't bother cloning the element. Might be a bit
-  // wasteful, as we add the sentinal to stop double-processing when we clone.
+  // wasteful, as we add the sentinel to stop double-processing when we clone.
   // Assume benign double-processing is better than unneeded cloning.
-  if (
-    newChildren === renderedElement.props.children &&
-    newProps === renderedElement.props
-  ) {
+  if (newChildren === children && newProps === renderedElement.props) {
     return {extraStateKeyMap, element: renderedElement};
   }
 

test/radium-test.js

@@ -124,4 +124,34 @@ describe('Radium blackbox SSR tests', () => {
       );
     });
   });
+
+  describe('render scenarios', () => {
+    // Regression test: https://github.com/FormidableLabs/radium/issues/950
+    it('handles rendered child array', () => {
+      class Composed extends React.Component {
+        render() {
+          return [
+            React.createElement('div', {
+              key: 0,
+              style: {
+                color: 'blue'
+              }
+            }),
+            React.createElement('div', {
+              key: 1,
+              style: {
+                color: 'red'
+              }
+            })
+          ];
+        }
+      }
+
+      const rendered = render(Radium(Composed));
+      expect(rendered).to.contain(
+        '<div style="color:blue" data-radium="true"></div>' +
+          '<div style="color:red" data-radium="true"></div>'
+      );
+    });
+  });
 });