aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-docs
diff options
context:
space:
mode:
Diffstat (limited to 'packages/react-docs')
-rw-r--r--packages/react-docs/src/components/doc_reference.tsx (renamed from packages/react-docs/src/components/documentation.tsx)120
-rw-r--r--packages/react-docs/src/docs_info.ts59
-rw-r--r--packages/react-docs/src/index.ts2
-rw-r--r--packages/react-docs/src/utils/typedoc_utils.ts10
4 files changed, 47 insertions, 144 deletions
diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/doc_reference.tsx
index 6a08d50e0..38ec818db 100644
--- a/packages/react-docs/src/components/documentation.tsx
+++ b/packages/react-docs/src/components/doc_reference.tsx
@@ -4,10 +4,8 @@ import {
EtherscanLinkSuffixes,
Link,
MarkdownSection,
- NestedSidebarMenu,
Networks,
SectionHeader,
- Styles,
utils as sharedUtils,
} from '@0xproject/react-shared';
import {
@@ -21,7 +19,6 @@ import {
TypescriptMethod,
} from '@0xproject/types';
import * as _ from 'lodash';
-import CircularProgress from 'material-ui/CircularProgress';
import * as React from 'react';
import * as semver from 'semver';
@@ -43,26 +40,20 @@ const networkNameToColor: { [network: string]: string } = {
[Networks.Rinkeby]: colors.darkYellow,
};
-export interface DocumentationProps {
+export interface DocReferenceProps {
selectedVersion: string;
availableVersions: string[];
docsInfo: DocsInfo;
sourceUrl: string;
- onVersionSelected: (semver: string) => void;
docAgnosticFormat?: DocAgnosticFormat;
- sidebarHeader?: React.ReactNode;
- topBarHeight?: number;
}
-export interface DocumentationState {
+export interface DocReferenceState {
isHoveringSidebar: boolean;
}
-export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
- public static defaultProps: Partial<DocumentationProps> = {
- topBarHeight: 0,
- };
- constructor(props: DocumentationProps) {
+export class DocReference extends React.Component<DocReferenceProps, DocReferenceState> {
+ constructor(props: DocReferenceProps) {
super(props);
this.state = {
isHoveringSidebar: false,
@@ -74,112 +65,25 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
public componentWillUnmount(): void {
window.removeEventListener('hashchange', this._onHashChanged.bind(this), false);
}
- public componentDidUpdate(prevProps: DocumentationProps, _prevState: DocumentationState): void {
+ 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 styles: Styles = {
- mainContainers: {
- position: 'absolute',
- top: 1,
- left: 0,
- bottom: 0,
- right: 0,
- overflowX: 'hidden',
- overflowY: 'scroll',
- minHeight: `calc(100vh - ${this.props.topBarHeight}px)`,
- WebkitOverflowScrolling: 'touch',
- },
- menuContainer: {
- borderColor: colors.grey300,
- maxWidth: 330,
- marginLeft: 20,
- },
- };
- const sectionNameToLinks = this.props.docsInfo.getSectionNameToLinks();
- const subsectionNameToLinks = this.props.docsInfo.getSubsectionNameToLinks(this.props.docAgnosticFormat);
- return (
- <div>
- {_.isUndefined(this.props.docAgnosticFormat) ? (
- this._renderLoading(styles.mainContainers)
- ) : (
- <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}>
- <div
- className="mx-auto max-width-4 flex"
- style={{ color: colors.grey800, height: `calc(100vh - ${this.props.topBarHeight}px)` }}
- >
- <div
- className="relative sm-hide xs-hide"
- style={{ width: '36%', height: `calc(100vh - ${this.props.topBarHeight}px)` }}
- >
- <div
- className="border-right absolute"
- style={{
- ...styles.menuContainer,
- ...styles.mainContainers,
- height: `calc(100vh - ${this.props.topBarHeight}px)`,
- overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
- }}
- onMouseEnter={this._onSidebarHover.bind(this)}
- onMouseLeave={this._onSidebarHoverOff.bind(this)}
- >
- <NestedSidebarMenu
- selectedVersion={this.props.selectedVersion}
- versions={this.props.availableVersions}
- sidebarHeader={this.props.sidebarHeader}
- sectionNameToLinks={sectionNameToLinks}
- subsectionNameToLinks={subsectionNameToLinks}
- onVersionSelected={this.props.onVersionSelected}
- />
- </div>
- </div>
- <div
- className="relative col lg-col-9 md-col-9 sm-col-12 col-12"
- style={{ backgroundColor: colors.white }}
- >
- <div
- id={sharedConstants.SCROLL_CONTAINER_ID}
- style={styles.mainContainers}
- className="absolute px1"
- >
- <div id={sharedConstants.SCROLL_TOP_ID} />
- {this._renderDocumentation()}
- </div>
- </div>
- </div>
- </div>
- )}
- </div>
- );
- }
- private _renderLoading(mainContainersStyles: React.CSSProperties): React.ReactNode {
- return (
- <div className="col col-12" style={mainContainersStyles}>
- <div
- className="relative sm-px2 sm-pt2 sm-m1"
- 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>
- </div>
- );
- }
- private _renderDocumentation(): React.ReactNode {
- const subMenus = _.values(this.props.docsInfo.menu);
+ 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 renderedSections;
+ 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);
diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts
index 549106c77..d75a1676c 100644
--- a/packages/react-docs/src/docs_info.ts
+++ b/packages/react-docs/src/docs_info.ts
@@ -17,7 +17,7 @@ export class DocsInfo {
public displayName: string;
public packageName: string;
public packageUrl: string;
- public menu: DocsMenu;
+ public markdownMenu: DocsMenu;
public typeSectionName: string;
public sections: SectionsMap;
public sectionNameToMarkdownByVersion: SectionNameToMarkdownByVersion;
@@ -25,7 +25,7 @@ export class DocsInfo {
constructor(config: DocsInfoConfig) {
this.id = config.id;
this.type = config.type;
- this.menu = config.markdownMenu;
+ this.markdownMenu = config.markdownMenu;
this.displayName = config.displayName;
this.packageName = config.packageName;
this.packageUrl = config.packageUrl;
@@ -34,10 +34,31 @@ export class DocsInfo {
this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion;
this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId;
}
- public getSubsectionNameToLinks(docAgnosticFormat?: DocAgnosticFormat): ObjectMap<ALink[]> {
- const subsectionNameToLinks: ObjectMap<ALink[]> = {};
+ public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } {
+ if (_.isUndefined(docAgnosticFormat[this.typeSectionName])) {
+ return {};
+ }
+
+ const section = docAgnosticFormat[this.typeSectionName];
+ const typeDefinitionByName = _.keyBy(section.types, 'name') as any;
+ return typeDefinitionByName;
+ }
+ public getSectionNameToLinks(docAgnosticFormat: DocAgnosticFormat): ObjectMap<ALink[]> {
+ const sectionNameToLinks: ObjectMap<ALink[]> = {};
+ _.each(this.markdownMenu, (linkTitles, sectionName) => {
+ sectionNameToLinks[sectionName] = [];
+ _.each(linkTitles, linkTitle => {
+ const to = sharedUtils.getIdFromName(linkTitle);
+ const links = sectionNameToLinks[sectionName];
+ links.push({
+ title: linkTitle,
+ to,
+ });
+ });
+ });
+
if (_.isUndefined(docAgnosticFormat)) {
- return subsectionNameToLinks;
+ return sectionNameToLinks;
}
const docSections = _.keys(this.sections);
@@ -64,7 +85,7 @@ export class DocsInfo {
title: typeName,
};
});
- subsectionNameToLinks[sectionName] = typeLinks;
+ sectionNameToLinks[sectionName] = typeLinks;
} else if (isExportedFunctionSection) {
// Noop so that we don't have the method listed underneath itself.
} else {
@@ -88,33 +109,9 @@ export class DocsInfo {
};
});
- subsectionNameToLinks[sectionName] = links;
+ sectionNameToLinks[sectionName] = links;
}
});
- return subsectionNameToLinks;
- }
- public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } {
- if (_.isUndefined(docAgnosticFormat[this.typeSectionName])) {
- return {};
- }
-
- const section = docAgnosticFormat[this.typeSectionName];
- const typeDefinitionByName = _.keyBy(section.types, 'name') as any;
- return typeDefinitionByName;
- }
- public getSectionNameToLinks(): ObjectMap<ALink[]> {
- const sectionNameToLinks: ObjectMap<ALink[]> = {};
- _.each(this.menu, (linkTitles, sectionName) => {
- sectionNameToLinks[sectionName] = [];
- _.each(linkTitles, linkTitle => {
- const to = sharedUtils.getIdFromName(linkTitle);
- const links = sectionNameToLinks[sectionName];
- links.push({
- title: linkTitle,
- to,
- });
- });
- });
return sectionNameToLinks;
}
}
diff --git a/packages/react-docs/src/index.ts b/packages/react-docs/src/index.ts
index f9382940c..504091b34 100644
--- a/packages/react-docs/src/index.ts
+++ b/packages/react-docs/src/index.ts
@@ -5,7 +5,7 @@ export { DocAgnosticFormat, GeneratedDocJson } from '@0xproject/types';
export { Badge } from './components/badge';
export { Comment } from './components/comment';
export { CustomEnum } from './components/custom_enum';
-export { Documentation } from './components/documentation';
+export { DocReference } from './components/doc_reference';
export { Enum } from './components/enum';
export { EventDefinition } from './components/event_definition';
export { Interface } from './components/interface';
diff --git a/packages/react-docs/src/utils/typedoc_utils.ts b/packages/react-docs/src/utils/typedoc_utils.ts
index 19605d497..05c9dae55 100644
--- a/packages/react-docs/src/utils/typedoc_utils.ts
+++ b/packages/react-docs/src/utils/typedoc_utils.ts
@@ -95,7 +95,9 @@ export class TypeDocUtils {
if (!_.isEmpty(this._externalExportToLink)) {
this._docsInfo.sections[constants.EXTERNAL_EXPORTS_SECTION_NAME] = constants.EXTERNAL_EXPORTS_SECTION_NAME;
- this._docsInfo.menu[constants.EXTERNAL_EXPORTS_SECTION_NAME] = [constants.EXTERNAL_EXPORTS_SECTION_NAME];
+ this._docsInfo.markdownMenu[constants.EXTERNAL_EXPORTS_SECTION_NAME] = [
+ constants.EXTERNAL_EXPORTS_SECTION_NAME,
+ ];
const docSection: DocSection = {
comment: 'This package also re-exports some third-party libraries for your convenience.',
constructors: [],
@@ -119,7 +121,7 @@ export class TypeDocUtils {
case KindString.ObjectLiteral: {
sectionName = child.name;
this._docsInfo.sections[sectionName] = sectionName;
- this._docsInfo.menu[sectionName] = [sectionName];
+ this._docsInfo.markdownMenu[sectionName] = [sectionName];
const entities = child.children;
const commentObj = child.comment;
const sectionComment = !_.isUndefined(commentObj) ? commentObj.shortText : '';
@@ -136,7 +138,7 @@ export class TypeDocUtils {
case KindString.Function: {
sectionName = child.name;
this._docsInfo.sections[sectionName] = sectionName;
- this._docsInfo.menu[sectionName] = [sectionName];
+ this._docsInfo.markdownMenu[sectionName] = [sectionName];
const entities = [child];
const commentObj = child.comment;
const SectionComment = !_.isUndefined(commentObj) ? commentObj.shortText : '';
@@ -158,7 +160,7 @@ export class TypeDocUtils {
});
if (!_.isEmpty(typeEntities)) {
this._docsInfo.sections[constants.TYPES_SECTION_NAME] = constants.TYPES_SECTION_NAME;
- this._docsInfo.menu[constants.TYPES_SECTION_NAME] = [constants.TYPES_SECTION_NAME];
+ this._docsInfo.markdownMenu[constants.TYPES_SECTION_NAME] = [constants.TYPES_SECTION_NAME];
const docSection = this._convertEntitiesToDocSection(typeEntities, constants.TYPES_SECTION_NAME);
docAgnosticFormat[constants.TYPES_SECTION_NAME] = docSection;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-16 03:19:25 +0800