import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; import { colors, MenuSubsectionsBySection, NestedSidebarMenu, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import Menu from 'material-ui/Menu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu'; import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { DropDown } from 'ts/components/ui/drop_down'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { zIndex } from 'ts/utils/style'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; export enum TopBarDisplayType { Default, Expanded, } export interface TopBarProps { userAddress?: string; networkId?: number; injectedProviderName?: string; providerType?: ProviderType; onToggleLedgerDialog?: () => void; blockchain?: Blockchain; dispatcher?: Dispatcher; blockchainIsLoaded: boolean; location: Location; translate: Translate; docsVersion?: string; availableDocVersions?: string[]; menu?: DocsMenu; menuSubsectionsBySection?: MenuSubsectionsBySection; displayType?: TopBarDisplayType; docsInfo?: DocsInfo; style?: React.CSSProperties; isNightVersion?: boolean; onVersionSelected?: (semver: string) => void; sidebarHeader?: React.ReactNode; } interface TopBarState { isDrawerOpen: boolean; } const styles: Styles = { topBar: { backgroundColor: colors.white, width: '100%', position: 'relative', top: 0, zIndex: zIndex.topBar, paddingBottom: 1, }, bottomBar: { boxShadow: 'rgba(0, 0, 0, 0.187647) 0px 1px 3px', }, menuItem: { fontSize: 14, color: colors.darkestGrey, paddingTop: 6, paddingBottom: 6, marginTop: 17, cursor: 'pointer', fontWeight: 400, }, }; const DEFAULT_HEIGHT = 59; const EXPANDED_HEIGHT = 75; export class TopBar extends React.Component { public static defaultProps: Partial = { displayType: TopBarDisplayType.Default, style: {}, isNightVersion: false, }; public static heightForDisplayType(displayType: TopBarDisplayType): number { const result = displayType === TopBarDisplayType.Expanded ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; return result + 1; } constructor(props: TopBarProps) { super(props); this.state = { isDrawerOpen: false, }; } public componentWillReceiveProps(nextProps: TopBarProps): void { if (nextProps.location.pathname !== this.props.location.pathname) { this.setState({ isDrawerOpen: false, }); } } public render(): React.ReactNode { const isNightVersion = this.props.isNightVersion; const isExpandedDisplayType = this.props.displayType === TopBarDisplayType.Expanded; const parentClassNames = `flex mx-auto ${isExpandedDisplayType ? 'pl3 py1' : 'max-width-4'}`; const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; const developerSectionMenuItems = [ , , , , , , , , , , , ]; const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {}; const fullWidthClasses = isExpandedDisplayType ? 'pr4' : ''; const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; const menuClasses = `col col-${ isExpandedDisplayType ? '4' : '5' } ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`; const menuIconStyle = { fontSize: 25, color: isNightVersion ? 'white' : 'black', cursor: 'pointer', paddingTop: 16, }; const hoverActiveNode = (
{this.props.translate.get(Key.Developers, Deco.Cap)}
); const popoverContent = {developerSectionMenuItems}; // TODO : Remove this once we ship portal v2 const shouldShowPortalV2Drawer = this._isViewingPortal() && utils.shouldShowPortalV2(); return (
{!this._isViewingPortal() && (
)} {this._isViewingPortal() && (
)}
{shouldShowPortalV2Drawer ? this._renderPortalV2Drawer() : this._renderDrawer()}
); } private _renderPortalV2Drawer(): React.ReactNode { return ( ); } private _renderDrawer(): React.ReactNode { return (
{this._renderPortalMenu()} {this._renderDocsMenu()} {this._renderWiki()}
{this.props.translate.get(Key.Website, Deco.Cap)}
{this.props.translate.get(Key.Home, Deco.Cap)} {this.props.translate.get(Key.Wiki, Deco.Cap)} {!this._isViewing0xjsDocs() && ( 0x.js {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingConnectDocs() && ( {this.props.translate.get(Key.Connect, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingSmartContractsDocs() && ( {this.props.translate.get(Key.SmartContract, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingWeb3WrapperDocs() && ( {this.props.translate.get(Key.Web3Wrapper, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingSolCompilerDocs() && ( {this.props.translate.get(Key.SolCompiler, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingJsonSchemasDocs() && ( {this.props.translate.get(Key.JsonSchemas, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingSolCovDocs() && ( {this.props.translate.get(Key.SolCov, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingSubprovidersDocs() && ( {this.props.translate.get(Key.Subproviders, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingPortal() && ( {this.props.translate.get(Key.PortalDApp, Deco.CapWords)} )} {this.props.translate.get(Key.Whitepaper, Deco.Cap)} {this.props.translate.get(Key.About, Deco.Cap)} {this.props.translate.get(Key.Blog, Deco.Cap)} {this.props.translate.get(Key.Faq, Deco.Cap)}
); } private _renderDocsMenu(): React.ReactNode { if ( (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingWeb3WrapperDocs() && !this._isViewingSolCompilerDocs() && !this._isViewingJsonSchemasDocs() && !this._isViewingSolCovDocs() && !this._isViewingSubprovidersDocs() && !this._isViewingConnectDocs()) || _.isUndefined(this.props.menu) ) { return undefined; } return (
); } private _renderWiki(): React.ReactNode { if (!this._isViewingWiki()) { return undefined; } return (
); } private _renderPortalMenu(): React.ReactNode { if (!this._isViewingPortal()) { return undefined; } return (
{this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
); } private _onMenuButtonClick(): void { this.setState({ isDrawerOpen: !this.state.isDrawerOpen, }); } private _isViewingPortal(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Portal); } private _isViewingFAQ(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.FAQ); } private _isViewing0xjsDocs(): boolean { return ( _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs) || _.includes(this.props.location.pathname, WebsiteLegacyPaths.ZeroExJs) ); } private _isViewingConnectDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Connect); } private _isViewingSmartContractsDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts); } private _isViewingWeb3WrapperDocs(): boolean { return ( _.includes(this.props.location.pathname, WebsitePaths.Web3Wrapper) || _.includes(this.props.location.pathname, WebsiteLegacyPaths.Web3Wrapper) ); } private _isViewingSolCompilerDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.SolCompiler); } private _isViewingJsonSchemasDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.JSONSchemas); } private _isViewingSolCovDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.SolCov); } private _isViewingSubprovidersDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Subproviders); } private _isViewingWiki(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Wiki); } private _shouldDisplayBottomBar(): boolean { return ( this._isViewingWiki() || this._isViewing0xjsDocs() || this._isViewingFAQ() || this._isViewingSmartContractsDocs() || this._isViewingWeb3WrapperDocs() || this._isViewingSolCompilerDocs() || this._isViewingJsonSchemasDocs() || this._isViewingSolCovDocs() || this._isViewingSubprovidersDocs() || this._isViewingConnectDocs() || this._isViewingPortal() ); } } // tslint:disable:max-file-line-count