diff options
Diffstat (limited to 'packages/react-docs/src/components')
| -rw-r--r-- | packages/react-docs/src/components/documentation.tsx | 66 | ||||
| -rw-r--r-- | packages/react-docs/src/components/interface.tsx | 23 | ||||
| -rw-r--r-- | packages/react-docs/src/components/property_block.tsx | 77 | ||||
| -rw-r--r-- | packages/react-docs/src/components/signature.tsx | 3 | ||||
| -rw-r--r-- | packages/react-docs/src/components/type.tsx | 86 | ||||
| -rw-r--r-- | packages/react-docs/src/components/type_definition.tsx | 17 |
6 files changed, 196 insertions, 76 deletions
diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index ff33220d2..f4f1d2aa9 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -26,14 +26,12 @@ import { TypescriptFunction, TypescriptMethod, } from '../types'; -import { constants } from '../utils/constants'; import { Badge } from './badge'; import { Comment } from './comment'; import { EventDefinition } from './event_definition'; import { SignatureBlock } from './signature_block'; -import { SourceLink } from './source_link'; -import { Type } from './type'; +import { PropertyBlock } from './property_block'; import { TypeDefinition } from './type_definition'; const networkNameToColor: { [network: string]: string } = { @@ -129,7 +127,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta selectedVersion={this.props.selectedVersion} versions={this.props.availableVersions} sidebarHeader={this.props.sidebarHeader} - topLevelMenu={this.props.docsInfo.getMenu(this.props.selectedVersion)} + topLevelMenu={this.props.docsInfo.menu} menuSubsectionsBySection={menuSubsectionsBySection} onVersionSelected={this.props.onVersionSelected} /> @@ -172,7 +170,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta ); } private _renderDocumentation(): React.ReactNode { - const subMenus = _.values(this.props.docsInfo.getMenu()); + const subMenus = _.values(this.props.docsInfo.menu); const orderedSectionNames = _.flatten(subMenus); const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat); @@ -210,6 +208,14 @@ export class Documentation extends React.Component<DocumentationProps, Documenta return null; } + const isExportedFunctionSection = + docSection.functions.length === 1 && + _.isEmpty(docSection.types) && + _.isEmpty(docSection.methods) && + _.isEmpty(docSection.constructors) && + _.isEmpty(docSection.properties) && + _.isEmpty(docSection.events); + const sortedTypes = _.sortBy(docSection.types, 'name'); const typeDefs = _.map(sortedTypes, customType => { return ( @@ -218,12 +224,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 => { @@ -258,13 +268,12 @@ export class Documentation extends React.Component<DocumentationProps, Documenta {this._renderNetworkBadgesIfExists(sectionName)} </div> {docSection.comment && <Comment comment={docSection.comment} />} - {!_.isEmpty(docSection.constructors) && - this.props.docsInfo.isVisibleConstructor(sectionName) && ( - <div> - <h2 style={headerStyle}>Constructor</h2> - {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} - </div> - )} + {!_.isEmpty(docSection.constructors) && ( + <div> + <h2 style={headerStyle}>Constructor</h2> + {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} + </div> + )} {!_.isEmpty(docSection.properties) && ( <div> <h2 style={headerStyle}>Properties</h2> @@ -279,7 +288,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta )} {!_.isEmpty(docSection.functions) && ( <div> - <h2 style={headerStyle}>Functions</h2> + {!isExportedFunctionSection && <h2 style={headerStyle}>Functions</h2>} <div>{functionDefs}</div> </div> )} @@ -343,22 +352,21 @@ 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 ( - <div key={`property-${property.name}-${property.type.name}`} className="pb3"> - <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}> - {property.name}:{' '} - <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} /> - </code> - {property.source && ( - <SourceLink - version={this.props.selectedVersion} - source={property.source} - sourceUrl={this.props.sourceUrl} - /> - )} - {property.comment && <Comment comment={property.comment} className="py2" />} - </div> + <PropertyBlock + key={`property-${property.name}-${property.type.name}`} + property={property} + sectionName={sectionName} + docsInfo={this.props.docsInfo} + sourceUrl={this.props.sourceUrl} + selectedVersion={this.props.selectedVersion} + typeDefinitionByName={typeDefinitionByName} + /> ); } private _renderSignatureBlocks( diff --git a/packages/react-docs/src/components/interface.tsx b/packages/react-docs/src/components/interface.tsx index a881c7fec..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, TypeDocTypes } 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) => { @@ -19,9 +20,7 @@ export const Interface = (props: InterfaceProps) => { return ( <span key={`property-${property.name}-${property.type}-${type.name}`}> {property.name}:{' '} - {property.type && property.type.typeDocType !== TypeDocTypes.Reflection ? ( - <Type type={property.type} sectionName={props.sectionName} docsInfo={props.docsInfo} /> - ) : ( + {property.type && !_.isUndefined(property.type.method) ? ( <Signature name={property.type.method.name} returnType={property.type.method.returnType} @@ -31,6 +30,14 @@ 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} + 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 new file mode 100644 index 000000000..6e5c451be --- /dev/null +++ b/packages/react-docs/src/components/property_block.tsx @@ -0,0 +1,77 @@ +import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; +import * as React from 'react'; + +import { DocsInfo } from '../docs_info'; +import { Property, TypeDefinitionByName } from '../types'; +import { constants } from '../utils/constants'; + +import { Comment } from './comment'; +import { Type } from './type'; +import { SourceLink } from './source_link'; + +export interface PropertyBlockProps { + property: Property; + sectionName: string; + docsInfo: DocsInfo; + sourceUrl: string; + selectedVersion: string; + typeDefinitionByName: TypeDefinitionByName; +} + +export interface PropertyBlockState { + shouldShowAnchor: boolean; +} + +export class PropertyBlock extends React.Component<PropertyBlockProps, PropertyBlockState> { + constructor(props: PropertyBlockProps) { + super(props); + this.state = { + shouldShowAnchor: false, + }; + } + public render(): React.ReactNode { + const property = this.props.property; + const sectionName = this.props.sectionName; + return ( + <div + id={`${this.props.sectionName}-${property.name}`} + className="pb4 pt2" + key={`property-${property.name}-${property.type.name}`} + onMouseOver={this._setAnchorVisibility.bind(this, true)} + onMouseOut={this._setAnchorVisibility.bind(this, false)} + > + <div className="pb2" style={{ lineHeight: 1.3 }}> + <AnchorTitle + headerSize={HeaderSizes.H3} + title={property.name} + id={`${sectionName}-${property.name}`} + shouldShowAnchor={this.state.shouldShowAnchor} + /> + </div> + <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} + typeDefinitionByName={this.props.typeDefinitionByName} + /> + </code> + {property.source && ( + <SourceLink + version={this.props.selectedVersion} + source={property.source} + sourceUrl={this.props.sourceUrl} + /> + )} + {property.comment && <Comment comment={property.comment} className="py2" />} + </div> + ); + } + private _setAnchorVisibility(shouldShowAnchor: boolean): void { + this.setState({ + shouldShowAnchor, + }); + } +} diff --git a/packages/react-docs/src/components/signature.tsx b/packages/react-docs/src/components/signature.tsx index 77e9cc909..d9567c9f6 100644 --- a/packages/react-docs/src/components/signature.tsx +++ b/packages/react-docs/src/components/signature.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import { DocsInfo } from '../docs_info'; import { Parameter, Type as TypeDef, TypeDefinitionByName, TypeParameter } from '../types'; -import { constants } from '../utils/constants'; import { Type } from './type'; @@ -27,7 +26,7 @@ const defaultProps = { }; export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => { - const sectionName = constants.TYPES_SECTION_NAME; + const sectionName = props.sectionName; const parameters = renderParameters(props.parameters, props.docsInfo, sectionName, props.typeDefinitionByName); const paramStringArray: any[] = []; // HACK: For now we don't put params on newlines if there are less then 2 of them. diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index e453349ef..1c580caab 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -9,8 +9,11 @@ import { DocsInfo } from '../docs_info'; import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '../types'; import { Signature } from './signature'; +import { constants } from '../utils/constants'; import { TypeDefinition } from './type_definition'; +const basicJsTypes = ['string', 'number', 'undefined', 'null', 'boolean']; + export interface TypeProps { type: TypeDef; docsInfo: DocsInfo; @@ -43,7 +46,7 @@ export function Type(props: TypeProps): any { <span> <Type key={key} - type={arg.elementType} + type={arg} sectionName={props.sectionName} typeDefinitionByName={props.typeDefinitionByName} docsInfo={props.docsInfo} @@ -72,6 +75,9 @@ export function Type(props: TypeProps): any { case TypeDocTypes.Array: typeName = type.elementType.name; + if (_.includes(basicJsTypes, typeName)) { + typeNameColor = colors.orange; + } break; case TypeDocTypes.Union: @@ -92,19 +98,43 @@ export function Type(props: TypeProps): any { break; case TypeDocTypes.Reflection: - typeName = ( - <Signature - name={type.method.name} - returnType={type.method.returnType} - parameters={type.method.parameters} - typeParameter={type.method.typeParameter} - sectionName={props.sectionName} - shouldHideMethodName={true} - shouldUseArrowSyntax={true} - docsInfo={props.docsInfo} - typeDefinitionByName={props.typeDefinitionByName} - /> - ); + if (!_.isUndefined(type.method)) { + typeName = ( + <Signature + name={type.method.name} + returnType={type.method.returnType} + parameters={type.method.parameters} + typeParameter={type.method.typeParameter} + sectionName={props.sectionName} + shouldHideMethodName={true} + shouldUseArrowSyntax={true} + docsInfo={props.docsInfo} + typeDefinitionByName={props.typeDefinitionByName} + /> + ); + } else if (!_.isUndefined(type.indexSignature)) { + 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} + typeDefinitionByName={props.typeDefinitionByName} + /> + </span> + ); + typeName = ( + <span key={`indexSignature-${type.name}-${is.keyType.name}`}> + {'{'}[{param}]: {is.valueName} + {'}'} + </span> + ); + } else { + throw new Error(`Unrecognized Reflection type that isn't a Method nor an Index Signature`); + } + break; case TypeDocTypes.TypeParameter: @@ -142,7 +172,6 @@ export function Type(props: TypeProps): any { let typeNameUrlIfExists; let typePrefixIfExists; - let sectionNameIfExists; if (!_.isUndefined(props.docsInfo.typeConfigs)) { typeNameUrlIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToExternalLink) ? props.docsInfo.typeConfigs.typeNameToExternalLink[typeName as string] @@ -150,9 +179,6 @@ export function Type(props: TypeProps): any { typePrefixIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToPrefix) ? props.docsInfo.typeConfigs.typeNameToPrefix[typeName as string] : undefined; - sectionNameIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToDocSection) - ? props.docsInfo.typeConfigs.typeNameToDocSection[typeName as string] - : undefined; } if (!_.isUndefined(typeNameUrlIfExists)) { typeName = ( @@ -168,35 +194,26 @@ export function Type(props: TypeProps): any { ); } else if ( (isReference || isArray) && - (props.docsInfo.isPublicType(typeName as string) || !_.isUndefined(sectionNameIfExists)) + props.typeDefinitionByName && + props.typeDefinitionByName[typeName as string] ) { const id = Math.random().toString(); - const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists) - ? `${props.sectionName}-${typeName}` - : sectionNameIfExists; - let typeDefinition; - if (props.typeDefinitionByName) { - typeDefinition = props.typeDefinitionByName[typeName as string]; - } + const typeDefinitionAnchorId = `${constants.TYPES_SECTION_NAME}-${typeName}`; + let typeDefinition = props.typeDefinitionByName[typeName as string]; typeName = ( <ScrollLink to={typeDefinitionAnchorId} offset={0} + hashSpy={true} duration={sharedConstants.DOCS_SCROLL_DURATION_MS} containerId={sharedConstants.DOCS_CONTAINER_ID} > - {_.isUndefined(typeDefinition) || sharedUtils.isUserOnMobile() ? ( - <span - onClick={sharedUtils.setUrlHash.bind(null, typeDefinitionAnchorId)} - style={{ color: colors.lightBlueA700, cursor: 'pointer' }} - > - {typeName} - </span> + {sharedUtils.isUserOnMobile() ? ( + <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span> ) : ( <span data-tip={true} data-for={id} - onClick={sharedUtils.setUrlHash.bind(null, typeDefinitionAnchorId)} style={{ color: colors.lightBlueA700, cursor: 'pointer', @@ -210,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 c4bd7359a..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 { @@ -37,9 +38,6 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef } public render(): React.ReactNode { const customType = this.props.customType; - if (!this.props.docsInfo.isPublicType(customType.name)) { - return null; // no-op - } let typePrefix: string; let codeSnippet: React.ReactNode; @@ -47,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; @@ -77,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 @@ -89,6 +93,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef shouldHideMethodName={true} shouldUseArrowSyntax={true} docsInfo={this.props.docsInfo} + typeDefinitionByName={this.props.typeDefinitionByName} /> )} </span> @@ -103,7 +108,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef return ( <div id={this.props.shouldAddId ? typeDefinitionAnchorId : ''} - className="pb2" + className="pb2 pt2" style={{ overflow: 'hidden', width: '100%' }} onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} |