Merge pull request gajus#60 from bgerm/iterable-children

Add support for iterable children.

Author: gajus

src/isIterable.js

@@ -0,0 +1,10 @@
+import { isObject } from 'lodash';
+
+const ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+const OLD_ITERATOR_SYMBOL = '@@iterator';
+
+export default function isIterable(obj) {
+  return isObject(obj) &&
+    typeof ((ITERATOR_SYMBOL && obj[ITERATOR_SYMBOL])
+        || obj[OLD_ITERATOR_SYMBOL]) === 'function';
+}

src/linkClass.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import makeConfiguration from './makeConfiguration';
+import isIterable from './isIterable';
 import _ from 'lodash';
 
 let linkClass;
@@ -12,6 +13,7 @@ let linkClass;
  */
 linkClass = (element, styles = {}, userConfiguration) => {
     let appendClassName,
+        children,
         clonedElement,
         configuration,
         newChildren,
@@ -62,10 +64,12 @@ linkClass = (element, styles = {}, userConfiguration) => {
 
     // console.log(`element.props.children`, element.props.children, `React.Children.count(element.props.children)`, React.Children.count(element.props.children));
 
-    if (React.isValidElement(element.props.children)) {
-        newChildren = linkClass(React.Children.only(element.props.children), styles, configuration);
-    } else if (_.isArray(element.props.children)) {
-        newChildren = React.Children.map(element.props.children, (node) => {
+    children = element.props.children;
+
+    if (React.isValidElement(children)) {
+        newChildren = linkClass(React.Children.only(children), styles, configuration);
+    } else if (_.isArray(children) || isIterable(children)) {
+        newChildren = React.Children.map(children, (node) => {
             if (React.isValidElement(node)) {
                 return linkClass(node, styles, configuration);
             } else {

tests/linkClass.js

@@ -108,6 +108,28 @@ describe('linkClass', () => {
                 expect(subject.props.children[1].props.className).to.equal('bar-1');
             });
         });
+        context('when multiple descendants have styleName and are iterable', () => {
+            it('assigns a generated className', () => {
+                let subject, iterable;
+
+                iterable = {
+                    0: <p key="1" styleName='foo'></p>,
+                    1: <p key="2" styleName='bar'></p>,
+                    length: 2,
+                    [Symbol.iterator]: Array.prototype[Symbol.iterator]
+                };
+
+                subject = <div>{iterable}</div>;
+
+                subject = linkClass(subject, {
+                    foo: 'foo-1',
+                    bar: 'bar-1'
+                });
+
+                expect(subject.props.children[0].props.className).to.equal('foo-1');
+                expect(subject.props.children[1].props.className).to.equal('bar-1');
+            });
+        });
         context('when ReactElement does not have an existing className', () => {
             it('uses the generated class name to set the className property', () => {
                 let subject;