import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; import { MenuSubsectionsBySection, Styles } from '../types'; import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { topLevelMenu: { [topLevel: string]: string[] }; menuSubsectionsBySection: MenuSubsectionsBySection; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; selectedVersion?: string; versions?: string[]; onVersionSelected?: (semver: string) => void; } export interface NestedSidebarMenuState {} const styles: Styles = { menuItemWithHeaders: { minHeight: 0, }, menuItemWithoutHeaders: { minHeight: 48, }, menuItemInnerDivWithHeaders: { color: colors.grey800, fontSize: 14, lineHeight: 2, padding: 0, }, }; 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)}
; } }); const maxWidthWithScrollbar = 307; return (
{this.props.sidebarHeader} {!_.isUndefined(this.props.versions) && !_.isUndefined(this.props.selectedVersion) && !_.isUndefined(this.props.onVersionSelected) && (
)}
{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(name: string): void { const id = utils.getIdFromName(name); utils.setUrlHash(id); if (!_.isUndefined(this.props.onMenuItemClick)) { this.props.onMenuItemClick(); } } }