diff options
Diffstat (limited to 'packages/react-docs/src/components')
10 files changed, 78 insertions, 53 deletions
diff --git a/packages/react-docs/src/components/custom_enum.tsx b/packages/react-docs/src/components/custom_enum.tsx index c4252d9e2..fa7c43146 100644 --- a/packages/react-docs/src/components/custom_enum.tsx +++ b/packages/react-docs/src/components/custom_enum.tsx @@ -2,7 +2,7 @@ import { logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; -import { CustomType } from '../types'; +import { CustomType } from '@0xproject/types'; const STRING_ENUM_CODE_PREFIX = ' strEnum('; diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index 9d9b5141a..a23111297 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -9,24 +9,23 @@ import { Styles, utils as sharedUtils, } from '@0xproject/react-shared'; -import * as _ from 'lodash'; -import CircularProgress from 'material-ui/CircularProgress'; -import * as React from 'react'; -import * as semver from 'semver'; - -import { DocsInfo } from '../docs_info'; import { - AddressByContractName, DocAgnosticFormat, Event, ExternalExportToLink, Property, SolidityMethod, - SupportedDocJson, TypeDefinitionByName, TypescriptFunction, TypescriptMethod, -} from '../types'; +} from '@0xproject/types'; +import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; +import * as React from 'react'; +import * as semver from 'semver'; + +import { DocsInfo } from '../docs_info'; +import { AddressByContractName, SupportedDocJson } from '../types'; import { constants } from '../utils/constants'; import { Badge } from './badge'; @@ -219,11 +218,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} @@ -330,7 +329,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta return <div>{externalExports}</div>; } private _renderNetworkBadgesIfExists(sectionName: string): React.ReactNode { - if (this.props.docsInfo.type !== SupportedDocJson.Doxity) { + if (this.props.docsInfo.type !== SupportedDocJson.SolDoc) { return null; } @@ -354,7 +353,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/event_definition.tsx b/packages/react-docs/src/components/event_definition.tsx index 6cb80c6b0..37236275b 100644 --- a/packages/react-docs/src/components/event_definition.tsx +++ b/packages/react-docs/src/components/event_definition.tsx @@ -1,9 +1,9 @@ import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared'; +import { Event, EventArg } from '@0xproject/types'; import * as _ from 'lodash'; import * as React from 'react'; import { DocsInfo } from '../docs_info'; -import { Event, EventArg } from '../types'; import { Type } from './type'; diff --git a/packages/react-docs/src/components/interface.tsx b/packages/react-docs/src/components/interface.tsx index 93b10e96d..cad7d6c46 100644 --- a/packages/react-docs/src/components/interface.tsx +++ b/packages/react-docs/src/components/interface.tsx @@ -1,8 +1,9 @@ import * as _ from 'lodash'; import * as React from 'react'; +import { CustomType, TypeDefinitionByName } from '@0xproject/types'; + import { DocsInfo } from '../docs_info'; -import { CustomType, TypeDefinitionByName } from '../types'; import { Signature } from './signature'; import { Type } from './type'; @@ -19,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/property_block.tsx b/packages/react-docs/src/components/property_block.tsx index f181e21d2..8434e8682 100644 --- a/packages/react-docs/src/components/property_block.tsx +++ b/packages/react-docs/src/components/property_block.tsx @@ -1,8 +1,8 @@ import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; +import { Property, TypeDefinitionByName } from '@0xproject/types'; import * as React from 'react'; import { DocsInfo } from '../docs_info'; -import { Property, TypeDefinitionByName } from '../types'; import { constants } from '../utils/constants'; import { Comment } from './comment'; diff --git a/packages/react-docs/src/components/signature.tsx b/packages/react-docs/src/components/signature.tsx index bf9c8be24..1f3dd0ee8 100644 --- a/packages/react-docs/src/components/signature.tsx +++ b/packages/react-docs/src/components/signature.tsx @@ -1,8 +1,9 @@ import * as _ from 'lodash'; import * as React from 'react'; +import { Parameter, Type as TypeDef, TypeDefinitionByName, TypeParameter } from '@0xproject/types'; + import { DocsInfo } from '../docs_info'; -import { Parameter, Type as TypeDef, TypeDefinitionByName, TypeParameter } from '../types'; import { Type } from './type'; @@ -18,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) => { @@ -33,6 +36,7 @@ export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => { props.docsInfo, sectionName, props.isInPopover, + props.name, props.typeDefinitionByName, ); const paramStringArray: any[] = []; @@ -74,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 && ( @@ -100,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 = ( @@ -115,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> ); @@ -134,14 +144,19 @@ function renderTypeParameter( ): React.ReactNode { const typeParam = ( <span> - {`<${typeParameter.name} extends `} - <Type - type={typeParameter.type} - sectionName={sectionName} - typeDefinitionByName={typeDefinitionByName} - docsInfo={docsInfo} - isInPopover={isInPopover} - /> + {`<${typeParameter.name}`} + {!_.isUndefined(typeParameter.type) && ( + <span> + {' extends '} + <Type + type={typeParameter.type} + sectionName={sectionName} + typeDefinitionByName={typeDefinitionByName} + docsInfo={docsInfo} + isInPopover={isInPopover} + /> + </span> + )} {`>`} </span> ); diff --git a/packages/react-docs/src/components/signature_block.tsx b/packages/react-docs/src/components/signature_block.tsx index 05145dc23..5ec82983a 100644 --- a/packages/react-docs/src/components/signature_block.tsx +++ b/packages/react-docs/src/components/signature_block.tsx @@ -1,9 +1,15 @@ import { AnchorTitle, colors, HeaderSizes, Styles } from '@0xproject/react-shared'; +import { + Parameter, + SolidityMethod, + TypeDefinitionByName, + TypescriptFunction, + TypescriptMethod, +} from '@0xproject/types'; import * as _ from 'lodash'; import * as React from 'react'; import { DocsInfo } from '../docs_info'; -import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptFunction, TypescriptMethod } from '../types'; import { constants } from '../utils/constants'; import { Comment } from './comment'; @@ -26,7 +32,6 @@ export interface SignatureBlockState { const styles: Styles = { chip: { fontSize: 13, - backgroundColor: colors.lightBlueA700, color: colors.white, height: 11, borderRadius: 14, @@ -44,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}`} @@ -57,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} /> @@ -78,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 && ( @@ -89,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 && ( @@ -108,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/source_link.tsx b/packages/react-docs/src/components/source_link.tsx index c60435ea6..3096ad8d5 100644 --- a/packages/react-docs/src/components/source_link.tsx +++ b/packages/react-docs/src/components/source_link.tsx @@ -1,8 +1,7 @@ import { colors } from '@0xproject/react-shared'; +import { Source } from '@0xproject/types'; import * as React from 'react'; -import { Source } from '../types'; - export interface SourceLinkProps { source: Source; sourceUrl: string; diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 5f7601ce1..5c018f5dd 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -1,4 +1,5 @@ import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared'; +import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0xproject/types'; import { errorUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; @@ -6,13 +7,12 @@ import { Link as ScrollLink } from 'react-scroll'; 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 { 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 8d1f88490..9a3e50a1b 100644 --- a/packages/react-docs/src/components/type_definition.tsx +++ b/packages/react-docs/src/components/type_definition.tsx @@ -1,10 +1,11 @@ import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared'; +import { CustomType, CustomTypeChild, TypeDefinitionByName, TypeDocTypes } from '@0xproject/types'; import { errorUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { DocsInfo } from '../docs_info'; -import { CustomType, CustomTypeChild, KindString, TypeDefinitionByName, TypeDocTypes } from '../types'; +import { KindString, SupportedDocJson } from '../types'; import { constants } from '../utils/constants'; import { Comment } from './comment'; @@ -45,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} |