diff options
Diffstat (limited to 'packages/react-docs/src/components')
6 files changed, 39 insertions, 26 deletions
diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index aa6d27402..de2ccca8b 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -219,11 +219,11 @@ export class Documentation extends React.Component<DocumentationProps, Documenta _.isEmpty(docSection.events); const sortedTypes = _.sortBy(docSection.types, 'name'); - const typeDefs = _.map(sortedTypes, customType => { + const typeDefs = _.map(sortedTypes, (customType, i) => { return ( <TypeDefinition sectionName={sectionName} - key={`type-${customType.name}`} + key={`type-${customType.name}-${i}`} customType={customType} docsInfo={this.props.docsInfo} typeDefinitionByName={typeDefinitionByName} @@ -354,7 +354,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta key={`badge-${networkName}-${sectionName}`} href={linkIfExists} target="_blank" - style={{ color: colors.white, textDecoration: 'none' }} + style={{ color: colors.white, textDecoration: 'none', marginTop: 8 }} > <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} /> </a> diff --git a/packages/react-docs/src/components/interface.tsx b/packages/react-docs/src/components/interface.tsx index 9f0800d71..cad7d6c46 100644 --- a/packages/react-docs/src/components/interface.tsx +++ b/packages/react-docs/src/components/interface.tsx @@ -20,9 +20,9 @@ export interface InterfaceProps { export const Interface: React.SFC<InterfaceProps> = (props: InterfaceProps): any => { const type = props.type; - const properties = _.map(type.children, property => { + const properties = _.map(type.children, (property, i) => { return ( - <span key={`property-${property.name}-${property.type}-${type.name}`}> + <span key={`property-${property.name}-${property.type}-${type.name}-${i}`}> {property.name}:{' '} {property.type && !_.isUndefined(property.type.method) ? ( <Signature diff --git a/packages/react-docs/src/components/signature.tsx b/packages/react-docs/src/components/signature.tsx index a690a1f03..1f3dd0ee8 100644 --- a/packages/react-docs/src/components/signature.tsx +++ b/packages/react-docs/src/components/signature.tsx @@ -19,12 +19,14 @@ export interface SignatureProps { callPath?: string; docsInfo: DocsInfo; isInPopover: boolean; + isFallback?: boolean; } const defaultProps = { shouldHideMethodName: false, shouldUseArrowSyntax: false, callPath: '', + isFallback: false, }; export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => { @@ -34,6 +36,7 @@ export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => { props.docsInfo, sectionName, props.isInPopover, + props.name, props.typeDefinitionByName, ); const paramStringArray: any[] = []; @@ -75,7 +78,7 @@ export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => { return ( <span style={{ fontSize: 15 }}> {props.callPath} - {methodName} + {props.isFallback ? '' : methodName} {typeParameterIfExists}({hasMoreThenTwoParams && <br />} {paramStringArray}) {props.returnType && ( @@ -101,9 +104,10 @@ function renderParameters( docsInfo: DocsInfo, sectionName: string, isInPopover: boolean, + name: string, typeDefinitionByName?: TypeDefinitionByName, ): React.ReactNode[] { - const params = _.map(parameters, (p: Parameter) => { + const params = _.map(parameters, (p: Parameter, i: number) => { const isOptional = p.isOptional; const hasDefaultValue = !_.isUndefined(p.defaultValue); const type = ( @@ -116,9 +120,14 @@ function renderParameters( /> ); return ( - <span key={`param-${p.type}-${p.name}`}> - {p.name} - {isOptional && '?'}: {type} + <span key={`param-${JSON.stringify(p.type)}-${name}-${i}`}> + {!_.isEmpty(p.name) && ( + <span> + {p.name} + {isOptional && '?'}:{' '} + </span> + )} + {type} {hasDefaultValue && ` = ${p.defaultValue}`} </span> ); diff --git a/packages/react-docs/src/components/signature_block.tsx b/packages/react-docs/src/components/signature_block.tsx index 1ea0ea28c..5ec82983a 100644 --- a/packages/react-docs/src/components/signature_block.tsx +++ b/packages/react-docs/src/components/signature_block.tsx @@ -32,7 +32,6 @@ export interface SignatureBlockState { const styles: Styles = { chip: { fontSize: 13, - backgroundColor: colors.lightBlueA700, color: colors.white, height: 11, borderRadius: 14, @@ -50,6 +49,8 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu public render(): React.ReactNode { const method = this.props.method; + const isFallback = (method as SolidityMethod).isFallback; + const hasExclusivelyNamedParams = !_.isUndefined(_.find(method.parameters, p => !_.isEmpty(p.name))); return ( <div id={`${this.props.sectionName}-${method.name}`} @@ -63,10 +64,11 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu {(method as TypescriptMethod).isStatic && this._renderChip('Static')} {(method as SolidityMethod).isConstant && this._renderChip('Constant')} {(method as SolidityMethod).isPayable && this._renderChip('Payable')} + {isFallback && this._renderChip('Fallback', colors.lightGreenA700)} <div style={{ lineHeight: 1.3 }}> <AnchorTitle headerSize={HeaderSizes.H3} - title={method.name} + title={isFallback ? '' : method.name} id={`${this.props.sectionName}-${method.name}`} shouldShowAnchor={this.state.shouldShowAnchor} /> @@ -84,6 +86,7 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu typeDefinitionByName={this.props.typeDefinitionByName} docsInfo={this.props.docsInfo} isInPopover={false} + isFallback={isFallback} /> </code> {(method as TypescriptMethod).source && ( @@ -95,12 +98,13 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu )} {method.comment && <Comment comment={method.comment} className="py2" />} {method.parameters && - !_.isEmpty(method.parameters) && ( + !_.isEmpty(method.parameters) && + hasExclusivelyNamedParams && ( <div> <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}> ARGUMENTS </h4> - {this._renderParameterDescriptions(method.parameters)} + {this._renderParameterDescriptions(method.parameters, method.name)} </div> )} {method.returnComment && ( @@ -114,19 +118,19 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu </div> ); } - private _renderChip(text: string): React.ReactNode { + private _renderChip(text: string, backgroundColor: string = colors.lightBlueA700): React.ReactNode { return ( - <div className="p1 mr1" style={styles.chip}> + <div className="p1 mr1" style={{ ...styles.chip, backgroundColor }}> {text} </div> ); } - private _renderParameterDescriptions(parameters: Parameter[]): React.ReactNode { - const descriptions = _.map(parameters, parameter => { + private _renderParameterDescriptions(parameters: Parameter[], name: string): React.ReactNode { + const descriptions = _.map(parameters, (parameter: Parameter, i: number) => { const isOptional = parameter.isOptional; return ( <div - key={`param-description-${parameter.name}`} + key={`param-description-${parameter.name}-${name}-${i}`} className="flex pb1 mb2" style={{ borderBottom: '1px solid #f0f4f7' }} > diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 156a3496d..5c018f5dd 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -7,12 +7,12 @@ import { Link as ScrollLink } from 'react-scroll'; import * as ReactTooltip from 'react-tooltip'; import { DocsInfo } from '../docs_info'; -import { constants } from '../utils/constants'; import { Signature } from './signature'; import { TypeDefinition } from './type_definition'; const basicJsTypes = ['string', 'number', 'undefined', 'null', 'boolean']; +const basicSolidityTypes = ['bytes', 'bytes4', 'bytes32', 'uint8', 'uint256', 'address']; const defaultProps = {}; @@ -80,7 +80,7 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => { case TypeDocTypes.Array: typeName = type.elementType.name; - if (_.includes(basicJsTypes, typeName)) { + if (_.includes(basicJsTypes, typeName) || _.includes(basicSolidityTypes, typeName)) { typeNameColor = colors.orange; } break; @@ -168,10 +168,10 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => { break; case TypeDocTypes.Tuple: - const tupleTypes = _.map(type.tupleElements, t => { + const tupleTypes = _.map(type.tupleElements, (t, i) => { return ( <Type - key={`type-tuple-${t.name}-${t.typeDocType}`} + key={`type-tuple-${t.name}-${t.typeDocType}-${i}`} type={t} sectionName={props.sectionName} typeDefinitionByName={props.typeDefinitionByName} @@ -221,7 +221,7 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => { const id = Math.random().toString(); const typeDefinitionAnchorId = isExportedClassReference ? props.type.name - : `${constants.TYPES_SECTION_NAME}-${typeName}`; + : `${props.docsInfo.typeSectionName}-${typeName}`; typeName = ( <ScrollLink to={typeDefinitionAnchorId} diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx index 09cb3ff74..9a3e50a1b 100644 --- a/packages/react-docs/src/components/type_definition.tsx +++ b/packages/react-docs/src/components/type_definition.tsx @@ -5,7 +5,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { DocsInfo } from '../docs_info'; -import { KindString } from '../types'; +import { KindString, SupportedDocJson } from '../types'; import { constants } from '../utils/constants'; import { Comment } from './comment'; @@ -46,7 +46,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef let codeSnippet: React.ReactNode; switch (customType.kindString) { case KindString.Interface: - typePrefix = 'Interface'; + typePrefix = this.props.docsInfo.type === SupportedDocJson.SolDoc ? 'Struct' : 'Interface'; codeSnippet = ( <Interface type={customType} |