Fix Merging propTypes, contextTypes, and childContextTypes

This fixes merging of `propTypes`, `contextTypes`, and `childContextTypes` so that we actually merge (instead of only taking the component or last mixin).
MTco · Dec 11, 2013 · 02de96f · 02de96f
1 parent e92ce38
commit 02de96f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 9 deletions.
diff --git a/src/core/ReactCompositeComponent.js b/src/core/ReactCompositeComponent.js
@@ -100,31 +100,31 @@ var ReactCompositeComponentInterface = {
    * @type {object}
    * @optional
    */
-  statics: SpecPolicy.DEFINE_MANY_MERGED,
+  statics: SpecPolicy.DEFINE_MANY,
 
   /**
    * Definition of prop types for this component.
    *
    * @type {object}
    * @optional
    */
-  propTypes: SpecPolicy.DEFINE_MANY_MERGED,
+  propTypes: SpecPolicy.DEFINE_MANY,
 
   /**
    * Definition of context types for this component.
    *
    * @type {object}
    * @optional
    */
-  contextTypes: SpecPolicy.DEFINE_MANY_MERGED,
+  contextTypes: SpecPolicy.DEFINE_MANY,
 
   /**
    * Definition of context types this component sets for its children.
    *
    * @type {object}
    * @optional
    */
-  childContextTypes: SpecPolicy.DEFINE_MANY_MERGED,
+  childContextTypes: SpecPolicy.DEFINE_MANY,
 
   // ==== Definition methods ====
 
@@ -337,7 +337,10 @@ var RESERVED_SPEC_KEYS = {
       childContextTypes,
       ReactPropTypeLocations.childContext
     );
-    Constructor.childContextTypes = childContextTypes;
+    Constructor.childContextTypes = merge(
+      Constructor.childContextTypes,
+      childContextTypes
+    );
   },
   contextTypes: function(ConvenienceConstructor, contextTypes) {
     var Constructor = ConvenienceConstructor.componentConstructor;
@@ -346,7 +349,7 @@ var RESERVED_SPEC_KEYS = {
       contextTypes,
       ReactPropTypeLocations.context
     );
-    Constructor.contextTypes = contextTypes;
+    Constructor.contextTypes = merge(Constructor.contextTypes, contextTypes);
   },
   propTypes: function(ConvenienceConstructor, propTypes) {
     var Constructor = ConvenienceConstructor.componentConstructor;
@@ -355,7 +358,7 @@ var RESERVED_SPEC_KEYS = {
       propTypes,
       ReactPropTypeLocations.prop
     );
-    Constructor.propTypes = propTypes;
+    Constructor.propTypes = merge(Constructor.propTypes, propTypes);
   },
   statics: function(ConvenienceConstructor, statics) {
     mixStaticSpecIntoComponent(ConvenienceConstructor, statics);

diff --git a/src/core/__tests__/ReactCompositeComponentMixin-test.js b/src/core/__tests__/ReactCompositeComponentMixin-test.js
@@ -40,19 +40,28 @@ describe('ReactCompositeComponent-mixin', function() {
     componentPropValidator = mocks.getMockFunction();
 
     var MixinA = {
+      propTypes: {
+        propA: function() {}
+      },
       componentDidMount: function() {
         this.props.listener('MixinA didMount');
       }
     };
 
     var MixinB = {
       mixins: [MixinA],
+      propTypes: {
+        propB: function() {}
+      },
       componentDidMount: function() {
         this.props.listener('MixinB didMount');
       }
     };
 
     var MixinC = {
+      statics: {
+        staticC: function() {}
+      },
       componentDidMount: function() {
         this.props.listener('MixinC didMount');
       }
@@ -66,11 +75,15 @@ describe('ReactCompositeComponent-mixin', function() {
 
     TestComponent = React.createClass({
       mixins: [MixinB, MixinC, MixinD],
-
+      statics: {
+        staticComponent: function() {}
+      },
+      propTypes: {
+        propComponent: function() {}
+      },
       componentDidMount: function() {
         this.props.listener('Component didMount');
       },
-
       render: function() {
         return <div />;
       }
@@ -87,6 +100,21 @@ describe('ReactCompositeComponent-mixin', function() {
     });
   });
 
+  it('should support merging propTypes and statics', function() {
+    var listener = mocks.getMockFunction();
+    var instance = <TestComponent listener={listener} />;
+    ReactTestUtils.renderIntoDocument(instance);
+
+    var instancePropTypes = instance.constructor.propTypes;
+
+    expect('propA' in instancePropTypes).toBe(true);
+    expect('propB' in instancePropTypes).toBe(true);
+    expect('propComponent' in instancePropTypes).toBe(true);
+
+    expect('staticC' in TestComponent).toBe(true);
+    expect('staticComponent' in TestComponent).toBe(true);
+  });
+
   it('should support chaining delegate functions', function() {
     var listener = mocks.getMockFunction();
     var instance = <TestComponent listener={listener} />;