Merge pull request #4 from khankuan/feature/pass-props

Allow TransitionChild to passprops. Useful for component wrapper that…

package.json

@@ -50,6 +50,7 @@
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-preset-latest": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
     "babel-preset-stage-2": "^6.18.0",
     "eslint": "^3.10.2",
     "eslint-config-airbnb": "^13.0.0",

src/CSSTransitionGroupChild.js

@@ -157,7 +157,15 @@ class CSSTransitionGroupChild extends React.Component {
   }
 
   render() {
-    return React.Children.only(this.props.children);
+    const props = { ...this.props };
+    delete props.name;
+    delete props.appear;
+    delete props.enter;
+    delete props.leave;
+    delete props.appearTimeout;
+    delete props.enterTimeout;
+    delete props.leaveTimeout;
+    return React.cloneElement(React.Children.only(this.props.children), props);
   }
 }
 

test/CSSTransitionGroup-test.js

@@ -319,4 +319,46 @@ describe('CSSTransitionGroup', () => {
     // Testing that no exception is thrown here, as the timeout has been cleared.
     jest.runAllTimers();
   });
+
+  it('should work with custom component wrapper cloning children', () => {
+    const extraClassNameProp = 'wrapper-item';
+    class Wrapper extends React.Component {
+      render() {
+        return (
+          <div>
+            {
+              React.Children.map(this.props.children,
+                child => React.cloneElement(child, { className: extraClassNameProp }))
+            }
+          </div>
+        );
+      }
+    }
+
+    class Child extends React.Component {
+      render() {
+        return <div {...this.props} />;
+      }
+    }
+
+    class Component extends React.Component {
+      render() {
+        return (
+          <CSSTransitionGroup
+            transitionName="yolo"
+            component={Wrapper}
+          >
+            <Child />
+          </CSSTransitionGroup>
+        );
+      }
+    }
+
+    const a = ReactDOM.render(<Component />, container);
+    const child = ReactDOM.findDOMNode(a).childNodes[0];
+    expect(hasClass(child, extraClassNameProp)).toBe(true);
+
+    // Testing that no exception is thrown here, as the timeout has been cleared.
+    jest.runAllTimers();
+  });
 });