import { colors, constants as sharedConstants, EtherscanLinkSuffixes, MarkdownSection, MenuSubsectionsBySection, NestedSidebarMenu, Networks, SectionHeader, Styles, utils as sharedUtils, } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import { scroller } from 'react-scroll'; import { DocsInfo } from '../docs_info'; import { AddressByContractName, DocAgnosticFormat, DoxityDocObj, Event, Property, SolidityMethod, SupportedDocJson, TypeDefinitionByName, TypescriptFunction, TypescriptMethod, } from '../types'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; 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 { 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 DocumentationProps { selectedVersion: string; availableVersions: string[]; docsInfo: DocsInfo; sourceUrl: string; onVersionSelected: (semver: string) => void; docAgnosticFormat?: DocAgnosticFormat; sidebarHeader?: React.ReactNode; topBarHeight?: number; } export interface DocumentationState { isHoveringSidebar: boolean; } export class Documentation extends React.Component { public static defaultProps: Partial = { topBarHeight: 0, }; constructor(props: DocumentationProps) { super(props); this.state = { isHoveringSidebar: false, }; } public componentDidMount() { window.addEventListener('hashchange', this._onHashChanged.bind(this), false); } public componentWillUnmount() { window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); } public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) { if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) { const hash = window.location.hash.slice(1); sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); } } public render() { const styles: Styles = { mainContainers: { position: 'absolute', top: 1, left: 0, bottom: 0, right: 0, overflowZ: 'hidden', overflowY: 'scroll', minHeight: `calc(100vh - ${this.props.topBarHeight}px)`, WebkitOverflowScrolling: 'touch', }, menuContainer: { borderColor: colors.grey300, maxWidth: 330, marginLeft: 20, }, }; const menuSubsectionsBySection = this.props.docsInfo.getMenuSubsectionsBySection(this.props.docAgnosticFormat); return (
{_.isUndefined(this.props.docAgnosticFormat) ? ( this._renderLoading(styles.mainContainers) ) : (
{this._renderDocumentation()}
)}
); } private _renderLoading(mainContainersStyles: React.CSSProperties) { return (
Loading documentation...
); } private _renderDocumentation(): React.ReactNode { const subMenus = _.values(this.props.docsInfo.getMenu()); const orderedSectionNames = _.flatten(subMenus); const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat); const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName)); return renderedSections; } private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode { const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdown[sectionName]; if (!_.isUndefined(markdownFileIfExists)) { return ( ); } const docSection = this.props.docAgnosticFormat[sectionName]; if (_.isUndefined(docSection)) { return null; } const sortedTypes = _.sortBy(docSection.types, 'name'); const typeDefs = _.map(sortedTypes, customType => { return ( ); }); const sortedProperties = _.sortBy(docSection.properties, 'name'); const propertyDefs = _.map(sortedProperties, this._renderProperty.bind(this, sectionName)); 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 ( ); }); const headerStyle: React.CSSProperties = { fontWeight: 100, }; return (
{this._renderNetworkBadgesIfExists(sectionName)}
{docSection.comment && } {!_.isEmpty(docSection.constructors) && this.props.docsInfo.isVisibleConstructor(sectionName) && (

Constructor

{this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
)} {!_.isEmpty(docSection.properties) && (

Properties

{propertyDefs}
)} {!_.isEmpty(docSection.methods) && (

Methods

{methodDefs}
)} {!_.isEmpty(docSection.functions) && (

Functions

{functionDefs}
)} {!_.isUndefined(docSection.events) && docSection.events.length > 0 && (

Events

{eventDefs}
)} {!_.isUndefined(typeDefs) && typeDefs.length > 0 && (
{typeDefs}
)}
); } private _renderNetworkBadgesIfExists(sectionName: string) { if (this.props.docsInfo.type !== SupportedDocJson.Doxity) { 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 ( ); }, ); 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
{constructorDefs}
; } private _renderProperty(sectionName: string, property: Property): React.ReactNode { return (
{property.name}: {property.source && ( )} {property.comment && }
); } private _renderSignatureBlocks( method: SolidityMethod | TypescriptFunction | TypescriptMethod, sectionName: string, typeDefinitionByName: TypeDefinitionByName, ): React.ReactNode { return ( ); } private _onSidebarHover(event: React.FormEvent) { this.setState({ isHoveringSidebar: true, }); } private _onSidebarHoverOff() { this.setState({ isHoveringSidebar: false, }); } private _onHashChanged(event: any) { const hash = window.location.hash.slice(1); sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); } }