aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-03 23:37:59 +0800
committerFabio Berger <me@fabioberger.com>2018-10-03 23:37:59 +0800
commit437612f8b8c28fb384698c5c2b331e173cee8767 (patch)
tree5f182d44c0fa3bc2e29667d9b12e58b1cd2542d1
parentab855cdd1cfa2e4fcc45499508dca9c9e8733b61 (diff)
downloaddexon-0x-contracts-437612f8b8c28fb384698c5c2b331e173cee8767.tar
dexon-0x-contracts-437612f8b8c28fb384698c5c2b331e173cee8767.tar.gz
dexon-0x-contracts-437612f8b8c28fb384698c5c2b331e173cee8767.tar.bz2
dexon-0x-contracts-437612f8b8c28fb384698c5c2b331e173cee8767.tar.lz
dexon-0x-contracts-437612f8b8c28fb384698c5c2b331e173cee8767.tar.xz
dexon-0x-contracts-437612f8b8c28fb384698c5c2b331e173cee8767.tar.zst
dexon-0x-contracts-437612f8b8c28fb384698c5c2b331e173cee8767.zip
Use same Link UI component for react-scroll links
-rw-r--r--packages/react-docs/src/components/documentation.tsx9
-rw-r--r--packages/react-docs/src/docs_info.ts54
-rw-r--r--packages/react-shared/package.json5
-rw-r--r--packages/react-shared/src/components/link.tsx (renamed from packages/website/ts/components/ui/link.tsx)20
-rw-r--r--packages/react-shared/src/components/nested_sidebar_menu.tsx66
-rw-r--r--packages/react-shared/src/index.ts11
-rw-r--r--packages/react-shared/src/types.ts13
-rw-r--r--packages/website/package.json2
-rw-r--r--packages/website/ts/components/documentation/docs_content_top_bar.tsx11
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx2
-rw-r--r--packages/website/ts/components/documentation/tutorial_button.tsx3
-rw-r--r--packages/website/ts/components/dropdowns/developers_drop_down.tsx5
-rw-r--r--packages/website/ts/components/fill_order.tsx3
-rw-r--r--packages/website/ts/components/footer.tsx5
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx3
-rw-r--r--packages/website/ts/components/portal/back_button.tsx4
-rw-r--r--packages/website/ts/components/portal/portal.tsx3
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx24
-rw-r--r--packages/website/ts/components/top_bar/top_bar_menu_item.tsx4
-rw-r--r--packages/website/ts/components/ui/custom_menu_item.tsx2
-rw-r--r--packages/website/ts/components/ui/simple_menu.tsx2
-rw-r--r--packages/website/ts/pages/about/about.tsx3
-rw-r--r--packages/website/ts/pages/documentation/doc_page.tsx8
-rw-r--r--packages/website/ts/pages/documentation/home.tsx13
-rw-r--r--packages/website/ts/pages/landing/landing.tsx3
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx29
-rw-r--r--packages/website/ts/types.ts14
-rw-r--r--yarn.lock27
28 files changed, 212 insertions, 136 deletions
diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx
index 3cd14923c..1ed829b01 100644
--- a/packages/react-docs/src/components/documentation.tsx
+++ b/packages/react-docs/src/components/documentation.tsx
@@ -98,7 +98,10 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
marginLeft: 20,
},
};
- const menuSubsectionsBySection = this.props.docsInfo.getMenuSubsectionsBySection(this.props.docAgnosticFormat);
+ const sectionNameToLinks = this.props.docsInfo.getSectionNameToLinks();
+ console.log('sectionNameToLinks', sectionNameToLinks);
+ const subsectionNameToLinks = this.props.docsInfo.getSubsectionNameToLinks(this.props.docAgnosticFormat);
+ console.log('subsectionNameToLinks', subsectionNameToLinks);
return (
<div>
{_.isUndefined(this.props.docAgnosticFormat) ? (
@@ -128,8 +131,8 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
selectedVersion={this.props.selectedVersion}
versions={this.props.availableVersions}
sidebarHeader={this.props.sidebarHeader}
- topLevelMenu={this.props.docsInfo.menu}
- menuSubsectionsBySection={menuSubsectionsBySection}
+ sectionNameToLinks={sectionNameToLinks}
+ subsectionNameToLinks={subsectionNameToLinks}
onVersionSelected={this.props.onVersionSelected}
/>
</div>
diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts
index 6355a2f88..1c11e07de 100644
--- a/packages/react-docs/src/docs_info.ts
+++ b/packages/react-docs/src/docs_info.ts
@@ -1,5 +1,5 @@
-import { MenuSubsectionsBySection } from '@0xproject/react-shared';
-import { DocAgnosticFormat, TypeDefinitionByName } from '@0xproject/types';
+import { ALink, LinkType, MenuSubsectionsBySection, utils as sharedUtils } from '@0xproject/react-shared';
+import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0xproject/types';
import * as _ from 'lodash';
import {
@@ -32,10 +32,10 @@ export class DocsInfo {
this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion;
this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId;
}
- public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection {
- const menuSubsectionsBySection = {} as MenuSubsectionsBySection;
+ public getSubsectionNameToLinks(docAgnosticFormat?: DocAgnosticFormat): ObjectMap<ALink[]> {
+ const subsectionNameToLinks: ObjectMap<ALink[]> = {};
if (_.isUndefined(docAgnosticFormat)) {
- return menuSubsectionsBySection;
+ return subsectionNameToLinks;
}
const docSections = _.keys(this.sections);
@@ -56,7 +56,14 @@ export class DocsInfo {
if (!_.isUndefined(this.sections.types) && sectionName === this.sections.types) {
const sortedTypesNames = _.sortBy(docSection.types, 'name');
const typeNames = _.map(sortedTypesNames, t => t.name);
- menuSubsectionsBySection[sectionName] = typeNames;
+ const typeLinks = _.map(typeNames, typeName => {
+ return {
+ to: `${sectionName}-${typeName}`,
+ title: typeName,
+ type: LinkType.ReactScroll,
+ };
+ });
+ subsectionNameToLinks[sectionName] = typeLinks;
} else if (isExportedFunctionSection) {
// Noop so that we don't have the method listed underneath itself.
} else {
@@ -71,15 +78,20 @@ export class DocsInfo {
const methodNames = _.map(methodsSortedByName, m => m.name);
const sortedFunctionNames = _.sortBy(docSection.functions, 'name');
const functionNames = _.map(sortedFunctionNames, m => m.name);
- menuSubsectionsBySection[sectionName] = [
- ...eventNames,
- ...propertyNames,
- ...functionNames,
- ...methodNames,
- ];
+ const names = [...eventNames, ...propertyNames, ...functionNames, ...methodNames];
+
+ const links = _.map(names, name => {
+ return {
+ to: `${sectionName}-${name}`,
+ title: name,
+ type: LinkType.ReactScroll,
+ };
+ });
+
+ subsectionNameToLinks[sectionName] = links;
}
});
- return menuSubsectionsBySection;
+ return subsectionNameToLinks;
}
public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } {
if (_.isUndefined(this.sections.types)) {
@@ -90,4 +102,20 @@ export class DocsInfo {
const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name') as any;
return typeDefinitionByName;
}
+ public getSectionNameToLinks(): ObjectMap<ALink[]> {
+ const sectionNameToLinks: ObjectMap<ALink[]> = {};
+ _.each(this.menu, (linkTitles, sectionName) => {
+ sectionNameToLinks[sectionName] = [];
+ _.each(linkTitles, linkTitle => {
+ const to = sharedUtils.getIdFromName(linkTitle);
+ const links = sectionNameToLinks[sectionName];
+ links.push({
+ title: linkTitle,
+ to,
+ type: LinkType.ReactScroll,
+ });
+ });
+ });
+ return sectionNameToLinks;
+ }
}
diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json
index 67c644bf3..eaaa57ea2 100644
--- a/packages/react-shared/package.json
+++ b/packages/react-shared/package.json
@@ -33,6 +33,7 @@
"typescript": "3.0.1"
},
"dependencies": {
+ "@0xproject/types": "^1.1.2",
"@material-ui/core": "^3.0.1",
"@types/is-mobile": "0.3.0",
"@types/lodash": "4.14.104",
@@ -40,6 +41,7 @@
"@types/node": "*",
"@types/react": "*",
"@types/react-dom": "*",
+ "@types/react-router-dom": "^4.0.4",
"@types/react-scroll": "1.5.3",
"basscss": "^8.0.3",
"change-case": "^3.0.2",
@@ -50,7 +52,8 @@
"react-dom": "^16.4.2",
"react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162",
"react-markdown": "^3.2.2",
- "react-scroll": "0xproject/react-scroll#similar-to-pr-330"
+ "react-scroll": "0xproject/react-scroll#similar-to-pr-330",
+ "react-router-dom": "^4.1.1"
},
"publishConfig": {
"access": "public"
diff --git a/packages/website/ts/components/ui/link.tsx b/packages/react-shared/src/components/link.tsx
index ad98efa6c..7425b9365 100644
--- a/packages/website/ts/components/ui/link.tsx
+++ b/packages/react-shared/src/components/link.tsx
@@ -1,7 +1,10 @@
import * as _ from 'lodash';
import * as React from 'react';
import { Link as ReactRounterLink } from 'react-router-dom';
-import { LinkType } from 'ts/types';
+import { Link as ScrollLink } from 'react-scroll';
+
+import { LinkType } from '../types';
+import { constants } from '../utils/constants';
export interface LinkProps {
to: string;
@@ -12,6 +15,7 @@ export interface LinkProps {
onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
+ containerId?: string;
}
/**
@@ -29,6 +33,7 @@ export const Link: React.StatelessComponent<LinkProps> = ({
onMouseOver,
onMouseLeave,
onMouseEnter,
+ containerId,
}) => {
const styleWithDefault = {
textDecoration: 'none',
@@ -65,7 +70,17 @@ export const Link: React.StatelessComponent<LinkProps> = ({
</ReactRounterLink>
);
case LinkType.ReactScroll:
- return <div>TODO</div>;
+ return (
+ <ScrollLink
+ to={to}
+ offset={0}
+ hashSpy={true}
+ duration={constants.DOCS_SCROLL_DURATION_MS}
+ containerId={containerId}
+ >
+ {children}
+ </ScrollLink>
+ );
default:
throw new Error(`Unrecognized LinkType: ${type}`);
}
@@ -79,6 +94,7 @@ Link.defaultProps = {
onMouseOver: _.noop.bind(_),
onMouseLeave: _.noop.bind(_),
onMouseEnter: _.noop.bind(_),
+ containerId: constants.DOCS_CONTAINER_ID,
};
Link.displayName = 'Link';
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>
);
})}
diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts
index 3b50c0117..793214a87 100644
--- a/packages/react-shared/src/index.ts
+++ b/packages/react-shared/src/index.ts
@@ -4,8 +4,17 @@ 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';
-export { HeaderSizes, Styles, MenuSubsectionsBySection, EtherscanLinkSuffixes, Networks } from './types';
+export {
+ HeaderSizes,
+ Styles,
+ MenuSubsectionsBySection,
+ EtherscanLinkSuffixes,
+ Networks,
+ LinkType,
+ ALink,
+} from './types';
export { utils } from './utils/utils';
export { constants } from './utils/constants';
diff --git a/packages/react-shared/src/types.ts b/packages/react-shared/src/types.ts
index 88fadcc09..b3dd4045b 100644
--- a/packages/react-shared/src/types.ts
+++ b/packages/react-shared/src/types.ts
@@ -23,3 +23,16 @@ export enum Networks {
Ropsten = 'Ropsten',
Rinkeby = 'Rinkeby',
}
+
+export enum LinkType {
+ External = 'EXTERNAL',
+ ReactScroll = 'REACT_SCROLL',
+ ReactRoute = 'REACT_ROUTE',
+}
+
+export interface ALink {
+ title: string;
+ to: string;
+ shouldOpenInNewTab?: boolean;
+ type?: LinkType;
+}
diff --git a/packages/website/package.json b/packages/website/package.json
index ab8835248..37e75e84e 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -52,7 +52,6 @@
"react-helmet": "^5.2.0",
"react-popper": "^1.0.0-beta.6",
"react-redux": "^5.0.3",
- "react-router-dom": "^4.1.1",
"react-scroll": "0xproject/react-scroll#similar-to-pr-330",
"react-tooltip": "^3.2.7",
"react-typist": "^2.0.4",
@@ -81,7 +80,6 @@
"@types/react-dom": "^16.0.7",
"@types/react-helmet": "^5.0.6",
"@types/react-redux": "^4.4.37",
- "@types/react-router-dom": "^4.0.4",
"@types/react-scroll": "1.5.3",
"@types/react-tap-event-plugin": "0.0.30",
"@types/redux": "^3.6.0",
diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
index 7edb51587..d3735f2be 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -1,12 +1,11 @@
-import { colors, NestedSidebarMenu } from '@0xproject/react-shared';
+import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared';
import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
import * as React from 'react';
import { DocsLogo } from 'ts/components/documentation/docs_logo';
import { Container } from 'ts/components/ui/container';
-import { Link } from 'ts/components/ui/link';
-import { ALink, Deco, Key, WebsitePaths } from 'ts/types';
+import { Deco, Key, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -147,12 +146,12 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
>
<div className="clearfix pl1">
TODO
- {/* <NestedSidebarMenu
- topLevelMenu={this.props.menu}
+ <NestedSidebarMenu
+ sectionNameToLinks={this.props.sectionNameToLinks}
shouldDisplaySectionHeaders={true}
shouldReformatMenuItemNames={false}
onMenuItemClick={this._onMenuButtonClick.bind(this)}
- /> */}
+ />
</div>
</Drawer>
);
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index c16499158..6f3c3c6e8 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -1,5 +1,5 @@
+import { Link } from '@0xproject/react-shared';
import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
import { WebsitePaths } from 'ts/types';
export interface DocsLogoProps {
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
index 42aa37bc7..a0d99e175 100644
--- a/packages/website/ts/components/documentation/tutorial_button.tsx
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -1,7 +1,6 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
import { Text } from 'ts/components/ui/text';
import { Deco, Key, TutorialInfo } from 'ts/types';
import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index af0ae825c..4167b3d23 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -1,11 +1,10 @@
-import { colors } from '@0xproject/react-shared';
+import { ALink, colors, Link, LinkType } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { DropDown } from 'ts/components/ui/drop_down';
-import { Link } from 'ts/components/ui/link';
import { Text } from 'ts/components/ui/text';
-import { ALink, Deco, Key, LinkType, WebsitePaths } from 'ts/types';
+import { Deco, Key, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index ec1d698f3..99939ce43 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,5 +1,5 @@
import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils';
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
import { BigNumber, logUtils } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as accounting from 'accounting';
@@ -16,7 +16,6 @@ import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
import { Alert } from 'ts/components/ui/alert';
import { EthereumAddress } from 'ts/components/ui/ethereum_address';
import { Identicon } from 'ts/components/ui/identicon';
-import { Link } from 'ts/components/ui/link';
import { VisualOrder } from 'ts/components/visual_order';
import { Dispatcher } from 'ts/redux/dispatcher';
import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index bec3c17f7..02770c073 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,13 +1,12 @@
-import { colors } from '@0xproject/react-shared';
+import { ALink, colors, Link, LinkType } from '@0xproject/react-shared';
import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { ALink, Deco, Key, Language, LinkType, WebsitePaths } from 'ts/types';
+import { Deco, Key, Language, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index adf96f9ee..562f670e2 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,11 +1,10 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as _ from 'lodash';
import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
-import { Link } from 'ts/components/ui/link';
import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
interface TokenAmountInputProps {
diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx
index bdbcef343..64a332e07 100644
--- a/packages/website/ts/components/portal/back_button.tsx
+++ b/packages/website/ts/components/portal/back_button.tsx
@@ -1,7 +1,5 @@
-import { Styles } from '@0xproject/react-shared';
+import { Link, Styles } from '@0xproject/react-shared';
import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
-
import { Island } from 'ts/components/ui/island';
import { colors } from 'ts/style/colors';
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index a9ccf9e11..b8cd45661 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,10 +1,9 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
-import { Link } from 'ts/components/ui/link';
import { Blockchain } from 'ts/blockchain';
import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 3da2307e0..e25c0a0f7 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -1,11 +1,14 @@
-import { DocsInfo, DocsMenu } from '@0xproject/react-docs';
+import { DocsInfo } from '@0xproject/react-docs';
import {
+ ALink,
colors,
constants as sharedConstants,
- MenuSubsectionsBySection,
+ Link,
+ LinkType,
NestedSidebarMenu,
Styles,
} from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
@@ -16,9 +19,8 @@ import { DrawerMenu } from 'ts/components/portal/drawer_menu';
import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
import { Container } from 'ts/components/ui/container';
-import { Link } from 'ts/components/ui/link';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, LinkType, ProviderType, WebsitePaths } from 'ts/types';
+import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -40,8 +42,8 @@ export interface TopBarProps {
translate: Translate;
docsVersion?: string;
availableDocVersions?: string[];
- menu?: DocsMenu;
- menuSubsectionsBySection?: MenuSubsectionsBySection;
+ sectionNameToLinks?: ObjectMap<ALink[]>;
+ subsectionNameToLinks?: ObjectMap<ALink[]>;
displayType?: TopBarDisplayType;
docsInfo?: DocsInfo;
style?: React.CSSProperties;
@@ -311,14 +313,14 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
// because the sidebar renders `react-scroll` links which depend on the scroll container already
// being rendered.
const documentationContainer = document.getElementById(sharedConstants.SCROLL_CONTAINER_ID);
- if (!isViewingDocsPage || _.isUndefined(this.props.menu) || _.isNull(documentationContainer)) {
+ if (!isViewingDocsPage || _.isUndefined(this.props.sectionNameToLinks) || _.isNull(documentationContainer)) {
return undefined;
}
return (
<div className="lg-hide md-hide">
<NestedSidebarMenu
- topLevelMenu={this.props.menu}
- menuSubsectionsBySection={this.props.menuSubsectionsBySection}
+ sectionNameToLinks={this.props.sectionNameToLinks}
+ subsectionNameToLinks={this.props.subsectionNameToLinks}
sidebarHeader={this.props.sidebarHeader}
shouldDisplaySectionHeaders={false}
onMenuItemClick={this._onMenuButtonClick.bind(this)}
@@ -337,8 +339,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
return (
<div className="lg-hide md-hide">
<NestedSidebarMenu
- topLevelMenu={this.props.menuSubsectionsBySection}
- menuSubsectionsBySection={this.props.menuSubsectionsBySection}
+ sectionNameToLinks={this.props.sectionNameToLinks}
+ subsectionNameToLinks={this.props.subsectionNameToLinks}
sidebarHeader={this.props.sidebarHeader}
shouldDisplaySectionHeaders={false}
onMenuItemClick={this._onMenuButtonClick.bind(this)}
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index 89fd9e8a8..d5ee96850 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -1,8 +1,6 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link, LinkType } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
-import { LinkType } from 'ts/types';
import { CallToAction } from 'ts/components/ui/button';
diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
index c51095709..11f61b336 100644
--- a/packages/website/ts/components/ui/custom_menu_item.tsx
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -1,6 +1,6 @@
+import { Link } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
interface CustomMenuItemProps {
to: string;
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 767da3675..bdaf0701e 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -1,7 +1,7 @@
+import { Link } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { Link } from 'ts/components/ui/link';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index ba1b423b9..efdf631b2 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,10 +1,9 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { colors, Link, Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
import { Footer } from 'ts/components/footer';
import { TopBar } from 'ts/components/top_bar/top_bar';
-import { Link } from 'ts/components/ui/link';
import { Profile } from 'ts/pages/about/profile';
import { Dispatcher } from 'ts/redux/dispatcher';
import { ProfileInfo, WebsitePaths } from 'ts/types';
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 6f029b6a2..9092a5cde 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -79,9 +79,9 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
this._isUnmounted = true;
}
public render(): React.ReactNode {
- const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat)
+ const subsectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat)
? {}
- : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat);
+ : this.props.docsInfo.getSubsectionNameToLinks(this.state.docAgnosticFormat);
const sourceUrl = this._getSourceUrl();
const iconFileName = idToIcon[this.props.docsInfo.id] || DEFAULT_ICON;
const iconUrl = `/images/doc_icons/${iconFileName}`;
@@ -93,8 +93,8 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
location={this.props.location}
docsVersion={this.props.docsVersion}
availableDocVersions={this.props.availableDocVersions}
- menu={this.props.docsInfo.menu}
- menuSubsectionsBySection={menuSubsectionsBySection}
+ sectionNameToLinks={this.props.docsInfo.getSectionNameToLinks()}
+ subsectionNameToLinks={subsectionNameToLinks}
docsInfo={this.props.docsInfo}
translate={this.props.translate}
onVersionSelected={this._onVersionSelected.bind(this)}
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx
index 52a486c2d..72e507a7b 100644
--- a/packages/website/ts/pages/documentation/home.tsx
+++ b/packages/website/ts/pages/documentation/home.tsx
@@ -1,4 +1,12 @@
-import { colors, constants as sharedConstants, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared';
+import {
+ ALink,
+ colors,
+ constants as sharedConstants,
+ Link,
+ LinkType,
+ MarkdownLinkBlock,
+ utils as sharedUtils,
+} from '@0xproject/react-shared';
import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import MenuItem from 'material-ui/MenuItem';
@@ -10,10 +18,9 @@ import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_
import { DocsLogo } from 'ts/components/documentation/docs_logo';
import { TutorialButton } from 'ts/components/documentation/tutorial_button';
import { Container } from 'ts/components/ui/container';
-import { Link } from 'ts/components/ui/link';
import { Text } from 'ts/components/ui/text';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { ALink, Deco, Key, LinkType, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types';
+import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index b4462407f..c819cd8a1 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
@@ -8,7 +8,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
import { CallToAction } from 'ts/components/ui/button';
import { Container } from 'ts/components/ui/container';
import { Image } from 'ts/components/ui/image';
-import { Link } from 'ts/components/ui/link';
import { Text } from 'ts/components/ui/text';
import { TypedText } from 'ts/components/ui/typed_text';
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 55f532b11..3d8b8ef52 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,12 +1,15 @@
import {
+ ALink,
colors,
constants as sharedConstants,
HeaderSizes,
+ LinkType,
MarkdownSection,
NestedSidebarMenu,
Styles,
utils as sharedUtils,
} from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
import RaisedButton from 'material-ui/RaisedButton';
@@ -78,9 +81,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
window.removeEventListener('hashchange', this._onHashChanged.bind(this), false);
}
public render(): React.ReactNode {
- const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection)
+ const sectionNameToLinks = _.isUndefined(this.state.articlesBySection)
? {}
- : this._getMenuSubsectionsBySection(this.state.articlesBySection);
+ : this._getSectionNameToLinks(this.state.articlesBySection);
+ console.log('sectionNameToLinks', sectionNameToLinks);
const mainContainersStyle: React.CSSProperties = {
...styles.mainContainers,
overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
@@ -92,7 +96,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
<TopBar
blockchainIsLoaded={false}
location={this.props.location}
- menuSubsectionsBySection={menuSubsectionsBySection}
+ sectionNameToLinks={sectionNameToLinks}
translate={this.props.translate}
sidebarHeader={sidebarHeader}
/>
@@ -131,8 +135,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
onMouseLeave={this._onSidebarHoverOff.bind(this)}
>
<NestedSidebarMenu
- topLevelMenu={menuSubsectionsBySection}
- menuSubsectionsBySection={menuSubsectionsBySection}
+ sectionNameToLinks={sectionNameToLinks}
sidebarHeader={sidebarHeader}
/>
</div>
@@ -223,15 +226,21 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
}
}
}
- private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection): { [section: string]: string[] } {
+ private _getSectionNameToLinks(articlesBySection: ArticlesBySection): ObjectMap<ALink[]> {
const sectionNames = _.keys(articlesBySection);
- const menuSubsectionsBySection: { [section: string]: string[] } = {};
+ const sectionNameToLinks: ObjectMap<ALink[]> = {};
for (const sectionName of sectionNames) {
const articles = articlesBySection[sectionName];
- const articleNames = _.map(articles, article => article.title);
- menuSubsectionsBySection[sectionName] = articleNames;
+ const articleLinks = _.map(articles, article => {
+ return {
+ to: sharedUtils.getIdFromName(article.title),
+ title: article.title,
+ type: LinkType.ReactScroll,
+ };
+ });
+ sectionNameToLinks[sectionName] = articleLinks;
}
- return menuSubsectionsBySection;
+ return sectionNameToLinks;
}
private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void {
this.setState({
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 7c79b271f..a3d248a9d 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -1,3 +1,4 @@
+import { ALink } from '@0xproject/react-shared';
import { ObjectMap, SignedOrder } from '@0xproject/types';
import { BigNumber } from '@0xproject/utils';
import { Provider } from 'ethereum-types';
@@ -618,22 +619,9 @@ export interface InjectedWeb3 {
};
}
-export interface ALink {
- title: string;
- to: string;
- shouldOpenInNewTab?: boolean;
- type?: LinkType;
-}
-
export interface TutorialInfo {
iconUrl: string;
description: string;
link: ALink;
}
-
-export enum LinkType {
- External = 'EXTERNAL',
- ReactScroll = 'REACT_SCROLL',
- ReactRoute = 'REACT_ROUTE',
-}
// tslint:disable:max-file-line-count
diff --git a/yarn.lock b/yarn.lock
index 9b9a04519..f2b7313ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -676,6 +676,16 @@
ethereum-types "^1.0.5"
popper.js "1.14.3"
+"@0xproject/typescript-typings@^2.0.2":
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/@0xproject/typescript-typings/-/typescript-typings-2.0.2.tgz#1812f64e341f1d24c09b8b5a951cbde0e5fff9c2"
+ dependencies:
+ "@types/bn.js" "^4.11.0"
+ "@types/react" "*"
+ bignumber.js "~4.1.0"
+ ethereum-types "^1.0.8"
+ popper.js "1.14.3"
+
"@0xproject/utils@^0.7.3":
version "0.7.3"
resolved "https://registry.yarnpkg.com/@0xproject/utils/-/utils-0.7.3.tgz#ffa7c6da9bf0dd3e13694f185dcfc48a8981ff05"
@@ -690,6 +700,23 @@
lodash "4.17.10"
web3 "0.20.6"
+"@0xproject/utils@^1.0.4":
+ version "1.0.11"
+ resolved "https://registry.yarnpkg.com/@0xproject/utils/-/utils-1.0.11.tgz#5b53e7d9d4dbe68e219049218c9db04e97c37429"
+ dependencies:
+ "@0xproject/types" "^1.1.1"
+ "@0xproject/typescript-typings" "^2.0.2"
+ "@types/node" "*"
+ abortcontroller-polyfill "^1.1.9"
+ bignumber.js "~4.1.0"
+ detect-node "2.0.3"
+ ethereum-types "^1.0.8"
+ ethereumjs-util "^5.1.1"
+ ethers "3.0.22"
+ isomorphic-fetch "^2.2.1"
+ js-sha3 "^0.7.0"
+ lodash "^4.17.5"
+
"@0xproject/web3-wrapper@^0.7.3":
version "0.7.3"
resolved "https://registry.yarnpkg.com/@0xproject/web3-wrapper/-/web3-wrapper-0.7.3.tgz#9bd50b034b92fd505b6766b6e225f014b6d08b08"