Pass in typeDefinitionByName so that type declarations also link to inner-types and show the popover

5 files changed, 52 insertions, 10 deletions

diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx
index d9a7dcd59..1c32b2e16 100644
--- a/packages/react-docs/src/components/documentation.tsx
+++ b/packages/react-docs/src/components/documentation.tsx
@@ -225,12 +225,16 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                     key={`type-${customType.name}`}
                     customType={customType}
                     docsInfo={this.props.docsInfo}
+                    typeDefinitionByName={typeDefinitionByName}
                 />
             );
         });
 
         const sortedProperties = _.sortBy(docSection.properties, 'name');
-        const propertyDefs = _.map(sortedProperties, this._renderProperty.bind(this, sectionName));
+        const propertyDefs = _.map(
+            sortedProperties,
+            this._renderProperty.bind(this, sectionName, typeDefinitionByName),
+        );
 
         const sortedMethods = _.sortBy(docSection.methods, 'name');
         const methodDefs = _.map(sortedMethods, method => {
@@ -349,7 +353,11 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
         });
         return <div>{constructorDefs}</div>;
     }
-    private _renderProperty(sectionName: string, property: Property): React.ReactNode {
+    private _renderProperty(
+        sectionName: string,
+        typeDefinitionByName: TypeDefinitionByName,
+        property: Property,
+    ): React.ReactNode {
         return (
             <PropertyBlock
                 key={`property-${property.name}-${property.type.name}`}
@@ -358,6 +366,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                 docsInfo={this.props.docsInfo}
                 sourceUrl={this.props.sourceUrl}
                 selectedVersion={this.props.selectedVersion}
+                typeDefinitionByName={typeDefinitionByName}
             />
         );
     }
diff --git a/packages/react-docs/src/components/interface.tsx b/packages/react-docs/src/components/interface.tsx
index 915b4bbc6..eaf57ce93 100644
--- a/packages/react-docs/src/components/interface.tsx
+++ b/packages/react-docs/src/components/interface.tsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { DocsInfo } from '../docs_info';
-import { CustomType } from '../types';
+import { CustomType, TypeDefinitionByName } from '../types';
 
 import { Signature } from './signature';
 import { Type } from './type';
@@ -11,6 +11,7 @@ export interface InterfaceProps {
     type: CustomType;
     sectionName: string;
     docsInfo: DocsInfo;
+    typeDefinitionByName: TypeDefinitionByName;
 }
 
 export const Interface = (props: InterfaceProps) => {
@@ -29,9 +30,15 @@ export const Interface = (props: InterfaceProps) => {
                         shouldHideMethodName={true}
                         shouldUseArrowSyntax={true}
                         docsInfo={props.docsInfo}
+                        typeDefinitionByName={props.typeDefinitionByName}
                     />
                 ) : (
-                    <Type type={property.type} sectionName={props.sectionName} docsInfo={props.docsInfo} />
+                    <Type
+                        type={property.type}
+                        sectionName={props.sectionName}
+                        docsInfo={props.docsInfo}
+                        typeDefinitionByName={props.typeDefinitionByName}
+                    />
                 )},
             </span>
         );
@@ -41,7 +48,13 @@ export const Interface = (props: InterfaceProps) => {
         const is = type.indexSignature;
         const param = (
             <span key={`indexSigParams-${is.keyName}-${is.keyType}-${type.name}`}>
-                {is.keyName}: <Type type={is.keyType} sectionName={props.sectionName} docsInfo={props.docsInfo} />
+                {is.keyName}:{' '}
+                <Type
+                    type={is.keyType}
+                    sectionName={props.sectionName}
+                    docsInfo={props.docsInfo}
+                    typeDefinitionByName={props.typeDefinitionByName}
+                />
             </span>
         );
         properties.push(
diff --git a/packages/react-docs/src/components/property_block.tsx b/packages/react-docs/src/components/property_block.tsx
index ea80ba7b7..6e5c451be 100644
--- a/packages/react-docs/src/components/property_block.tsx
+++ b/packages/react-docs/src/components/property_block.tsx
@@ -2,7 +2,7 @@ import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
 import * as React from 'react';
 
 import { DocsInfo } from '../docs_info';
-import { Property } from '../types';
+import { Property, TypeDefinitionByName } from '../types';
 import { constants } from '../utils/constants';
 
 import { Comment } from './comment';
@@ -15,6 +15,7 @@ export interface PropertyBlockProps {
     docsInfo: DocsInfo;
     sourceUrl: string;
     selectedVersion: string;
+    typeDefinitionByName: TypeDefinitionByName;
 }
 
 export interface PropertyBlockState {
@@ -50,7 +51,12 @@ export class PropertyBlock extends React.Component<PropertyBlockProps, PropertyB
                 <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
                     {(property as any).callPath}
                     {property.name}:{' '}
-                    <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} />
+                    <Type
+                        type={property.type}
+                        sectionName={sectionName}
+                        docsInfo={this.props.docsInfo}
+                        typeDefinitionByName={this.props.typeDefinitionByName}
+                    />
                 </code>
                 {property.source && (
                     <SourceLink
diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx
index 40564c0d6..1c580caab 100644
--- a/packages/react-docs/src/components/type.tsx
+++ b/packages/react-docs/src/components/type.tsx
@@ -117,7 +117,12 @@ export function Type(props: TypeProps): any {
                 const param = (
                     <span key={`indexSigParams-${is.keyName}-${is.keyType}-${type.name}`}>
                         {is.keyName}:{' '}
-                        <Type type={is.keyType} sectionName={props.sectionName} docsInfo={props.docsInfo} />
+                        <Type
+                            type={is.keyType}
+                            sectionName={props.sectionName}
+                            docsInfo={props.docsInfo}
+                            typeDefinitionByName={props.typeDefinitionByName}
+                        />
                     </span>
                 );
                 typeName = (
@@ -222,6 +227,7 @@ export function Type(props: TypeProps): any {
                                 customType={typeDefinition}
                                 shouldAddId={false}
                                 docsInfo={props.docsInfo}
+                                typeDefinitionByName={props.typeDefinitionByName}
                             />
                         </ReactTooltip>
                     </span>
diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx
index 26fbbf75c..775d9890f 100644
--- a/packages/react-docs/src/components/type_definition.tsx
+++ b/packages/react-docs/src/components/type_definition.tsx
@@ -4,7 +4,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { DocsInfo } from '../docs_info';
-import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from '../types';
+import { CustomType, CustomTypeChild, KindString, TypeDocTypes, TypeDefinitionByName } from '../types';
 import { constants } from '../utils/constants';
 
 import { Comment } from './comment';
@@ -19,6 +19,7 @@ export interface TypeDefinitionProps {
     customType: CustomType;
     shouldAddId?: boolean;
     docsInfo: DocsInfo;
+    typeDefinitionByName?: TypeDefinitionByName;
 }
 
 export interface TypeDefinitionState {
@@ -44,7 +45,12 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
             case KindString.Interface:
                 typePrefix = 'Interface';
                 codeSnippet = (
-                    <Interface type={customType} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} />
+                    <Interface
+                        type={customType}
+                        sectionName={this.props.sectionName}
+                        docsInfo={this.props.docsInfo}
+                        typeDefinitionByName={this.props.typeDefinitionByName}
+                    />
                 );
                 break;
 
@@ -74,6 +80,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                                 type={customType.type}
                                 sectionName={this.props.sectionName}
                                 docsInfo={this.props.docsInfo}
+                                typeDefinitionByName={this.props.typeDefinitionByName}
                             />
                         ) : (
                             <Signature
@@ -86,6 +93,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                                 shouldHideMethodName={true}
                                 shouldUseArrowSyntax={true}
                                 docsInfo={this.props.docsInfo}
+                                typeDefinitionByName={this.props.typeDefinitionByName}
                             />
                         )}
                     </span>