From 0de654bbd52f7d4702cec9f1a9a5a2cbb793181b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 17:40:55 +0100 Subject: 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 --- packages/react-shared/src/components/link.tsx | 16 ++- .../src/components/nested_sidebar_menu.tsx | 119 --------------------- packages/react-shared/src/index.ts | 1 - .../website/ts/components/nested_sidebar_menu.tsx | 92 ++++++++++++++++ .../website/ts/pages/documentation/doc_page.tsx | 2 +- .../website/ts/pages/documentation/docs_home.tsx | 3 +- packages/website/ts/pages/wiki/wiki.tsx | 2 +- 7 files changed, 111 insertions(+), 124 deletions(-) delete mode 100644 packages/react-shared/src/components/nested_sidebar_menu.tsx create mode 100644 packages/website/ts/components/nested_sidebar_menu.tsx 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 { {this.props.children} @@ -119,6 +128,11 @@ export class Link extends React.Component { 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; - 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 { - public static defaultProps: Partial = { - 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 ( -
-
- {finalSectionName.toUpperCase()} -
- {this._renderMenuItems(links)} -
- ); - }); - return ( -
- {this.props.sidebarHeader} -
{navigation}
-
- ); - } - 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 ( -
- - - - {finalMenuItemName} - - - -
- ); - }); - 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; + 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 ; + }); + // tslint:disable-next-line:no-unused-variable + return ( +
+
+ {finalSectionName.toUpperCase()} +
+ {menuItems} +
+ ); + }); + return ( +
+ {props.sidebarHeader} +
{navigation}
+
+ ); +}; + +export interface MenuItemProps { + link: ALink; +} + +export interface MenuItemState { + isActive: boolean; +} + +export class MenuItem extends React.Component { + 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 ( + + + + ); + } + 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'; -- cgit v1.2.3