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; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; selectedVersion?: string; versions?: string[]; docPath?: string; isSectionHeaderClickable?: boolean; } interface NestedSidebarMenuState {} const styles: Styles = { menuItemWithHeaders: { minHeight: 0, }, menuItemWithoutHeaders: { minHeight: 48, }, menuItemInnerDivWithHeaders: { lineHeight: 2, }, }; 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 (
{!_.isUndefined(this.props.versions) && !_.isUndefined(this.props.selectedVersion) && !_.isUndefined(this.props.docPath) && } {navigation}
); } 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(menuItemName: string): void { const id = utils.getIdFromName(menuItemName); utils.setUrlHash(id); this.props.onMenuItemClick(); } }