diff options
Diffstat (limited to 'packages/website/ts/pages/documentation')
12 files changed, 313 insertions, 396 deletions
diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx index 9627fdcdc..23cfd96bd 100644 --- a/packages/website/ts/pages/documentation/comment.tsx +++ b/packages/website/ts/pages/documentation/comment.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as ReactMarkdown from 'react-markdown'; -import {MarkdownCodeBlock} from 'ts/pages/shared/markdown_code_block'; +import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; interface CommentProps { comment: string; @@ -15,10 +15,7 @@ const defaultProps = { export const Comment: React.SFC<CommentProps> = (props: CommentProps) => { return ( <div className={`${props.className} comment`}> - <ReactMarkdown - source={props.comment} - renderers={{CodeBlock: MarkdownCodeBlock}} - /> + <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} /> </div> ); }; diff --git a/packages/website/ts/pages/documentation/custom_enum.tsx b/packages/website/ts/pages/documentation/custom_enum.tsx index 7dced9b60..8d50a2f52 100644 --- a/packages/website/ts/pages/documentation/custom_enum.tsx +++ b/packages/website/ts/pages/documentation/custom_enum.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {CustomType} from 'ts/types'; -import {utils} from 'ts/utils/utils'; +import { CustomType } from 'ts/types'; +import { utils } from 'ts/utils/utils'; const STRING_ENUM_CODE_PREFIX = ' strEnum('; @@ -23,8 +23,9 @@ export function CustomEnum(props: CustomEnumProps) { return ( <span> {`{`} - {'\t'}{enumValues} - <br /> + {'\t'} + {enumValues} + <br /> {`}`} </span> ); diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts index b88b247e8..4b1ec122a 100644 --- a/packages/website/ts/pages/documentation/docs_info.ts +++ b/packages/website/ts/pages/documentation/docs_info.ts @@ -18,7 +18,7 @@ export class DocsInfo { public docsJsonRoot: string; public menu: DocsMenu; public sections: SectionsMap; - public sectionNameToMarkdown: {[sectionName: string]: string}; + public sectionNameToMarkdown: { [sectionName: string]: string }; private _docsInfo: DocsInfoConfig; constructor(config: DocsInfoConfig) { this.displayName = config.displayName; @@ -41,7 +41,7 @@ export class DocsInfo { const modulePathsIfExists = this._docsInfo.sectionNameToModulePath[sectionName]; return modulePathsIfExists; } - public getMenu(selectedVersion?: string): {[section: string]: string[]} { + public getMenu(selectedVersion?: string): { [section: string]: string[] } { if (_.isUndefined(selectedVersion) || _.isUndefined(this._docsInfo.menuSubsectionToVersionWhenIntroduced)) { return this._docsInfo.menu; } @@ -55,8 +55,7 @@ export class DocsInfo { finalMenu.contracts = _.filter(finalMenu.contracts, (contractName: string) => { const versionIntroducedIfExists = this._docsInfo.menuSubsectionToVersionWhenIntroduced[contractName]; if (!_.isUndefined(versionIntroducedIfExists)) { - const existsInSelectedVersion = compareVersions(selectedVersion, - versionIntroducedIfExists) >= 0; + const existsInSelectedVersion = compareVersions(selectedVersion, versionIntroducedIfExists) >= 0; return existsInSelectedVersion; } else { return true; @@ -106,7 +105,7 @@ export class DocsInfo { public isVisibleConstructor(sectionName: string): boolean { return _.includes(this._docsInfo.visibleConstructors, sectionName); } - public convertToDocAgnosticFormat(docObj: DoxityDocObj|TypeDocNode): DocAgnosticFormat { + public convertToDocAgnosticFormat(docObj: DoxityDocObj | TypeDocNode): DocAgnosticFormat { return this._docsInfo.convertToDocAgnosticFormatFn(docObj, this); } } diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 1731c19fe..2315847ad 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -3,23 +3,21 @@ import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import { - scroller, -} from 'react-scroll'; +import { scroller } from 'react-scroll'; import semverSort = require('semver-sort'); -import {TopBar} from 'ts/components/top_bar'; -import {Badge} from 'ts/components/ui/badge'; -import {Comment} from 'ts/pages/documentation/comment'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {EventDefinition} from 'ts/pages/documentation/event_definition'; -import {MethodBlock} from 'ts/pages/documentation/method_block'; -import {SourceLink} from 'ts/pages/documentation/source_link'; -import {Type} from 'ts/pages/documentation/type'; -import {TypeDefinition} from 'ts/pages/documentation/type_definition'; -import {MarkdownSection} from 'ts/pages/shared/markdown_section'; -import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu'; -import {SectionHeader} from 'ts/pages/shared/section_header'; -import {Dispatcher} from 'ts/redux/dispatcher'; +import { TopBar } from 'ts/components/top_bar'; +import { Badge } from 'ts/components/ui/badge'; +import { Comment } from 'ts/pages/documentation/comment'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { EventDefinition } from 'ts/pages/documentation/event_definition'; +import { MethodBlock } from 'ts/pages/documentation/method_block'; +import { SourceLink } from 'ts/pages/documentation/source_link'; +import { Type } from 'ts/pages/documentation/type'; +import { TypeDefinition } from 'ts/pages/documentation/type_definition'; +import { MarkdownSection } from 'ts/pages/shared/markdown_section'; +import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu'; +import { SectionHeader } from 'ts/pages/shared/section_header'; +import { Dispatcher } from 'ts/redux/dispatcher'; import { AddressByContractName, DocAgnosticFormat, @@ -33,15 +31,15 @@ import { TypeDefinitionByName, TypescriptMethod, } from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {configs} from 'ts/utils/configs'; -import {constants} from 'ts/utils/constants'; -import {docUtils} from 'ts/utils/doc_utils'; -import {utils} from 'ts/utils/utils'; +import { colors } from 'ts/utils/colors'; +import { configs } from 'ts/utils/configs'; +import { constants } from 'ts/utils/constants'; +import { docUtils } from 'ts/utils/doc_utils'; +import { utils } from 'ts/utils/utils'; const SCROLL_TOP_ID = 'docsScrollTop'; -const networkNameToColor: {[network: string]: string} = { +const networkNameToColor: { [network: string]: string } = { [Networks.kovan]: colors.purple, [Networks.ropsten]: colors.red, [Networks.mainnet]: colors.turquois, @@ -79,8 +77,7 @@ const styles: Styles = { }, }; -export class Documentation extends - React.Component<DocumentationAllProps, DocumentationState> { +export class Documentation extends React.Component<DocumentationAllProps, DocumentationState> { constructor(props: DocumentationAllProps) { super(props); this.state = { @@ -96,12 +93,12 @@ export class Documentation extends this._fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists); } public render() { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) ? - {} : - this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); + const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) + ? {} + : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); return ( <div> - <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`}/> + <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} /> <TopBar blockchainIsLoaded={false} location={this.props.location} @@ -112,29 +109,26 @@ export class Documentation extends shouldFullWidth={true} docsInfo={this.props.docsInfo} /> - {_.isUndefined(this.state.docAgnosticFormat) ? - <div - className="col col-12" - style={styles.mainContainers} - > + {_.isUndefined(this.state.docAgnosticFormat) ? ( + <div className="col col-12" style={styles.mainContainers}> <div className="relative sm-px2 sm-pt2 sm-m1" - style={{height: 122, top: '50%', transform: 'translateY(-50%)'}} + style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} > <div className="center pb2"> <CircularProgress size={40} thickness={5} /> </div> - <div className="center pt2" style={{paddingBottom: 11}}>Loading documentation...</div> + <div className="center pt2" style={{ paddingBottom: 11 }}> + Loading documentation... + </div> </div> - </div> : - <div - className="mx-auto flex" - style={{color: colors.grey800, height: 43}} - > + </div> + ) : ( + <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}> <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide"> <div className="border-right absolute" - style={{...styles.menuContainer, ...styles.mainContainers}} + style={{ ...styles.menuContainer, ...styles.mainContainers }} > <NestedSidebarMenu selectedVersion={this.props.docsVersion} @@ -146,11 +140,7 @@ export class Documentation extends </div> </div> <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12"> - <div - id="documentation" - style={styles.mainContainers} - className="absolute" - > + <div id="documentation" style={styles.mainContainers} className="absolute"> <div id={SCROLL_TOP_ID} /> <h1 className="md-pl2 sm-pl3"> <a href={this.props.docsInfo.packageUrl} target="_blank"> @@ -161,7 +151,7 @@ export class Documentation extends </div> </div> </div> - } + )} </div> ); } @@ -224,136 +214,120 @@ export class Documentation extends ); }); return ( - <div - key={`section-${sectionName}`} - className="py2 pr3 md-pl2 sm-pl3" - > + <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3"> <div className="flex"> - <div style={{marginRight: 7}}> - <SectionHeader sectionName={sectionName} /> - </div> - {this._renderNetworkBadgesIfExists(sectionName)} + <div style={{ marginRight: 7 }}> + <SectionHeader sectionName={sectionName} /> + </div> + {this._renderNetworkBadgesIfExists(sectionName)} </div> - {docSection.comment && - <Comment - comment={docSection.comment} - /> - } + {docSection.comment && <Comment comment={docSection.comment} />} {docSection.constructors.length > 0 && - this.props.docsInfo.isVisibleConstructor(sectionName) && - <div> - <h2 className="thin">Constructor</h2> - {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} - </div> - } - {docSection.properties.length > 0 && + this.props.docsInfo.isVisibleConstructor(sectionName) && ( + <div> + <h2 className="thin">Constructor</h2> + {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} + </div> + )} + {docSection.properties.length > 0 && ( <div> <h2 className="thin">Properties</h2> <div>{propertyDefs}</div> </div> - } - {docSection.methods.length > 0 && + )} + {docSection.methods.length > 0 && ( <div> <h2 className="thin">Methods</h2> <div>{methodDefs}</div> </div> - } - {!_.isUndefined(docSection.events) && docSection.events.length > 0 && - <div> - <h2 className="thin">Events</h2> - <div>{eventDefs}</div> - </div> - } - {!_.isUndefined(typeDefs) && typeDefs.length > 0 && - <div> - <div>{typeDefs}</div> - </div> - } + )} + {!_.isUndefined(docSection.events) && + docSection.events.length > 0 && ( + <div> + <h2 className="thin">Events</h2> + <div>{eventDefs}</div> + </div> + )} + {!_.isUndefined(typeDefs) && + typeDefs.length > 0 && ( + <div> + <div>{typeDefs}</div> + </div> + )} </div> ); } private _renderNetworkBadgesIfExists(sectionName: string) { const networkToAddressByContractName = configs.CONTRACT_ADDRESS[this.props.docsVersion]; - const badges = _.map(networkToAddressByContractName, + const badges = _.map( + networkToAddressByContractName, (addressByContractName: AddressByContractName, networkName: string) => { const contractAddress = addressByContractName[sectionName]; if (_.isUndefined(contractAddress)) { return null; } const linkIfExists = utils.getEtherScanLinkIfExists( - contractAddress, constants.NETWORK_ID_BY_NAME[networkName], EtherscanLinkSuffixes.Address, + contractAddress, + constants.NETWORK_ID_BY_NAME[networkName], + EtherscanLinkSuffixes.Address, ); return ( <a key={`badge-${networkName}-${sectionName}`} href={linkIfExists} target="_blank" - style={{color: colors.white, textDecoration: 'none'}} + style={{ color: colors.white, textDecoration: 'none' }} > - <Badge - title={networkName} - backgroundColor={networkNameToColor[networkName]} - /> + <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} /> </a> ); - }); + }, + ); return badges; } - private _renderConstructors(constructors: SolidityMethod[]|TypescriptMethod[], - sectionName: string, - typeDefinitionByName: TypeDefinitionByName): React.ReactNode { + private _renderConstructors( + constructors: SolidityMethod[] | TypescriptMethod[], + sectionName: string, + typeDefinitionByName: TypeDefinitionByName, + ): React.ReactNode { const constructorDefs = _.map(constructors, constructor => { - return this._renderMethodBlocks( - constructor, sectionName, constructor.isConstructor, typeDefinitionByName, - ); + return this._renderMethodBlocks(constructor, sectionName, constructor.isConstructor, typeDefinitionByName); }); - return ( - <div> - {constructorDefs} - </div> - ); + return <div>{constructorDefs}</div>; } private _renderProperty(sectionName: string, property: Property): React.ReactNode { return ( - <div - key={`property-${property.name}-${property.type.name}`} - className="pb3" - > + <div key={`property-${property.name}-${property.type.name}`} className="pb3"> <code className="hljs"> {property.name}: - <Type - type={property.type} - sectionName={sectionName} - docsInfo={this.props.docsInfo} - /> + <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} /> </code> - {property.source && + {property.source && ( <SourceLink version={this.props.docsVersion} source={property.source} baseUrl={this.props.docsInfo.packageUrl} subPackageName={this.props.docsInfo.subPackageName} /> - } - {property.comment && - <Comment - comment={property.comment} - className="py2" - /> - } + )} + {property.comment && <Comment comment={property.comment} className="py2" />} </div> ); } - private _renderMethodBlocks(method: SolidityMethod|TypescriptMethod, sectionName: string, - isConstructor: boolean, typeDefinitionByName: TypeDefinitionByName): React.ReactNode { + private _renderMethodBlocks( + method: SolidityMethod | TypescriptMethod, + sectionName: string, + isConstructor: boolean, + typeDefinitionByName: TypeDefinitionByName, + ): React.ReactNode { return ( <MethodBlock - key={`method-${method.name}-${sectionName}`} - sectionName={sectionName} - method={method} - typeDefinitionByName={typeDefinitionByName} - libraryVersion={this.props.docsVersion} - docsInfo={this.props.docsInfo} + key={`method-${method.name}-${sectionName}`} + sectionName={sectionName} + method={method} + typeDefinitionByName={typeDefinitionByName} + libraryVersion={this.props.docsVersion} + docsInfo={this.props.docsInfo} /> ); } @@ -364,7 +338,11 @@ export class Documentation extends hash = SCROLL_TOP_ID; // scroll to the top } - scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'}); + scroller.scrollTo(hash, { + duration: 0, + offset: 0, + containerId: 'documentation', + }); } private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> { const versionToFileName = await docUtils.getVersionToFileNameAsync(this.props.docsInfo.docsJsonRoot); @@ -384,14 +362,18 @@ export class Documentation extends const versionFileNameToFetch = versionToFileName[versionToFetch]; const versionDocObj = await docUtils.getJSONDocFileAsync( - versionFileNameToFetch, this.props.docsInfo.docsJsonRoot, + versionFileNameToFetch, + this.props.docsInfo.docsJsonRoot, ); const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj); - this.setState({ - docAgnosticFormat, - }, () => { - this._scrollToHash(); - }); + this.setState( + { + docAgnosticFormat, + }, + () => { + this._scrollToHash(); + }, + ); } } diff --git a/packages/website/ts/pages/documentation/enum.tsx b/packages/website/ts/pages/documentation/enum.tsx index b5fbc4bd2..7dfdee771 100644 --- a/packages/website/ts/pages/documentation/enum.tsx +++ b/packages/website/ts/pages/documentation/enum.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {EnumValue} from 'ts/types'; +import { EnumValue } from 'ts/types'; interface EnumProps { values: EnumValue[]; @@ -14,8 +14,8 @@ export function Enum(props: EnumProps) { return ( <span> {`{`} - {values} - <br /> + {values} + <br /> {`}`} </span> ); diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx index 2fef019d2..0e53e38e7 100644 --- a/packages/website/ts/pages/documentation/event_definition.tsx +++ b/packages/website/ts/pages/documentation/event_definition.tsx @@ -1,10 +1,10 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {Type} from 'ts/pages/documentation/type'; -import {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import {Event, EventArg, HeaderSizes} from 'ts/types'; -import {colors} from 'ts/utils/colors'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { Type } from 'ts/pages/documentation/type'; +import { AnchorTitle } from 'ts/pages/shared/anchor_title'; +import { Event, EventArg, HeaderSizes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; interface EventDefinitionProps { event: Event; @@ -29,7 +29,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event <div id={`${this.props.sectionName}-${event.name}`} className="pb2" - style={{overflow: 'hidden', width: '100%'}} + style={{ overflow: 'hidden', width: '100%' }} onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > @@ -39,29 +39,24 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event id={event.name} shouldShowAnchor={this.state.shouldShowAnchor} /> - <div style={{fontSize: 16}}> + <div style={{ fontSize: 16 }}> <pre> - <code className="hljs"> - {this._renderEventCode()} - </code> + <code className="hljs">{this._renderEventCode()}</code> </pre> </div> </div> ); } private _renderEventCode() { - const indexed = <span style={{color: colors.green}}> indexed</span>; + 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} /> ); return ( <span key={`eventArg-${eventArg.name}`}> - {eventArg.name}{eventArg.isIndexed ? indexed : ''}: {type}, + {eventArg.name} + {eventArg.isIndexed ? indexed : ''}: {type}, </span> ); }); @@ -71,9 +66,10 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event return ( <span> {`{`} - <br /> - {'\t'}{argList} - <br /> + <br /> + {'\t'} + {argList} + <br /> {`}`} </span> ); diff --git a/packages/website/ts/pages/documentation/interface.tsx b/packages/website/ts/pages/documentation/interface.tsx index 1a6b562fe..16a772125 100644 --- a/packages/website/ts/pages/documentation/interface.tsx +++ b/packages/website/ts/pages/documentation/interface.tsx @@ -1,9 +1,9 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {MethodSignature} from 'ts/pages/documentation/method_signature'; -import {Type} from 'ts/pages/documentation/type'; -import {CustomType, TypeDocTypes} from 'ts/types'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { MethodSignature } from 'ts/pages/documentation/method_signature'; +import { Type } from 'ts/pages/documentation/type'; +import { CustomType, TypeDocTypes } from 'ts/types'; interface InterfaceProps { type: CustomType; @@ -17,12 +17,9 @@ export function Interface(props: InterfaceProps) { return ( <span key={`property-${property.name}-${property.type}-${type.name}`}> {property.name}:{' '} - {property.type.typeDocType !== TypeDocTypes.Reflection ? - <Type - type={property.type} - sectionName={props.sectionName} - docsInfo={props.docsInfo} - /> : + {property.type.typeDocType !== TypeDocTypes.Reflection ? ( + <Type type={property.type} sectionName={props.sectionName} docsInfo={props.docsInfo} /> + ) : ( <MethodSignature method={property.type.method} sectionName={props.sectionName} @@ -30,7 +27,7 @@ export function Interface(props: InterfaceProps) { shouldUseArrowSyntax={true} docsInfo={props.docsInfo} /> - }, + )}, </span> ); }); @@ -42,11 +39,11 @@ export function Interface(props: InterfaceProps) { {is.keyName}: <Type type={is.keyType} sectionName={props.sectionName} docsInfo={props.docsInfo} /> </span> ); - properties.push(( + properties.push( <span key={`indexSignature-${type.name}-${is.keyType.name}`}> [{param}]: {is.valueName}, - </span> - )); + </span>, + ); } const propertyList = _.reduce(properties, (prev: React.ReactNode, curr: React.ReactNode) => { return [prev, '\n\t', curr]; @@ -54,9 +51,10 @@ export function Interface(props: InterfaceProps) { return ( <span> {`{`} - <br /> - {'\t'}{propertyList} - <br /> + <br /> + {'\t'} + {propertyList} + <br /> {`}`} </span> ); diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index 147bc34d6..dfde5931b 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -1,23 +1,16 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Comment} from 'ts/pages/documentation/comment'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {MethodSignature} from 'ts/pages/documentation/method_signature'; -import {SourceLink} from 'ts/pages/documentation/source_link'; -import {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import { - HeaderSizes, - Parameter, - SolidityMethod, - Styles, - TypeDefinitionByName, - TypescriptMethod, -} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {typeDocUtils} from 'ts/utils/typedoc_utils'; +import { Comment } from 'ts/pages/documentation/comment'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { MethodSignature } from 'ts/pages/documentation/method_signature'; +import { SourceLink } from 'ts/pages/documentation/source_link'; +import { AnchorTitle } from 'ts/pages/shared/anchor_title'; +import { HeaderSizes, Parameter, SolidityMethod, Styles, TypeDefinitionByName, TypescriptMethod } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { typeDocUtils } from 'ts/utils/typedoc_utils'; interface MethodBlockProps { - method: SolidityMethod|TypescriptMethod; + method: SolidityMethod | TypescriptMethod; sectionName: string; libraryVersion: string; typeDefinitionByName: TypeDefinitionByName; @@ -56,22 +49,16 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt return ( <div id={`${this.props.sectionName}-${method.name}`} - style={{overflow: 'hidden', width: '100%'}} + style={{ overflow: 'hidden', width: '100%' }} className="pb4" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > - {!method.isConstructor && + {!method.isConstructor && ( <div className="flex"> - {(method as TypescriptMethod).isStatic && - this._renderChip('Static') - } - {(method as SolidityMethod).isConstant && - this._renderChip('Constant') - } - {(method as SolidityMethod).isPayable && - this._renderChip('Payable') - } + {(method as TypescriptMethod).isStatic && this._renderChip('Static')} + {(method as SolidityMethod).isConstant && this._renderChip('Constant')} + {(method as SolidityMethod).isPayable && this._renderChip('Payable')} <AnchorTitle headerSize={HeaderSizes.H3} title={method.name} @@ -79,7 +66,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt shouldShowAnchor={this.state.shouldShowAnchor} /> </div> - } + )} <code className="hljs"> <MethodSignature method={method} @@ -88,53 +75,38 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt docsInfo={this.props.docsInfo} /> </code> - {(method as TypescriptMethod).source && + {(method as TypescriptMethod).source && ( <SourceLink version={this.props.libraryVersion} source={(method as TypescriptMethod).source} baseUrl={this.props.docsInfo.packageUrl} subPackageName={this.props.docsInfo.subPackageName} /> - } - {method.comment && - <Comment - comment={method.comment} - className="py2" - /> - } - {method.parameters && !_.isEmpty(method.parameters) && - <div> - <h4 - className="pb1 thin" - style={{borderBottom: '1px solid #e1e8ed'}} - > - ARGUMENTS - </h4> - {this._renderParameterDescriptions(method.parameters)} - </div> - } - {method.returnComment && + )} + {method.comment && <Comment comment={method.comment} className="py2" />} + {method.parameters && + !_.isEmpty(method.parameters) && ( + <div> + <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}> + ARGUMENTS + </h4> + {this._renderParameterDescriptions(method.parameters)} + </div> + )} + {method.returnComment && ( <div className="pt1 comment"> - <h4 - className="pb1 thin" - style={{borderBottom: '1px solid #e1e8ed'}} - > + <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}> RETURNS </h4> - <Comment - comment={method.returnComment} - /> + <Comment comment={method.returnComment} /> </div> - } + )} </div> ); } private _renderChip(text: string) { return ( - <div - className="p1 mr1" - style={styles.chip} - > + <div className="p1 mr1" style={styles.chip}> {text} </div> ); @@ -146,22 +118,16 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt <div key={`param-description-${parameter.name}`} className="flex pb1 mb2" - style={{borderBottom: '1px solid #f0f4f7'}} + style={{ borderBottom: '1px solid #f0f4f7' }} > <div className="pl2 col lg-col-4 md-col-4 sm-col-12 col-12"> - <div className="bold"> - {parameter.name} - </div> - <div className="pt1" style={{color: colors.grey, fontSize: 14}}> + <div className="bold">{parameter.name}</div> + <div className="pt1" style={{ color: colors.grey, fontSize: 14 }}> {isOptional && 'optional'} </div> </div> <div className="col lg-col-8 md-col-8 sm-col-12 col-12"> - {parameter.comment && - <Comment - comment={parameter.comment} - /> - } + {parameter.comment && <Comment comment={parameter.comment} />} </div> </div> ); diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx index 366d4c13e..041dcd093 100644 --- a/packages/website/ts/pages/documentation/method_signature.tsx +++ b/packages/website/ts/pages/documentation/method_signature.tsx @@ -1,12 +1,12 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {Type} from 'ts/pages/documentation/type'; -import {Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod} from 'ts/types'; -import {constants} from 'ts/utils/constants'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { Type } from 'ts/pages/documentation/type'; +import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types'; +import { constants } from 'ts/utils/constants'; interface MethodSignatureProps { - method: TypescriptMethod|SolidityMethod; + method: TypescriptMethod | SolidityMethod; sectionName: string; shouldHideMethodName?: boolean; shouldUseArrowSyntax?: boolean; @@ -21,31 +21,28 @@ const defaultProps = { export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSignatureProps) => { const sectionName = constants.TYPES_SECTION_NAME; - const parameters = renderParameters( - props.method, props.docsInfo, sectionName, props.typeDefinitionByName, - ); + const parameters = renderParameters(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); const paramString = _.reduce(parameters, (prev: React.ReactNode, curr: React.ReactNode) => { return [prev, ', ', curr]; }); const methodName = props.shouldHideMethodName ? '' : props.method.name; - const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter) ? - undefined : - renderTypeParameter( - props.method, props.docsInfo, sectionName, props.typeDefinitionByName, - ); + const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter) + ? undefined + : renderTypeParameter(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); return ( <span> - {props.method.callPath}{methodName}{typeParameterIfExists}({paramString}) - {props.shouldUseArrowSyntax ? ' => ' : ': '} - {' '} - {props.method.returnType && + {props.method.callPath} + {methodName} + {typeParameterIfExists}({paramString}) + {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '} + {props.method.returnType && ( <Type type={props.method.returnType} sectionName={sectionName} typeDefinitionByName={props.typeDefinitionByName} docsInfo={props.docsInfo} /> - } + )} </span> ); }; @@ -53,8 +50,10 @@ export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSi MethodSignature.defaultProps = defaultProps; function renderParameters( - method: TypescriptMethod|SolidityMethod, docsInfo: DocsInfo, - sectionName: string, typeDefinitionByName?: TypeDefinitionByName, + method: TypescriptMethod | SolidityMethod, + docsInfo: DocsInfo, + sectionName: string, + typeDefinitionByName?: TypeDefinitionByName, ) { const parameters = method.parameters; const params = _.map(parameters, (p: Parameter) => { @@ -69,7 +68,8 @@ function renderParameters( ); return ( <span key={`param-${p.type}-${p.name}`}> - {p.name}{isOptional && '?'}: {type} + {p.name} + {isOptional && '?'}: {type} </span> ); }); @@ -77,19 +77,21 @@ function renderParameters( } function renderTypeParameter( - method: TypescriptMethod, docsInfo: DocsInfo, - sectionName: string, typeDefinitionByName?: TypeDefinitionByName, + method: TypescriptMethod, + docsInfo: DocsInfo, + sectionName: string, + typeDefinitionByName?: TypeDefinitionByName, ) { const typeParameter = method.typeParameter; const typeParam = ( <span> {`<${typeParameter.name} extends `} - <Type - type={typeParameter.type} - sectionName={sectionName} - typeDefinitionByName={typeDefinitionByName} - docsInfo={docsInfo} - /> + <Type + type={typeParameter.type} + sectionName={sectionName} + typeDefinitionByName={typeDefinitionByName} + docsInfo={docsInfo} + /> {`>`} </span> ); diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx index 1a3b58f81..6588ee39e 100644 --- a/packages/website/ts/pages/documentation/source_link.tsx +++ b/packages/website/ts/pages/documentation/source_link.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Source} from 'ts/types'; -import {colors} from 'ts/utils/colors'; +import { Source } from 'ts/types'; +import { colors } from 'ts/utils/colors'; interface SourceLinkProps { source: Source; @@ -10,9 +10,7 @@ interface SourceLinkProps { subPackageName: string; } -const packagesWithNamespace = [ - 'connect', -]; +const packagesWithNamespace = ['connect']; export function SourceLink(props: SourceLinkProps) { const src = props.source; @@ -24,13 +22,8 @@ export function SourceLink(props: SourceLinkProps) { } const sourceCodeUrl = `${url}/blob/${tagPrefix}%40${props.version}/packages/${pkg}/${src.fileName}#L${src.line}`; return ( - <div className="pt2" style={{fontSize: 14}}> - <a - href={sourceCodeUrl} - target="_blank" - className="underline" - style={{color: colors.grey}} - > + <div className="pt2" style={{ fontSize: 14 }}> + <a href={sourceCodeUrl} target="_blank" className="underline" style={{ color: colors.grey }}> Source </a> </div> diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx index 6182b147a..e989e7129 100644 --- a/packages/website/ts/pages/documentation/type.tsx +++ b/packages/website/ts/pages/documentation/type.tsx @@ -1,16 +1,16 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Link as ScrollLink} from 'react-scroll'; +import { Link as ScrollLink } from 'react-scroll'; import * as ReactTooltip from 'react-tooltip'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {TypeDefinition} from 'ts/pages/documentation/type_definition'; -import {Type as TypeDef, TypeDefinitionByName, TypeDocTypes} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { TypeDefinition } from 'ts/pages/documentation/type_definition'; +import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; // Some types reference other libraries. For these types, we want to link the user to the relevant documentation. -const typeToUrl: {[typeName: string]: string} = { +const typeToUrl: { [typeName: string]: string } = { Web3: constants.URL_WEB3_DOCS, Provider: constants.URL_WEB3_PROVIDER_DOCS, BigNumber: constants.URL_BIGNUMBERJS_GITHUB, @@ -18,13 +18,13 @@ const typeToUrl: {[typeName: string]: string} = { LogEntryEvent: constants.URL_WEB3_LOG_ENTRY_EVENT, }; -const typePrefix: {[typeName: string]: string} = { +const typePrefix: { [typeName: string]: string } = { Provider: 'Web3', DecodedLogEntryEvent: 'Web3', LogEntryEvent: 'Web3', }; -const typeToSection: {[typeName: string]: string} = { +const typeToSection: { [typeName: string]: string } = { ExchangeWrapper: 'exchange', TokenWrapper: 'token', TokenRegistryWrapper: 'tokenRegistry', @@ -48,7 +48,7 @@ export function Type(props: TypeProps): any { const isReference = type.typeDocType === TypeDocTypes.Reference; const isArray = type.typeDocType === TypeDocTypes.Array; let typeNameColor = 'inherit'; - let typeName: string|React.ReactNode; + let typeName: string | React.ReactNode; let typeArgs: React.ReactNode[] = []; switch (type.typeDocType) { case TypeDocTypes.Intrinsic: @@ -130,27 +130,29 @@ export function Type(props: TypeProps): any { return [prev, ', ', curr]; }); - const typeNameUrlIfExists = typeToUrl[(typeName as string)]; - const typePrefixIfExists = typePrefix[(typeName as string)]; - const sectionNameIfExists = typeToSection[(typeName as string)]; + const typeNameUrlIfExists = typeToUrl[typeName as string]; + const typePrefixIfExists = typePrefix[typeName as string]; + const sectionNameIfExists = typeToSection[typeName as string]; if (!_.isUndefined(typeNameUrlIfExists)) { typeName = ( <a href={typeNameUrlIfExists} target="_blank" className="text-decoration-none" - style={{color: colors.lightBlueA700}} + style={{ color: colors.lightBlueA700 }} > - {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''}{typeName} + {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''} + {typeName} </a> ); - } else if ((isReference || isArray) && - (props.docsInfo.isPublicType(typeName as string) || - !_.isUndefined(sectionNameIfExists))) { + } else if ( + (isReference || isArray) && + (props.docsInfo.isPublicType(typeName as string) || !_.isUndefined(sectionNameIfExists)) + ) { const id = Math.random().toString(); - const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists) ? - `${props.sectionName}-${typeName}` : - sectionNameIfExists; + const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists) + ? `${props.sectionName}-${typeName}` + : sectionNameIfExists; let typeDefinition; if (props.typeDefinitionByName) { typeDefinition = props.typeDefinitionByName[typeName as string]; @@ -162,46 +164,49 @@ export function Type(props: TypeProps): any { duration={constants.DOCS_SCROLL_DURATION_MS} containerId={constants.DOCS_CONTAINER_ID} > - {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ? - <span - onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)} - style={{color: colors.lightBlueA700, cursor: 'pointer'}} - > - {typeName} - </span> : - <span - data-tip={true} - data-for={id} - onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)} - style={{color: colors.lightBlueA700, cursor: 'pointer', display: 'inline-block'}} - > - {typeName} - <ReactTooltip - type="light" - effect="solid" - id={id} - className="typeTooltip" + {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ? ( + <span + onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)} + style={{ color: colors.lightBlueA700, cursor: 'pointer' }} > - <TypeDefinition - sectionName={props.sectionName} - customType={typeDefinition} - shouldAddId={false} - docsInfo={props.docsInfo} - /> - </ReactTooltip> - </span> - } + {typeName} + </span> + ) : ( + <span + data-tip={true} + data-for={id} + onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)} + style={{ + color: colors.lightBlueA700, + cursor: 'pointer', + display: 'inline-block', + }} + > + {typeName} + <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip"> + <TypeDefinition + sectionName={props.sectionName} + customType={typeDefinition} + shouldAddId={false} + docsInfo={props.docsInfo} + /> + </ReactTooltip> + </span> + )} </ScrollLink> ); } return ( <span> - <span style={{color: typeNameColor}}>{typeName}</span> - {isArray && '[]'}{!_.isEmpty(typeArgs) && + <span style={{ color: typeNameColor }}>{typeName}</span> + {isArray && '[]'} + {!_.isEmpty(typeArgs) && ( <span> - {'<'}{commaSeparatedTypeArgs}{'>'} + {'<'} + {commaSeparatedTypeArgs} + {'>'} </span> - } + )} </span> ); } diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx index 25499a6d0..d46eec76c 100644 --- a/packages/website/ts/pages/documentation/type_definition.tsx +++ b/packages/website/ts/pages/documentation/type_definition.tsx @@ -1,16 +1,16 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Comment} from 'ts/pages/documentation/comment'; -import {CustomEnum} from 'ts/pages/documentation/custom_enum'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {Enum} from 'ts/pages/documentation/enum'; -import {Interface} from 'ts/pages/documentation/interface'; -import {MethodSignature} from 'ts/pages/documentation/method_signature'; -import {Type} from 'ts/pages/documentation/type'; -import {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import {CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {utils} from 'ts/utils/utils'; +import { Comment } from 'ts/pages/documentation/comment'; +import { CustomEnum } from 'ts/pages/documentation/custom_enum'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { Enum } from 'ts/pages/documentation/enum'; +import { Interface } from 'ts/pages/documentation/interface'; +import { MethodSignature } from 'ts/pages/documentation/method_signature'; +import { Type } from 'ts/pages/documentation/type'; +import { AnchorTitle } from 'ts/pages/shared/anchor_title'; +import { CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { utils } from 'ts/utils/utils'; interface TypeDefinitionProps { sectionName: string; @@ -45,21 +45,13 @@ 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} /> ); break; case KindString.Variable: typePrefix = 'Enum'; - codeSnippet = ( - <CustomEnum - type={customType} - /> - ); + codeSnippet = <CustomEnum type={customType} />; break; case KindString.Enumeration: @@ -70,28 +62,21 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef defaultValue: c.defaultValue, }; }); - codeSnippet = ( - <Enum - values={enumValues} - /> - ); + codeSnippet = <Enum values={enumValues} />; break; case KindString.TypeAlias: typePrefix = 'Type Alias'; codeSnippet = ( <span> - <span - style={{color: colors.lightPurple}} - > - type - </span> {customType.name} ={' '} - {customType.type.typeDocType !== TypeDocTypes.Reflection ? + <span style={{ color: colors.lightPurple }}>type</span> {customType.name} ={' '} + {customType.type.typeDocType !== TypeDocTypes.Reflection ? ( <Type type={customType.type} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} - /> : + /> + ) : ( <MethodSignature method={customType.type.method} sectionName={this.props.sectionName} @@ -99,7 +84,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef shouldUseArrowSyntax={true} docsInfo={this.props.docsInfo} /> - } + )} </span> ); break; @@ -113,7 +98,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef <div id={this.props.shouldAddId ? typeDefinitionAnchorId : ''} className="pb2" - style={{overflow: 'hidden', width: '100%'}} + style={{ overflow: 'hidden', width: '100%' }} onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > @@ -123,19 +108,12 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef id={this.props.shouldAddId ? typeDefinitionAnchorId : ''} shouldShowAnchor={this.state.shouldShowAnchor} /> - <div style={{fontSize: 16}}> + <div style={{ fontSize: 16 }}> <pre> - <code className="hljs"> - {codeSnippet} - </code> + <code className="hljs">{codeSnippet}</code> </pre> </div> - {customType.comment && - <Comment - comment={customType.comment} - className="py2" - /> - } + {customType.comment && <Comment comment={customType.comment} className="py2" />} </div> ); } |