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: 'relative', 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(): React.ReactNode { if ( (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingConnectDocs()) || _.isUndefined(this.props.menu) ) { return undefined; } const sectionTitle = `${this.props.docsInfo.displayName} Docs`; return (
{sectionTitle}
); } private _renderWiki(): React.ReactNode { if (!this._isViewingWiki()) { return undefined; } return (
0x Protocol Wiki
); } private _renderPortalMenu(): React.ReactNode { if (!this._isViewingPortal()) { return undefined; } 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() ); } }