aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-docs/src/components
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-08-01 23:36:37 +0800
committerFabio Berger <me@fabioberger.com>2018-08-01 23:36:37 +0800
commit3bdf6004ca74dd9eb380aa61cf9e69c47725116a (patch)
tree02065e5e202fdf959aa90c44eaeb25cf838540dd /packages/react-docs/src/components
parent11869122b4fe00c834347f9911985d7b2572bc9b (diff)
downloaddexon-sol-tools-3bdf6004ca74dd9eb380aa61cf9e69c47725116a.tar
dexon-sol-tools-3bdf6004ca74dd9eb380aa61cf9e69c47725116a.tar.gz
dexon-sol-tools-3bdf6004ca74dd9eb380aa61cf9e69c47725116a.tar.bz2
dexon-sol-tools-3bdf6004ca74dd9eb380aa61cf9e69c47725116a.tar.lz
dexon-sol-tools-3bdf6004ca74dd9eb380aa61cf9e69c47725116a.tar.xz
dexon-sol-tools-3bdf6004ca74dd9eb380aa61cf9e69c47725116a.tar.zst
dexon-sol-tools-3bdf6004ca74dd9eb380aa61cf9e69c47725116a.zip
Start refactoring docs to remove unnecessary configs given more concise TypeDoc JSON
Diffstat (limited to 'packages/react-docs/src/components')
-rw-r--r--packages/react-docs/src/components/documentation.tsx44
-rw-r--r--packages/react-docs/src/components/property_block.tsx70
-rw-r--r--packages/react-docs/src/components/type.tsx29
-rw-r--r--packages/react-docs/src/components/type_definition.tsx3
4 files changed, 97 insertions, 49 deletions
diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx
index ff33220d2..4f776b237 100644
--- a/packages/react-docs/src/components/documentation.tsx
+++ b/packages/react-docs/src/components/documentation.tsx
@@ -1,7 +1,9 @@
import {
+ AnchorTitle,
colors,
constants as sharedConstants,
EtherscanLinkSuffixes,
+ HeaderSizes,
MarkdownSection,
NestedSidebarMenu,
Networks,
@@ -32,8 +34,7 @@ import { Badge } from './badge';
import { Comment } from './comment';
import { EventDefinition } from './event_definition';
import { SignatureBlock } from './signature_block';
-import { SourceLink } from './source_link';
-import { Type } from './type';
+import { PropertyBlock } from './property_block';
import { TypeDefinition } from './type_definition';
const networkNameToColor: { [network: string]: string } = {
@@ -129,7 +130,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
selectedVersion={this.props.selectedVersion}
versions={this.props.availableVersions}
sidebarHeader={this.props.sidebarHeader}
- topLevelMenu={this.props.docsInfo.getMenu(this.props.selectedVersion)}
+ topLevelMenu={this.props.docsInfo.menu}
menuSubsectionsBySection={menuSubsectionsBySection}
onVersionSelected={this.props.onVersionSelected}
/>
@@ -172,7 +173,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
);
}
private _renderDocumentation(): React.ReactNode {
- const subMenus = _.values(this.props.docsInfo.getMenu());
+ const subMenus = _.values(this.props.docsInfo.menu);
const orderedSectionNames = _.flatten(subMenus);
const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat);
@@ -258,13 +259,12 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
{this._renderNetworkBadgesIfExists(sectionName)}
</div>
{docSection.comment && <Comment comment={docSection.comment} />}
- {!_.isEmpty(docSection.constructors) &&
- this.props.docsInfo.isVisibleConstructor(sectionName) && (
- <div>
- <h2 style={headerStyle}>Constructor</h2>
- {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
- </div>
- )}
+ {!_.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>
@@ -345,20 +345,14 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
}
private _renderProperty(sectionName: string, property: Property): React.ReactNode {
return (
- <div key={`property-${property.name}-${property.type.name}`} className="pb3">
- <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
- {property.name}:{' '}
- <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} />
- </code>
- {property.source && (
- <SourceLink
- version={this.props.selectedVersion}
- source={property.source}
- sourceUrl={this.props.sourceUrl}
- />
- )}
- {property.comment && <Comment comment={property.comment} className="py2" />}
- </div>
+ <PropertyBlock
+ key={`property-${property.name}-${property.type.name}`}
+ property={property}
+ sectionName={sectionName}
+ docsInfo={this.props.docsInfo}
+ sourceUrl={this.props.sourceUrl}
+ selectedVersion={this.props.selectedVersion}
+ />
);
}
private _renderSignatureBlocks(
diff --git a/packages/react-docs/src/components/property_block.tsx b/packages/react-docs/src/components/property_block.tsx
new file mode 100644
index 000000000..6e7f90c6c
--- /dev/null
+++ b/packages/react-docs/src/components/property_block.tsx
@@ -0,0 +1,70 @@
+import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
+import * as React from 'react';
+
+import { DocsInfo } from '../docs_info';
+import { Property } from '../types';
+import { constants } from '../utils/constants';
+
+import { Comment } from './comment';
+import { Type } from './type';
+import { SourceLink } from './source_link';
+
+export interface PropertyBlockProps {
+ property: Property;
+ sectionName: string;
+ docsInfo: DocsInfo;
+ sourceUrl: string;
+ selectedVersion: string;
+}
+
+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"
+ 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.name}:{' '}
+ <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} />
+ </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/type.tsx b/packages/react-docs/src/components/type.tsx
index 04fcd9998..3504be303 100644
--- a/packages/react-docs/src/components/type.tsx
+++ b/packages/react-docs/src/components/type.tsx
@@ -9,6 +9,7 @@ import { DocsInfo } from '../docs_info';
import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '../types';
import { Signature } from './signature';
+import { constants } from '../utils/constants';
import { TypeDefinition } from './type_definition';
export interface TypeProps {
@@ -43,7 +44,7 @@ export function Type(props: TypeProps): any {
<span>
<Type
key={key}
- type={arg.elementType}
+ type={arg}
sectionName={props.sectionName}
typeDefinitionByName={props.typeDefinitionByName}
docsInfo={props.docsInfo}
@@ -142,7 +143,6 @@ export function Type(props: TypeProps): any {
let typeNameUrlIfExists;
let typePrefixIfExists;
- let sectionNameIfExists;
if (!_.isUndefined(props.docsInfo.typeConfigs)) {
typeNameUrlIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToExternalLink)
? props.docsInfo.typeConfigs.typeNameToExternalLink[typeName as string]
@@ -150,9 +150,6 @@ export function Type(props: TypeProps): any {
typePrefixIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToPrefix)
? props.docsInfo.typeConfigs.typeNameToPrefix[typeName as string]
: undefined;
- sectionNameIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToDocSection)
- ? props.docsInfo.typeConfigs.typeNameToDocSection[typeName as string]
- : undefined;
}
if (!_.isUndefined(typeNameUrlIfExists)) {
typeName = (
@@ -168,16 +165,12 @@ export function Type(props: TypeProps): any {
);
} else if (
(isReference || isArray) &&
- (props.docsInfo.isPublicType(typeName as string) || !_.isUndefined(sectionNameIfExists))
+ props.typeDefinitionByName &&
+ props.typeDefinitionByName[typeName as string]
) {
const id = Math.random().toString();
- const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists)
- ? `${props.sectionName}-${typeName}`
- : sectionNameIfExists;
- let typeDefinition;
- if (props.typeDefinitionByName) {
- typeDefinition = props.typeDefinitionByName[typeName as string];
- }
+ const typeDefinitionAnchorId = `${constants.TYPES_SECTION_NAME}-${typeName}`;
+ let typeDefinition = props.typeDefinitionByName[typeName as string];
typeName = (
<ScrollLink
to={typeDefinitionAnchorId}
@@ -186,18 +179,12 @@ export function Type(props: TypeProps): any {
duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
containerId={sharedConstants.DOCS_CONTAINER_ID}
>
- {_.isUndefined(typeDefinition) || sharedUtils.isUserOnMobile() ? (
- <span
- onClick={sharedUtils.setUrlHash.bind(null, typeDefinitionAnchorId)}
- style={{ color: colors.lightBlueA700, cursor: 'pointer' }}
- >
- {typeName}
- </span>
+ {sharedUtils.isUserOnMobile() ? (
+ <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
) : (
<span
data-tip={true}
data-for={id}
- onClick={sharedUtils.setUrlHash.bind(null, typeDefinitionAnchorId)}
style={{
color: colors.lightBlueA700,
cursor: 'pointer',
diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx
index c4bd7359a..a23f27181 100644
--- a/packages/react-docs/src/components/type_definition.tsx
+++ b/packages/react-docs/src/components/type_definition.tsx
@@ -37,9 +37,6 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
}
public render(): React.ReactNode {
const customType = this.props.customType;
- if (!this.props.docsInfo.isPublicType(customType.name)) {
- return null; // no-op
- }
let typePrefix: string;
let codeSnippet: React.ReactNode;