import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; import { VersionDropDown } from 'ts/pages/shared/version_drop_down'; import { MenuSubsectionsBySection, Styles } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; interface NestedSidebarMenuProps { topLevelMenu: { [topLevel: string]: string[] }; menuSubsectionsBySection: MenuSubsectionsBySection; title: string; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; selectedVersion?: string; versions?: string[]; } interface NestedSidebarMenuState {} const styles: Styles = { menuItemWithHeaders: { minHeight: 0, }, menuItemWithoutHeaders: { minHeight: 48, }, menuItemInnerDivWithHeaders: { color: colors.grey800, fontSize: 14, lineHeight: 2, padding: 0, }, }; const titleToIcon: { [title: string]: string } = { '0x.js': 'zeroExJs.png', '0x Connect': 'connect.png', '0x Smart Contracts': 'contracts.png', Wiki: 'wiki.png', }; export class NestedSidebarMenu extends React.Component { public static defaultProps: Partial = { shouldDisplaySectionHeaders: true, onMenuItemClick: _.noop, }; public render() { const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { const finalSectionName = sectionName.replace(/-/g, ' '); if (this.props.shouldDisplaySectionHeaders) { const id = utils.getIdFromName(sectionName); return (
{finalSectionName.toUpperCase()}
{this._renderMenuItems(menuItems)}
); } else { return
{this._renderMenuItems(menuItems)}
; } }); return (
{this._renderEmblem()} {!_.isUndefined(this.props.versions) && !_.isUndefined(this.props.selectedVersion) && ( )}
{navigation}
); } private _renderEmblem() { return (
0x
docs
|
{this.props.title}
); } private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { const menuItemStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemWithHeaders : styles.menuItemWithoutHeaders; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; const menuItems = _.map(menuItemNames, menuItemName => { const id = utils.getIdFromName(menuItemName); return (
{menuItemName} {this._renderMenuItemSubsections(menuItemName)}
); }); return menuItems; } private _renderMenuItemSubsections(menuItemName: string): React.ReactNode { if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) { return null; } return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]); } private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode { return ( ); } private _onMenuItemClick(name: string): void { const id = utils.getIdFromName(name); utils.setUrlHash(id); this.props.onMenuItemClick(); } }