aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--packages/react-shared/src/components/link.tsx16
-rw-r--r--packages/react-shared/src/components/nested_sidebar_menu.tsx119
-rw-r--r--packages/react-shared/src/index.ts1
-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
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';
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-07 20:37:55 +0800