import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import {Link} from 'react-router-dom'; import ReactTooltip = require('react-tooltip'); import {PortalMenu} from 'ts/components/portal_menu'; import {TopBarMenuItem} from 'ts/components/top_bar_menu_item'; import {DropDownMenuItem} from 'ts/components/ui/drop_down_menu_item'; import {Identicon} from 'ts/components/ui/identicon'; import {DocsInfo} from 'ts/pages/documentation/docs_info'; import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu'; import {DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths} from 'ts/types'; import {colors} from 'ts/utils/colors'; import {constants} from 'ts/utils/constants'; interface TopBarProps { userAddress?: string; blockchainIsLoaded: boolean; location: Location; docsVersion?: string; availableDocVersions?: string[]; menu?: DocsMenu; menuSubsectionsBySection?: MenuSubsectionsBySection; shouldFullWidth?: boolean; docsInfo?: DocsInfo; style?: React.CSSProperties; isNightVersion?: boolean; } interface TopBarState { isDrawerOpen: boolean; } const styles: Styles = { address: { marginRight: 12, overflow: 'hidden', paddingTop: 4, textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: 70, }, topBar: { backgroundcolor: colors.white, height: 59, width: '100%', position: 'fixed', top: 0, zIndex: 1100, 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, }, }; export class TopBar extends React.Component { public static defaultProps: Partial = { shouldFullWidth: false, style: {}, isNightVersion: false, }; constructor(props: TopBarProps) { super(props); this.state = { isDrawerOpen: false, }; } public render() { const isNightVersion = this.props.isNightVersion; const isFullWidthPage = this.props.shouldFullWidth; const parentClassNames = `flex mx-auto ${isFullWidthPage ? 'pl2' : 'max-width-4'}`; const developerSectionMenuItems = [ , , , , , , ]; const bottomBorderStyle = this.shouldDisplayBottomBar() ? styles.bottomBar : {}; const fullWidthClasses = isFullWidthPage ? 'pr4' : ''; const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; const menuClasses = `col col-${isFullWidthPage ? '4' : '5'} ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`; const menuIconStyle = { fontSize: 25, color: isNightVersion ? 'white' : 'black', cursor: 'pointer', paddingTop: 16, }; return (
{!this.isViewingPortal() &&
} {this.props.blockchainIsLoaded && !_.isEmpty(this.props.userAddress) &&
{this.renderUser()}
} {!this.isViewingPortal() &&
}
{this.renderDrawer()}
); } private renderDrawer() { return ( {this.renderPortalMenu()} {this.renderDocsMenu()} {this.renderWiki()}
Website
Home Wiki {!this.isViewing0xjsDocs() && 0x.js Docs } {!this.isViewingConnectDocs() && 0x Connect Docs } {!this.isViewingSmartContractsDocs() && Smart Contract Docs } {!this.isViewingPortal() && Portal DApp } Whitepaper About Blog FAQ
); } private renderDocsMenu() { if (!this.isViewing0xjsDocs() && !this.isViewingSmartContractsDocs() && !this.isViewingConnectDocs() || _.isUndefined(this.props.menu)) { return; } const sectionTitle = `${this.props.docsInfo.displayName} Docs`; return (
{sectionTitle}
); } private renderWiki() { if (!this.isViewingWiki()) { return; } return (
0x Protocol Wiki
); } private renderPortalMenu() { if (!this.isViewingPortal()) { return; } return (
Portal DApp
); } private renderUser() { const userAddress = this.props.userAddress; const identiconDiameter = 26; return (
{!_.isEmpty(userAddress) ? userAddress : ''}
{userAddress}
); } private onMenuButtonClick() { this.setState({ isDrawerOpen: !this.state.isDrawerOpen, }); } private isViewingPortal() { return _.includes(this.props.location.pathname, WebsitePaths.Portal); } private isViewingFAQ() { return _.includes(this.props.location.pathname, WebsitePaths.FAQ); } private isViewing0xjsDocs() { return _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs); } private isViewingConnectDocs() { return _.includes(this.props.location.pathname, WebsitePaths.Connect); } private isViewingSmartContractsDocs() { return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts); } private isViewingWiki() { return _.includes(this.props.location.pathname, WebsitePaths.Wiki); } private shouldDisplayBottomBar() { return this.isViewingWiki() || this.isViewing0xjsDocs() || this.isViewingFAQ() || this.isViewingSmartContractsDocs() || this.isViewingConnectDocs(); } }