crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply prettier config

Browse Source
This commit is contained in:
Leonid Logvinov
2017-12-22 15:05:32 +01:00
parent 9a96e8c704
commit e744e4cd98
284 changed files with 6783 additions and 6205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/website/ts/pages/documentation/comment.tsx
View File

@@ -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>
);
};

9
packages/website/ts/pages/documentation/custom_enum.tsx
View File

@@ -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>
);

9
packages/website/ts/pages/documentation/docs_info.ts
View File

@@ -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);
}
}

248
packages/website/ts/pages/documentation/documentation.tsx
View File

@@ -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>
{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 style={{ marginRight: 7 }}>
<SectionHeader sectionName={sectionName} />
</div>
}
{docSection.properties.length > 0 &&
{this._renderNetworkBadgesIfExists(sectionName)}
</div>
{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 && (
<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();
},
);
}
}

6
packages/website/ts/pages/documentation/enum.tsx
View File

@@ -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>
);

36
packages/website/ts/pages/documentation/event_definition.tsx
View File

@@ -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>
);

32
packages/website/ts/pages/documentation/interface.tsx
View File

@@ -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>
);

106
packages/website/ts/pages/documentation/method_block.tsx
View File

@@ -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>
);

60
packages/website/ts/pages/documentation/method_signature.tsx
View File

@@ -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>
);

17
packages/website/ts/pages/documentation/source_link.tsx
View File

@@ -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>

113
packages/website/ts/pages/documentation/type.tsx
View File

@@ -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>
);
}

68
packages/website/ts/pages/documentation/type_definition.tsx
View File

@@ -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>
);
}