aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-20 00:40:55 +0800
committerFabio Berger <me@fabioberger.com>2018-10-20 00:40:55 +0800
commit0de654bbd52f7d4702cec9f1a9a5a2cbb793181b (patch)
treeba341b86b4000cf94669a65d0fa2499c05897db9 /packages/website
parentd129c922edd8bc0319273488b23a5257d736502d (diff)
downloaddexon-sol-tools-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar
dexon-sol-tools-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.gz
dexon-sol-tools-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.bz2
dexon-sol-tools-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.lz
dexon-sol-tools-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.xz
dexon-sol-tools-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.zst
dexon-sol-tools-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.zip
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
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/nested_sidebar_menu.tsx92
-rw-r--r--packages/website/ts/pages/documentation/doc_page.tsx2
-rw-r--r--packages/website/ts/pages/documentation/docs_home.tsx3
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx2
4 files changed, 96 insertions, 3 deletions
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';