aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-shared/src/components/nested_sidebar_menu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx')
-rw-r--r--packages/react-shared/src/components/nested_sidebar_menu.tsx66
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>
);
})}