Add support for multiple Flow IntersectionTypeAnnotations and skip propTypes when one of the intersected props is not found, e.g. when imported

Author: jseminck

lib/rules/prop-types.js

@@ -710,6 +710,41 @@ module.exports = {
       });
     }
 
+    /**
+     * Marks all props found inside IntersectionTypeAnnotation as declared.
+     * Since InterSectionTypeAnnotations can be nested, this handles recursively. 
+     * 
+     * Modifies the declaredPropTypes object
+     * @param {ASTNode} propTypes 
+     * @param {Object} declaredPropTypes 
+     * @returns {Boolean} True if propTypes should be ignored (e.g. when a type can't be resolved, when it is imported)
+     */
+    function declarePropTypesForIntersectionTypeAnnotation(propTypes, declaredPropTypes) {
+      let ignorePropsValidation = false;
+
+      propTypes.types.forEach(annotation => {
+        const typeNode = typeScope(annotation.id.name);
+        if (!typeNode) {
+          ignorePropsValidation = true;
+          return;
+        }
+
+        if (typeNode.type === 'IntersectionTypeAnnotation') {
+          ignorePropsValidation = declarePropTypesForIntersectionTypeAnnotation(typeNode, declaredPropTypes);
+        } else {
+          iterateProperties(typeNode.properties, (key, value) => {
+            if (!value) {
+              ignorePropsValidation = true;
+              return;
+            }
+            declaredPropTypes[key] = buildTypeAnnotationDeclarationTypes(value);
+          });
+        }
+      });
+
+      return ignorePropsValidation;
+    }
+
     /**
      * Mark a prop type as declared
      * @param {ASTNode} node The AST node being checked.
@@ -793,16 +828,7 @@ module.exports = {
           }
           break;
         case 'IntersectionTypeAnnotation':
-          propTypes.types.forEach(annotation => {
-            const propsType = typeScope(annotation.id.name);
-            iterateProperties(propsType.properties, (key, value) => {
-              if (!value) {
-                ignorePropsValidation = true;
-                return;
-              }
-              declaredPropTypes[key] = buildTypeAnnotationDeclarationTypes(value);
-            });
-          });
+          ignorePropsValidation = declarePropTypesForIntersectionTypeAnnotation(propTypes, declaredPropTypes);
           break;
         case null:
           break;

tests/lib/rules/prop-types.js

@@ -1684,6 +1684,38 @@ ruleTester.run('prop-types', rule, {
         }
       `,
       parser: 'babel-eslint'
+    }, {
+      code: `
+        type PropsA = { foo: string };
+        type PropsB = { bar: string };
+        type PropsC = { zap: string };
+        type Props = PropsA & PropsB;
+
+        class Bar extends React.Component {
+          props: Props & PropsC;
+          
+          render() {
+            return <div>{this.props.foo} - {this.props.bar} - {this.props.zap}</div>
+          }
+        }
+      `,
+      parser: 'babel-eslint'
+    }, {
+      code: `
+        import type { PropsA } from "./myPropsA";
+        type PropsB = { bar: string };
+        type PropsC = { zap: string };
+        type Props = PropsA & PropsB;
+
+        class Bar extends React.Component {
+          props: Props & PropsC;
+          
+          render() {
+            return <div>{this.props.foo} - {this.props.bar} - {this.props.zap}</div>
+          }
+        }
+      `,
+      parser: 'babel-eslint'
     }, {
       code: `
         type Props = { foo: string }
@@ -3375,6 +3407,25 @@ ruleTester.run('prop-types', rule, {
       errors: [{
         message: '\'fooBar\' is missing in props validation'
       }]
+    }, {
+      code: `
+        type PropsA = { foo: string };
+        type PropsB = { bar: string };
+        type PropsC = { zap: string };
+        type Props = PropsA & PropsB;
+
+        class Bar extends React.Component {
+          props: Props & PropsC;
+          
+          render() {
+            return <div>{this.props.foo} - {this.props.bar} - {this.props.zap} - {this.props.fooBar}</div>
+          }
+        }
+      `,
+      parser: 'babel-eslint',
+      errors: [{
+        message: '\'fooBar\' is missing in props validation'
+      }]
     }
   ]
 });