diff options
Diffstat (limited to 'packages/react-docs/src/components/type.tsx')
-rw-r--r-- | packages/react-docs/src/components/type.tsx | 31 |
1 files changed, 22 insertions, 9 deletions
diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 1c580caab..eae52e950 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -7,23 +7,26 @@ import * as ReactTooltip from 'react-tooltip'; import { DocsInfo } from '../docs_info'; import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '../types'; +import { constants } from '../utils/constants'; import { Signature } from './signature'; -import { constants } from '../utils/constants'; import { TypeDefinition } from './type_definition'; const basicJsTypes = ['string', 'number', 'undefined', 'null', 'boolean']; +const defaultProps = {}; + export interface TypeProps { type: TypeDef; docsInfo: DocsInfo; sectionName: string; typeDefinitionByName?: TypeDefinitionByName; + isInPopover: boolean; } // The return type needs to be `any` here so that we can recursively define <Type /> components within // <Type /> components (e.g when rendering the union type). -export function Type(props: TypeProps): any { +export const Type: React.SFC<TypeProps> = (props: TypeProps): any => { const type = props.type; const isReference = type.typeDocType === TypeDocTypes.Reference; const isArray = type.typeDocType === TypeDocTypes.Array; @@ -50,6 +53,7 @@ export function Type(props: TypeProps): any { sectionName={props.sectionName} typeDefinitionByName={props.typeDefinitionByName} docsInfo={props.docsInfo} + isInPopover={props.isInPopover} />[] </span> ); @@ -61,6 +65,7 @@ export function Type(props: TypeProps): any { sectionName={props.sectionName} typeDefinitionByName={props.typeDefinitionByName} docsInfo={props.docsInfo} + isInPopover={props.isInPopover} /> ); return subType; @@ -89,6 +94,7 @@ export function Type(props: TypeProps): any { sectionName={props.sectionName} typeDefinitionByName={props.typeDefinitionByName} docsInfo={props.docsInfo} + isInPopover={props.isInPopover} /> ); }); @@ -110,6 +116,7 @@ export function Type(props: TypeProps): any { shouldUseArrowSyntax={true} docsInfo={props.docsInfo} typeDefinitionByName={props.typeDefinitionByName} + isInPopover={props.isInPopover} /> ); } else if (!_.isUndefined(type.indexSignature)) { @@ -122,6 +129,7 @@ export function Type(props: TypeProps): any { sectionName={props.sectionName} docsInfo={props.docsInfo} typeDefinitionByName={props.typeDefinitionByName} + isInPopover={props.isInPopover} /> </span> ); @@ -150,6 +158,7 @@ export function Type(props: TypeProps): any { sectionName={props.sectionName} typeDefinitionByName={props.typeDefinitionByName} docsInfo={props.docsInfo} + isInPopover={props.isInPopover} /> ); }); @@ -180,6 +189,7 @@ export function Type(props: TypeProps): any { ? props.docsInfo.typeConfigs.typeNameToPrefix[typeName as string] : undefined; } + const isExportedClassReference = !!props.type.isExportedClassReference; if (!_.isUndefined(typeNameUrlIfExists)) { typeName = ( <a @@ -194,12 +204,12 @@ export function Type(props: TypeProps): any { ); } else if ( (isReference || isArray) && - props.typeDefinitionByName && - props.typeDefinitionByName[typeName as string] + ((props.typeDefinitionByName && props.typeDefinitionByName[typeName as string]) || isExportedClassReference) ) { const id = Math.random().toString(); - const typeDefinitionAnchorId = `${constants.TYPES_SECTION_NAME}-${typeName}`; - let typeDefinition = props.typeDefinitionByName[typeName as string]; + const typeDefinitionAnchorId = isExportedClassReference + ? props.type.name + : `${constants.TYPES_SECTION_NAME}-${typeName}`; typeName = ( <ScrollLink to={typeDefinitionAnchorId} @@ -208,7 +218,7 @@ export function Type(props: TypeProps): any { duration={sharedConstants.DOCS_SCROLL_DURATION_MS} containerId={sharedConstants.DOCS_CONTAINER_ID} > - {sharedUtils.isUserOnMobile() ? ( + {sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? ( <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span> ) : ( <span @@ -224,10 +234,11 @@ export function Type(props: TypeProps): any { <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip"> <TypeDefinition sectionName={props.sectionName} - customType={typeDefinition} + customType={props.typeDefinitionByName[typeName as string]} shouldAddId={false} docsInfo={props.docsInfo} typeDefinitionByName={props.typeDefinitionByName} + isInPopover={true} /> </ReactTooltip> </span> @@ -248,4 +259,6 @@ export function Type(props: TypeProps): any { )} </span> ); -} +}; + +Type.defaultProps = defaultProps; |