diff options
Diffstat (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx')
| -rw-r--r-- | packages/react-shared/src/components/nested_sidebar_menu.tsx | 66 |
1 files changed, 26 insertions, 40 deletions
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 9933f3b38..2242349df 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -1,18 +1,19 @@ +import { ObjectMap } from '@0xproject/types'; 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 { ALink, LinkType, Styles } from '../types'; import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; +import { Link } from './Link'; import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { - topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection?: MenuSubsectionsBySection; + sectionNameToLinks: ObjectMap<ALink[]>; + subsectionNameToLinks?: ObjectMap<ALink[]>; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,10 +45,10 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N shouldDisplaySectionHeaders: true, onMenuItemClick: _.noop.bind(_), shouldReformatMenuItemNames: true, - menuSubsectionsBySection: {}, + subsectionNameToLinks: {}, }; public render(): React.ReactNode { - const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { + const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); if (this.props.shouldDisplaySectionHeaders) { // tslint:disable-next-line:no-unused-variable @@ -56,11 +57,11 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N <div style={{ fontWeight: 'bold', fontSize: 15, letterSpacing: 0.5 }} className="py1"> {finalSectionName.toUpperCase()} </div> - {this._renderMenuItems(menuItems)} + {this._renderMenuItems(links)} </div> ); } else { - return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>; + return <div key={`section-${sectionName}`}>{this._renderMenuItems(links)}</div>; } }); const maxWidthWithScrollbar = 307; @@ -82,26 +83,18 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N </div> ); } - private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { + private _renderMenuItems(links: ALink[]): React.ReactNode[] { const menuItemStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemWithHeaders : styles.menuItemWithoutHeaders; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; - const menuItems = _.map(menuItemNames, menuItemName => { + const menuItems = _.map(links, link => { const finalMenuItemName = this.props.shouldReformatMenuItemNames - ? utils.convertDashesToSpaces(menuItemName) - : menuItemName; - const id = utils.getIdFromName(menuItemName); + ? utils.convertDashesToSpaces(link.title) + : link.title; return ( - <div key={menuItemName}> - <ScrollLink - key={`menuItem-${menuItemName}`} - to={id} - offset={0} - hashSpy={true} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} - > + <div key={`menuItem-${finalMenuItemName}`}> + <Link to={link.to} type={LinkType.ReactScroll} containerId={constants.DOCS_CONTAINER_ID}> <MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles} @@ -115,8 +108,8 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N {finalMenuItemName} </span> </MenuItem> - </ScrollLink> - {this._renderMenuItemSubsections(menuItemName)} + </Link> + {this._renderMenuItemSubsections(link.title)} </div> ); }); @@ -124,28 +117,21 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N } private _renderMenuItemSubsections(menuItemName: string): React.ReactNode { if ( - _.isUndefined(this.props.menuSubsectionsBySection) || - _.isUndefined(this.props.menuSubsectionsBySection[menuItemName]) + _.isUndefined(this.props.subsectionNameToLinks) || + _.isUndefined(this.props.subsectionNameToLinks[menuItemName]) ) { return null; } - return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]); + return this._renderMenuSubsectionsBySection(menuItemName, this.props.subsectionNameToLinks[menuItemName]); } - private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode { + private _renderMenuSubsectionsBySection(menuItemName: string, links: ALink[]): React.ReactNode { return ( <ul style={{ margin: 0, listStyleType: 'none', paddingLeft: 0 }} key={menuItemName}> - {_.map(entityNames, entityName => { - const name = `${menuItemName}-${entityName}`; - const id = utils.getIdFromName(name); + {_.map(links, link => { + const name = `${menuItemName}-${link.title}`; return ( <li key={`menuSubsectionItem-${name}`}> - <ScrollLink - to={id} - offset={0} - hashSpy={true} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} - > + <Link to={link.to} type={LinkType.ReactScroll} containerId={constants.DOCS_CONTAINER_ID}> <MenuItem style={{ minHeight: 35 }} innerDivStyle={{ @@ -155,9 +141,9 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N }} onClick={this._onMenuItemClick.bind(this)} > - {entityName} + {link.title} </MenuItem> - </ScrollLink> + </Link> </li> ); })} |