aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-docs/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/react-docs/src/components')
-rw-r--r--packages/react-docs/src/components/badge.tsx55
-rw-r--r--packages/react-docs/src/components/comment.tsx22
-rw-r--r--packages/react-docs/src/components/custom_enum.tsx33
-rw-r--r--packages/react-docs/src/components/doc_reference.tsx318
-rw-r--r--packages/react-docs/src/components/enum.tsx23
-rw-r--r--packages/react-docs/src/components/event_definition.tsx89
-rw-r--r--packages/react-docs/src/components/interface.tsx89
-rw-r--r--packages/react-docs/src/components/property_block.tsx78
-rw-r--r--packages/react-docs/src/components/signature.tsx164
-rw-r--r--packages/react-docs/src/components/signature_block.tsx153
-rw-r--r--packages/react-docs/src/components/source_link.tsx21
-rw-r--r--packages/react-docs/src/components/type.tsx271
-rw-r--r--packages/react-docs/src/components/type_definition.tsx188
13 files changed, 0 insertions, 1504 deletions
diff --git a/packages/react-docs/src/components/badge.tsx b/packages/react-docs/src/components/badge.tsx
deleted file mode 100644
index e3d5be273..000000000
--- a/packages/react-docs/src/components/badge.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Styles } from '@0x/react-shared';
-import * as React from 'react';
-
-const styles: Styles = {
- badge: {
- width: 50,
- fontSize: 11,
- height: 10,
- borderRadius: 5,
- lineHeight: 0.9,
- fontFamily: 'Roboto Mono',
- marginLeft: 3,
- marginRight: 3,
- },
-};
-
-export interface BadgeProps {
- title: string;
- backgroundColor: string;
-}
-
-export interface BadgeState {
- isHovering: boolean;
-}
-
-export class Badge extends React.Component<BadgeProps, BadgeState> {
- constructor(props: BadgeProps) {
- super(props);
- this.state = {
- isHovering: false,
- };
- }
- public render(): React.ReactNode {
- const badgeStyle = {
- ...styles.badge,
- backgroundColor: this.props.backgroundColor,
- opacity: this.state.isHovering ? 0.7 : 1,
- };
- return (
- <div
- className="p1 center"
- style={badgeStyle}
- onMouseOver={this._setHoverState.bind(this, true)}
- onMouseOut={this._setHoverState.bind(this, false)}
- >
- {this.props.title}
- </div>
- );
- }
- private _setHoverState(isHovering: boolean): void {
- this.setState({
- isHovering,
- });
- }
-}
diff --git a/packages/react-docs/src/components/comment.tsx b/packages/react-docs/src/components/comment.tsx
deleted file mode 100644
index 4d34f711e..000000000
--- a/packages/react-docs/src/components/comment.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { colors, MarkdownCodeBlock } from '@0x/react-shared';
-import * as React from 'react';
-import * as ReactMarkdown from 'react-markdown';
-
-export interface CommentProps {
- comment: string;
- className?: string;
-}
-
-const defaultProps = {
- className: '',
-};
-
-export const Comment: React.SFC<CommentProps> = (props: CommentProps) => {
- return (
- <div className={`${props.className} comment`} style={{ color: colors.greyTheme }}>
- <ReactMarkdown source={props.comment} renderers={{ code: MarkdownCodeBlock }} />
- </div>
- );
-};
-
-Comment.defaultProps = defaultProps;
diff --git a/packages/react-docs/src/components/custom_enum.tsx b/packages/react-docs/src/components/custom_enum.tsx
deleted file mode 100644
index e971a012a..000000000
--- a/packages/react-docs/src/components/custom_enum.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { logUtils } from '@0x/utils';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { CustomType } from '@0x/types';
-
-const STRING_ENUM_CODE_PREFIX = ' strEnum(';
-
-export interface CustomEnumProps {
- type: CustomType;
-}
-
-// This component renders custom string enums that was a work-around for versions of
-// TypeScript <2.4.0 that did not support them natively. We keep it around to support
-// older versions of 0x.js <0.9.0
-export const CustomEnum = (props: CustomEnumProps) => {
- const type = props.type;
- if (!_.startsWith(type.defaultValue, STRING_ENUM_CODE_PREFIX)) {
- logUtils.log('We do not yet support `Variable` types that are not strEnums');
- return null;
- }
- // Remove the prefix and postfix, leaving only the strEnum values without quotes.
- const enumValues = type.defaultValue.slice(10, -3).replace(/'/g, '');
- return (
- <span>
- {`{`}
- {'\t'}
- {enumValues}
- <br />
- {`}`}
- </span>
- );
-};
diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx
deleted file mode 100644
index 424fe9ecf..000000000
--- a/packages/react-docs/src/components/doc_reference.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import {
- colors,
- constants as sharedConstants,
- EtherscanLinkSuffixes,
- HeaderSizes,
- Link,
- MarkdownSection,
- Networks,
- SectionHeader,
- utils as sharedUtils,
-} from '@0x/react-shared';
-import {
- DocAgnosticFormat,
- Event,
- ExternalExportToLink,
- Property,
- SolidityMethod,
- TypeDefinitionByName,
- TypescriptFunction,
- TypescriptMethod,
-} from '@0x/types';
-import * as _ from 'lodash';
-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';
-import { Comment } from './comment';
-import { EventDefinition } from './event_definition';
-import { PropertyBlock } from './property_block';
-import { SignatureBlock } from './signature_block';
-import { TypeDefinition } from './type_definition';
-
-const networkNameToColor: { [network: string]: string } = {
- [Networks.Kovan]: colors.purple,
- [Networks.Ropsten]: colors.red,
- [Networks.Mainnet]: colors.turquois,
- [Networks.Rinkeby]: colors.darkYellow,
-};
-
-export interface DocReferenceProps {
- selectedVersion: string;
- availableVersions: string[];
- docsInfo: DocsInfo;
- sourceUrl: string;
- docAgnosticFormat?: DocAgnosticFormat;
-}
-
-export interface DocReferenceState {}
-
-export class DocReference extends React.Component<DocReferenceProps, DocReferenceState> {
- public componentDidUpdate(prevProps: DocReferenceProps, _prevState: DocReferenceState): void {
- if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
- const hash = window.location.hash.slice(1);
- sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
- }
- }
- public render(): React.ReactNode {
- const subMenus = _.values(this.props.docsInfo.markdownMenu);
- const orderedSectionNames = _.flatten(subMenus);
-
- const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat);
- const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName));
-
- return (
- <div>
- <div id={sharedConstants.SCROLL_TOP_ID} />
- {renderedSections}
- </div>
- );
- }
- private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode {
- const markdownVersions = _.keys(this.props.docsInfo.sectionNameToMarkdownByVersion);
- const eligibleVersions = _.filter(markdownVersions, mdVersion => {
- return semver.lte(mdVersion, this.props.selectedVersion);
- });
- if (_.isEmpty(eligibleVersions)) {
- throw new Error(
- `No eligible markdown sections found for ${this.props.docsInfo.displayName} version ${
- this.props.selectedVersion
- }.`,
- );
- }
- const sortedEligibleVersions = eligibleVersions.sort(semver.rcompare.bind(semver));
- const closestVersion = sortedEligibleVersions[0];
- const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdownByVersion[closestVersion][sectionName];
- if (!_.isUndefined(markdownFileIfExists)) {
- // Special-case replace the `introduction` sectionName with the package name
- const isIntroductionSection = sectionName === 'introduction';
- const headerSize = isIntroductionSection ? HeaderSizes.H1 : HeaderSizes.H3;
- return (
- <MarkdownSection
- key={`markdown-section-${sectionName}`}
- sectionName={sectionName}
- headerSize={headerSize}
- markdownContent={markdownFileIfExists}
- alternativeSectionTitle={isIntroductionSection ? this.props.docsInfo.displayName : undefined}
- />
- );
- }
-
- const docSection = this.props.docAgnosticFormat[sectionName];
- if (_.isUndefined(docSection)) {
- return null;
- }
-
- const isExportedFunctionSection =
- docSection.functions.length === 1 &&
- _.isEmpty(docSection.types) &&
- _.isEmpty(docSection.methods) &&
- _.isEmpty(docSection.constructors) &&
- _.isEmpty(docSection.properties) &&
- _.isEmpty(docSection.events);
-
- const sortedTypes = _.sortBy(docSection.types, 'name');
- const typeDefs = _.map(sortedTypes, (customType, i) => {
- return (
- <TypeDefinition
- sectionName={sectionName}
- key={`type-${customType.name}-${i}`}
- customType={customType}
- docsInfo={this.props.docsInfo}
- typeDefinitionByName={typeDefinitionByName}
- isInPopover={false}
- />
- );
- });
-
- const sortedProperties = _.sortBy(docSection.properties, 'name');
- const propertyDefs = _.map(
- sortedProperties,
- this._renderProperty.bind(this, sectionName, typeDefinitionByName),
- );
-
- const sortedMethods = _.sortBy(docSection.methods, 'name');
- const methodDefs = _.map(sortedMethods, method => {
- return this._renderSignatureBlocks(method, sectionName, typeDefinitionByName);
- });
-
- const sortedFunctions = _.sortBy(docSection.functions, 'name');
- const functionDefs = _.map(sortedFunctions, func => {
- return this._renderSignatureBlocks(func, sectionName, typeDefinitionByName);
- });
-
- const sortedEvents = _.sortBy(docSection.events, 'name');
- const eventDefs = _.map(sortedEvents, (event: Event, i: number) => {
- return (
- <EventDefinition
- key={`event-${event.name}-${i}`}
- event={event}
- sectionName={sectionName}
- docsInfo={this.props.docsInfo}
- />
- );
- });
- const headerStyle: React.CSSProperties = {
- fontWeight: 100,
- };
- return (
- <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
- <div className="flex pb2">
- <div style={{ marginRight: 7 }}>
- <SectionHeader sectionName={sectionName} />
- </div>
- {this._renderNetworkBadgesIfExists(sectionName)}
- </div>
- {docSection.comment && <Comment comment={docSection.comment} />}
- {!_.isEmpty(docSection.constructors) && (
- <div>
- <h2 style={headerStyle}>Constructor</h2>
- {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
- </div>
- )}
- {!_.isEmpty(docSection.properties) && (
- <div>
- <h2 style={headerStyle}>Properties</h2>
- <div>{propertyDefs}</div>
- </div>
- )}
- {!_.isEmpty(docSection.methods) && (
- <div>
- <h2 style={headerStyle}>Methods</h2>
- <div>{methodDefs}</div>
- </div>
- )}
- {!_.isEmpty(docSection.functions) && (
- <div>
- {!isExportedFunctionSection && (
- <div style={{ ...headerStyle, fontSize: '1.5em' }}>Functions</div>
- )}
- <div>{functionDefs}</div>
- </div>
- )}
- {!_.isUndefined(docSection.events) && docSection.events.length > 0 && (
- <div>
- <h2 style={headerStyle}>Events</h2>
- <div>{eventDefs}</div>
- </div>
- )}
- {!_.isUndefined(docSection.externalExportToLink) &&
- this._renderExternalExports(docSection.externalExportToLink)}
- {!_.isUndefined(typeDefs) && typeDefs.length > 0 && (
- <div>
- <div>{typeDefs}</div>
- </div>
- )}
- <div
- style={{
- width: '100%',
- height: 1,
- backgroundColor: colors.grey300,
- marginTop: 32,
- marginBottom: 12,
- }}
- />
- </div>
- );
- }
- private _renderExternalExports(externalExportToLink: ExternalExportToLink): React.ReactNode {
- const externalExports = _.map(externalExportToLink, (link: string, exportName: string) => {
- return (
- <div className="pt2" key={`external-export-${exportName}`}>
- <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
- {`import { `}
- <Link to={link} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}>
- {exportName}
- </Link>
- {` } from '${this.props.docsInfo.packageName}'`}
- </code>
- </div>
- );
- });
- return <div>{externalExports}</div>;
- }
- private _renderNetworkBadgesIfExists(sectionName: string): React.ReactNode {
- if (this.props.docsInfo.type !== SupportedDocJson.SolDoc) {
- return null;
- }
-
- const networkToAddressByContractName = this.props.docsInfo.contractsByVersionByNetworkId[
- this.props.selectedVersion
- ];
- const badges = _.map(
- networkToAddressByContractName,
- (addressByContractName: AddressByContractName, networkName: string) => {
- const contractAddress = addressByContractName[sectionName];
- if (_.isUndefined(contractAddress)) {
- return null;
- }
- const linkIfExists = sharedUtils.getEtherScanLinkIfExists(
- contractAddress,
- sharedConstants.NETWORK_ID_BY_NAME[networkName],
- EtherscanLinkSuffixes.Address,
- );
- return (
- <div style={{ marginTop: 8 }}>
- <Link
- key={`badge-${networkName}-${sectionName}`}
- to={linkIfExists}
- shouldOpenInNewTab={true}
- fontColor={colors.white}
- >
- <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} />
- </Link>
- </div>
- );
- },
- );
- return badges;
- }
- private _renderConstructors(
- constructors: SolidityMethod[] | TypescriptMethod[],
- sectionName: string,
- typeDefinitionByName: TypeDefinitionByName,
- ): React.ReactNode {
- const constructorDefs = _.map(constructors, constructor => {
- return this._renderSignatureBlocks(constructor, sectionName, typeDefinitionByName);
- });
- return <div>{constructorDefs}</div>;
- }
- private _renderProperty(
- sectionName: string,
- typeDefinitionByName: TypeDefinitionByName,
- property: Property,
- ): React.ReactNode {
- return (
- <PropertyBlock
- key={`property-${property.name}-${property.type.name}`}
- property={property}
- sectionName={sectionName}
- docsInfo={this.props.docsInfo}
- sourceUrl={this.props.sourceUrl}
- selectedVersion={this.props.selectedVersion}
- typeDefinitionByName={typeDefinitionByName}
- />
- );
- }
- private _renderSignatureBlocks(
- method: SolidityMethod | TypescriptFunction | TypescriptMethod,
- sectionName: string,
- typeDefinitionByName: TypeDefinitionByName,
- ): React.ReactNode {
- return (
- <SignatureBlock
- key={`method-${method.name}-${sectionName}`}
- sectionName={sectionName}
- method={method}
- typeDefinitionByName={typeDefinitionByName}
- libraryVersion={this.props.selectedVersion}
- docsInfo={this.props.docsInfo}
- sourceUrl={this.props.sourceUrl}
- />
- );
- }
-}
diff --git a/packages/react-docs/src/components/enum.tsx b/packages/react-docs/src/components/enum.tsx
deleted file mode 100644
index dee866790..000000000
--- a/packages/react-docs/src/components/enum.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { EnumValue } from '../types';
-
-export interface EnumProps {
- values: EnumValue[];
-}
-
-export const Enum = (props: EnumProps) => {
- const values = _.map(props.values, value => {
- const defaultValueIfAny = !_.isUndefined(value.defaultValue) ? ` = ${value.defaultValue}` : '';
- return `\n\t${value.name}${defaultValueIfAny},`;
- });
- return (
- <span>
- {`{`}
- {values}
- <br />
- {`}`}
- </span>
- );
-};
diff --git a/packages/react-docs/src/components/event_definition.tsx b/packages/react-docs/src/components/event_definition.tsx
deleted file mode 100644
index b76769788..000000000
--- a/packages/react-docs/src/components/event_definition.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { AnchorTitle, colors, HeaderSizes } from '@0x/react-shared';
-import { Event, EventArg } from '@0x/types';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { DocsInfo } from '../docs_info';
-
-import { Type } from './type';
-
-export interface EventDefinitionProps {
- event: Event;
- sectionName: string;
- docsInfo: DocsInfo;
-}
-
-export interface EventDefinitionState {
- shouldShowAnchor: boolean;
-}
-
-export class EventDefinition extends React.Component<EventDefinitionProps, EventDefinitionState> {
- constructor(props: EventDefinitionProps) {
- super(props);
- this.state = {
- shouldShowAnchor: false,
- };
- }
- public render(): React.ReactNode {
- const event = this.props.event;
- const id = `${this.props.sectionName}-${event.name}`;
- return (
- <div
- id={id}
- className="pb2"
- style={{ overflow: 'hidden', width: '100%' }}
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- <AnchorTitle
- headerSize={HeaderSizes.H3}
- title={`Event ${event.name}`}
- id={id}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- <div style={{ fontSize: 16 }}>
- <pre>
- <code className="hljs solidity">{this._renderEventCode()}</code>
- </pre>
- </div>
- </div>
- );
- }
- private _renderEventCode(): React.ReactNode {
- 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}
- isInPopover={false}
- />
- );
- return (
- <span key={`eventArg-${eventArg.name}`}>
- {eventArg.name}
- {eventArg.isIndexed ? indexed : ''}: {type},
- </span>
- );
- });
- const argList = _.reduce(eventArgs, (prev: React.ReactNode, curr: React.ReactNode) => {
- return [prev, '\n\t', curr];
- });
- return (
- <span>
- {`{`}
- <br />
- {'\t'}
- {argList}
- <br />
- {`}`}
- </span>
- );
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean): void {
- this.setState({
- shouldShowAnchor,
- });
- }
-}
diff --git a/packages/react-docs/src/components/interface.tsx b/packages/react-docs/src/components/interface.tsx
deleted file mode 100644
index 06896159f..000000000
--- a/packages/react-docs/src/components/interface.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { CustomType, TypeDefinitionByName } from '@0x/types';
-
-import { DocsInfo } from '../docs_info';
-
-import { Signature } from './signature';
-import { Type } from './type';
-
-const defaultProps = {};
-
-export interface InterfaceProps {
- type: CustomType;
- sectionName: string;
- docsInfo: DocsInfo;
- typeDefinitionByName: TypeDefinitionByName;
- isInPopover: boolean;
-}
-
-export const Interface: React.SFC<InterfaceProps> = (props: InterfaceProps): any => {
- const type = props.type;
- const properties = _.map(type.children, (property, i) => {
- return (
- <span key={`property-${property.name}-${property.type}-${type.name}-${i}`}>
- {property.name}:{' '}
- {property.type && !_.isUndefined(property.type.method) ? (
- <Signature
- name={property.type.method.name}
- returnType={property.type.method.returnType}
- parameters={property.type.method.parameters}
- typeParameter={property.type.method.typeParameter}
- sectionName={props.sectionName}
- shouldHideMethodName={true}
- shouldUseArrowSyntax={true}
- docsInfo={props.docsInfo}
- typeDefinitionByName={props.typeDefinitionByName}
- isInPopover={props.isInPopover}
- />
- ) : (
- <Type
- type={property.type}
- sectionName={props.sectionName}
- docsInfo={props.docsInfo}
- typeDefinitionByName={props.typeDefinitionByName}
- isInPopover={props.isInPopover}
- />
- )}
- ,
- </span>
- );
- });
- const hasIndexSignature = !_.isUndefined(type.indexSignature);
- if (hasIndexSignature) {
- const is = type.indexSignature;
- const param = (
- <span key={`indexSigParams-${is.keyName}-${is.keyType}-${type.name}`}>
- {is.keyName}:{' '}
- <Type
- type={is.keyType}
- sectionName={props.sectionName}
- docsInfo={props.docsInfo}
- typeDefinitionByName={props.typeDefinitionByName}
- isInPopover={props.isInPopover}
- />
- </span>
- );
- properties.push(
- <span key={`indexSignature-${type.name}-${is.keyType.name}`}>
- [{param}]: {is.valueName},
- </span>,
- );
- }
- const propertyList = _.reduce(properties, (prev: React.ReactNode, curr: React.ReactNode) => {
- return [prev, '\n\t', curr];
- });
- return (
- <span>
- {`{`}
- <br />
- {'\t'}
- {propertyList}
- <br />
- {`}`}
- </span>
- );
-};
-
-Interface.defaultProps = defaultProps;
diff --git a/packages/react-docs/src/components/property_block.tsx b/packages/react-docs/src/components/property_block.tsx
deleted file mode 100644
index d0bd84802..000000000
--- a/packages/react-docs/src/components/property_block.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { AnchorTitle, HeaderSizes } from '@0x/react-shared';
-import { Property, TypeDefinitionByName } from '@0x/types';
-import * as React from 'react';
-
-import { DocsInfo } from '../docs_info';
-import { constants } from '../utils/constants';
-
-import { Comment } from './comment';
-import { SourceLink } from './source_link';
-import { Type } from './type';
-
-export interface PropertyBlockProps {
- property: Property;
- sectionName: string;
- docsInfo: DocsInfo;
- sourceUrl: string;
- selectedVersion: string;
- typeDefinitionByName: TypeDefinitionByName;
-}
-
-export interface PropertyBlockState {
- shouldShowAnchor: boolean;
-}
-
-export class PropertyBlock extends React.Component<PropertyBlockProps, PropertyBlockState> {
- constructor(props: PropertyBlockProps) {
- super(props);
- this.state = {
- shouldShowAnchor: false,
- };
- }
- public render(): React.ReactNode {
- const property = this.props.property;
- const sectionName = this.props.sectionName;
- return (
- <div
- id={`${this.props.sectionName}-${property.name}`}
- className="pb4 pt2"
- key={`property-${property.name}-${property.type.name}`}
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- <div className="pb2" style={{ lineHeight: 1.3 }}>
- <AnchorTitle
- headerSize={HeaderSizes.H3}
- title={property.name}
- id={`${sectionName}-${property.name}`}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- </div>
- <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
- {(property as any).callPath}
- {property.name}:{' '}
- <Type
- type={property.type}
- sectionName={sectionName}
- docsInfo={this.props.docsInfo}
- typeDefinitionByName={this.props.typeDefinitionByName}
- isInPopover={false}
- />
- </code>
- {property.source && (
- <SourceLink
- version={this.props.selectedVersion}
- source={property.source}
- sourceUrl={this.props.sourceUrl}
- />
- )}
- {property.comment && <Comment comment={property.comment} className="py2" />}
- </div>
- );
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean): void {
- this.setState({
- shouldShowAnchor,
- });
- }
-}
diff --git a/packages/react-docs/src/components/signature.tsx b/packages/react-docs/src/components/signature.tsx
deleted file mode 100644
index c229999b1..000000000
--- a/packages/react-docs/src/components/signature.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Parameter, Type as TypeDef, TypeDefinitionByName, TypeParameter } from '@0x/types';
-
-import { DocsInfo } from '../docs_info';
-
-import { Type } from './type';
-
-export interface SignatureProps {
- name: string;
- returnType: TypeDef;
- parameters: Parameter[];
- sectionName: string;
- shouldHideMethodName?: boolean;
- shouldUseArrowSyntax?: boolean;
- typeDefinitionByName?: TypeDefinitionByName;
- typeParameter?: TypeParameter;
- 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) => {
- const sectionName = props.sectionName;
- const parameters = renderParameters(
- props.parameters,
- props.docsInfo,
- sectionName,
- props.isInPopover,
- props.name,
- props.typeDefinitionByName,
- );
- const paramStringArray: any[] = [];
- // HACK: For now we don't put params on newlines if there are less then 2 of them.
- // Ideally we would check the character length of the resulting method signature and
- // if it exceeds the available space, put params on their own lines.
- const hasMoreThenTwoParams = parameters.length > 2;
- _.each(parameters, (param: React.ReactNode, i: number) => {
- const finalParam = hasMoreThenTwoParams ? (
- <span className="pl2" key={`param-${i}`}>
- {param}
- </span>
- ) : (
- param
- );
- paramStringArray.push(finalParam);
- const comma = hasMoreThenTwoParams ? (
- <span key={`param-comma-${i}`}>
- , <br />
- </span>
- ) : (
- ', '
- );
- paramStringArray.push(comma);
- });
- if (!hasMoreThenTwoParams) {
- paramStringArray.pop();
- }
- const methodName = props.shouldHideMethodName ? '' : props.name;
- const typeParameterIfExists = _.isUndefined(props.typeParameter)
- ? undefined
- : renderTypeParameter(
- props.typeParameter,
- props.docsInfo,
- sectionName,
- props.isInPopover,
- props.typeDefinitionByName,
- );
- return (
- <span style={{ fontSize: 15 }}>
- {props.callPath}
- {props.isFallback ? '' : methodName}
- {typeParameterIfExists}({hasMoreThenTwoParams && <br />}
- {paramStringArray})
- {props.returnType && (
- <span>
- {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '}
- <Type
- type={props.returnType}
- sectionName={sectionName}
- typeDefinitionByName={props.typeDefinitionByName}
- docsInfo={props.docsInfo}
- isInPopover={props.isInPopover}
- />
- </span>
- )}
- </span>
- );
-};
-
-Signature.defaultProps = defaultProps;
-
-function renderParameters(
- parameters: Parameter[],
- docsInfo: DocsInfo,
- sectionName: string,
- isInPopover: boolean,
- name: string,
- typeDefinitionByName?: TypeDefinitionByName,
-): React.ReactNode[] {
- const params = _.map(parameters, (p: Parameter, i: number) => {
- const isOptional = p.isOptional;
- const hasDefaultValue = !_.isUndefined(p.defaultValue);
- const type = (
- <Type
- type={p.type}
- sectionName={sectionName}
- typeDefinitionByName={typeDefinitionByName}
- docsInfo={docsInfo}
- isInPopover={isInPopover}
- />
- );
- return (
- <span key={`param-${JSON.stringify(p.type)}-${name}-${i}`}>
- {!_.isEmpty(p.name) && (
- <span>
- {p.name}
- {isOptional && '?'}:{' '}
- </span>
- )}
- {type}
- {hasDefaultValue && ` = ${p.defaultValue}`}
- </span>
- );
- });
- return params;
-}
-
-function renderTypeParameter(
- typeParameter: TypeParameter,
- docsInfo: DocsInfo,
- sectionName: string,
- isInPopover: boolean,
- typeDefinitionByName?: TypeDefinitionByName,
-): React.ReactNode {
- const typeParam = (
- <span>
- {`<${typeParameter.name}`}
- {!_.isUndefined(typeParameter.type) && (
- <span>
- {' extends '}
- <Type
- type={typeParameter.type}
- sectionName={sectionName}
- typeDefinitionByName={typeDefinitionByName}
- docsInfo={docsInfo}
- isInPopover={isInPopover}
- />
- </span>
- )}
- {`>`}
- </span>
- );
- return typeParam;
-}
diff --git a/packages/react-docs/src/components/signature_block.tsx b/packages/react-docs/src/components/signature_block.tsx
deleted file mode 100644
index 3189d86cf..000000000
--- a/packages/react-docs/src/components/signature_block.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { AnchorTitle, colors, HeaderSizes, Styles } from '@0x/react-shared';
-import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptFunction, TypescriptMethod } from '@0x/types';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { DocsInfo } from '../docs_info';
-import { constants } from '../utils/constants';
-
-import { Comment } from './comment';
-import { Signature } from './signature';
-import { SourceLink } from './source_link';
-
-export interface SignatureBlockProps {
- method: SolidityMethod | TypescriptFunction | TypescriptMethod;
- sectionName: string;
- libraryVersion: string;
- typeDefinitionByName: TypeDefinitionByName;
- docsInfo: DocsInfo;
- sourceUrl: string;
-}
-
-export interface SignatureBlockState {
- shouldShowAnchor: boolean;
-}
-
-const styles: Styles = {
- chip: {
- fontSize: 13,
- color: colors.white,
- height: 11,
- borderRadius: 14,
- lineHeight: 0.9,
- },
-};
-
-export class SignatureBlock extends React.Component<SignatureBlockProps, SignatureBlockState> {
- constructor(props: SignatureBlockProps) {
- super(props);
- this.state = {
- shouldShowAnchor: false,
- };
- }
- 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}`}
- style={{ overflow: 'hidden', width: '100%' }}
- className="pb4 pt2"
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- {!(method as TypescriptMethod).isConstructor && (
- <div className="flex pb2 pt2">
- {(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={isFallback ? '' : method.name}
- id={`${this.props.sectionName}-${method.name}`}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- </div>
- </div>
- )}
- <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
- <Signature
- name={method.name}
- returnType={method.returnType}
- parameters={method.parameters}
- typeParameter={(method as TypescriptMethod).typeParameter}
- callPath={(method as TypescriptMethod).callPath}
- sectionName={this.props.sectionName}
- typeDefinitionByName={this.props.typeDefinitionByName}
- docsInfo={this.props.docsInfo}
- isInPopover={false}
- isFallback={isFallback}
- />
- </code>
- {(method as TypescriptMethod).source && (
- <SourceLink
- version={this.props.libraryVersion}
- source={(method as TypescriptMethod).source}
- sourceUrl={this.props.sourceUrl}
- />
- )}
- {method.comment && <Comment comment={method.comment} className="py2" />}
- {method.parameters && !_.isEmpty(method.parameters) && hasExclusivelyNamedParams && (
- <div>
- <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}>
- ARGUMENTS
- </h4>
- {this._renderParameterDescriptions(method.parameters, method.name)}
- </div>
- )}
- {method.returnComment && (
- <div className="pt1 comment">
- <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}>
- RETURNS
- </h4>
- <Comment comment={method.returnComment} />
- </div>
- )}
- </div>
- );
- }
- private _renderChip(text: string, backgroundColor: string = colors.lightBlueA700): React.ReactNode {
- return (
- <div className="p1 mr1" style={{ ...styles.chip, backgroundColor }}>
- {text}
- </div>
- );
- }
- 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}-${name}-${i}`}
- className="flex pb1 mb2"
- style={{ borderBottom: '1px solid #f0f4f7' }}
- >
- <div className="pl2 col lg-col-4 md-col-4 sm-col-12 col-12">
- <div
- className="bold"
- style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
- >
- {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" style={{ paddingLeft: 5 }}>
- {parameter.comment && <Comment comment={parameter.comment} />}
- </div>
- </div>
- );
- });
- return descriptions;
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean): void {
- this.setState({
- shouldShowAnchor,
- });
- }
-}
diff --git a/packages/react-docs/src/components/source_link.tsx b/packages/react-docs/src/components/source_link.tsx
deleted file mode 100644
index 6459824c2..000000000
--- a/packages/react-docs/src/components/source_link.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { colors, Link } from '@0x/react-shared';
-import { Source } from '@0x/types';
-import * as React from 'react';
-
-export interface SourceLinkProps {
- source: Source;
- sourceUrl: string;
- version: string;
-}
-
-export const SourceLink = (props: SourceLinkProps) => {
- const src = props.source;
- const sourceCodeUrl = `${props.sourceUrl}/${src.fileName}#L${src.line}`;
- return (
- <div className="pt2" style={{ fontSize: 14 }}>
- <Link to={sourceCodeUrl} shouldOpenInNewTab={true} textDecoration="underline" fontColor={colors.grey}>
- {'Source'}
- </Link>
- </div>
- );
-};
diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx
deleted file mode 100644
index 894c3f560..000000000
--- a/packages/react-docs/src/components/type.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import { colors, Link, utils as sharedUtils } from '@0x/react-shared';
-import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0x/types';
-import { errorUtils } from '@0x/utils';
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as ReactTooltip from 'react-tooltip';
-
-import { DocsInfo } from '../docs_info';
-
-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 = {};
-
-export interface TypeProps {
- type: TypeDef;
- docsInfo: DocsInfo;
- sectionName: string;
- typeDefinitionByName?: TypeDefinitionByName;
- isInPopover: boolean;
-}
-
-// The return type needs to be `any` here so that we can recursively define <Type /> components within
-// <Type /> components (e.g when rendering the union type).
-export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
- const type = props.type;
- const isReference = type.typeDocType === TypeDocTypes.Reference;
- const isArray = type.typeDocType === TypeDocTypes.Array;
- let typeNameColor = 'inherit';
- let typeName: string | React.ReactNode;
- let typeArgs: React.ReactNode[] = [];
- switch (type.typeDocType) {
- case TypeDocTypes.Intrinsic:
- case TypeDocTypes.Unknown:
- typeName = type.name;
- typeNameColor = colors.orange;
- break;
-
- case TypeDocTypes.Reference:
- typeName = type.name;
- typeArgs = _.map(type.typeArguments, (arg: TypeDef) => {
- if (arg.typeDocType === TypeDocTypes.Array) {
- const key = `type-${arg.elementType.name}-${arg.elementType.typeDocType}`;
- return (
- <span>
- <Type
- key={key}
- type={arg}
- sectionName={props.sectionName}
- typeDefinitionByName={props.typeDefinitionByName}
- docsInfo={props.docsInfo}
- isInPopover={props.isInPopover}
- />
- []
- </span>
- );
- } else {
- const subType = (
- <Type
- key={`type-${arg.name}-${arg.value}-${arg.typeDocType}`}
- type={arg}
- sectionName={props.sectionName}
- typeDefinitionByName={props.typeDefinitionByName}
- docsInfo={props.docsInfo}
- isInPopover={props.isInPopover}
- />
- );
- return subType;
- }
- });
- break;
-
- case TypeDocTypes.StringLiteral:
- typeName = `'${type.value}'`;
- typeNameColor = colors.green;
- break;
-
- case TypeDocTypes.Array:
- typeName = type.elementType.name;
- if (_.includes(basicJsTypes, typeName) || _.includes(basicSolidityTypes, typeName)) {
- typeNameColor = colors.orange;
- }
- break;
-
- case TypeDocTypes.Union:
- const unionTypes = _.map(type.types, t => {
- return (
- <Type
- key={`type-${t.name}-${t.value}-${t.typeDocType}`}
- type={t}
- sectionName={props.sectionName}
- typeDefinitionByName={props.typeDefinitionByName}
- docsInfo={props.docsInfo}
- isInPopover={props.isInPopover}
- />
- );
- });
- typeName = _.reduce(unionTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
- return [prev, '|', curr];
- });
- break;
-
- case TypeDocTypes.Reflection:
- if (!_.isUndefined(type.method)) {
- typeName = (
- <Signature
- name={type.method.name}
- returnType={type.method.returnType}
- parameters={type.method.parameters}
- typeParameter={type.method.typeParameter}
- sectionName={props.sectionName}
- shouldHideMethodName={true}
- shouldUseArrowSyntax={true}
- docsInfo={props.docsInfo}
- typeDefinitionByName={props.typeDefinitionByName}
- isInPopover={props.isInPopover}
- />
- );
- } else if (!_.isUndefined(type.indexSignature)) {
- const is = type.indexSignature;
- const param = (
- <span key={`indexSigParams-${is.keyName}-${is.keyType}-${type.name}`}>
- {is.keyName}:{' '}
- <Type
- type={is.keyType}
- sectionName={props.sectionName}
- docsInfo={props.docsInfo}
- typeDefinitionByName={props.typeDefinitionByName}
- isInPopover={props.isInPopover}
- />
- </span>
- );
- typeName = (
- <span key={`indexSignature-${type.name}-${is.keyType.name}`}>
- {'{'}[{param}]: {is.valueName}
- {'}'}
- </span>
- );
- } else {
- throw new Error(`Unrecognized Reflection type that isn't a Method nor an Index Signature`);
- }
-
- break;
-
- case TypeDocTypes.TypeParameter:
- typeName = type.name;
- break;
-
- case TypeDocTypes.Intersection:
- const intersectionsTypes = _.map(type.types, t => {
- return (
- <Type
- key={`type-${t.name}-${t.value}-${t.typeDocType}`}
- type={t}
- sectionName={props.sectionName}
- typeDefinitionByName={props.typeDefinitionByName}
- docsInfo={props.docsInfo}
- isInPopover={props.isInPopover}
- />
- );
- });
- typeName = _.reduce(intersectionsTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
- return [prev, '&', curr];
- });
- break;
-
- case TypeDocTypes.Tuple:
- const tupleTypes = _.map(type.tupleElements, (t, i) => {
- return (
- <Type
- key={`type-tuple-${t.name}-${t.typeDocType}-${i}`}
- type={t}
- sectionName={props.sectionName}
- typeDefinitionByName={props.typeDefinitionByName}
- docsInfo={props.docsInfo}
- isInPopover={props.isInPopover}
- />
- );
- });
- typeName = (
- <div>
- [
- {_.reduce(tupleTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
- return [prev, ', ', curr];
- })}
- ]
- </div>
- );
- break;
-
- default:
- throw errorUtils.spawnSwitchErr('type.typeDocType', type.typeDocType);
- }
- // HACK: Normalize BigNumber to simply BigNumber. For some reason the type
- // name is unpredictably one or the other.
- if (typeName === 'BigNumber') {
- typeName = 'BigNumber';
- }
- const commaSeparatedTypeArgs = _.reduce(typeArgs, (prev: React.ReactNode, curr: React.ReactNode) => {
- return [prev, ', ', curr];
- });
-
- const isExportedClassReference = !!props.type.isExportedClassReference;
- const typeNameUrlIfExists = !_.isUndefined(props.type.externalLink) ? props.type.externalLink : undefined;
- if (!_.isUndefined(typeNameUrlIfExists)) {
- typeName = props.isInPopover ? (
- <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
- ) : (
- <Link to={typeNameUrlIfExists} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}>
- {typeName}
- </Link>
- );
- } else if (
- (isReference || isArray) &&
- ((props.typeDefinitionByName && props.typeDefinitionByName[typeName as string]) || isExportedClassReference)
- ) {
- const id = Math.random().toString();
- const typeDefinitionAnchorId = isExportedClassReference
- ? props.type.name
- : `${props.docsInfo.typeSectionName}-${typeName}`;
- typeName = (
- <span>
- {sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? (
- <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
- ) : (
- <Link to={typeDefinitionAnchorId}>
- <span
- data-tip={true}
- data-for={id}
- style={{
- color: colors.lightBlueA700,
- cursor: 'pointer',
- display: 'inline-block',
- }}
- >
- {typeName}
- <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip">
- <TypeDefinition
- sectionName={props.sectionName}
- customType={props.typeDefinitionByName[typeName as string]}
- shouldAddId={false}
- docsInfo={props.docsInfo}
- typeDefinitionByName={props.typeDefinitionByName}
- isInPopover={true}
- />
- </ReactTooltip>
- </span>
- </Link>
- )}
- </span>
- );
- }
- return (
- <span>
- <span style={{ color: typeNameColor }}>{typeName}</span>
- {isArray && '[]'}
- {!_.isEmpty(typeArgs) && (
- <span>
- {'<'}
- {commaSeparatedTypeArgs}
- {'>'}
- </span>
- )}
- </span>
- );
-};
-
-Type.defaultProps = defaultProps;
diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx
deleted file mode 100644
index a1fde51da..000000000
--- a/packages/react-docs/src/components/type_definition.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { AnchorTitle, colors, HeaderSizes } from '@0x/react-shared';
-import { CustomType, CustomTypeChild, TypeDefinitionByName, TypeDocTypes } from '@0x/types';
-import { errorUtils } from '@0x/utils';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { DocsInfo } from '../docs_info';
-import { KindString, SupportedDocJson } from '../types';
-import { constants } from '../utils/constants';
-
-import { Comment } from './comment';
-import { CustomEnum } from './custom_enum';
-import { Enum } from './enum';
-import { Interface } from './interface';
-import { Signature } from './signature';
-import { Type } from './type';
-
-export interface TypeDefinitionProps {
- sectionName: string;
- customType: CustomType;
- shouldAddId?: boolean;
- docsInfo: DocsInfo;
- typeDefinitionByName?: TypeDefinitionByName;
- isInPopover?: boolean;
-}
-
-export interface TypeDefinitionState {
- shouldShowAnchor: boolean;
-}
-
-export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDefinitionState> {
- public static defaultProps: Partial<TypeDefinitionProps> = {
- shouldAddId: true,
- isInPopover: false,
- };
- constructor(props: TypeDefinitionProps) {
- super(props);
- this.state = {
- shouldShowAnchor: false,
- };
- }
- public render(): React.ReactNode {
- const customType = this.props.customType;
-
- let typePrefix: string;
- let codeSnippet: React.ReactNode;
- switch (customType.kindString) {
- case KindString.Interface:
- typePrefix = this.props.docsInfo.type === SupportedDocJson.SolDoc ? 'Struct' : 'Interface';
- codeSnippet = (
- <Interface
- type={customType}
- sectionName={this.props.sectionName}
- docsInfo={this.props.docsInfo}
- typeDefinitionByName={this.props.typeDefinitionByName}
- isInPopover={this.props.isInPopover}
- />
- );
- break;
-
- case KindString.Variable:
- typePrefix = 'Enum';
- codeSnippet = <CustomEnum type={customType} />;
- break;
-
- case KindString.Enumeration:
- typePrefix = 'Enum';
- const enumValues = _.map(customType.children, (c: CustomTypeChild) => {
- return {
- name: c.name,
- defaultValue: c.defaultValue,
- };
- });
- 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 ? (
- <Type
- type={customType.type}
- sectionName={this.props.sectionName}
- docsInfo={this.props.docsInfo}
- typeDefinitionByName={this.props.typeDefinitionByName}
- isInPopover={this.props.isInPopover}
- />
- ) : (
- <Signature
- name={customType.type.method.name}
- returnType={customType.type.method.returnType}
- parameters={customType.type.method.parameters}
- typeParameter={customType.type.method.typeParameter}
- callPath={customType.type.method.callPath}
- sectionName={this.props.sectionName}
- shouldHideMethodName={true}
- shouldUseArrowSyntax={true}
- docsInfo={this.props.docsInfo}
- typeDefinitionByName={this.props.typeDefinitionByName}
- isInPopover={this.props.isInPopover}
- />
- )}
- </span>
- );
- break;
-
- default:
- throw errorUtils.spawnSwitchErr('type.kindString', customType.kindString);
- }
-
- const typeDefinitionAnchorId = `${this.props.sectionName}-${customType.name}`;
- return (
- <div
- id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
- className="pb2 pt2"
- style={{ overflow: 'hidden', width: '100%' }}
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- <AnchorTitle
- headerSize={HeaderSizes.H3}
- title={`${typePrefix} ${customType.name}`}
- id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
- shouldShowAnchor={this.state.shouldShowAnchor}
- isDisabled={this.props.isInPopover}
- />
- <div style={{ fontSize: 16 }}>
- <pre>
- <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
- {codeSnippet}
- </code>
- </pre>
- </div>
- <div style={{ maxWidth: 620 }}>
- {customType.comment && (
- <Comment comment={this._formatComment(customType.comment)} className="py2" />
- )}
- </div>
- </div>
- );
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean): void {
- this.setState({
- shouldShowAnchor,
- });
- }
- /**
- * Type definition comments usually describe the type as a whole or the individual
- * properties within the type. Since TypeDoc just treats these comments simply as
- * one paragraph, we do some additional formatting so that we can display individual
- * property comments on their own lines.
- * E.g:
- * Interface SomeConfig
- * {
- * networkId: number,
- * derivationPath: string,
- * }
- * networkId: The ethereum networkId to set as the chainId from EIP155
- * derivationPath: Initial derivation path to use e.g 44'/60'/0'
- *
- * Each property description should be on a new line.
- */
- private _formatComment(text: string): string {
- const NEW_LINE_REGEX = /(\r\n|\n|\r)/gm;
- const sanitizedText = text.replace(NEW_LINE_REGEX, ' ');
- const PROPERTY_DESCRIPTION_DIVIDER = ':';
- if (!_.includes(sanitizedText, PROPERTY_DESCRIPTION_DIVIDER)) {
- return sanitizedText;
- }
- const segments = sanitizedText.split(PROPERTY_DESCRIPTION_DIVIDER);
- _.each(segments, (s: string, i: number) => {
- if (i === 0) {
- segments[i] = `**${s}**`;
- return;
- } else if (i === segments.length - 1) {
- return;
- }
- const words = s.split(' ');
- const property = words[words.length - 1];
- words[words.length - 1] = `\n\n**${property}**`;
- segments[i] = words.join(' ');
- });
- const final = segments.join(PROPERTY_DESCRIPTION_DIVIDER);
- return final;
- }
-}
generated by cgit v1.2.3 (git 2.25.1) at 2024-08-25 02:42:05 +0800