aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
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 /packages/website/ts/components
parentab855cdd1cfa2e4fcc45499508dca9c9e8733b61 (diff)
downloaddexon-sol-tools-437612f8b8c28fb384698c5c2b331e173cee8767.tar
dexon-sol-tools-437612f8b8c28fb384698c5c2b331e173cee8767.tar.gz
dexon-sol-tools-437612f8b8c28fb384698c5c2b331e173cee8767.tar.bz2
dexon-sol-tools-437612f8b8c28fb384698c5c2b331e173cee8767.tar.lz
dexon-sol-tools-437612f8b8c28fb384698c5c2b331e173cee8767.tar.xz
dexon-sol-tools-437612f8b8c28fb384698c5c2b331e173cee8767.tar.zst
dexon-sol-tools-437612f8b8c28fb384698c5c2b331e173cee8767.zip
Use same Link UI component for react-scroll links
Diffstat (limited to 'packages/website/ts/components')
-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/link.tsx84
-rw-r--r--packages/website/ts/components/ui/simple_menu.tsx2
14 files changed, 31 insertions, 124 deletions
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/link.tsx b/packages/website/ts/components/ui/link.tsx
deleted file mode 100644
index ad98efa6c..000000000
--- a/packages/website/ts/components/ui/link.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Link as ReactRounterLink } from 'react-router-dom';
-import { LinkType } from 'ts/types';
-
-export interface LinkProps {
- to: string;
- type?: LinkType;
- shouldOpenInNewTab?: boolean;
- style?: React.CSSProperties;
- className?: string;
- onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
- onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
- onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
-}
-
-/**
- * A generic link component which let's the developer render internal & external links, and their associated
- * behaviors with a single link component. Many times we want a menu including both internal & external links
- * and this abstracts away the differences of rendering both types of links.
- */
-export const Link: React.StatelessComponent<LinkProps> = ({
- style,
- className,
- type,
- to,
- shouldOpenInNewTab,
- children,
- onMouseOver,
- onMouseLeave,
- onMouseEnter,
-}) => {
- const styleWithDefault = {
- textDecoration: 'none',
- ...style,
- };
-
- switch (type) {
- case LinkType.External:
- return (
- <a
- target={shouldOpenInNewTab ? '_blank' : ''}
- className={className}
- style={styleWithDefault}
- href={to}
- onMouseOver={onMouseOver}
- onMouseEnter={onMouseEnter}
- onMouseLeave={onMouseLeave}
- >
- {children}
- </a>
- );
- case LinkType.ReactRoute:
- return (
- <ReactRounterLink
- to={to}
- className={className}
- style={styleWithDefault}
- target={shouldOpenInNewTab ? '_blank' : ''}
- onMouseOver={onMouseOver}
- onMouseEnter={onMouseEnter}
- onMouseLeave={onMouseLeave}
- >
- {children}
- </ReactRounterLink>
- );
- case LinkType.ReactScroll:
- return <div>TODO</div>;
- default:
- throw new Error(`Unrecognized LinkType: ${type}`);
- }
-};
-
-Link.defaultProps = {
- type: LinkType.ReactRoute,
- shouldOpenInNewTab: false,
- style: {},
- className: '',
- onMouseOver: _.noop.bind(_),
- onMouseLeave: _.noop.bind(_),
- onMouseEnter: _.noop.bind(_),
-};
-
-Link.displayName = 'Link';
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';