Fix #75 Allow TypeAnnotations which group other types (#78)

This allows intersection and union types to be used as Props.

Author: danez

src/handlers/__tests__/flowTypeHandler-test.js

@@ -167,6 +167,47 @@ describe('flowTypeHandler', () => {
       .not.toThrow();
   });
 
+  it('supports intersection proptypes', () => {
+    var definition = statement(`
+      (props: Props) => <div />;
+     
+      var React = require('React');
+      import type Imported from 'something';
+  
+      type Props = Imported & { foo: 'bar' };
+    `).get('expression');
+
+
+    flowTypeHandler(documentation, definition);
+
+    expect(documentation.descriptors).toEqual({
+      foo: {
+        flowType: {},
+        required: true,
+      },
+    });
+  });
+
+  it('supports union proptypes', () => {
+    var definition = statement(`
+      (props: Props) => <div />;
+      
+      var React = require('React');
+      import type Imported from 'something';
+
+      type Props = Imported | { foo: 'bar' };
+    `).get('expression');
+
+    flowTypeHandler(documentation, definition);
+
+    expect(documentation.descriptors).toEqual({
+      foo: {
+        flowType: {},
+        required: true,
+      },
+    });
+  });
+
   describe('does not error for unreachable type', () => {
     function test(code) {
       var definition = statement(code).get('expression');

src/handlers/flowTypeHandler.js

@@ -16,6 +16,28 @@ import getFlowType from '../utils/getFlowType';
 import getPropertyName from '../utils/getPropertyName';
 import getFlowTypeFromReactComponent from '../utils/getFlowTypeFromReactComponent';
 
+function setPropDescriptor(documentation: Documentation, path: NodePath): void {
+  const propDescriptor = documentation.getPropDescriptor(getPropertyName(path));
+  const type = getFlowType(path.get('value'));
+
+  if (type) {
+    propDescriptor.flowType = type;
+    propDescriptor.required = !path.node.optional;
+  }
+}
+
+function findAndSetTypes(documentation: Documentation, path: NodePath): void {
+  if (path.node.properties) {
+    path.get('properties').each(
+      propertyPath => setPropDescriptor(documentation, propertyPath)
+    );
+  } else if (path.node.types) {
+    path.get('types').each(
+      typesPath => findAndSetTypes(documentation, typesPath)
+    );
+  }
+}
+
 /**
  * This handler tries to find flow Type annotated react components and extract
  * its types to the documentation. It also extracts docblock comments which are
@@ -28,16 +50,5 @@ export default function flowTypeHandler(documentation: Documentation, path: Node
     return;
   }
 
-  flowTypesPath.get('properties').each(propertyPath => {
-    const propDescriptor = documentation.getPropDescriptor(
-      getPropertyName(propertyPath)
-    );
-    const valuePath = propertyPath.get('value');
-    const type = getFlowType(valuePath);
-
-    if (type) {
-      propDescriptor.flowType = type;
-      propDescriptor.required = !propertyPath.node.optional;
-    }
-  });
+  findAndSetTypes(documentation, flowTypesPath);
 }