diff options
Diffstat (limited to 'packages/react-docs/src/components')
8 files changed, 68 insertions, 16 deletions
diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index f4f1d2aa9..82e444018 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -30,8 +30,8 @@ import { import { Badge } from './badge'; import { Comment } from './comment'; import { EventDefinition } from './event_definition'; -import { SignatureBlock } from './signature_block'; import { PropertyBlock } from './property_block'; +import { SignatureBlock } from './signature_block'; import { TypeDefinition } from './type_definition'; const networkNameToColor: { [network: string]: string } = { @@ -225,6 +225,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta customType={customType} docsInfo={this.props.docsInfo} typeDefinitionByName={typeDefinitionByName} + isInPopover={false} /> ); }); diff --git a/packages/react-docs/src/components/event_definition.tsx b/packages/react-docs/src/components/event_definition.tsx index b4dc729a9..6cb80c6b0 100644 --- a/packages/react-docs/src/components/event_definition.tsx +++ b/packages/react-docs/src/components/event_definition.tsx @@ -53,7 +53,12 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event const indexed = <span style={{ color: colors.green }}> indexed</span>; const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => { const type = ( - <Type type={eventArg.type} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} /> + <Type + type={eventArg.type} + sectionName={this.props.sectionName} + docsInfo={this.props.docsInfo} + isInPopover={false} + /> ); return ( <span key={`eventArg-${eventArg.name}`}> diff --git a/packages/react-docs/src/components/interface.tsx b/packages/react-docs/src/components/interface.tsx index eaf57ce93..93b10e96d 100644 --- a/packages/react-docs/src/components/interface.tsx +++ b/packages/react-docs/src/components/interface.tsx @@ -7,14 +7,17 @@ import { CustomType, TypeDefinitionByName } from '../types'; import { Signature } from './signature'; import { Type } from './type'; +const defaultProps = {}; + export interface InterfaceProps { type: CustomType; sectionName: string; docsInfo: DocsInfo; typeDefinitionByName: TypeDefinitionByName; + isInPopover: boolean; } -export const Interface = (props: InterfaceProps) => { +export const Interface: React.SFC<InterfaceProps> = (props: InterfaceProps): any => { const type = props.type; const properties = _.map(type.children, property => { return ( @@ -31,6 +34,7 @@ export const Interface = (props: InterfaceProps) => { shouldUseArrowSyntax={true} docsInfo={props.docsInfo} typeDefinitionByName={props.typeDefinitionByName} + isInPopover={props.isInPopover} /> ) : ( <Type @@ -38,6 +42,7 @@ export const Interface = (props: InterfaceProps) => { sectionName={props.sectionName} docsInfo={props.docsInfo} typeDefinitionByName={props.typeDefinitionByName} + isInPopover={props.isInPopover} /> )}, </span> @@ -54,6 +59,7 @@ export const Interface = (props: InterfaceProps) => { sectionName={props.sectionName} docsInfo={props.docsInfo} typeDefinitionByName={props.typeDefinitionByName} + isInPopover={props.isInPopover} /> </span> ); @@ -77,3 +83,5 @@ export const Interface = (props: InterfaceProps) => { </span> ); }; + +Interface.defaultProps = defaultProps; diff --git a/packages/react-docs/src/components/property_block.tsx b/packages/react-docs/src/components/property_block.tsx index 6e5c451be..f181e21d2 100644 --- a/packages/react-docs/src/components/property_block.tsx +++ b/packages/react-docs/src/components/property_block.tsx @@ -6,8 +6,8 @@ import { Property, TypeDefinitionByName } from '../types'; import { constants } from '../utils/constants'; import { Comment } from './comment'; -import { Type } from './type'; import { SourceLink } from './source_link'; +import { Type } from './type'; export interface PropertyBlockProps { property: Property; @@ -56,6 +56,7 @@ export class PropertyBlock extends React.Component<PropertyBlockProps, PropertyB sectionName={sectionName} docsInfo={this.props.docsInfo} typeDefinitionByName={this.props.typeDefinitionByName} + isInPopover={false} /> </code> {property.source && ( diff --git a/packages/react-docs/src/components/signature.tsx b/packages/react-docs/src/components/signature.tsx index d9567c9f6..bf9c8be24 100644 --- a/packages/react-docs/src/components/signature.tsx +++ b/packages/react-docs/src/components/signature.tsx @@ -17,6 +17,7 @@ export interface SignatureProps { typeParameter?: TypeParameter; callPath?: string; docsInfo: DocsInfo; + isInPopover: boolean; } const defaultProps = { @@ -27,7 +28,13 @@ const defaultProps = { export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => { const sectionName = props.sectionName; - const parameters = renderParameters(props.parameters, props.docsInfo, sectionName, props.typeDefinitionByName); + const parameters = renderParameters( + props.parameters, + props.docsInfo, + sectionName, + props.isInPopover, + props.typeDefinitionByName, + ); const paramStringArray: any[] = []; // HACK: For now we don't put params on newlines if there are less then 2 of them. // Ideally we would check the character length of the resulting method signature and @@ -57,7 +64,13 @@ export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => { const methodName = props.shouldHideMethodName ? '' : props.name; const typeParameterIfExists = _.isUndefined(props.typeParameter) ? undefined - : renderTypeParameter(props.typeParameter, props.docsInfo, sectionName, props.typeDefinitionByName); + : renderTypeParameter( + props.typeParameter, + props.docsInfo, + sectionName, + props.isInPopover, + props.typeDefinitionByName, + ); return ( <span style={{ fontSize: 15 }}> {props.callPath} @@ -72,6 +85,7 @@ export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => { sectionName={sectionName} typeDefinitionByName={props.typeDefinitionByName} docsInfo={props.docsInfo} + isInPopover={props.isInPopover} /> </span> )} @@ -85,6 +99,7 @@ function renderParameters( parameters: Parameter[], docsInfo: DocsInfo, sectionName: string, + isInPopover: boolean, typeDefinitionByName?: TypeDefinitionByName, ): React.ReactNode[] { const params = _.map(parameters, (p: Parameter) => { @@ -96,6 +111,7 @@ function renderParameters( sectionName={sectionName} typeDefinitionByName={typeDefinitionByName} docsInfo={docsInfo} + isInPopover={isInPopover} /> ); return ( @@ -113,6 +129,7 @@ function renderTypeParameter( typeParameter: TypeParameter, docsInfo: DocsInfo, sectionName: string, + isInPopover: boolean, typeDefinitionByName?: TypeDefinitionByName, ): React.ReactNode { const typeParam = ( @@ -123,6 +140,7 @@ function renderTypeParameter( sectionName={sectionName} typeDefinitionByName={typeDefinitionByName} docsInfo={docsInfo} + isInPopover={isInPopover} /> {`>`} </span> diff --git a/packages/react-docs/src/components/signature_block.tsx b/packages/react-docs/src/components/signature_block.tsx index 9e5198e16..934232efe 100644 --- a/packages/react-docs/src/components/signature_block.tsx +++ b/packages/react-docs/src/components/signature_block.tsx @@ -81,6 +81,7 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu sectionName={this.props.sectionName} typeDefinitionByName={this.props.typeDefinitionByName} docsInfo={this.props.docsInfo} + isInPopover={false} /> </code> {(method as TypescriptMethod).source && ( 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; diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx index 775d9890f..8d1f88490 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, TypeDefinitionByName } from '../types'; +import { CustomType, CustomTypeChild, KindString, TypeDefinitionByName, TypeDocTypes } from '../types'; import { constants } from '../utils/constants'; import { Comment } from './comment'; @@ -20,6 +20,7 @@ export interface TypeDefinitionProps { shouldAddId?: boolean; docsInfo: DocsInfo; typeDefinitionByName?: TypeDefinitionByName; + isInPopover?: boolean; } export interface TypeDefinitionState { @@ -29,6 +30,7 @@ export interface TypeDefinitionState { export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDefinitionState> { public static defaultProps: Partial<TypeDefinitionProps> = { shouldAddId: true, + isInPopover: false, }; constructor(props: TypeDefinitionProps) { super(props); @@ -50,6 +52,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} typeDefinitionByName={this.props.typeDefinitionByName} + isInPopover={this.props.isInPopover} /> ); break; @@ -81,6 +84,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} typeDefinitionByName={this.props.typeDefinitionByName} + isInPopover={this.props.isInPopover} /> ) : ( <Signature @@ -94,6 +98,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef shouldUseArrowSyntax={true} docsInfo={this.props.docsInfo} typeDefinitionByName={this.props.typeDefinitionByName} + isInPopover={this.props.isInPopover} /> )} </span> |