Fix transitionName prop-type on CSS transition group child

src/addons/transitions/ReactCSSTransitionGroup.js

@@ -52,22 +52,8 @@ var ReactCSSTransitionGroup = React.createClass({
   displayName: 'ReactCSSTransitionGroup',
 
   propTypes: {
-    transitionName: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.shape({
-        enter: React.PropTypes.string,
-        leave: React.PropTypes.string,
-        active: React.PropTypes.string,
-      }),
-      React.PropTypes.shape({
-        enter: React.PropTypes.string,
-        enterActive: React.PropTypes.string,
-        leave: React.PropTypes.string,
-        leaveActive: React.PropTypes.string,
-        appear: React.PropTypes.string,
-        appearActive: React.PropTypes.string,
-      }),
-    ]).isRequired,
+    // Re-require to access the raw class rather than the factory
+    transitionName: require('ReactCSSTransitionGroupChild').propTypes.name,
 
     transitionAppear: React.PropTypes.bool,
     transitionEnter: React.PropTypes.bool,

src/addons/transitions/ReactCSSTransitionGroupChild.js

@@ -30,7 +30,22 @@ var ReactCSSTransitionGroupChild = React.createClass({
   displayName: 'ReactCSSTransitionGroupChild',
 
   propTypes: {
-    name: React.PropTypes.string.isRequired,
+    name: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.shape({
+        enter: React.PropTypes.string,
+        leave: React.PropTypes.string,
+        active: React.PropTypes.string,
+      }),
+      React.PropTypes.shape({
+        enter: React.PropTypes.string,
+        enterActive: React.PropTypes.string,
+        leave: React.PropTypes.string,
+        leaveActive: React.PropTypes.string,
+        appear: React.PropTypes.string,
+        appearActive: React.PropTypes.string,
+      }),
+    ]).isRequired,
 
     // Once we require timeouts to be specified, we can remove the
     // boolean flags (appear etc.) and just accept a number

src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js

@@ -15,6 +15,10 @@ var React;
 var ReactDOM;
 var ReactCSSTransitionGroup;
 
+function hasClassName(domNode, className) {
+  return domNode.className.indexOf(className) > 0;
+}
+
 // Most of the real functionality is covered in other unit tests, this just
 // makes sure we're wired up correctly.
 describe('ReactCSSTransitionGroup', function() {
@@ -198,4 +202,56 @@ describe('ReactCSSTransitionGroup', function() {
     expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
     expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('one');
   });
+
+  it('should use transition-type specific names when they\'re provided', function() {
+    var customTransitionNames = {
+      enter: 'custom-entering',
+      leave: 'custom-leaving',
+    };
+
+    var a = ReactDOM.render(
+      <ReactCSSTransitionGroup
+        transitionName={ customTransitionNames }
+        transitionEnterTimeout={1}
+        transitionLeaveTimeout={1}
+      >
+        <span key="one" id="one" />
+      </ReactCSSTransitionGroup>,
+      container
+    );
+    expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
+
+    // Add an element
+    ReactDOM.render(
+      <ReactCSSTransitionGroup
+        transitionName={ customTransitionNames }
+        transitionEnterTimeout={1}
+        transitionLeaveTimeout={1}
+      >
+        <span key="one" id="one" />
+        <span key="two" id="two" />
+      </ReactCSSTransitionGroup>,
+      container
+    );
+    expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(2);
+
+    // Test for the custom entering name
+    expect(hasClassName(ReactDOM.findDOMNode(a).childNodes[1], 'custom-entering')).toBe(true);
+
+    // Remove an element
+    ReactDOM.render(
+      <ReactCSSTransitionGroup
+        transitionName={ customTransitionNames }
+        transitionEnterTimeout={1}
+        transitionLeaveTimeout={1}
+      >
+        <span key="two" id="two" />
+      </ReactCSSTransitionGroup>,
+      container
+    );
+    expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(2);
+
+    // Test for the custom leaving name
+    expect(hasClassName(ReactDOM.findDOMNode(a).childNodes[0], 'custom-leaving')).toBe(true);
+  });
 });