fix: scroll lag on doc reference and wiki pages by using react-scroll `spy` and only updating the sidebar menu items whose active state had changed

7 files changed, 111 insertions, 124 deletions

diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx
index 5a456109b..089e6e2ba 100644
--- a/packages/react-shared/src/components/link.tsx
+++ b/packages/react-shared/src/components/link.tsx
@@ -7,7 +7,7 @@ import * as validUrl from 'valid-url';
 import { LinkType } from '../types';
 import { constants } from '../utils/constants';
 
-interface LinkProps {
+interface BaseLinkProps {
     to: string;
     shouldOpenInNewTab?: boolean;
     className?: string;
@@ -18,6 +18,12 @@ interface LinkProps {
     fontColor?: string;
 }
 
+interface ScrollLinkProps extends BaseLinkProps {
+    onActivityChanged?: (isActive: boolean) => void;
+}
+
+type LinkProps = BaseLinkProps & ScrollLinkProps;
+
 export interface LinkState {}
 
 /**
@@ -103,11 +109,14 @@ export class Link extends React.Component<LinkProps, LinkState> {
                         <ScrollLink
                             to={this.props.to}
                             offset={0}
+                            spy={true}
                             hashSpy={true}
                             duration={constants.DOCS_SCROLL_DURATION_MS}
                             containerId={constants.SCROLL_CONTAINER_ID}
                             className={this.props.className}
                             style={styleWithDefault}
+                            onSetActive={this._onActivityChanged.bind(this, true)}
+                            onSetInactive={this._onActivityChanged.bind(this, false)}
                         >
                             <span onClick={this._onClickPropagateClickEventAroundScrollLink.bind(this)}>
                                 {this.props.children}
@@ -119,6 +128,11 @@ export class Link extends React.Component<LinkProps, LinkState> {
                 throw new Error(`Unrecognized LinkType: ${type}`);
         }
     }
+    private _onActivityChanged(isActive: boolean): void {
+        if (this.props.onActivityChanged) {
+            this.props.onActivityChanged(isActive);
+        }
+    }
     // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events.
     // We do however rely on these events being propagated in certain scenarios (e.g when the link
     // is within a dropdown we want to close upon being clicked). Because of this, we register the
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
deleted file mode 100644
index 196c91af1..000000000
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { ObjectMap } from '@0x/types';
-import * as _ from 'lodash';
-import MenuItem from 'material-ui/MenuItem';
-import * as React from 'react';
-
-import { ALink, Styles } from '../types';
-import { colors } from '../utils/colors';
-import { utils } from '../utils/utils';
-
-import { Link } from './link';
-
-export interface NestedSidebarMenuProps {
-    sectionNameToLinks: ObjectMap<ALink[]>;
-    sidebarHeader?: React.ReactNode;
-    shouldReformatMenuItemNames?: boolean;
-}
-
-export interface NestedSidebarMenuState {
-    scrolledToId?: string;
-}
-
-const styles: Styles = {
-    menuItem: {
-        minHeight: 0,
-        paddingLeft: 8,
-        borderRadius: 6,
-    },
-    menuItemInnerDiv: {
-        color: colors.grey800,
-        fontSize: 14,
-        lineHeight: 2,
-        padding: 0,
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-};
-
-export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
-    public static defaultProps: Partial<NestedSidebarMenuProps> = {
-        shouldReformatMenuItemNames: true,
-    };
-    private _urlIntervalCheckId: number | undefined = undefined;
-    constructor(props: NestedSidebarMenuProps) {
-        super(props);
-        this.state = {};
-    }
-    public componentDidMount(): void {
-        this._urlIntervalCheckId = window.setInterval(() => {
-            const scrollId = location.hash.slice(1);
-            if (scrollId !== this.state.scrolledToId) {
-                this.setState({
-                    scrolledToId: scrollId,
-                });
-            }
-        }, 200);
-    }
-    public componentWillUnmount(): void {
-        window.clearInterval(this._urlIntervalCheckId);
-    }
-    public render(): React.ReactNode {
-        const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
-            const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
-            // tslint:disable-next-line:no-unused-variable
-            return (
-                <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
-                    <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
-                        {finalSectionName.toUpperCase()}
-                    </div>
-                    {this._renderMenuItems(links)}
-                </div>
-            );
-        });
-        return (
-            <div>
-                {this.props.sidebarHeader}
-                <div>{navigation}</div>
-            </div>
-        );
-    }
-    private _renderMenuItems(links: ALink[]): React.ReactNode[] {
-        const scrolledToId = this.state.scrolledToId;
-        const menuItems = _.map(links, link => {
-            const finalMenuItemName = this.props.shouldReformatMenuItemNames
-                ? utils.convertDashesToSpaces(link.title)
-                : link.title;
-            let menuItemStyle = styles.menuItem;
-            let menuItemInnerDivStyle = styles.menuItemInnerDiv;
-            const isScrolledTo = link.to === scrolledToId;
-            if (isScrolledTo) {
-                menuItemStyle = {
-                    ...menuItemStyle,
-                    backgroundColor: colors.lightLinkBlue,
-                };
-                menuItemInnerDivStyle = {
-                    ...menuItemInnerDivStyle,
-                    color: colors.white,
-                    fontWeight: 'bold',
-                };
-            }
-            return (
-                <div key={`menuItem-${finalMenuItemName}`}>
-                    <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
-                        <MenuItem style={menuItemStyle} innerDivStyle={menuItemInnerDivStyle}>
-                            <span
-                                style={{
-                                    textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none',
-                                }}
-                            >
-                                {finalMenuItemName}
-                            </span>
-                        </MenuItem>
-                    </Link>
-                </div>
-            );
-        });
-        return menuItems;
-    }
-}
diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts
index e33b09f19..a693f2a36 100644
--- a/packages/react-shared/src/index.ts
+++ b/packages/react-shared/src/index.ts
@@ -2,7 +2,6 @@ export { AnchorTitle } from './components/anchor_title';
 export { MarkdownLinkBlock } from './components/markdown_link_block';
 export { MarkdownCodeBlock } from './components/markdown_code_block';
 export { MarkdownSection } from './components/markdown_section';
-export { NestedSidebarMenu } from './components/nested_sidebar_menu';
 export { SectionHeader } from './components/section_header';
 export { Link } from './components/link';
 
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
new file mode 100644
index 000000000..7de91bf8c
--- /dev/null
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -0,0 +1,92 @@
+import { ALink, colors, Link, utils as sharedUtils } from '@0x/react-shared';
+import { ObjectMap } from '@0x/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Button } from 'ts/components/ui/button';
+import { Text } from 'ts/components/ui/text';
+
+export interface NestedSidebarMenuProps {
+    sectionNameToLinks: ObjectMap<ALink[]>;
+    sidebarHeader?: React.ReactNode;
+    shouldReformatMenuItemNames?: boolean;
+}
+
+export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
+    const navigation = _.map(props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
+        const finalSectionName = sharedUtils.convertCamelCaseToSpaces(sectionName);
+        const menuItems = _.map(links, (link, i) => {
+            const menuItemTitle = props.shouldReformatMenuItemNames
+                ? _.capitalize(sharedUtils.convertDashesToSpaces(link.title))
+                : link.title;
+            const finalLink = {
+                ...link,
+                title: menuItemTitle,
+            };
+            return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />;
+        });
+        // tslint:disable-next-line:no-unused-variable
+        return (
+            <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
+                <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
+                    {finalSectionName.toUpperCase()}
+                </div>
+                {menuItems}
+            </div>
+        );
+    });
+    return (
+        <div>
+            {props.sidebarHeader}
+            <div>{navigation}</div>
+        </div>
+    );
+};
+
+export interface MenuItemProps {
+    link: ALink;
+}
+
+export interface MenuItemState {
+    isActive: boolean;
+}
+
+export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
+    constructor(props: MenuItemProps) {
+        super(props);
+        const isActive = window.location.hash.slice(1) === props.link.to;
+        this.state = {
+            isActive,
+        };
+    }
+    public render(): React.ReactNode {
+        const isActive = this.state.isActive;
+        return (
+            <Link
+                to={this.props.link.to}
+                shouldOpenInNewTab={this.props.link.shouldOpenInNewTab}
+                onActivityChanged={this._onActivityChanged.bind(this)}
+            >
+                <Button
+                    borderRadius="4px"
+                    padding="0.4em 6px"
+                    width="100%"
+                    backgroundColor={isActive ? colors.lightLinkBlue : 'rgb(245, 245, 245)'}
+                    fontSize="14px"
+                    textAlign="left"
+                >
+                    <Text
+                        fontWeight={isActive ? 'bold' : 'normal'}
+                        fontColor={isActive ? colors.white : colors.grey800}
+                    >
+                        {this.props.link.title}
+                    </Text>
+                </Button>
+            </Link>
+        );
+    }
+    private _onActivityChanged(isActive: boolean): void {
+        this.setState({
+            isActive,
+        });
+    }
+}
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 7157abfc9..28bf2dba1 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -6,13 +6,13 @@ import {
     SupportedDocJson,
     TypeDocUtils,
 } from '@0x/react-docs';
-import { NestedSidebarMenu } from '@0x/react-shared';
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 import semverSort = require('semver-sort');
 import { SidebarHeader } from 'ts/components/documentation/sidebar_header';
+import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu';
 import { Container } from 'ts/components/ui/container';
 import { DevelopersPage } from 'ts/pages/documentation/developers_page';
 import { Dispatcher } from 'ts/redux/dispatcher';
diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx
index cf229cb3b..298b7ecf3 100644
--- a/packages/website/ts/pages/documentation/docs_home.tsx
+++ b/packages/website/ts/pages/documentation/docs_home.tsx
@@ -1,8 +1,9 @@
-import { ALink, colors, Link, NestedSidebarMenu } from '@0x/react-shared';
+import { ALink, colors, Link } from '@0x/react-shared';
 import { ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { OverviewContent } from 'ts/components/documentation/overview_content';
+import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu';
 import { Button } from 'ts/components/ui/button';
 import { DevelopersPage } from 'ts/pages/documentation/developers_page';
 import { Dispatcher } from 'ts/redux/dispatcher';
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index a35404e33..76df4f06f 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -5,7 +5,6 @@ import {
     HeaderSizes,
     Link,
     MarkdownSection,
-    NestedSidebarMenu,
     utils as sharedUtils,
 } from '@0x/react-shared';
 import { ObjectMap } from '@0x/types';
@@ -13,6 +12,7 @@ import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 import { SidebarHeader } from 'ts/components/documentation/sidebar_header';
+import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu';
 import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { DevelopersPage } from 'ts/pages/documentation/developers_page';